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',
			},
		});
  • 蒙版边界数据格式

  • 蒙版遮罩数据格式

总结

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

相关文章

  • vite获取所有环境变量(env)的实现方法

    vite获取所有环境变量(env)的实现方法

    本文主要介绍了vite获取所有环境变量(env)的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06
  • Vue3无痛迁移到Lyt.js的实现示例

    Vue3无痛迁移到Lyt.js的实现示例

    本文主要介绍了Vue3无痛迁移到Lyt.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2026-04-04
  • Vue中如何优雅的捕获 Promise 异常详解

    Vue中如何优雅的捕获 Promise 异常详解

    这篇文章主要为大家介绍了Vue中如何优雅的捕获 Promise 异常详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue基础ESLint Prettier配置教程详解

    vue基础ESLint Prettier配置教程详解

    这篇文章主要介绍了vue基础ESLint Prettier配置教程详解,本文使用VsCode + Vue + ESLint + Prettier 实现代码格式规范 + 保存自动修复代码js+vue
    2022-07-07
  • Vue3中如何使用Three.js详解(包括各种样例、常见场景、问题及解决方案)

    Vue3中如何使用Three.js详解(包括各种样例、常见场景、问题及解决方案)

    Three.js是一个常见的需求,Three.js是一个用于在浏览器中创建和显示动画3D计算机图形的JavaScript库,这篇文章主要介绍了Vue3中如何使用Three.js的相关资料,包括各种样例、常见场景、问题及解决方案,需要的朋友可以参考下
    2025-04-04
  • Vue中的作用域CSS和CSS模块的区别

    Vue中的作用域CSS和CSS模块的区别

    这篇文章主要介绍了Vue中的作用域CSS和CSS模块的区别,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • Vue3造轮子之打包构建配置二级目录方式

    Vue3造轮子之打包构建配置二级目录方式

    这篇文章主要介绍了Vue3造轮子之打包构建配置二级目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue-cli4如何打包静态资源到指定目录

    vue-cli4如何打包静态资源到指定目录

    这篇文章主要介绍了vue-cli4打包静态资源到指定目录方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue函数input输入值请求时延迟1.5秒请求问题

    vue函数input输入值请求时延迟1.5秒请求问题

    这篇文章主要介绍了vue函数input输入值请求时延迟1.5秒请求问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue中使用go()和back()两种返回上一页的区别说明

    vue中使用go()和back()两种返回上一页的区别说明

    这篇文章主要介绍了vue中使用go()和back()两种返回上一页的区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论