从地图框添加Tileset到我的地图中

时间:2017-06-28 14:55:34

标签: html web-applications mapbox mapbox-gl-js mapbox-gl

我正在使用mapbox,最近我想创建一个Web地图。我将一个形状上传到mapbox tilseset云中,但当我尝试将其添加到地图中时,它不会显示。这是我使用的代码功能:

        map.on('load', function() {
        map.addLayer({
            'id' : 'Resguardos',
            'type' : 'fill',
            "source" : {
                'type' : 'vector',
                'url' : 'mapbox://fabiofz1990.9lhgml6c',
            },
            'layout' : {},
            'paint' : {
                'fill-color' : '#0044b2',
                'fill-opacity' : 1
            }
        });

    });

谢谢

3 个答案:

答案 0 :(得分:1)

我认为要显示它,您需要将tileset数据添加到您正在使用的样式中。

您的地图集帐户中有一个选项:https://www.mapbox.com/studio/tilesets/

enter image description here

答案 1 :(得分:0)

您不能直接将mapbox TileSet添加到浏览器客户端。

您必须创建一个新的mapbox样式,该样式使用tileSet。

这是工作示例

https://transparentgov.net/cleargov1/766/new-2019-world-press-freedom-ranking-map-180-countries

https://transparentgov.net/json2tree/datahub.io/international/press-freedom-2019-mapbox-style.html

答案 2 :(得分:0)

您可以直接从 Mapbox 工作室添加图块集。

  1. 复制图块集 URL。List item
  2. 像这样添加网址。 url: "mapbox://+tilesetid"
map.addSource('tileset_data', {
    "url": "mapbox://abcqqq123.cklxcyxew1b9421lpb8shxf4x-2ikvs",
    "type": "vector"
});
  1. 在您的图层中添加源名称“tileset_data”上方的源名称 并从上图中获取源层。
       map.addLayer({
           'id': 'circles',
           'type': 'circle',
           'source': 'tileset_data',
           'source-layer': 'children_obesity',
           'paint': {
               'circle-color': '#7F3121',
               'circle-opacity': 0.75,
               'circle-radius': 5
           }
       });

那你可以走了。