尝试使用 javascript 根据 mapbox 中的多个数字更改颜色时，“插值”表达式出错答案

【问题标题】：Error in "interpolate" expressions when trying to change color according to multiple numbers in mapbox using javascript尝试使用 javascript 根据 mapbox 中的多个数字更改颜色时，“插值”表达式出错
【发布时间】：2020-09-27 12:27:20
【问题描述】：

我的 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']
  });

});

我收到错误：“插值”表达式的输入/输出对必须使用输入值的文字数值（不是计算表达式）来定义。在 Object.Mn [as emitValidationErrors] (validate_style.js:37)

我应该在我的 html 文件中进行哪些更改？任何建议都会有所帮助。提前谢谢你。

【问题讨论】：

我给你做了一个sn-p。请编辑它并在minimal reproducible example 中添加相关文件
我必须修复一些问题 - 缺少引号和逗号：'fill-color': [ 'interpolate', ['linear'], ['number', ['get', 'NO2_mean']], [ "<=" , 'number', 1], '#2DC4B2', [ "<=" , 'number', 2], '#3BB3C3', [ "<=" , 'number', 3], '#669EC4', [ "<=" , 'number', 4], '#A2719B', [ "<=" , 'number', 5], '#AA5E79'
现在可以使用您的访问令牌吗？
感谢您的回复。问题在于填充颜色区域中代码的语法。它不是与令牌。代码在没有层的情况下运行。
当您使用访问令牌运行上面的代码时，我为您修复的填充颜色现在是否有效！我没有询问访问令牌

标签： javascript interpolation geojson mapbox-gl-js

【解决方案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

【讨论】：