leaflet 区域划分_遮罩层
geojson在线生成器网址:(https://datav.aliyun.com/portal/school/atlas/area_selector)
点击前往阿里云geojson生成器
效果图:
实现下面效果,只需要把addSateLayer函数的调用取消掉就好了.
bash
//添加遮罩层代码
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数据
json
{
"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
]
]
]
]
}
}
]
}页面完整代码
bash
<template>
<div class="container">
<!-- -->
<!-- <div class="mypanel"> </div> -->
<div
style="
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;
"
>
<div
id="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>