leaflet加载腾讯地图，模糊且无法个性化配置样式

leaflet 创建的地图模糊，且无法个性化配置样式，但各种api丰富，使用灵活，加载瓦片图层，支持修改图片类型；
腾讯ap创建的地图清晰，可个性化配置样式，但api有限，瓦片图层不支持修改图片类型；

两种api创建的地图代码对比：

// 方案一：leaflet加载腾讯图库
L.tileLayer(
   "http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0", {
        subdomains: "0123",
        tms: true,
    }
).addTo(this.map);

 // 方案二：腾讯api初始化地图
 var center = new TMap.LatLng(39.984104, 116.307503);
 var map = new TMap.Map("container", {
     zoom:12,//设置地图缩放级别
     center: center//设置地图中心点坐标
 });

想要地图清晰且可配的同时，还要更灵活的使用创建其他图层，使用其他图片类型等，
提供以下方案：

<template>
  <!-- 腾讯地图  挂载节点 -->
  <div id="mapT" class="map">
    <!-- leaflet 挂载节点 放在腾讯地图节点内部，腾讯map对象也可捕获点击事件-->
    <div id="mapL" class="map"></div>
  </div>
</template>

<script>
import * as L from "leaflet"

const CENTER_LAT = "39.97296213677644" // 纬度
const CENTER_LON = "116.30350948737657" // 经度
const ZOOM = 15 // 地图缩放最大值
const MAX_ZOOM = 18 // 地图缩放最大值

export default {
  name: "MyMap",
  data() {
    return {
      mapT: null, //腾讯加载的 map对象
      map: null, // leaflet加载的 map对象
      baseWMSLayer: null // leaflet加载的 瓦片图层
    }
  },
  mounted() {
    this.initTMap()
    this.initLMap()
  },
  methods: {
    // 创建腾讯地图，作为底图，因为他清晰且样式可配
    initTMap() {
      this.TMap = window.TMap
      this.mapT = new this.TMap.Map(document.getElementById("mapT"), {
        zoom: ZOOM, // 设置地图缩放级别
        showControl: false,
        draggable: false,
        scrollable: false,
        center: { lat: CENTER_LAT, lng: CENTER_LON }, // 设置地图中心点坐标
        mapStyleId: "style2" // 使用个性化配置的地图样式
      })
    },
    // 创建leaflet地图对象，做上层瓦片图或矢量图，或绘制编辑等逻辑，因为他灵活
    initLMap() {
      this.map = L.map("mapL", {
        center: new L.LatLng(CENTER_LAT, CENTER_LON), // 加载地图的中心点, // 加载地图的中心点
        // crs: L.CRS.EPSG3857, //地理坐标系  3857：投影坐标系， 默认就是这个可不设置
        zoom: ZOOM, // 默认显示层级Í
        maxZoom: MAX_ZOOM, // 最大显示层级
        minZoom: 3, // 最小显示层级
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        zoomControl: false, //隐藏默认的，重新设置位置
      })
      this.addMapListner()
    },
    // 地图添加事件监听
    addMapListner() {
      this.map.on("zoomstart", () => {
        if (this.baseWMSLayer) {
          this.baseWMSLayer._removeAllTiles()
        }
      })
      // 将两个地图的缩放事件进行同步，重点！！！！
      this.map.on("move", (e) => {
        const zoom = e.target.getZoom()
        const center = e.target.getCenter()
        if (this.mapT) {
          this.mapT.setCenter(center)
          this.mapT.setZoom(zoom)
        }
      })
    },
    // 网格--默认图层
    addWmsLayer() {
      if (this.baseWMSLayer) {
        this.baseWMSLayer.setParams({ grid_list: gridIds.join(",") }) // 注意不支持数组类型，需要转成字符串
        return
      }
      this.baseWMSLayer = L.tileLayer.wms(this.WmsUrl, {
        version: "1.3.0", 
        // format: "image/png", //  返回的数据格式
        format: "image/svg", //  返回的数据格式，腾讯地图不支持修改类型，默认是image/png，而svg格式清晰度高
        //format: "application/json", // 返回json格式数据
        transparent: true, // 当format为 "image/png"，必传，返回具有透明度的图像； format为 "image/svg"时，可不传
        // crs: null,
        // uppercase: false,
        // attribution: "",
        // opacity: 1,
        // isBack: false,
        // CQL_FILTER: "type = '直辖市'" // 支持AND、OR等
        // detectRetina: true,  // 分辨率，地图会清晰，但是文字会变小，可能是提供移动端的
        layers: LAYER_ID,
        styles: LAYER_STYLE_ID,
        tileSize: this.map.getSize() // 重要必须有，计算视图尺寸
        ...otherProperty // 可传其他业务相关入参
      })
      this.map.addLayer(this.baseWMSLayer)
    }
  }
}
</script>

<style>
#mapT {
  width: 100%;
  height: 100%;
}
#mapL {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1001;
}
</style>

两者结合，视觉美化和业务逻辑灵活