MapBoxGL使用自定义颜色添加GeoJSON圆形标记

时间:2016-03-22 17:50:08

标签: image add mapbox geojson marker

我需要使用通过AJAX获得的GeoJSON数据将标记添加到mapboxgl地图。我以这种方式添加GeoJSON图层:

    geoJSONSource = new mapboxgl.GeoJSONSource({
        data: geodata
    });

    map.addSource('markers', geoJSONSource);
    map.addLayer({
        "id": "markers",
        "interactive": true,
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-15", // stuff in {} gets replaced by the corresponding value
            "icon-allow-overlap": true,
            "icon-size": 1 // size of the icon
        }
    });

在GeoJSON数据本身中,我将每个功能设置为具有属性' marker-symbol'火箭'火箭'在我将GeoJSON添加到地图之前的循环中。然而,我需要的是每个点的小圆形图像,而不是火箭。我想根据GeoJSON中包含的数据将点设置为三种颜色之一的小圆形图像。我计划在将GeoJSON添加到地图之前在循环中选择svg图像。

如何添加自定义图标图像?似乎即使我为图标图像字段键入乱码,也会加载来自Mapbox的预制标记符号的火箭图像。否则,如何添加自定义标记符号?

我正在使用street-v8 mapbox风格;我尝试根据以下链接尝试制作自己的样式来访问标记的自定义图像:

https://www.mapbox.com/help/custom-markers/#use-images-in-mapbox-gl-js

但我无法弄明白。

1 个答案:

答案 0 :(得分:2)

根据样式中设置的current sprite sheet加载标记图标。

要加载自定义图标图像,您需要在style.json中指定自定义精灵json文件。以下是相应的github讨论,详细信息如下:https://github.com/mapbox/mapbox-gl-js/issues/822

以下是使用自定义精灵的示例:http://codepen.io/znak/pen/PqOEyV

地图使用名为customstyle.json的文件中定义的自定义样式:

var map = new mapboxgl.Map({
    container: 'map',
    center: center,
    zoom: 8,
    style: 'http://www.lenart.pl/assets/codepen/customstyle.json'
});

其中customstyle.json是指customsprite.json

"sprite": "http://www.lenart.pl/assets/codepen/customsprite",

customsprite.json指定如何裁剪位于此处的相应PNG spritesheet:

http://www.lenart.pl/assets/codepen/customsprite.png

你也可以使用这个实用程序:https://github.com/mapbox/spritezero-cli从一个充满SVG文件的目录中生成sprite json和相应的png spritesheet。