最近在开发大屏的时候用到了leaflet 和天地图，但是加载出来的天地图是白色的 ， 与大屏风格不统一
，最后经过一系列调整改为蓝色风格，效果如下图
实现思路: 通过应用图层透明度，设置容器背景色而实现。是不是非常简单高效，嘻嘻ps: 开发前提 在天地图官网注册登录申请地图服务需要的key:[天地图控制台](https://console.tianditu.gov.cn/api/key)
主要代码如下：
源代码：src\utils\leaflet\j-map.js
import * as L from "leaflet";
export default function initMap(containerId, centralPoint, zoom, zoomSnap) {L.TileLayer.ChinaProvider = L.TileLayer.extend({initialize: function (type, options) { // (type, Object)const providers = L.TileLayer.ChinaProvider.providers;const parts = type.split('.');const providerName = parts[0];const mapName = parts[1];const mapType = parts[2];const url = providers[providerName][mapName][mapType];options.subdomains = providers[providerName].Subdomains;L.TileLayer.prototype.initialize.call(this, url, options);}});const imgParam = "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles";const ciaParam = "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles";const tk = "自己的token"L.TileLayer.ChinaProvider.providers = {TianDiTu: {Satellite: {Map: "https://t{s}.tianditu.gov.cn/img_w/wmts?tk=" + tk + imgParam,Annotation: "https://t{s}.tianditu.gov.cn/cia_w/wmts?tk=" + tk + ciaParam},Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']},};L.tileLayer.chinaProvider = function (type, options) {return new L.TileLayer.ChinaProvider(type, options);};/*** 天地图内容*/const imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotation', {maxZoom: 26,minZoom: 1,});imga.bringToFront()//题图titleLayerconst ia = L.layerGroup([imga])let mapif (zoomSnap !== undefined) {map = L.map(containerId, {editable: false,center: centralPoint,editOptions: {},zoom: zoom,layers: [ia],zoomSnap: zoomSnap,closePopupOnClick: false,crs: L.CRS.EPSG3857,attributionControl: false,});} else {map = L.map(containerId, {editable: true,center: centralPoint,editOptions: {},zoom: zoom,layers: [ia],zoomControl: false,closePopupOnClick: false,crs: L.CRS.EPSG3857,// 去掉比列尺attributionControl: false,});} ia.setZIndex(100000)return {"map": map,};
}
组件内部使用：
<template><div class="map-container" id="mapContainer" />
</template><script setup>
import initMap from "@/utils/leaflet/j-map";
const initMapLayers = () => {const mapResult = initMap(`mapContainer`, [...epicentreLocation.value], 6, undefined);map.value = mapResult.map;
}
</script>
<style lang="less" scoped>
.map-container {width: 100%;height: 100%;background: linear-gradient(rgba(0, 52, 204, 1), rgba(0, 52, 204, 1)) center/80% 80%, lightblue;}
</style>最后说明：经验丰富，诚接各种项目开发。非诚勿扰哦！！千万别乱加！！！联系方式：如下
)
