使用mapbox-gl-js为要素集中的每个要素添加自定义图标 [英] Adding custom icons for each feature in feature collection with mapbox-gl-js

问题描述

我需要使用mapbox-gl-js为地图中的每个点提供不同的自定义图像，但是我找不到一种为要素集中的每个要素提供自定义图标的方法

I need to have different custom images for each points in the map using mapbox-gl-js, But I don't find a way to give custom icon for each feature in a feature collection

incidentMarkers = {
"type": "FeatureCollection"
"features": [{
  "type": "geojson",
  "data": {
    "type": "Feature",
    "properties": {
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        longitude
        latitude
      ]
    }
  }
},
  {
    "type": "geojson",
    "data": {
      "type": "Feature",
      "properties": {
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          longitude
          latitude
        ]
      }
    }
  }]
}

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


window.map.addLayer({
    "id": 'incidentMarkers',
    "type": "symbol",
    "source": 'incidentMarkers' 
    "layout": {
      "icon-image": "image-1",
      "icon-size": 0.25,
      "icon-allow-overlap": true,
      "text-allow-overlap": true
    }
  })

现在，我将每个点添加为单独的图层，以便为每个图标添加自定义图像，但是为了与标记聚类，我需要将所有标记都放置在同一层，是否有任何方法可以为每个图层添加自定义图像

Now I am adding each point as separate layer for having custom image for each icon, But for having clustering with markers I need to have all markers as same layers, Is there any way to add custom images for each layers

pointsData.forEach (data) ->
    window.map.loadImage("#{data.category_image_path}", (e, image) ->
      window.map.addImage("image-#{data.id}", image)
  incidentMarker = {
    "type": "Feature",
    "properties": {
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        data.longitude
        data.latitude
      ]
    }
  }
  map.addSource('incidentMarkers' + data.id, {
    "type": "geojson",
    "data": incidentMarker
  })

  window.map.addLayer({
    "id": 'incidentMarkers' + data.id,
    "type": "symbol",
    "source": 'incidentMarkers' + data.id
    "layout": {
      "icon-image": "image-#{data.id}",
      "icon-size": 0.25,
      "icon-allow-overlap": true,
      "text-allow-overlap": true
    }
  })

如果在同一时间我有多个标记，则仅显示一个标记，即使我将icon-allow-overlap选项设置为true

And if I have more than one marker at same latlng only one marker is showing up, Even I set icon-allow-overlap option to true

推荐答案

如果您在每个要素的属性中引用了哪个图标，则可以使用mapbox的数据驱动样式功能为每个要素使用不同的图标:

If you reference which icon should be used in each feature's properties you can use mapbox' data-driven styling capabilities to use a different icon for each feature:

const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {icon: 'image-1'},
      geometry: {/* */}
    },
    {
      type: 'Feature',
      properties: {icon: 'image-2'},
      geometry: {/* */}
    }
  ]
}

// add source

map.addLayer({
  type: 'symbol',
  source: 'source-id',
  layout: {
    'icon-image': ['get', 'icon']
  }
})

['get', 'icon']是一个表达式，它从每个功能中获取"属性"icon"，并将其用作icon-image的值.

The ['get', 'icon'] is an expression which "gets" the property "icon" from each feature and uses it as the value for icon-image.

这篇关于使用mapbox-gl-js为要素集中的每个要素添加自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！