我想在我的 map 上添加一个自定义标记。我正在使用 mapbox gl 脚本。
我发现与此主题相关的唯一文档是这个 https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ .
我尝试自定义给定的示例,并设法添加了一个标记并稍微修改了它的大小,但由于我不了解所有参数,因此我不知道如何添加我自己的标记。有没有更详细的文档?
这是我的代码:
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWl3YXRrbyIsImEiOiJjaXBncnI5ejgwMDE0dmJucTA5aDRrb2wzIn0.B2zm8WB9M_qiS1tNESWslg';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/aiwatko/cipo0wkip002ddfm1tp395va4', //stylesheet location
center: [7.449932,46.948856], // starting position
zoom: 14.3, // starting zoom
interactive: true
});
map.on('load', function () {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [7.4368330, 46.9516040]
},
"properties": {
"title": "Duotones",
"marker-symbol": "marker",
}
}]
}
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15",
"icon-size": 3
}
});
});
</script>
提前致谢!
奥克塔维亚
最佳答案
在 Mapbox 中有两种自定义标记的方法。
Mapbox 中的栅格标记
查看 Mapbox.com 上的此链接 Custom marker icons .该示例显示了如何使用 .png 作为标记。
Mapbox 中的 SVG 标记
您已经接近修改 icons
,但需要一些时间来熟悉参数。icon-image
可能更难理解。它需要属性(property)"marker-symbol": "marker"
来自 GeoJson 和 "icon-image": "{marker-symbol}-15"
, 创建 marker-15
的最终结果.
这带来了另一个问题:标记在哪里/如何定义?!?
这些标记也来自 Mapbox,名为 Maki Icons .您可以更改 "marker-symbol"
至 aquarium
或 cafe
查看结果。
来自 Mapbox GL Style Reference
icon-size
— 图标的比例因子。 1 是原始尺寸,3 是尺寸的三倍。 icon-image
— 替换了 {tokens} 的字符串,引用要从中提取的数据属性。 关于mapbox - 将自定义标记添加到 mapbox gl,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38075936/