Mapbox GL JS与Maki图标的标记

Question

我通过原来的图标编辑器生成了一个Maki图标列表。

drawMarkers() {
let self = this;
const mapboxgl = require("mapbox-gl");
let data = this.draw.getAll();
data.features.forEach((feature) => {
if (feature.geometry.type == "Point") {

var icon = feature.properties.icon;
var title = feature.properties.title;
if (typeof title === "undefined") {
title = "Info";
} else {
var popup = new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(`<h3>${title}</h3>`);
var marker = new mapboxgl.Marker({
color: '#333',
draggable: false,
scale: 1,
})
.setLngLat(feature.geometry.coordinates)
.setPopup(popup)
.addTo(self.map);
}
});

标记在Mapbox上正确显示。

GeoJSON是这样的:

"type":"FeatureCollection",
"features":[
{
"id":"c749de6a6eac6b1cfdda890e7c665e0d",
"type":"Feature",
"properties":{
"icon":"ferry",
"title":"This should show a Ferry icon",
"portColor":"#d9eb37"
},
"geometry":{
"coordinates":[
6.12,
22.44
],
"type":"Point"
}
},

我想在标记中也添加Maki图标，但我找不到任何关于如何在Mapbox Marker中使用图标的文档。

谁能帮我一下?我正在使用Mapbox GL JS用于Web。

Answer 1

这取决于您如何创建映射。

• 使用生成的Maki图标创建自己的地图样式。这是使用Mapbox studio来创建您的自定义地图样式，然后将其添加到您的应用程序中。

• 创建使用您创建的maki.svg文件的自定义标记。这可以通过向new mapboxgl.Marker()函数传递一个自定义元素来实现。所以，不是:

  var marker = new mapboxgl.Marker({
  color: '#333',
  draggable: false,
  scale: 1,
  })
  

  你会通过:

  var marker = new mapboxgl.Marker(customElement)
  

  ，其中customElement使用icons变量的数据。我不确定你是否在这里使用纯JS，但在mapbox文档中有一些例子可以做到这一点。

  因为你已经生成了自己的Maki图标列表，我建议你下载它们，也许把它们放在某个地方，这样你就可以用<img src="link to hosted maki marker"/>或类似的东西创建你的标记了