在 Mapboxgl.js 和 GeoJSON 中使用 'circle-color' 数据驱动样式时出错，但使用默认颜色可以正常工作

Question

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

我在 Chrome 检查中得到以下错误：

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 在 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 在您的浏览器中）

在 Mapboxgl.js 和 GeoJSON 中使用 'circle-color' 数据驱动样式时出错，但使用默认颜色可以正常工作

Getting error while using 'circle-color' data driven styling in Mapboxgl.js & GeoJSON, but working fine with default color

javascript

ajax

geojson

mapbox-gl-js