Mapbox多边形光效晕影特效的实现

《WebGIS快速开发教程》写好啦_WebGIS小智的博客-CSDN博客

相信很多大屏需要展示行政区的发光效果,像下图这样的:

 

 这相比普通的多边形样式,边界有了渐变发光的效果,那么这篇章交给大家如何实现这样一个效果,让你的行政区,地块之类的多边形要素展示成发光的效果。

我们不依赖底层的webgl技术,也不用涉及到什么着色器的概念,我们仅仅需要知道一个光学或者美术方面的知识即可。

那么在讲述原理之前我们首先需要明白一件事,发光的两个要素,其实发光是一个视觉的概念,当有一个颜色相对于另一个颜色是亮色的时候,我们的眼睛就觉得是在发光,因此,我们需要两个同一色系的明亮和深色的两种颜色,具体可以参照我之前的文章:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【优质项目推荐】 1、项目代码均经过严格本地测试,运行OK,确保功能稳定后才上传平台。可放心下载并立即投入使用,若遇到任何使用问题,随时欢迎私信反馈与沟通,博主会第一时间回复。 2、项目适用于计算机相关专业(如计科、信息安全、数据科学、人工智能、通信、物联网、自动化、电子信息等)的在校学生、专业教师,或企业员工,小白入门等都适用。 3、该项目不仅具有很高的学习借鉴价值,对于初学者来说,也是入门进阶的绝佳选择;当然也可以直接用于 毕设、课设、期末大作业或项目初期立项演示等。 3、开放创新:如果您有一定基础,且热爱探索钻研,可以在此代码基础上二次开发,进行修改、扩展,创造出属于自己的独特应用。 欢迎下载使用优质资源!欢迎借鉴使用,并欢迎学习交流,共同探索编程的无穷魅力! 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip
要在Mapbox GL JS的符号层(symbol layer)中为图片增加阴影和立体效果,可以使用符号层的`paint`属性来定义阴影和立体效果。下面是一个示例,演示如何为符号层的图片添加阴影和立体效果: ```javascript map.on('load', function() { map.addLayer({ id: 'symbols', type: 'symbol', source: { type: 'geojson', data: { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Point', coordinates: [longitude, latitude] // 设置坐标 }, properties: { icon: 'your-icon-url', // 设置图片的URL size: 1 // 设置图片的大小 } }, // 其他要素... ] } }, layout: { 'icon-image': ['get', 'icon'], 'icon-size': ['get', 'size'] }, paint: { 'icon-opacity': 0.8, // 设置图片的透明度 'icon-translate': [0, 2], // 设置图片的垂直偏移,用于创建立体效果 'icon-translate-anchor': 'map', // 设置垂直偏移的锚点为地图 'icon-shadow-color': '#000000', // 设置阴影颜色 'icon-shadow-opacity': 0.5, // 设置阴影透明度 'icon-shadow-blur': 5 // 设置阴影模糊程度 } }); }); ``` 在上述示例中,我们通过设置符号层的`paint`属性来为图片添加阴影和立体效果。具体来说,我们使用`icon-opacity`属性设置图片的透明度,使用`icon-translate`属性设置图片的垂直偏移,用于创建立体效果。我们还使用`icon-translate-anchor`属性将垂直偏移的锚点设置为地图。此外,我们使用`icon-shadow-color`属性设置阴影的颜色,使用`icon-shadow-opacity`属性设置阴影的透明度,使用`icon-shadow-blur`属性设置阴影的模糊程度。 您可以根据需要调整阴影和立体效果的属性值,以实现不同的效果。请确保将`your-icon-url`替换为您自己的图标URL,并根据需要设置其他符号图层的属性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WebGIS小智

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值