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

跳跳的小古风

已于 2023-09-05 14:10:48 修改

阅读量1.7k

点赞数 2

分类专栏：地图 Vue 文章标签： javascript 开发语言 ecmascript

于 2022-07-02 14:02:07 首次发布

本文链接：https://blog.csdn.net/weixin_43787651/article/details/125571188

版权

Vue 同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

地图

6 篇文章 6 订阅

订阅专栏

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

初始效果
在这里插入图片描述

需求效果
在这里插入图片描述


       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',
			},
		});