Question

我正在尝试根据计算为每个多边形动态着色。有没有办法使用mapbox？

从下拉列表中选择一个值时将触发计算，然后需要更新每个多边形的颜色。

下面是我要添加到地图中的geojson源。

{
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [
                {
                    "id": 1,
                    "type": "Feature",
                    "properties": {
                        "title": "Candolim"
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [[[73.68255615234375, 15.72088240269937], [73.707275390625, 15.670643235196232], [73.97232055664062, 15.640229310707543], [73.97232055664062, 15.685187424880764], [73.95721435546875, 15.698408515946419], [73.94760131835938, 15.74071024249738], [73.8885498046875, 15.753927728167556], [73.88717651367188, 15.769787575567598], [73.86245727539062, 15.798860741939269], [73.82675170898438, 15.742032029750966], [73.68255615234375, 15.72088240269937]]]
                    }
                },
                {
                    "id": 2,
                    "type": "Feature",
                    "properties": {
                        "title": "Morjim"
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [[[73.970947265625, 15.640229310707543], [73.70864868164062, 15.666676458207187], [73.73062133789062, 15.60584290961007], [73.76907348632812, 15.496032414238634], [73.79791259765625, 15.45765111021037], [74.17556762695312, 15.653453312049928], [74.11239624023438, 15.650808580175482], [74.08355712890625, 15.627004454829198], [74.03823852539062, 15.620391706641964], [74.02313232421875, 15.60584290961007], [73.99566650390625, 15.609810865724066], [73.98056030273438, 15.623036831528264], [73.970947265625, 15.640229310707543]]]
                    }
                },
                {
                    "id": 3,
                    "type": "Feature",
                    "properties": {
                        "title": "Panaji"
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [[[73.79928588867188, 15.458974721921672], [73.78280639648438, 15.411319377980993], [74.256591796875, 15.257689080778698], [74.29229736328125, 15.277561419418248], [74.33486938476562, 15.292133271452533], [74.31838989257811, 15.326571801420842], [74.32113647460938, 15.37027407332405], [74.2840576171875, 15.391459757417053], [74.27444458007812, 15.420586551727165], [74.27993774414062, 15.441767110328934], [74.24835205078124, 15.485445179478607], [74.27993774414062, 15.534406591252042], [74.25384521484375, 15.566159129772904], [74.26071166992188, 15.613778745064309], [74.24972534179688, 15.625681922266882], [74.24423217773438, 15.665354182093287], [74.2236328125, 15.65609800971696], [74.2071533203125, 15.658742673171389], [74.1961669921875, 15.669320984759295], [74.190673828125, 15.681220930466825], [74.17144775390625, 15.675932151334584], [74.17694091796875, 15.654775665159686], [73.79928588867188, 15.458974721921672]]]
                    }
                }
            ]
        }
}

Answer 1

选择值后，您可以使用setPaintProperty和"match" expression来实现：

map.setPaintProperty('myLayer', 'fill-color', [
  'match',
  ['get', 'title'],
  layer.value, '#fbb03b',
  /* other */ '#ccc'
]);

请参阅此jsfiddle。

使用mapbox动态地为每个多边形着色吗？

1 个答案: