Question

我想在交互式地图上显示圆圈的轮廓（无填充）但是，mapbox-gl-js中的绘画选项似乎仅限于填充。 https://www.mapbox.com/mapbox-gl-style-spec/#layers-circle

var styles = [{
    "id": 'points',
    "interactive": true,
    "type": "circle",
    "source": "geojson",
    "paint": {
        "circle-radius": 5,
        "circle-color": "#000
    },
    "filter": ["in", "$type", "Point"]
}, {
    "type": "line",
    "source": "geojson",
    "layout": {
      "line-cap": "round",
      "line-join": "round"
    },
    "paint": {
      "line-color": "#000",
      "line-width": 2.5
    },
    "filter": ["in", "$type", "LineString"]
}];

我错过了什么或者这是不可能的？

Answer 1

现在可以使用circle-opacity。

E.g：

"paint": {
    "circle-opacity": 0,
    "circle-stroke-width": 1,
    "circle-stroke-color": #000
}

Answer 2

目前无法实现。目前的顶级解决方案似乎是将两个大小略有不同的圆圈分层。

https://github.com/mapbox/mapbox-gl-js/issues/1713 https://github.com/mapbox/mapbox-gl-style-spec/issues/379

Answer 3

我在运行自定义颜色“匹配”时遇到麻烦，并且在同时运行不透明度控件时遇到麻烦。

我可以同时工作，但不能同时工作。参见下面的代码。

var coorAddresses = [ [ -75.7040473, 45.418067,"Medium" ], [-75.7040473, 45.418067, "Medium"], [-79.32930440000001, 43.7730495, "Unknown"]]


$.getJSON(coodAddresses, function(data) {
                  for(var itemIndex in data) {
                    // push new feature to the collection
                    featureCollection.push({
                                        "type": "Feature",
                                        "geometry": {
                                                    "type": "Point",
                                                    "coordinates": [data[itemIndex][0], data[itemIndex][1]]
                                                    },
                                        "properties": {
                                                      "size_by": data[itemIndex][2],
                                                      "color_by": data[itemIndex][2]

                                                    },
                                            });
                                           }
                                        });

map.on('load', function () {
                map.addLayer({
                  "id": "points",
                  "type": "circle",
                  "source": {
                  "type": "geojson",
                    "data": {
                      "type": "FeatureCollection",
                      "features": featureCollection
                    }
                  },
                  "paint": {
                    "circle-color": [
                          'match',
                          ['get', 'size_by'],
                          'Easy',
                          '#e4f400',
                          'Medium',
                          '#f48a00',
                          'Unknown',
                          '#6af400',
                          /* other */ '#00e4f4'
                          ],
                    "circle-radius": [
                          'match',
                          ['get', 'size_by'],
                          'Easy',
                          4,
                          'Medium',
                          7,
                          'Unknown',
                          2,
                          /* other */ 1000
                        ],

                      // "circle-opacity": 0, // color does not show if i uncomment these lines
                      // "circle-stroke-width": 1,  // do not get desired 'hollow' circle unless these lines run
                }});

尝试进行故障排除。

仅颜色圆形地图框的边缘gl js

3 个答案: