javascript – 通过mapbox gl js在mapbox中的地图中添加一些基本标记

我有一个地图样式与mapBox工作室,但我很难添加甚至一个基本的标记,但文本出现在哪里的标记应该是哪个建议标记将在那里.

所以这里是这个地图样式的代码：

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中的一个例子中添加：

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","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"
        }
    });
});

但是只有文本而不是图标出现.

问题是：如何才能将正常的基本彩色标记添加到此地图,甚至不是特殊图标之一？

谢谢.

解决方法

这里的问题是,MapBox Studio中您的样式的起始点(您选择的模板)没有您在图层布局中引用的字形/精灵.如果您切换到与您使用的示例中使用的相同样式：
mapBox：// styles / mapBox / streets-v8你会看到标记会出现.这是因为它们已被添加到该样式.如果你切换回你的风格,他们再次走了.

这是您的风格的精灵的console.log：

这里是一个console.log的MapBox街道精灵：

你可以看到,只有两个,而mapBox有几十个(比截图更多).您可以通过简单地使用属性名称来使用它们：default_marker和secondary_marker：

{
    "type": "Feature","geometry": {
        "type": "Point",38.913188059745586]
    },"properties": {
       "title": "MapBox DC","marker-symbol": "default_marker"
    }
}

map.addLayer({
    "id": "markers","layout": {
        "icon-image": "{marker-symbol}","text-anchor": "top"
    }
});

范例：http://plnkr.co/edit/W7pfGHVBzJj8U3AmPyzf?p=preview

如果您需要更多功能,您必须在MapBox工作室中添加要用于您的样式的精灵/字形.不幸的是,这与“编程”无关,因为它与MapBox Studio相关,MapBox Studio是一个软件工具,因此在stackoverflow上也是这样一种“脱离”的.

如果您甚至不需要精灵/字形,还可以使用type：circle和paint属性来创建简单的圆：

map.addLayer({
    "id": "markers","type": "circle","paint": {
        "circle-radius": 10,"circle-color": "#007cbf"
    }
});

范例：http://plnkr.co/edit/QDtIBtDIimKy6TUmKxcC?p=preview

更多关于风格和精灵可以在这里找到：

> https://www.mapbox.com/help/define-sprite/
> https://www.mapbox.com/developers/api/styles/#Sprites
> https://www.mapbox.com/mapbox-gl-style-spec/#sprite

javascript – 通过mapbox gl js在mapbox中的地图中添加一些基本标记

解决方法

猜你在找的JavaScript相关文章