2017-06-16 184 views
1

我通過從MSSQL數據庫中拉出座標來放置標記。Mapbox標記符號顏色變化

我想使標記物(圓圈)不同的顏色(紅色[#FF0000]或藍色[#0000FF]根據在數據庫中的另一個變量,但所有的標誌物是棕色(參見源,下面的鏈接) 。

這裏是一個例子:

map.addSource("markers", { 
    "type": "geojson", 
    "data": { 
     "type": "FeatureCollection", 
     "features": [ 
     { 
      "type": "Feature", 
      "geometry": { 
          "type": "Point", 
          "coordinates": [-98.00371, 38.65447] 
         }, 
      "properties": { 
          "description": "<strong>UTEP 5560</strong> 
          <p>Ellsworth Co., Kansas: 38.65447, -98.00371: : JOHNSON, JD</p>", 
          "marker-size": "small", 
          "marker-color": "#0000ff", 
          "marker-symbol": "circle" 
          } 
},.... 

map.addLayer({ 
    "id": "markers", 
    "type": "symbol", 
    "source": "markers", 
    "layout": { 
    "icon-image": "{marker-symbol}-11", 
    "icon-allow-overlap": true, 
    "text-field": "{title}", 
    "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], 
    "text-offset": [0, 0.6], 
    "text-anchor": "top" 
} 
}); 

完整的源代碼可以在這裏看到:http://webapps.fhsu.edu/ksfaunatest/account.aspx?o=33&t=75

回答

0

您必須使用mapbox圈層,而不是標層,這樣,您可以做數據驅動的造型,給基於以GeoJSON

下面的「MYTYPE」屬性的顏色是圈層的樣品

map.addLayer({ 
    'id': 'mapid', 
    'type': 'circle', 
    'source': source, 
    'paint': { 
     'circle-radius': 2, 
     'circle-color': { 
      property: 'mytype', // geojson property based on which you want too change the color 
      type: 'categorical', 
      stops: [ 
       ['type1', '#fbb03b'], 
       ['type2', '#223b53'], 
       ['type3', '#e55e5e'] 
    } 
}); 

訪問此鏈接的現場example

0

上面的答案使用分類層屬性,你可以用顏色取決於例如你的圈子該類別使用不同的站點。

我想你只是想使用你在geojson特徵屬性中定義的顏色。然後,你可以使用層標識屬性是這樣的:

map.addLayer({ 
 
    id: 'layerId', 
 
    source: 'sourceName', 
 
    type: 'circle', 
 
    paint: { 
 
     'circle-radius': 2, 
 
     'circle-color': { 
 
     type: 'identity', 
 
     property: 'marker-color', 
 
     }, 
 
    }, 
 
    });

另見:https://www.mapbox.com/mapbox-gl-js/style-spec/#function-type