这里地图:在MapSettingsControl中动态添加图层 [英] HERE Maps: Adding Layer Dynamically in MapSettingsControl
问题描述
在MapSettingsControl中动态添加图层，以便在其中切换可见性. 当我尝试在mapSettingControl中添加图层时，它被禁用.
背景:
我有一个使用传单开发的Web应用程序.我有5层，如图1所示.在传单上工作正常.现在，我正在使用HERE Maps javascript API开发相同的Web应用程序.
我在传单中的工作方式
我在添加图层控件时将它们添加为地图叠加层.
let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
当我需要在图层控件中动态添加叠加层时，请使用以下内容:
layerControl.addOverlay(somelayer, "layer name");
这很好.
我如何使用Here Maps js api:
由于我有五层，所以两层是群集层，而两层是标记层和一层geojson. 我尝试通过为五个图层创建GROUP并将其添加到地图设置控件的图层中来应用相同的方法.
public clusterGroup1 = new H.map.Group();
public clusterGroup2 = new H.map.Group();
public markerGroup1 = new H.map.Group();
public markerGroup2 = new H.map.Group();
public boundary = new H.map.Group();
创建了自定义地图设置ui:
this.customizedMapSetting = new H.ui.MapSettingsControl({
baseLayers: [{
label: "Normal", layer: defaultLayers.vector.normal.map
}],
layers: [{
label: "Cluster-1",
layer: this.clusterGroup1
},
{
label: "Cluster-2",
layer: this.clusterGroup2
},
{
label: "Marker-1",
layer: this.markerGroup1
},
{
label: "Marker-2",
layer: this.markerGroup2
},
{
label: "Geojson",
layer: this.boundary
}]
});
this.customizedMapSetting.setAlignment('top-right');
ui.addControl("customized", this.customizedMapSetting);
我正在将标记添加到这样的组:
dataArray.forEach(data=> {
let lat = data.latlng[0];
let lng = data.latlng[1];
var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon});
this.markerGroup1.addObject(marker);
});
问题说明
我无法在我的图层上使用此mapSetting ui.
如何在MapSettingControl中添加群集图层，以便可以切换(显示/隐藏)它们? (我认为我没有使用正确的分组方法)当我将它们添加为map.addLayer(clusterLayer)时，它工作正常.
如何在MapSettingControl中动态添加图层?传单方法的可能替代方法:
layerControl.addOverlay(somelayer, "layer name");
看着API，看来MapSettingsControl.Options有
layers: {
label: 'test',
layer: instance of H.map.layer.Layer
}
关于第一个参数，切换时从DataModel.add中得到的错误是InvalidArgumentException.我相信这意味着在切换时，会调用DataModel.add并传递在MapSettingsControl中设置的H.map.Group，但是DataModel.add期望的是H.map.layer.Layer但会接收H.map.Group.
我不确定是否可以在MapSettingsControl中简单地添加H.map.Group.我认为我们必须以某种方式将H.map.Group作为provider添加到H.map.layer.Layer，并将Layer对象添加到MapSettingsControl.
编辑
关于添加集群.当我尝试为群集添加新层时，它显示为灰色.创建了群集提供程序，同时也创建了ObjectLayer，但我认为在创建MapSettingsControl并定义将用作H.map.layer.Layer的变量之后，更新该变量将不会对切换行为产生影响.
Add layers in MapSettingsControl dynamically so that I can toggle there visibility. When I tried to add layer in mapSettingControl It was disabled.
Background:
I have a web app developed using leaflet. I have 5 layers as shown in figure-1. Its working fine in leaflet. Now I am using HERE Maps javascript API for developing same web app.
How I did in Leaflet:
I add them as map overlays when adding layer control i.e.
let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
while when I need to add overlay in layer control dynamically I use following:
layerControl.addOverlay(somelayer, "layer name");
This work fine.
How I am doing by using Here Maps js api:
As I have five layers, two are cluster layers while two are marker layer and one geojson. I have tried to apply same approach by creating GROUP for five layers and adding them into the layers of map setting controls.
public clusterGroup1 = new H.map.Group();
public clusterGroup2 = new H.map.Group();
public markerGroup1 = new H.map.Group();
public markerGroup2 = new H.map.Group();
public boundary = new H.map.Group();
created customized map setting ui :
this.customizedMapSetting = new H.ui.MapSettingsControl({
baseLayers: [{
label: "Normal", layer: defaultLayers.vector.normal.map
}],
layers: [{
label: "Cluster-1",
layer: this.clusterGroup1
},
{
label: "Cluster-2",
layer: this.clusterGroup2
},
{
label: "Marker-1",
layer: this.markerGroup1
},
{
label: "Marker-2",
layer: this.markerGroup2
},
{
label: "Geojson",
layer: this.boundary
}]
});
this.customizedMapSetting.setAlignment('top-right');
ui.addControl("customized", this.customizedMapSetting);
I am adding markers to a group like this:
dataArray.forEach(data=> {
let lat = data.latlng[0];
let lng = data.latlng[1];
var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon});
this.markerGroup1.addObject(marker);
});
Problem Statement
I am unable to get this mapSetting ui working for my layers.
How can I add clusterlayers in MapSettingControl so that I can toggle (show/hide) them? (I think I am not using right approach of group) When I add them as a map.addLayer(clusterLayer) it work fine.
How Should I add layer dynamically in MapSettingControl? Possible alternative of leaflet method :
layerControl.addOverlay(somelayer, "layer name");
Looking at the API, it seems MapSettingsControl.Options has
layers: {
label: 'test',
layer: instance of H.map.layer.Layer
}
The error we get when toggling is InvalidArgumentException from DataModel.add regarding the first argument. I believe this means that on toggle, DataModel.add is called and passed the H.map.Group that is being set in the MapSettingsControl, but the DataModel.add expects a H.map.layer.Layer but receives the H.map.Group.
I'm not sure if it's possible to simply add a H.map.Group in MapSettingsControl. I think we have to somehow add the H.map.Group as a provider for a H.map.layer.Layer and add the Layer object to MapSettingsControl.
EDIT
As for adding cluster. When I try to add a new layer for the cluster, it is grayed out. The cluster provider is created and the ObjectLayer is created as well but I think after you have created the MapSettingsControl and defined the variable that will act as the H.map.layer.Layer, updating the variable will have no effect on the toggle behaviour.
这篇关于这里地图:在MapSettingsControl中动态添加图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
