Mapbox GL JS和GeoJSON作为外部文件

时间:2017-08-06 20:37:50

标签: mapbox mapbox-gl-js mapbox-gl mapbox-marker

我有使用Mapbox地图设置标记的代码

$(function() {
    mapboxgl.accessToken = 'pk.###';

    var map = new mapboxgl.Map({
        container: 'map-global',
        style: '..'
    });

    var geojson = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "title": "POI Title"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [0, 0]
                }
            }
        ]
    };

    geojson.features.forEach(function(marker) {
        // create a HTML element for each feature
        var el = document.createElement('div');
        el.className = 'marker';
        new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .setPopup(new mapboxgl.Popup()
            .setHTML(marker.properties.title))
            .addTo(map);        
    });
});

它工作正常。但我想将GeoJSON用作外部文件:

var geojson = 'file.geojson';

在这里,我遇到了一个问题 - 它不起作用:

  

TypeError:undefined不是一个对象(评估'" map.geojson" .features.forEach')"。

有没有办法将外部GeoJSON文件与自定义HTML一起使用 标记

2 个答案:

答案 0 :(得分:2)

由于您使用的是Jquery,因此可以使用getJSON加载文件:

  

使用GET HTTP请求从服务器加载JSON编码的数据。

参考:http://api.jquery.com/jquery.getjson/

示例:

$.getJSON('file.geojson', function (geojson) {
    geojson.features.forEach(function (marker) {
        // etc
    });
});

答案 1 :(得分:2)

您可以使用普通的mapbox addSource()加载外部geojson文件。

map.on('load', function() {
  var url = 'http://your_geojson_file.com/some_file.geojson';
  map.addSource('source_id', { type: 'geojson', data: url});
});

查看此示例: https://www.mapbox.com/mapbox-gl-js/example/live-geojson/