2017-06-16 180 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