javascript - 在街道/卫星视图地图框之间切换

Question

我正在使用 Mapbox，并且在使用 Mapbox 的街道/卫星视图之间切换时遇到了一些困难。

我遇到的问题；是当我在街道/卫星视图之间切换时，由 Mapbox 瓦片集传播的 GeoJson 坐标正在消失。但我想将那一层绘图点保留在 Mapbox Stlyes 之上。

这是我的 JSfiddle：https ://jsfiddle.net/6et159f0/

目前，问题似乎是 JS 仪表板中的闲置代码：

function addMaineLayer() {
  map.addSource("places", {
    type: "geojson",
    data: {
      type: "Feature",
      geometry: GEOJSON_FEATURE
    }
  });

  // define the function to add layer
  const addLayer = (layer, beforeId) => map.addLayer(layer, beforeId);

  addLayerBefore(
    addLayer,
    {
      id: "places",
      type: "circle",
      source: "BD_Customer_Map_-_FULL",
      layout: {},
      "paint": {
        "fill-color": "grey",
        "fill-opacity": 0.4
      }
    }
  );
}
    
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
 
function switchLayer(layer) {
  map.once("styledata", addMaineLayer);
  var layerId = layer.target.id;
  map.setStyle('mapbox://styles/mapbox/' + layerId);
}
 
for (var i = 0; i < inputs.length; i++) {
    inputs[i].onclick = switchLayer;
}

任何建议将不胜感激。

谢谢

标签： javascripthtmlmapboxmapbox-gl-jsmapbox-gl