vue+leaflet 区域划分_反向遮罩层

geojson在线生成器网址:(https://datav.aliyun.com/portal/school/atlas/area_selector)
点击前往阿里云geojson生成器
效果图:

实现下面效果,只需要把addSateLayer函数的调用取消掉就好了.

  //添加遮罩层代码function addMask() {var latlngs;var feature = geojsonMaskData['features'][0].geometry.coordinates;if (feature[0][0][0] instanceof Array) {latlngs = feature[0];} else {latlngs = feature;}// 创建外部主环（覆盖整个地图）const pNW = { lat: 90, lng: -180 };const pNE = { lat: 90, lng: 180 };const pSE = { lat: -90, lng: 180 };const pSW = { lat: -90, lng: -180 };const mainRing = [pNW,pNE,pSE,pSW,pNW, // 确保主环的顺序正确闭合];// 创建洞（需要保留的区域）const holes: any = [];latlngs.forEach((ring) => {const points = ring.map((v) => ({lat: Number(v[1]),lng: Number(v[0]),}));// 确保每个洞是一个闭合的环points.push(points[0]); // 闭合环holes.push(points);});// 将主环和洞合并为多边形数组（主环在第一层，洞在后续层）const polygonLayers = [mainRing, ...holes];// 创建多边形，直接传递多层数组(反向遮蔽层)const ahLayer = L.polygon(polygonLayers, {color: 'rgba(0,0,0)',fillColor: 'rgba(0,0,0)',fillOpacity: 0,className: 'maskLayer',});ahLayer.addTo(map.value);}

李沧区geojson数据

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"adcode": 370213,"name": "李沧区","center": [120.421236,36.160023],"centroid": [120.421969,36.185575],"childrenNum": 0,"level": "district","acroutes": [100000,370000,370200],"parent": {"adcode": 370200}},"geometry": {"type": "MultiPolygon","coordinates": [[[[120.343439,36.208342],[120.351532,36.202871],[120.353853,36.201732],[120.355992,36.201012],[120.358739,36.200332],[120.362336,36.196136],[120.368759,36.183053],[120.369296,36.180236],[120.369489,36.177758],[120.368855,36.176595],[120.366889,36.176199],[120.361554,36.176191],[120.359432,36.175638],[120.358251,36.174775],[120.356049,36.171161],[120.355894,36.169592],[120.355971,36.168181],[120.356903,36.16699],[120.356943,36.16606],[120.355876,36.164912],[120.351747,36.160893],[120.355703,36.159142],[120.37105,36.152447],[120.374222,36.151591],[120.377705,36.151284],[120.379207,36.1514],[120.382388,36.152589],[120.383489,36.152806],[120.383173,36.154553],[120.38851,36.154703],[120.392461,36.155015],[120.394156,36.154998],[120.395303,36.154744],[120.396996,36.154235],[120.398142,36.153689],[120.399727,36.152743],[120.400637,36.152051],[120.401783,36.150047],[120.402676,36.148026],[120.403111,36.146398],[120.403275,36.146111],[120.403406,36.145508],[120.403423,36.144692],[120.403787,36.143248],[120.404203,36.142352],[120.404715,36.141566],[120.404671,36.140713],[120.404386,36.139743],[120.405895,36.137644],[120.407483,36.136498],[120.409963,36.135371],[120.414361,36.134346],[120.416017,36.134382],[120.419129,36.134552],[120.419978,36.134358],[120.42115,36.135173],[120.425519,36.138107],[120.426143,36.13862],[120.426878,36.139318],[120.427694,36.140181],[120.428258,36.140859],[120.428872,36.141715],[120.429428,36.142737],[120.430047,36.144103],[120.430258,36.143948],[120.43217,36.143369],[120.433469,36.143036],[120.437489,36.142964],[120.439808,36.143019],[120.440126,36.143127],[120.440465,36.143438],[120.440577,36.143774],[120.44333,36.143627],[120.447703,36.143567],[120.449667,36.143559],[120.452386,36.143515],[120.452957,36.143564],[120.453267,36.143679],[120.454783,36.144804],[120.457111,36.14666],[120.458072,36.147523],[120.459118,36.148741],[120.460444,36.150129],[120.461585,36.150969],[120.462935,36.151888],[120.464303,36.152657],[120.466577,36.153829],[120.468903,36.154878],[120.469621,36.155128],[120.471395,36.155413],[120.472857,36.155602],[120.473289,36.155712],[120.474553,36.156189],[120.47494,36.15669],[120.475919,36.157216],[120.476922,36.157634],[120.477864,36.157742],[120.478712,36.157475],[120.479334,36.157446],[120.480061,36.157606],[120.480675,36.157814],[120.481323,36.157921],[120.482162,36.158203],[120.483174,36.158235],[120.483658,36.158455],[120.483857,36.158802],[120.484082,36.159638],[120.484324,36.159889],[120.485432,36.160361],[120.48568,36.160529],[120.485949,36.160948],[120.48608,36.161704],[120.486269,36.162192],[120.486675,36.162744],[120.487333,36.163317],[120.488077,36.163862],[120.49016,36.164792],[120.490835,36.165282],[120.491051,36.165651],[120.491145,36.166956],[120.491776,36.169134],[120.492176,36.170082],[120.492479,36.171268],[120.493809,36.175013],[120.494777,36.175486],[120.496497,36.175904],[120.498109,36.17646],[120.498632,36.176675],[120.498867,36.177122],[120.499515,36.177835],[120.501341,36.178501],[120.502783,36.17891],[120.50337,36.179301],[120.503691,36.179877],[120.503847,36.180743],[120.503303,36.182677],[120.501989,36.18432],[120.501746,36.185144],[120.502412,36.185423],[120.503026,36.185853],[120.504099,36.187632],[120.504401,36.188282],[120.504745,36.188694],[120.50588,36.189222],[120.506813,36.189858],[120.508212,36.191127],[120.508083,36.191456],[120.507323,36.192029],[120.507133,36.192284],[120.507002,36.192746],[120.506979,36.193629],[120.506813,36.194238],[120.506779,36.195529],[120.506883,36.196424],[120.507004,36.196974],[120.507185,36.197351],[120.507662,36.197937],[120.508016,36.198596],[120.509322,36.200645],[120.509857,36.201582],[120.510013,36.203426],[120.509997,36.204336],[120.510403,36.204909],[120.510792,36.206141],[120.510757,36.206734],[120.511007,36.208074],[120.511225,36.208771],[120.510653,36.208776],[120.508976,36.209057],[120.508043,36.209336],[120.506677,36.209852],[120.505838,36.209878],[120.505519,36.209751],[120.505346,36.209376],[120.505173,36.209342],[120.504765,36.209594],[120.504092,36.209853],[120.503036,36.210087],[120.502061,36.210425],[120.499847,36.210926],[120.498412,36.211429],[120.497778,36.211474],[120.49568,36.210777],[120.493433,36.210846],[120.492491,36.211759],[120.492187,36.212165],[120.492249,36.212643],[120.492689,36.213338],[120.492474,36.213622],[120.490917,36.214167],[120.488869,36.214238],[120.487182,36.214986],[120.485558,36.215552],[120.484492,36.215754],[120.484458,36.215264],[120.484175,36.214791],[120.483879,36.21458],[120.481424,36.213403],[120.480992,36.212665],[120.479876,36.211765],[120.479452,36.211052],[120.478891,36.210421],[120.478025,36.209924],[120.477238,36.209131],[120.475308,36.207681],[120.472273,36.204695],[120.471046,36.203864],[120.468562,36.20297],[120.466998,36.202031],[120.465907,36.201557],[120.465068,36.20101],[120.464358,36.200923],[120.463648,36.200972],[120.462136,36.201827],[120.461332,36.202078],[120.461028,36.202063],[120.460197,36.201812],[120.459279,36.201307],[120.459056,36.201048],[120.458596,36.199744],[120.45774,36.199793],[120.455879,36.199567],[120.45464,36.199626],[120.453984,36.199758],[120.453076,36.200201],[120.452764,36.200557],[120.452487,36.201239],[120.452322,36.201822],[120.452279,36.202681],[120.452183,36.202853],[120.451196,36.203276],[120.450046,36.204196],[120.448653,36.204602],[120.447442,36.205787],[120.445678,36.206962],[120.444045,36.20773],[120.443311,36.208045],[120.442344,36.208195],[120.440272,36.208327],[120.4395,36.208207],[120.438962,36.207577],[120.437507,36.205345],[120.433385,36.204589],[120.431479,36.204327],[120.429659,36.204036],[120.425742,36.203966],[120.425715,36.204757],[120.424695,36.20621],[120.424599,36.206852],[120.424668,36.207417],[120.424052,36.208113],[120.423646,36.209074],[120.423481,36.209998],[120.423473,36.210711],[120.424728,36.212863],[120.425128,36.213177],[120.426185,36.21367],[120.42693,36.214128],[120.428023,36.214969],[120.427407,36.216068],[120.426843,36.216091],[120.426516,36.216644],[120.426143,36.216788],[120.425891,36.2178],[120.425683,36.21805],[120.42595,36.218699],[120.425856,36.218801],[120.425346,36.218605],[120.423889,36.218718],[120.423429,36.218431],[120.422763,36.218349],[120.421487,36.218708],[120.421564,36.219221],[120.421437,36.219683],[120.421652,36.219844],[120.421687,36.220223],[120.420819,36.220443],[120.419963,36.220794],[120.419693,36.221072],[120.419755,36.221983],[120.419676,36.222241],[120.419156,36.222682],[120.417414,36.222392],[120.417143,36.223002],[120.417154,36.223845],[120.416833,36.224752],[120.416321,36.225119],[120.415237,36.225173],[120.414943,36.225541],[120.414873,36.226052],[120.414587,36.226212],[120.413857,36.2261],[120.413589,36.226188],[120.413337,36.226449],[120.413164,36.226863],[120.413302,36.228163],[120.41353,36.228792],[120.413443,36.228908],[120.411655,36.228824],[120.411299,36.229028],[120.410987,36.228936],[120.410875,36.228723],[120.41063,36.228779],[120.410289,36.230247],[120.409983,36.231705],[120.407226,36.231911],[120.406137,36.2318],[120.403673,36.231139],[120.402589,36.230779],[120.400115,36.230316],[120.397929,36.230439],[120.39733,36.230777],[120.3966,36.230821],[120.394856,36.230539],[120.396038,36.232075],[120.394066,36.231794],[120.39392,36.232644],[120.393086,36.232532],[120.393094,36.232325],[120.391298,36.231136],[120.390645,36.234162],[120.389613,36.233959],[120.389177,36.234154],[120.388552,36.234159],[120.388344,36.235078],[120.388302,36.236519],[120.387762,36.236537],[120.387241,36.23687],[120.387147,36.237682],[120.387035,36.237795],[120.385323,36.238434],[120.383725,36.238435],[120.383238,36.23836],[120.382804,36.238451],[120.382448,36.238248],[120.382639,36.237444],[120.381914,36.237422],[120.380545,36.237508],[120.379261,36.237471],[120.377618,36.237495],[120.377576,36.237622],[120.374734,36.237587],[120.374204,36.237558],[120.374004,36.237135],[120.372639,36.237143],[120.372485,36.237057],[120.371814,36.236296],[120.371485,36.235403],[120.371485,36.234939],[120.371225,36.234699],[120.369538,36.234209],[120.368772,36.233943],[120.369442,36.231504],[120.37084,36.231808],[120.37084,36.229927],[120.370798,36.229678],[120.370293,36.229143],[120.368633,36.229002],[120.367964,36.228639],[120.367876,36.228011],[120.367599,36.227786],[120.366278,36.22742],[120.365617,36.227148],[120.36507,36.227104],[120.364835,36.226896],[120.364835,36.226646],[120.365184,36.226506],[120.365592,36.225861],[120.365879,36.225613],[120.366451,36.225376],[120.366451,36.225269],[120.365426,36.223841],[120.363966,36.223983],[120.363583,36.223766],[120.363096,36.223846],[120.361829,36.223684],[120.360273,36.223542],[120.358784,36.223247],[120.35763,36.223161],[120.356055,36.223318],[120.355386,36.223648],[120.35403,36.223965],[120.353934,36.223669],[120.354333,36.223166],[120.349196,36.224231],[120.343439,36.208342]]]]}}]
}

页面完整代码

<template><div class="container"><!--  --><!-- <div class="mypanel"> </div> --><divstyle="width: 1920px;height: 1080px;background: url('/src/assets/img/资源展示6.jpg') 0% 0% / 100% 100% rgb(30, 30, 30);transform: scale(1, 1);transform-origin: 0px 0px;"><divid="map"tabindex="0"style="transform: perspective(1000px) rotateX(32deg) translateZ(222px) translateY(-50px)"></div></div><div@click="onTextBtn"style="position: absolute;top: 0;left: 0;width: 200px;height: 200px;border: 1px solid red;z-index: 99;color: red;">点击测试</div></div>
</template><script lang="ts" setup>import { ref, onMounted } from 'vue';import * as L from 'leaflet';import geojsonMaskData from './李沧区.json';const map = ref();const lng = ref(120.55971);const lat = ref(36.21125);let clickTimers: any = []; //存储区分点击地图双击和单击的定时器let baseMapLayerGroup: any = null; //地图图层组let tdtMapKey = ''; //天地图key，需要到天地图申请onMounted(() =>{init();});function init() {initMap();}function onTextBtn() {console.log('点击测试');}//async function initMap() {map.value = L.map('map', {crs: L.CRS.EPSG4326, //坐标系,在未知坐标系情况下，不要修改这里center: [lat.value, lng.value], //地图中心120.538900,36.189430// maxNativeZoom: 16, //地图瓦片放大最大级别// minNativeZoom: 5, //地图瓦片缩小最小级别maxZoom: 21, //地图放大最大级别minZoom: 5, //地图缩小最小级别zoom: 6, //地图当前级别attributionControl: false, //版本控件zoomControl: false, //地图缩放控件closePopupOnClick: true, //点击地图关闭popup弹窗trackResize: true, //地图根据浏览器更新boxZoom: true, //是否可以在按住shift拖地鼠标把地图缩放到指定的矩形区域doubleClickZoom: true, //是否双击放大地图dragging: true, //地图是否可以拖拽keyboard: true, //键盘是否可以操作地图keyboardPanDelta: 80, //键盘方向键按下时，地图平移像素scrollWheelZoom: true, //鼠标滚轮操作地图缩放wheelDebounceTime: 40, //鼠标滚轮触发限制，不得超过40毫秒一次wheelPxPerZoomLevel: 60, //鼠标滚动一次，地图滚动像素});//地图单击事件map.value.on('click', (e) => {//区分单击和双击，在单击添加延时，如果在300毫秒中触发了双击事件，则清除定时器，不触发单击事件let timer = window.setTimeout(() => {console.log(e.latlng, 'click');}, 300);clickTimers.push(timer);});//地图双击事件map.value.on('dblclick', (e) => {//判断定时器是否有数据，有则清除，只触发双击事件if (clickTimers.length > 0) {clickTimers.forEach((timer) => {window.clearTimeout(timer);});clickTimers = [];}console.log(e.latlng, 'dblclick');});await addSateLayer();await addVideoLayer();addMask();}/**底图*/function addSateLayer() {let layerType = 'img';let labelType = 'cia';if (!baseMapLayerGroup) {baseMapLayerGroup = new L.LayerGroup();baseMapLayerGroup.addTo(map.value);} else {baseMapLayerGroup.clearLayers();}var wMap = L.tileLayer(`https://t{s}.tianditu.gov.cn/DataServer?T=${layerType}_c&x={x}&y={y}&l={z}&tk=${tdtMapKey}`,{minZoom: 5,maxZoom: 21,maxNativeZoom: 17,minNativeZoom: 5,subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],zoomOffset: 1,tileSize: 256,},);var lMap = L.tileLayer(`https://t{s}.tianditu.gov.cn/DataServer?T=${labelType}_c&x={x}&y={y}&l={z}&tk=${tdtMapKey}`,{// subdomains: [0, 1, 2, 3, 4, 5, 6, 7],subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],transparent: true,zIndex: 3,zoomOffset: 1,minZoom: 5,maxZoom: 21,tileSize: 256,},);baseMapLayerGroup.addLayer(wMap);baseMapLayerGroup.addLayer(lMap);}//栅格图function addVideoLayer() {try {let bounds = L.latLngBounds([36.152447, 120.343439], [36.238434, 120.511225]); //根据对角坐标创建一个矩形区域L.imageOverlay('/src/assets/images/laoshan3d.png', bounds).addTo(map.value);} catch (error) {console.error('添加图层失败', error);}}//添加遮罩层代码function addMask() {var latlngs;var feature = geojsonMaskData['features'][0].geometry.coordinates;if (feature[0][0][0] instanceof Array) {latlngs = feature[0];} else {latlngs = feature;}// 创建外部主环（覆盖整个地图）const pNW = { lat: 90, lng: -180 };const pNE = { lat: 90, lng: 180 };const pSE = { lat: -90, lng: 180 };const pSW = { lat: -90, lng: -180 };const mainRing = [pNW,pNE,pSE,pSW,pNW, // 确保主环的顺序正确闭合];// 创建洞（需要保留的区域）const holes: any = [];latlngs.forEach((ring) => {const points = ring.map((v) => ({lat: Number(v[1]),lng: Number(v[0]),}));// 确保每个洞是一个闭合的环points.push(points[0]); // 闭合环holes.push(points);});// 将主环和洞合并为多边形数组（主环在第一层，洞在后续层）const polygonLayers = [mainRing, ...holes];// 创建多边形，直接传递多层数组(反向遮蔽层)const ahLayer = L.polygon(polygonLayers, {color: 'rgba(0,0,0)',fillColor: 'rgba(0,0,0)',fillOpacity: 0,className: 'maskLayer',});ahLayer.addTo(map.value);}
</script>
<style lang="scss" scoped>.mypanel {position: absolute;z-index: 1; /* 普通正数层级 */width: 1920px;height: 1080px;left: 0;top: 0;background: transparent;display: none;}body {margin: 0;padding: 0;height: 100%;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;}.container {height: 100%;}#map {width: 1920px;height: 1080px;background: transparent;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;border: 0;z-index: 0;}
</style>