如何为HERE Map UI Labels 3.0创建自定义标签? [英] How to create custom labels for HERE Map UI Labels 3.0?

问题描述

我们需要为Here Map UI图层添加自定义标签.当前，我们正在使用createDefaultLayers制作地图图层并将其发送到UI创建中.

  var maptypes = platform.createDefaultLayers({tileSize:devicePixelRatio>1个512:256，ppi:devicePixelRatio>1个320:72});......//其他地图设置var ui = H.ui.UI.createDefault(hereMap，maptypes); 

我们正在使用以下版本:

 < script src ="https://js.api.here.com/v3/3.0/mapsjs-core.js" type ="text/javascript" charset ="utf-8"></script>< script src ="https://js.api.here.com/v3/3.0/mapsjs-service.js" type ="text/javascript" charset ="utf-8"></script>< script src ="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type ="text/javascript" charset ="utf-8"></script>< script src ="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type ="text/javascript" charset ="utf-8"></script> 

是否有一种简单的方法可以仅替换UI映射上的标签?我尝试查看

谢谢！

解决方案

We need to add custom labels for the Here Map UI layers. Currently, we are using createDefaultLayers to make the map layers and sending them into the UI creation.

   var maptypes = platform.createDefaultLayers({
        tileSize: devicePixelRatio > 1 ? 512 : 256,
        ppi: devicePixelRatio > 1 ? 320 : 72
   });
   ...... // some other map setup

   var ui = H.ui.UI.createDefault(hereMap, maptypes);

We are using these versions:

<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>

Is there a simple way to replace just the labels on the UI map? I have tried looking at this question and following the tips in the answer there, but it looks like it won't work for us at our current version. The new layers don't show up at all and adding back the mapsettings after deleting it and creating a new one puts the map settings to the left of the scale indicator (looks a bit strange and map UI options don't work - might add screenshot shortly). Any tips on how to approach this?

Thanks!

解决方案

The problem why the answer from this question doesn't work is, that it's for recently released new version 3.1 of api where MapSettings object was redesigned. Here is the code which should work for you:

let defaultLayers = platform.createDefaultLayers({
  tileSize: devicePixelRatio > 1 ? 512 : 256,
  ppi: devicePixelRatio > 1 ? 320 : 72
});

// remove old MapSettings
ui.removeControl('mapsettings');

// get Scalebar UI and remove it
let scalebar = ui.getControl('scalebar');
ui.removeControl('scalebar');

// create custom one
let mapSettings = new H.ui.MapSettingsControl( {
    entries : [ { 
      name: "Custom Normal",
      mapType: defaultLayers.normal
    }, {
      name: "Custom Satellite",
      mapType: defaultLayers.satellite
    }, {
      name:"Custom Terrain",
      mapType:defaultLayers.terrain
    }],
  incidents: defaultLayers.incidents
  });

// add customised MapSettings
ui.addControl("custom-mapsettings", mapSettings);

// add Scalebar back so it will be placed next to MapSettings
ui.addControl('scalebar', scalebar);

这篇关于如何为HERE Map UI Labels 3.0创建自定义标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！