在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 ）