通过mapbox gl js向mapbox中的地图添加一些基本标记 [英] Add some basic markers to a map in mapbox via mapbox gl js
问题描述
我有一个使用mapbox studio样式化的地图,但是我什至很难在其中添加一个基本标记,但是在标记应位于的位置出现了文本,这表明该标记将在其中.
I have a map styled with mapbox studio, however I'm having difficulty adding even a basic marker to it, however text is appearing where the marker should be which suggests that the marker would be there.
因此,这是具有该地图样式的代码:
So here's the code with that map style:
mapboxgl.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA';
var map = new mapboxgl.Map({
container: 'map',
style: "mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1",
center: [-30.50, 40],
zoom: 2,
interactive: false
});
这是从api中的示例中添加的一些标记:
And here some markers being added from an example in the api:
map.on('style.load', function () {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"marker-symbol": "monument"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"marker-color": "#ff00ff"
}
}]
}
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
但是仅显示文本而不显示图标.
However only the text and not the icons appear.
问题是:如何在此地图上仅添加普通的基本彩色标记,甚至不添加特殊图标之一?
Question is: how would I add just a normal basic colored marker to this map, not even one of the special icon ones?
谢谢.
推荐答案
这里的问题是,您选择的模板Mapbox Studio中样式的起点不包含您要引用的字形/精灵.图层布局.如果您切换到在您使用的示例中使用的相同样式,则:
mapbox://styles/mapbox/streets-v8
,您会看到标记将出现.这是因为它们已被添加到该样式中.如果您切换回自己的样式,它们又消失了.
Problem here is that the starting point of your style in Mapbox Studio, the template you chose, doesn't have the glyphs/sprites you're referencing in your layer layout. If you switch to the same style they're using in the example you've used:
mapbox://styles/mapbox/streets-v8
you'll see that the markers will appear. It's because they've been added to that style. If you switch back to your style, they're gone again.
这是您的样式精灵的console.log:
Here's a console.log of your style's sprites:
这是Mapbox街道精灵的console.log:
And here's a console.log of Mapbox streets sprites:
如您所见,您只有两个,而mapbox有数十个(比屏幕截图多).您只需使用属性名称即可使用拥有的名称:default_marker
和secondary_marker
:
As you can see, you have only two while mapbox has dozens (more than on the screenshot). You can use the ones you have by simply using the propertynames: default_marker
and secondary_marker
:
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"marker-symbol": "default_marker"
}
}
map.addLayer({
"id": "markers",
"source": "markers",
"type": "symbol",
"layout": {
"icon-image": "{marker-symbol}",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
在Plunker上的示例: http://plnkr.co/edit/W7pfGHVBzJj8U3AmPyzf?p=preview
Example on Plunker: http://plnkr.co/edit/W7pfGHVBzJj8U3AmPyzf?p=preview
如果需要更多,则必须在Mapbox Studio中将要使用的精灵/字形添加到样式中.不幸的是,这与编程"无关,因为它与Mapbox Studio有关,后者是一种软件工具,因此在stackoverflow上属于"offtopic".
If you need more you've got to add the sprites/glyphs you want to use to your style in Mapbox studio. Unfortunately this has little to do with "programming" since it's related to Mapbox Studio which is a software tool and thus kind of "offtopic" here on stackoverflow.
如果您甚至不需要精灵/字形,也可以使用type: circle
和paint
属性创建简单的圆圈:
If you don't even need sprite/glyphs you could also use type: circle
and the paint
properties to create simple circles:
map.addLayer({
"id": "markers",
"source": "markers",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf"
}
});
在Plunker上的示例: http://plnkr.co/edit/QDtIBtDIimKy6TUmKxcC?p=preview
Example on Plunker: http://plnkr.co/edit/QDtIBtDIimKy6TUmKxcC?p=preview
有关样式和图片的更多信息,请参见:
More on styles and sprites can be found here:
- https://www.mapbox.com/help/define-sprite/
- https://www.mapbox.com/developers/api/styles/#精灵
- https://www.mapbox.com/mapbox-gl-style -spec/#sprite
- https://www.mapbox.com/help/define-sprite/
- https://www.mapbox.com/developers/api/styles/#Sprites
- https://www.mapbox.com/mapbox-gl-style-spec/#sprite
这篇关于通过mapbox gl js向mapbox中的地图添加一些基本标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!