在Mapboxgl.js和GeoJSON中使用“圆形颜色”数据驱动的样式时出现错误，但使用默认颜色可以正常工作

Question

我正在尝试创建地图，使用GeoJSON和Mapbox放置数据点。 当我为所有点使用默认颜色代码时，它工作正常，但是当我尝试使用数据驱动的样式为不同的属性值放置不同的颜色时，它给出了错误。 我正在使用mapboxgl.js。

我在Chrome Inspect中收到以下错误：

net::ERR_INTERNET_DISCONNECTED
exports.getJSON @ ajax.js:33
evented.js:111 Error
at XMLHttpRequest.r.onerror (ajax.js:18)

请帮忙！ 这是我的GeoJSON和HTML文件。

mapboxgl.accessToken = 'pk.eyJ1Ijoicml0YW1iaGFyYSIsImEiOiJjajZuNGZjNHUwNHgxMzNwc29hZ2ZkbmRvIn0.4kTuXEpbJBeoN3jCp3pfwQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [-121.403732, 40.492392],
    zoom: 10
});
map.on("load", function() {
    map.addSource('pH', {
        'type': 'geojson',
         'data': 'test.json'
    });
    map.addLayer({
        id: 'heat-map',
        type: 'circle',
        source: 'pH',
        paint: {
            // 'circle-color': '#f1f075',
            'circle-color': {
                property: 'value',
                 stops: [
                    [6, '#f1f075'],
                    [10, '#e55e5e']
                ]          
            },
            "circle-radius": 6,
            'circle-opacity': 0.8
        },
    });
});

GeoJSON文件：

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": { "value": "7" }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.415061, 40.506229]
        }
    }, {
        "type": "Feature",
        "properties": { "value": "8" }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.505184, 40.488084]
        }
    }, {
        "type": "Feature",
        "properties": { "value": "9" }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.354465, 40.488737]
        }
    }]
}

Answer 1

我认为问题是由于您的value s在geojson中是字符串而不是数字。 当我将它们更改为数字时，如下所示，您的示例代码对我有用

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": { "value": 7 }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.415061, 40.506229]
        }
    }, {
        "type": "Feature",
        "properties": { "value": 8 }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.505184, 40.488084]
        }
    }, {
        "type": "Feature",
        "properties": { "value": 9 }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.354465, 40.488737]
        }
    }]
}

如果仍然出现AJAX错误，则可能需要运行本地服务器（可以在项目文件夹中使用python -m SimpleHTTPServer进行此操作，然后在浏览器中加载localhost:8000/path/to/index.html ）