Question

我正在尝试将项目从mapbox传单转换为mapbox gl js。

HTML标记

虽然使用html标记使用mapbox gl js创建标记时，我找不到任何指定icon-allow-overlap的方法，默认情况下这是正确的，但是我要创建html标记，因为我需要使用其他图标（自定义图标）。

 markers.features.forEach (marker) ->
      el = document.createElement('div');
      el.className = 'marker';
      el.style.backgroundImage = "url(#{marker.properties.iconUrl})"
      el.style.width = marker.properties.iconSize[0] + 'px';
      el.style.height = marker.properties.iconSize[1] + 'px';

      new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .setPopup(new mapboxgl.Popup({ offset: 25 })
        .setHTML('<h3> marker.properties.title</h3>'))
        .addTo(map)

使用GEOJSON

window.map.addSource('incidentMarkers', {
      type: 'geojson'
      data: {
        "type": "FeatureCollection"
        "data": incidentMarkers
      }
    })

window.map.addLayer({
      "id": "incidentMarkers",
      "type": "symbol",
      "source": "incidentMarkers"
})

在尝试通过添加geojson源创建图层时，我坚持为每个图层创建自定义图标。并将弹出窗口与每个功能（标记）绑定

使用mapbox gl js的标记可以使用哪个选项，并且可以通过缩放级别来更新图标大小。

Mapbox gl js标记

0 个答案: