如何将框阴影添加到 mapbox gl 中的圆形类型？

Question

我有以下款式：

   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"]
}];

我需要将“0 9px 2px 0 rgba(0,0,0,0.20)”的框阴影值添加到圆圈中以给它们一个阴影 effect.Is 我有什么办法可以做到吗？

Answer 1

您可以添加另一个图层并制作半径更大的阴影并设置模糊。

像这样的东西：

{
    "id": "points_shadow",
    "interactive": true,
    "type": "circle",
    "source": "geojson",
    "paint": {
        "circle-radius": 10,
        "circle-color": "#000",
        "circle-blur": 0.4
    },
    "filter": ["in", "$type", "Point"]
}

或者您应该使用 3D 坐标并使用 fill-extrusion

设置样式

希望对你有用。

如何将框阴影添加到 mapbox gl 中的圆形类型？

How to add box shadow to a circle type in mapbox gl?

javascript

mapbox

reactjs

mapbox-gl-js