Mapbox 在卫星视图和街景之间切换时，地图盒会弹出弹出窗口

在Mapbox街道地图视图中，我们正在绘制一条geo json线，并在每个航路点放置弹出窗口

从街道地图视图切换到卫星视图时，航路点消失

附加的小提琴包含街道地图和卫星的样式层，以便您可以在两者之间切换并查看卫星的信息更改

这是什么原因？我们如何使航路点显示在卫星视图上

---

当我切换到卫星样式时，看着控制台，我看到：

无法加载图像“信息”。请确保你有 添加了带有map.addImage（）或“sprite”属性的图像 风格您可以通过侦听来提供缺少的图像 “styleimagemissing”映射事件

这是指您在其中设置图标的

map.addSource（'places'，…）

：“information”

使用样式API，您可以检查您的样式具有的不同精灵：

您可以在中看到一个名为“信息”的精灵

这是你的护照上没有的

在您的JSFIDLE中，我将“information”的所有引用都交换为“information-15”（两种样式中都存在的精灵），并将addLayer中的图标大小更改为1，并且能够在两种样式之间切换，并使图标同时出现在这两种样式中

map.addSource('places', {
    'type': 'geojson',
    'data': {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {
          "icon": "information-15",
          "icon-allow-overlap": true,
          "iconSize": "15"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.1428091990252, 39.866845647036]
        }
      }, {
        "type": "Feature",
        "properties": {
          "icon": "information-15",
          "icon-allow-overlap": true,
          "iconSize": "15"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.1425, 39.8665625]
        }
      }, {
        "type": "Feature",
        "properties": {
          "icon": "information-15",
          "icon-allow-overlap": true,
          "iconSize": "15"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.14375, 39.869375]
        }
      }, {
        "type": "Feature",
        "properties": {
          "icon": "information-15",
          "icon-allow-overlap": true,
          "iconSize": "15"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.89, 40.08]
        }
      }, ]
    }
  });
  // Add a layer showing the places.
  map.addLayer({
    'id': 'places',
    'type': 'symbol',
    'source': 'places',
    'layout': {
      'icon-image': 'information-15',
      'icon-size': 1,
      'icon-allow-overlap': true
    }
  });

map.addSource('places', {
    'type': 'geojson',
    'data': {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {
          "icon": "information-15",
          "icon-allow-overlap": true,
          "iconSize": "15"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.1428091990252, 39.866845647036]
        }
      }, {
        "type": "Feature",
        "properties": {
          "icon": "information-15",
          "icon-allow-overlap": true,
          "iconSize": "15"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.1425, 39.8665625]
        }
      }, {
        "type": "Feature",
        "properties": {
          "icon": "information-15",
          "icon-allow-overlap": true,
          "iconSize": "15"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.14375, 39.869375]
        }
      }, {
        "type": "Feature",
        "properties": {
          "icon": "information-15",
          "icon-allow-overlap": true,
          "iconSize": "15"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.89, 40.08]
        }
      }, ]
    }
  });
  // Add a layer showing the places.
  map.addLayer({
    'id': 'places',
    'type': 'symbol',
    'source': 'places',
    'layout': {
      'icon-image': 'information-15',
      'icon-size': 1,
      'icon-allow-overlap': true
    }
  });