mapbox 线条发光效果 发光(如何实现 )?已实现

这种效果如何实现的
在这里插入图片描述
这个是我由两个图层做出效果 颜色之类的可以修改 (如果想发光更亮就可以用更多图层,更低的透明度,加上模糊程度,最关键的白线色图层要最后再加)

1:先创建一个颜色为绿色 宽度为8的图层 模糊程度可以设置为3

map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": arr
                }
            }
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#7DF9A6",
            "line-width": 8,
            "line-opacity": 0.4
        }
    });

2:创建一个颜色为白色 宽度为1的图层 (点睛之笔)

 map.addLayer({
        "id": "route2",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": arr
                }
            }
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#fff",
            "line-width": 1
        }
    });

更多内容个人博客

https://www.daidaibg.com/

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Mapbox行政区发光效果,可以按照以下步骤进行操作。首先,通过引用和所提到的方法,在Mapbox的地图上注册鼠标移入和移出事件,监听特定图层(layerId)上的鼠标事件。 在鼠标移入事件的回调函数中,你可以根据需要对多边形要素进行样式修改。可以使用边框渐变发光效果实现发光效果。可以通过改变边框的颜色和宽度,以及添加边框的阴影来达到发光效果。 具体实现方法可以参考引用中提到的文章,该文章详细介绍了如何实现多边形要素的发光效果。根据文章中的示例代码和说明,你可以使用CSS样式属性来修改多边形要素的样式,从而实现发光效果。 需要注意的是,具体的实现方法可能会因为你使用的地图库或框架的不同而有所差异。你可以根据你正在使用的地图库或框架的文档和示例代码进行相应的调整和实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [mapbox 鼠标经过图层高亮](https://blog.csdn.net/xzg199153/article/details/125295497)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Mapbox多边形光效晕影特效的实现](https://blog.csdn.net/lz5211314121/article/details/130359001)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值