Mapbox标记符号颜色更改

时间:2017-06-16 14:06:19

标签: javascript mapbox

我通过从MSSQL数据库中提取坐标来放置标记。

我想将标记(圆圈)设置为不同的颜色(红色[#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

2 个答案:

答案 0 :(得分:1)

您必须使用地图框圆圈图层而不是标记图层,然后您可以执行数据驱动样式并根据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

答案 1 :(得分:0)

上面的答案使用了分类图层属性,您可以根据此属性为圈子着色。通过使用不同的停止类别。

我想您只想使用在geojson要素属性中定义的颜色。然后你可以像这样使用层标识属性:

Settings → Build, Execution, Deployment → Instant Run and uncheck Enable Instant Run

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