vue如何使用mapbox对当前行政区划进行反选遮罩

 更新时间:2023年10月25日 08:43:12   作者:跳跳的小古风  
这篇文章主要介绍了vue如何使用mapbox对当前行政区划进行反选遮罩问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

使用mapbox对当前行政区划进行反选遮罩

需求

给指定区划以外的地方添加蒙版遮罩

  • 初始效果

  • 需求效果

       map.addLayer({
			//蒙版边界
			id: 'mb-line',
			type: 'line',
			source: {
				type: 'geojson',
				data:reData, //区划的面数据
			},
			paint: {
				'line-color': 'rgba(100,149,237,0.8)',
				"line-width": 8
			},
			layout: {
				visibility: 'visible',
			},
		});
		map.addLayer({
			//蒙版图层   //通过边界数据反选 达到挖洞效果
			id: 'mb-tag',
			type: 'fill',
			source: {
				type: 'geojson',
				data: {
					type: 'Feature',
					geometry: {
						type: 'Polygon',
						coordinates: [
							[
							// 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
								[-180, 90],
								[180, 90],
								[180, -90],
								[-180, -90],
							],
							// 第 1个孔 
							//例如:[
                            //  [31.4566,121.2671],
                            //  [31.3481,121.2382],
                            //  [31.3934,121.3659]
                            // ],
							//这里从世界地图挖掉指定区划的面数据,
							//我们将原来的面数据处理一样
							//let mbData = results.geometry.coordinates[0].flat(1);
							//取面数据 coordinates的第一层并拉平 形成例如的经纬度数组
							mbData,
						],
					},
				},
			},
			paint: {
				'fill-color': 'rgba(200,202,199,.68)',
				// 'fill-opacity': 1 /* 透明度 */,
			},
			layout: {
				visibility: 'visible',
			},
		});
  • 蒙版边界数据格式

  • 蒙版遮罩数据格式

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue+element-ui实现表格编辑的三种实现方式

    vue+element-ui实现表格编辑的三种实现方式

    这篇文章主要介绍了vue+element-ui实现表格编辑的三种实现方式,主要有表格内部显示和编辑切换,通过弹出另外一个表格编辑和直接通过样式控制三种方式,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 将vue项目打包成电脑端应用.exe的完整步骤

    将vue项目打包成电脑端应用.exe的完整步骤

    最近接了个小活,其中甲方要求把vue项目打包成exe安装在windows上,其中有也会出现一些小问题和优化,特此记录,这篇文章主要给大家介绍了关于将vue项目打包成电脑端应用.exe的完整步骤,需要的朋友可以参考下
    2023-10-10
  • vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)

    vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)

    这篇文章主要介绍了vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue插件打包与发布的方法示例

    Vue插件打包与发布的方法示例

    插件功能开发完成后,若需要发布到公共组件库中(例如:npmjs),需要对插件进行打包并发布,这篇文章主要介绍了Vue插件打包与发布的方法示例,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 使用WebStorm开发Vue3项目详细教程

    使用WebStorm开发Vue3项目详细教程

    这篇文章主要介绍了使用WebStorm开发Vue3项目的相关资料,本文介绍了在WebStorm中使用Vue3、TypeScript、Sass开发项目的配置过程,包括版本兼容性问题、项目搭建、依赖包安装、代码检查工具配置、运行和调试等步骤,需要的朋友可以参考下
    2024-11-11
  • vue3循环设置ref并获取的解决方案

    vue3循环设置ref并获取的解决方案

    我们在平时做业务的时候,父子组件通信会经常用到ref,这篇文章主要给大家介绍了关于vue3循环设置ref并获取的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • 浅谈Vue插槽实现原理

    浅谈Vue插槽实现原理

    vue.js的灵魂是组件,而组件的灵魂是插槽。借助于插槽,我们能最大程度上实现组件复用。本文主要是对插槽的实现机制进行详细概括总结,在某些场景中,有一定的用处
    2021-06-06
  • vue学习笔记之过滤器的基本使用方法实例分析

    vue学习笔记之过滤器的基本使用方法实例分析

    这篇文章主要介绍了vue学习笔记之过滤器的基本使用方法,结合实例形式分析了vue.js过滤器的基本功能、用法与操作注意事项,需要的朋友可以参考下
    2020-02-02
  • Vue使用Swiper的案例详解

    Vue使用Swiper的案例详解

    这篇文章主要介绍了Vue使用Swiper的案例详解,主要包括引入swiper,创建轮播图组件CarouselContainer.vue的详细代码,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Vue.js中的全局错误处理函数errorHandler用法

    Vue.js中的全局错误处理函数errorHandler用法

    这篇文章主要介绍了Vue.js中的全局错误处理函数errorHandler用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06

最新评论