直接上代码Map.vuetemplatedivclassmap-container!-- 地图容器 --dividshandongMapclassmap-div/div!-- 自定义切换按钮 --divclasslayer-switcherbutton:class{ active: currentLayer sl }clickswitchLayer(sl)矢量底图/buttonbutton:class{ active: currentLayer yx }clickswitchLayer(yx)影像底图/button/div/div/templatescriptimportLfromleaflet;importleaflet/dist/leaflet.css;importproj4leafletexportdefault{name:GMap,data(){return{map:null,currentLayer:sl,// 默认加载矢量底图tk:,//改成自己申请的token// 图层实例缓存layers:{sl:null,yx:null,yxzj:null}};},mounted(){this.initMap();},methods:{// 初始化地图initMap(){varCRS_4490newL.Proj.CRS(EPSG:4490,projlonglat ellpsGRS80 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.mapL.map(shandongMap,{center:center,zoom:8,minZoom:5,maxZoom:18,crs:CRS_4490,zoomControl:false// 可设为true以显示默认的缩放控件});// 初始化各个图层this.createLayers();// 默认加载矢量图层this.switchLayer(sl);},// 创建天地图图层createLayers(){vartVuethis;//电子地图vartdtVecLayerURLhttps://service.sdmap.gov.cn/tileservice/sdpubmap?layersdpubmapstyledefaulttilematrixsetdefault028mmServiceWMTSRequestGetTileVersion1.0.0Formatimage/pngTileMatrix{z}TileCol{x}TileRow{y}tktVue.tk;//影像地图vartdtImgLayerURLhttps://service.sdmap.gov.cn/tileservice/sdrasterpubmap?layerSDRasterPubMapstyledefaulttilematrixsetdefault028mmServiceWMTSRequestGetTileVersion1.0.0Formatimage/pngTileMatrix{z}TileCol{x}TileRow{y}tktVue.tk;vartdtImgZJLayerURLhttps://service.sdmap.gov.cn/tileservice/sdrasterpubmapdj?layersdrasterpubmapdjstyledefaulttilematrixsetdefault028mmServiceWMTSRequestGetTileVersion1.0.0Formatimage/pngTileMatrix{z}TileCol{x}TileRow{y}tktVue.tk;tVue.layers.slL.tileLayer(tdtVecLayerURL,{tileSize:256});tVue.layers.yxL.tileLayer(tdtImgLayerURL,{tileSize:256});tVue.layers.yxzjL.tileLayer(tdtImgZJLayerURL,{tileSize:256});},// 切换图层方法switchLayer(type){if(!this.map)return;// 移除当前所有底图和注记Object.values(this.layers).forEach(layer{try{this.map.removeLayer(layer);}catch(ex){}});// 添加目标图层if(typesl){this.map.addLayer(this.layers.sl);}elseif(typeyx){this.map.addLayer(this.layers.yx);this.map.addLayer(this.layers.yxzj);}this.currentLayertype;// 解决切换图层后地图显示不全或渲染卡顿的问题setTimeout((){this.map.invalidateSize();},0);}}};/scriptstylescoped.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效果图