仅给圆形 mapbox gl js 的边缘上色

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

目前不可能。当前的最佳解决方法似乎是将两个大小略有不同的圆分层。

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

Answer 2

现在可以使用 circle-opacity。

例如：

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

Answer 3

我在运行自定义颜色 'match' 和不透明度控制运行同时遇到问题。

我可以让两者同时工作，但不能同时进行。请参阅下面的代码。

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
                }});

正在尝试解决问题。

仅给圆形 mapbox gl js 的边缘上色

Color only the edge of a circle mapbox gl js

mapbox-gl-js