尝试使用 javascript 根据 mapbox 中的多个数字更改颜色时 "interpolate" 表达式出错

Question

我在与 html 文件相同的存储库中有一个 example.geojson 文件，格式如下：

{
"type": "FeatureCollection",
"features": [
        {
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [0.328475794345889,51.5430323219002],
                    [0.330011830097691,51.544575635037],
                    [0.332923372866699,51.5445177628264],
                    [0.334298679806651, 51.5429165836459],
                    [0.328475794345889,51.5430323219002]
                ]
            ]
        },
        "properties": {

            "NO2_mean": -1.47235050096324e-67                
        }
    }
 ] 
}

我想更改属性的颜色：NO2_mean。

我试过了

mapboxgl.accessToken = 'my_access_token';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/outdoors-v11',
  center: [-0.318092, 51.509865],
  zoom: 10
});

map.on('load', function() {
  map.addSource('london', {
    'type': 'geojson',
    'data': {
"type": "FeatureCollection",
"features": [
        {
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [0.328475794345889,51.5430323219002],
                    [0.330011830097691,51.544575635037],
                    [0.332923372866699,51.5445177628264],
                    [0.334298679806651, 51.5429165836459],
                    [0.328475794345889,51.5430323219002]
                ]
            ]
        },
        "properties": {

            "NO2_mean": -1.47235050096324e-67                
        }
    }
 ] 
}
  });

  map.addLayer({
    'id': 'london-boundary',
    'type': 'fill',
    'source': 'london',
    'paint': {
      'fill-color': [
        'interpolate', ['linear'],
        ['number', ['get', 'NO2_mean']],
        [ "<=" , 'number', 1], #2DC4B2',
        [ "<=" , 'number', 2], '#3BB3C3', 
        [ "<=" , 'number', 3],'#669EC4', 
        [ "<=" , 'number', 4], '#A2719B', 
        [ "<=" , 'number', 5], '#AA5E79'
      ],
      'fill-opacity': 0.8
    },
    'filter': ['==', '$type', 'Polygon']
  });

});

我收到错误消息："interpolate" 表达式的 Input/output 对必须使用输入值的文字数值（而非计算表达式）来定义。在 Object.Mn [作为 emitValidationErrors] (validate_style.js:37)

我应该在 html 文件中更改什么？任何建议都会有所帮助。提前谢谢你。

Answer 1

解决方案是

 map.addLayer({
    'id': 'london-boundary',
    'type': 'fill',
    'source': 'london',
    'paint': {
      'fill-color': [
        'interpolate', ['linear'],
        ['number', ['get', 'NO2_mean']],
        1, #2DC4B2',
        2, '#3BB3C3', 
        3,'#669EC4', 
        4, '#A2719B', 
        5, '#AA5E79'
      ],
      'fill-opacity': 0.8
    },
    'filter': ['==', '$type', 'Polygon']
  });

值1到5是指多边形颜色变化的步长。在插值表达式中，只有 int 值是有效的。如果 (n02_mean <= 1)，则颜色为 #2DC4B2'。如果 (1 < n02_mean <= 2)，则颜色是 #2DC4B2' 和 '#3BB3C3' 等的混合

尝试使用 javascript 根据 mapbox 中的多个数字更改颜色时 "interpolate" 表达式出错

Error in "interpolate" expressions when trying to change color according to multiple numbers in mapbox using javascript

javascript

interpolation

geojson

mapbox-gl-js