如何在地图缩放上交换图层可见性？

Question

我认为这应该很容易，或者使用Azure Maps进行某种示例...

所以我在地图中有3层2点和1个多边形添加到我的地图。我希望最初打开点图层，然后如果用户在地图上放大，请关闭点图层并打开多边形。如果用户将多边形缩小关闭，点又重新打开，也会发生相反的情况。

我已经能够通过单击按钮来关闭1点图层并打开多边形，但是1点图层是htmlMarker，所以我可以对其进行脉动以获得效果。

此外，有关在第1层之后添加层的文档也无法正常工作。如果我全部保留，多边形将位于两个点图层的顶部？

   htmlMarkerLayer = new atlas.layer.SymbolLayer(dataSource, null, {
     filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], // Only render Point or MultiPoint in this layer.
     name: 'htmlMarkerLayer'
   });
   map.layers.add(htmlMarkerLayer, 'poiPointLayer');

   poiPointLayer = new atlas.layer.SymbolLayer(dataSource, null, {
     filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], // Only render Point or MultiPoint in this layer.
     name: 'poiPointLayer'
   });
   map.layers.add(poiPointLayer, 'htmlMarkerLayer');

polygonLayer = new atlas.layer.PolygonLayer(dataSource, null, {
        filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']], // Only render Point or MultiPoint in this layer.
        name: 'facilityLayer',
        fillColor: 'gray',
        fillOpacity: 0.5
    });
    map.layers.add(polygonLayer, 'poiPointLayer');

// Does not work on htmlMarker layer with pulse?
      var opts = htmlMarkerLayer.getOptions();
      opts['visible'] = false;
      htmlMarkerLayer.setOptions(opts);

// Works
   opts = poiPointLayer .getOptions();
   opts['visible'] = false;
   poiPointLayer .setOptions(opts);

// Works
   opts = polygonLayer.getOptions();
   opts['visible'] = true;
   polygonLayer.setOptions(opts);

关于如何与地图进行缩放互动的任何想法？如何使htmlMarker层关闭？

Answer 1

所有图层均具有minZoom和maxZoom选项。使用这些来指定您的限制，它将满足您的要求。同样，名称不是图层的选项。初始化函数时的第二个参数（代码中为空）是您可以传递ID的位置。我在下面的代码中进行了更改。

polygonLayer = new atlas.layer.PolygonLayer(dataSource, 'facilityLayer', {
    minZoom: 10,
    maxZoom: 24,    
    fillColor: 'gray',
    fillOpacity: 0.5,
    filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']], // Only render Point or MultiPoint in this layer.
});
map.layers.add(polygonLayer, 'poiPointLayer');

poiPointLayer = new atlas.layer.SymbolLayer(dataSource, 'poiPointLayer', {
    minZoom: 0,
    maxZoom: 10,
    filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], // Only render Point or MultiPoint in this layer.
});
map.layers.add(poiPointLayer, 'htmlMarkerLayer');

为清楚起见，这是minZoom / maxZoom值的工作方式：

• minZoom->出现在此缩放级别。
• maxZoom->在此级别消失（出现在maxZoom-1）