4

我想在交互式地图上显示一个圆圈的轮廓（无填充）但是，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"]
}];

我错过了什么还是这不可能？

4

3 回答 3

8

现在这是可能的，使用circle-opacity.

例如：

"paint": {
    "circle-opacity": 0,
    "circle-stroke-width": 1,
    "circle-stroke-color": #000
}
于 2017-03-02T06:59:58.447 回答
0

我在运行自定义颜色“匹配”和同时运行不透明度控件时遇到问题。

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

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

试图排除故障。

于 2020-11-11T21:11:07.913 回答
0

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

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

于 2016-04-21T16:54:05.447 回答