HERE Maps: Adding Layer Dynamically in MapSettingsControl

问题

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");

回答1:

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.

来源：https://stackoverflow.com/questions/58316602/here-maps-adding-layer-dynamically-in-mapsettingscontrol

标签

overlay

here-api