Question

我正在使用Mapbox绘图在MapBox中创建多边形，如下所示：

 polyshapeoutzone = {
                id: 'polyOut',
                type: 'Feature',
                properties: {},
                geometry: { type: 'Polygon', coordinates: [mysql2poly(values[1])]}
            };

我希望能够动态更改多边形线和填充颜色（基本上我有2个多边形，我希望1为红色，另一个为绿色）。是否有一种简单的方法可以动态应用/更改给定多边形的颜色（我不关心顶点颜色或多边形颜色，当我选择它时，我只想设置每个多边形的线条和填充颜色和动态改变它们。）

Answer 1

＆＃13;

$(function() {
if (!mapboxgl.supported()) {
		    alert('Your browser does not support Mapbox GL');
		}
		var initMap = function(){
		mapboxgl.accessToken = 'pk.eyJ1IjoiamFtZXNwYWNrIiwiYSI6ImNqMDI5amtvZzAwNjIzM3QwYTZkbjk5c3MifQ.9jiCjBzXNG1IqvezOddnHA';

    	var map = new mapboxgl.Map({
		    container: 'multiple_poly',
		    		     style: 'mapbox://styles/mapbox/satellite-v9',
		     
		    center: [103.32718927498,2.0123503108086],
		    zoom: 15
		});

		map.on('load', function () {
			map.addSource("polygon_one", 
			{
			"type":"geojson",
			"data":{
				"type":"FeatureCollection",
					"features":[
						{"type":"Feature","properties":[],"geometry":{"coordinates":[[[73.045157852226,26.303612426466],[73.045501174966,26.291685547272],[73.051166000414,26.299611287628],[73.045157852226,26.303612426466]]],"type":"Polygon"}},
					]
				}
			});

			map.addSource("polygon_two", 
			{
			"type":"geojson",
			"data":{
				"type":"FeatureCollection",
					"features":[
						{"type":"Feature","properties":[],"geometry":{"coordinates":[[[73.01923698434584,26.286793889676773],[73.01726287851736,26.274403503526514],[73.02696174635398,26.277635905719848],[73.02972176719453,26.28963931883034],[73.01923698434584,26.286793889676773]]],"type":"Polygon"}},
					]
				}
			});
			map.addLayer({
		        "id": "quota-one",
		        "type": "line",
		        "source": "polygon_one",
		        "layout": {
	                  "line-cap": "round",
	                  "line-join": "round"
	                },
	                "paint": {
	                  "line-color": "red",
	                  "line-width": 3
	                },
		        "filter": ["==", "$type", "Polygon"]
		    });

		    map.addLayer({
		        "id": "quota-two",
		        "type": "line",
		        "source": "polygon_two",
		        "layout": {
	                  "line-cap": "round",
	                  "line-join": "round"
	                },
	                "paint": {
	                  "line-color": "green",
	                  "line-width": 3
	                },
		        "filter": ["==", "$type", "Polygon"]
		    });
			 
		    map.flyTo({center:[73.01923698434584,26.286793889676773],zoom: 13});
		});
	}
		initMap();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css" rel="stylesheet">


<div id="multiple_poly" style="width: 400px;height: 400px"></div>

＆＃13;

更改MabBox Draw Polygon的颜色

1 个答案: