时间戳

首页 > 解决方案 > 如何在mapbox gl中为圆形类型添加框阴影？

javascript - 如何在mapbox gl中为圆形类型添加框阴影？

问题描述

我有以下风格：

   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)”的框阴影值添加到圆圈中以赋予它们阴影效果。有什么办法可以做到吗？

标签： javascriptreactjsmapboxmapbox-gl-js

解决方案

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

像这样的东西：

{
    "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

希望对你有效。

推荐阅读