此处地图 javascript API：如何从样式编辑器 (.json) 应用样式

Question

TLDR： 如何使用 HERE 地图编辑器的 .json 输出更改地图样式？

因此，我在新的 HERE 地图样式编辑器中创建了一个“自定义”样式（使用其中一个预设）并将其导出，接收单个

.json

文件。

由于介绍文档几乎没有提供任何有关如何应用这种简单样式的信息，我尝试了几件事。:

#1 初始化地图

const defaultLayers = this.platform.createDefaultLayers();
const map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
      zoom: 10,
      center: { lat: 0, lng: 0 }
    });
new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
H.ui.UI.createDefault(map, defaultLayers, "de-DE");

#2.1 尝试使用默认渲染引擎应用样式

加载时更改样式

const provider = map.getBaseLayer()?.getProvider();
const style = new H.map.Style(require('pathToMyStyle.json'))
provider?.setStyleInternal(style);

这里

provider.setStyle();

方法不存在，与文档中相反。 但我理解这一点，因为它 1. 需要一个 URL + 2. 一个 .yaml 文件，我们无法从 HERE 编辑器获得该文件。所以...

#2.2 尝试使用 HARP 渲染引擎应用样式

在加载时更改 HARP 风格

const engineType = H.Map.EngineType["HARP"];
const style = new H.map.render.harp.Style(require('pathToMyStyle.json'));
const vectorLayer = this.platform
      .getOMVService()
      .createLayer(style, { engineType });

const map = new H.Map(document.getElementById('map'), vectorLayer, {
  engineType,
  zoom: 10,
  center: { lat: 0, lng: 0 }
});
//... continuous as in #1

即使按照示例完成，也会导致

InvalidArgumentError: H.service.omv.Provider (Argument #1 [object Object])

。

Answer 1

#2.2 是可行的方法，当我尝试它时它正在工作。该示例对您来说开箱即用吗？也许是路径问题？

Answer 2

#1 对于默认的 WebGL 引擎，我们只有 这个样式编辑器

示例 或

https://alexisad.github.io/jsapi31/road-labels.html?apikey=your_apikey

#2 竖琴 HARP 风格编辑器

示例 - 请不要忘记添加

<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-harp.js"></script>

到 head html 元素！

/**
 * Adds a polyline between Dublin, London, Paris and Berlin to the map
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function addPolylineToMap(map) {
  var lineString = new H.geo.LineString();

  lineString.pushPoint({lat: 58.906905, lng: 6.054719});
  lineString.pushPoint({lat:51.026163, lng:1.590833});
  lineString.pushPoint({lat:49.376177, lng:-5.16166});
  lineString.pushPoint({lat:25.767796, lng:-160.836078});
  lineString.pushPoint({lat:7.068211, lng:157.826714});
  

  map.addObject(new H.map.Polyline(
    lineString, { style: { lineWidth: 4 }}
  ));
}

/**
 * Boilerplate map initialization code starts below:
 */

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
});

var defaultLayers = platform.createDefaultLayers();
var engineType = H.Map.EngineType['HARP'];

// Create the style object from the style configuration
// exported from the HERE Style Editor. The argument is a style path
var style = new H.map.render.harp.Style('https://alexisad.github.io/vector-styles/harp/normal-day.json');

// Step 4: create a layer with the style object:
var vectorLayer = platform.getOMVService().createLayer(style, { engineType });

//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
  vectorLayer,{
  engineType: engineType,
  center: {lat:52, lng:5},
  zoom: 5,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);


 ui.removeControl("mapsettings");
// create custom one
var ms = new H.ui.MapSettingsControl( {
    baseLayers : [ { 
      label:"normal",layer:defaultLayers.raster.normal.map
    },/*{ 
      label:"dark",layer:darkBaseLayer
    },*/{
      label:"satellite",layer:defaultLayers.raster.satellite.map
    }, {
      label:"terrain",layer:defaultLayers.raster.terrain.map
    }
    ],
  layers : [{
        label: "layer.traffic", layer: defaultLayers.vector.normal.traffic
    },
    {
        label: "layer.incidents", layer: defaultLayers.vector.normal.trafficincidents
    }
]
  });
ui.addControl("customized",ms);

// Now use the map as required...
addPolylineToMap(map);

Answer 3

这就是在解决这个问题时对我有用的方法。然而，我正在使用 React + Typescript 来完成此操作。

带有 harp 引擎的捆绑包包含默认捆绑包中包含的所有内容。

我正在从本地文件加载样式，但它也可以从 url 加载。

1. 直接从包中导入捆绑的 Harp 引擎。 （见顶部的 Map.js）
2. 为 harp 包创建自定义类型定义。
3. 在index.html中添加harp依赖

---

Map.js

import H from "@here/maps-api-for-javascript/bin/mapsjs.bundle.harp" // Important
import jsonStyle from "./assets/map_style.json"

const engineType = H.Map.EngineType.HARP
const style = new H.map.render.harp.Style(jsonStyle)
const vectorLayer = platform.getOMVService().createLayer(style, { engineType })
const layers: any = platform.createDefaultLayers({
  engineType: engineType
})

const hereMap: H.Map = new H.Map(
  mapRef.current,
  vectorLayer,
  {
    zoom: zoom,
    center: { 0, 0 },
    engineType: engineType
  }
)

---

自定义.d.ts

declare module "@here/maps-api-for-javascript/bin/mapsjs.bundle.harp" {
  export = H
}

---

index.html

...
<script src="https://js.api.here.com/v3/3.1/mapsjs-harp.js" type="text/javascript"></script>
...