Changer la couleur de MabBox Dessiner Polygon

Question

Je crée des polygones dans MapBox en utilisant MapBox dessiner comme suit:

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

Je veux être en mesure de changer la ligne de polygone et la couleur de remplissage à la volée (au fond, j'ai 2 polygones, je veux que 1 soit rouge et l'autre vert). Existe-t-il un moyen simple d'appliquer/changer les couleurs à la volée pour un polygone donné (je ne me soucie pas des couleurs de vertex ou de la couleur du polygone quand il est sélectionné, je veux juste pouvoir définir la couleur de chaque polygone changez-les dynamiquement).

Answer 1

$(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>