2017-08-29 171 views
0

我使用Mapbox得出如下的MapBox创建多边形:改变颜色绘制多边形

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

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

回答

0

$(function() { 
 
if (!mapboxgl.supported()) { 
 
\t \t  alert('Your browser does not support Mapbox GL'); 
 
\t \t } 
 
\t \t var initMap = function(){ 
 
\t \t mapboxgl.accessToken = 'pk.eyJ1IjoiamFtZXNwYWNrIiwiYSI6ImNqMDI5amtvZzAwNjIzM3QwYTZkbjk5c3MifQ.9jiCjBzXNG1IqvezOddnHA'; 
 

 
    \t var map = new mapboxgl.Map({ 
 
\t \t  container: 'multiple_poly', 
 
\t \t  \t \t  style: 'mapbox://styles/mapbox/satellite-v9', 
 
\t \t  
 
\t \t  center: [103.32718927498,2.], 
 
\t \t  zoom: 15 
 
\t \t }); 
 

 
\t \t map.on('load', function() { 
 
\t \t \t map.addSource("polygon_one", 
 
\t \t \t { 
 
\t \t \t "type":"geojson", 
 
\t \t \t "data":{ 
 
\t \t \t \t "type":"FeatureCollection", 
 
\t \t \t \t \t "features":[ 
 
\t \t \t \t \t \t {"type":"Feature","properties":[],"geometry":{"coordinates":[[[73.045157852226,26.303612426466],[73.045501174966,26.291685547272],[73.051166000414,26.299611287628],[73.045157852226,26.303612426466]]],"type":"Polygon"}}, 
 
\t \t \t \t \t ] 
 
\t \t \t \t } 
 
\t \t \t }); 
 

 
\t \t \t map.addSource("polygon_two", 
 
\t \t \t { 
 
\t \t \t "type":"geojson", 
 
\t \t \t "data":{ 
 
\t \t \t \t "type":"FeatureCollection", 
 
\t \t \t \t \t "features":[ 
 
\t \t \t \t \t \t {"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"}}, 
 
\t \t \t \t \t ] 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t map.addLayer({ 
 
\t \t   "id": "quota-one", 
 
\t \t   "type": "line", 
 
\t \t   "source": "polygon_one", 
 
\t \t   "layout": { 
 
\t     "line-cap": "round", 
 
\t     "line-join": "round" 
 
\t     }, 
 
\t     "paint": { 
 
\t     "line-color": "red", 
 
\t     "line-width": 3 
 
\t     }, 
 
\t \t   "filter": ["==", "$type", "Polygon"] 
 
\t \t  }); 
 

 
\t \t  map.addLayer({ 
 
\t \t   "id": "quota-two", 
 
\t \t   "type": "line", 
 
\t \t   "source": "polygon_two", 
 
\t \t   "layout": { 
 
\t     "line-cap": "round", 
 
\t     "line-join": "round" 
 
\t     }, 
 
\t     "paint": { 
 
\t     "line-color": "green", 
 
\t     "line-width": 3 
 
\t     }, 
 
\t \t   "filter": ["==", "$type", "Polygon"] 
 
\t \t  }); 
 
\t \t \t 
 
\t \t  map.flyTo({center:[73.01923698434584,26.286793889676773],zoom: 13}); 
 
\t \t }); 
 
\t } 
 
\t \t initMap(); 
 
});
<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>