时间戳

首页 > 解决方案 > 显示基于 Mapbox 更改多边形颜色的用户区域

mapbox - 显示基于 Mapbox 更改多边形颜色的用户区域

问题描述

我目前正在使用 Mapbox GL 构建地图。在这个多边形上有基于 1 个度量的颜色的多边形。公制范围在 1 到 25 之间。

我只有 12 色面板。 彩色面板

目标是

  1. 检索用户地图屏幕的左上角、右上角、左下角和右下角。
  2. 获取所有适合该区域的多边形。（SQL 请求）
  3. 从所有这些多边形中，我检索度量 MIN 和 MAX。
  4. 根据 MIN 和 MAX 创建 12 个值范围。

如何根据从后端收到的 12 个值范围重新加载地图上显示的每个多边形的颜色。当用户停止移动该区域时，需要执行此颜色的重新加载。

这是我的代码示例：

   map.addLayer({
        'id': 'terrain1-data',
        'type': 'fill',
        'source': 'level_hight',
        'source-layer': 'sold_level_high-36rykl',             'maxzoom': zoomThresholdZoneHtM,            'paint': {
          'fill-color': [
              'interpolate',
              ['linear'],
              ["to-number",['get', 'MYMETRIC']],
              0,
              '#FFFFFF',
              5,
              '#008855',
              6,
              '#13be00',
              7,
              '#75e100',
              8,
              '#aee500',
              9,
              '#dfff00',
              10,
              '#fff831',
              11,
              '#ffe82f',
              12,
              '#ffd500',
              13,
              '#ffa51f',
              14,
              '#ff7b16',
              15,
              '#ff0a02',
              16,
              '#c80000'               
          ],
          'fill-opacity': [
                'case',
                ['boolean', ['feature-state', 'hover'], false],
                0.8,
                0.5
            ],
          'fill-outline-color': '#000000',
                      }
    });

提前致谢。抱歉，我开始使用 Mapbox。

标签： mapbox

解决方案

如果我的理解是正确的，您想在“插值”中动态设置数字。在以下情况下您要根据数据更改0、5、...，轻？'fill-color': ['interpolate', ['linear'], ["to-number",['get', 'MYMETRIC']], 0, '#FFFFFF', 5,

然后，通常您会从服务器获取日期，并且有机会在 JavaScript 代码中计算这些数字。然后将计算出的数字放入“插值”中即可。

这是一个示例。号码是随机产生的，

 map.on('load', function () {
    map.addSource('maine', {
        'type': 'geojson',
        'data': {
            'type': 'FeatureCollection',
            'features': [
                {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': [
                            [[0, 0], [0, 1], [1, 1], [1, 0]]
                        ]
                    },
                    'properties': {
                        'height': 10
                    }
                },
                {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': [
                            [[1, 1], [1, 2], [2, 2], [2, 1]]
                        ]
                    },
                    'properties': {
                        'height': 20
                    }
                },
            ]
        }
    });
    map.addLayer({
        'id': 'maine',
        'type': 'fill',
        'source': 'maine',
        'layout': {},
        'paint': {
            'fill-color': [
                'interpolate',
                ['linear'],
                ['to-number', ['get', 'height']],
                c(10),
                '#000000',
                c(10) + 10,
                '#FFFFFF',
            ]
        }
    });
});

function c(n) {
    return Math.round(Math.random() * n);
}

推荐阅读