直接上代码Map.vue
<template><divclass="map-container"><!-- 地图容器 --><divid="shandongMap"class="map-div"></div><!-- 自定义切换按钮 --><divclass="layer-switcher"><button:class="{ active: currentLayer === 'sl' }"@click="switchLayer('sl')">矢量底图</button><button:class="{ active: currentLayer === 'yx' }"@click="switchLayer('yx')">影像底图</button></div></div></template><script>importLfrom'leaflet';import'leaflet/dist/leaflet.css';import"proj4leaflet"exportdefault{name:'GMap',data(){return{map:null,currentLayer:'sl',// 默认加载矢量底图tk:"",//改成自己申请的token// 图层实例缓存layers:{sl:null,yx:null,yxzj:null}};},mounted(){this.initMap();},methods:{// 初始化地图initMap(){varCRS_4490=newL.Proj.CRS('EPSG:4490','+proj=longlat +ellps=GRS80 +no_defs',{resolutions:[1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,6.866455078125e-4,3.4332275390625e-4,1.71661376953125e-4,8.58306884765625e-5,4.291534423828125e-5,2.1457672119140625e-5,1.0728836059570312e-5,5.364418029785156e-6,2.682209064925356e-6,1.3411045324626732e-6,6.705522662313365e-7,],origin:[-180,90],});constcenter=[36.663349439471915,116.9742519218228];this.map=L.map('shandongMap',{center:center,zoom:8,minZoom:5,maxZoom:18,crs:CRS_4490,zoomControl:false// 可设为true以显示默认的缩放控件});// 初始化各个图层this.createLayers();// 默认加载矢量图层this.switchLayer('sl');},// 创建天地图图层createLayers(){vartVue=this;//电子地图vartdtVecLayerURL="https://service.sdmap.gov.cn/tileservice/sdpubmap"+"?layer=sdpubmap&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}&tk="+tVue.tk;//影像地图vartdtImgLayerURL="https://service.sdmap.gov.cn/tileservice/sdrasterpubmap"+"?layer=SDRasterPubMap&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}&tk="+tVue.tk;vartdtImgZJLayerURL="https://service.sdmap.gov.cn/tileservice/sdrasterpubmapdj"+"?layer=sdrasterpubmapdj&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}&tk="+tVue.tk;tVue.layers.sl=L.tileLayer(tdtVecLayerURL,{tileSize:256});tVue.layers.yx=L.tileLayer(tdtImgLayerURL,{tileSize:256});tVue.layers.yxzj=L.tileLayer(tdtImgZJLayerURL,{tileSize:256});},// 切换图层方法switchLayer(type){if(!this.map)return;// 移除当前所有底图和注记Object.values(this.layers).forEach(layer=>{try{this.map.removeLayer(layer);}catch(ex){}});// 添加目标图层if(type==='sl'){this.map.addLayer(this.layers.sl);}elseif(type==='yx'){this.map.addLayer(this.layers.yx);this.map.addLayer(this.layers.yxzj);}this.currentLayer=type;// 解决切换图层后地图显示不全或渲染卡顿的问题setTimeout(()=>{this.map.invalidateSize();},0);}}};</script><stylescoped>.map-container{position:relative;width:100%;height:100%;}.map-div{width:100%;height:100%;background-color:#f0f0f0;}/* 自定义图层切换按钮样式 */.layer-switcher{position:absolute;top:10px;right:10px;z-index:1000;display:flex;flex-direction:column;gap:5px;}.layer-switcher button{padding:8px 12px;border:1px solid #ccc;background-color:#fff;cursor:pointer;border-radius:4px;font-size:14px;transition:all 0.3s;}.layer-switcher button.active{background-color:#1890ff;color:#fff;border-color:#1890ff;}</style>
效果图
![]()
