leaflet(一)初始化地图

Leaflet 与天地图结合使用，可以通过天地图提供的 API 获取地图瓦片，并在 Leaflet 地图上显示。

1. 安装依赖

首先，确保你已经安装了 Leaflet 和 Vue：

npm install leaflet
npm install vue-leaflet
npm install leaflet.tilelayer.colorfilter   //添加带有颜色过滤器的瓦片层

2. 引入 Leaflet 和样式

在你的 Vue 组件中引入 Leaflet 和其样式文件：

<template>
  <div
    id="mapDiv"
    class="map"
    style="width: 100%; height: 100%; background-color: rgba(15, 44, 80, 0.9) !important;"
  ></div>
</template>

<script>
import L from "leaflet";
import "leaflet.tilelayer.colorfilter";
import "leaflet/dist/leaflet.css";
let atopMap = null;
export default {
    mounted() {
        this.initMap();
        this.addTianDiTuLayer();
    },
    methods: {
        //初始化地图
        initMap() {
            atopMap = L.map("mapDiv", {
            //参考坐标系
            crs: L.CRS.EPSG3857,
            // 中心点(这里是北京)
            center: [39.89945, 116.40769],
            //最小显示等级
            minZoom: 0,
            //最大显示等级
            maxZoom: 18,
            //当前显示等级
            zoom: 13,
            zoomControl: false,
            contextmenu: true,
            //不添加属性说明控件
            attributionControl: false,
          });

          //定义一个比例尺控件
          const scaleControl = L.control.scale();
          //将比例尺控件加载到地图容器中
          atopMap.addControl(scaleControl);
        },
        //增加天地图底图图层
        addTianDiTuLayer() {
            // 矢量图+注记
            // let mapTypes = ['vec_c', 'cva_c'];
            let mapTypes = ["vec_w", "cva_w"];
            let layers = [];
            for (let i = 0, len = mapTypes.length; i < len; i++) {
                let tdtUrl = `http://t0.tianditu.gov.cn/DataServer?T=${mapTypes[i]}&x={x}&y={y}&l={z}&tk=${YOUR_API_KEY}`;
                let layer = L.tileLayer.colorFilter(tdtUrl, {
                    filter: [
                        "grayscale:100%",
                        "invert:100%",
                        "brightness:60%",
                        "hue:220deg",
                        "saturate:54%",
                        "opacity: 50%",
                    ],
                    zoomOffset: 0, // 注意如果是 web 墨卡托投影(EPSG:3857) 请改为 0
                    noWrap: true,
                    bounds: [
                        [-90, -180],
                        [90, 180],
                    ],
                });
                layers.push(layer);
            }
            // LayerGroup 对象
            L.layerGroup(layers).addTo(atopMap);
        },
    }
}
</script>

<style lang="scss" scoped>
.tdt-tile-pane {
  .tdt-layer:first-child + .tdt-layer {
    .tdt-tile-loaded {
      -webkit-filter: grayscale(100%) invert(100%);
      opacity: 0.5 !important;
    }
  }
}

::v-deep .icon-label {
  color: #fff;
  width: 70px;
  text-align: center;
  font-size: 14px !important;
}

::v-deep .tdt-control-container {
  display: none !important;
}

.map {
  background-color: rgba(15, 44, 80, 0.9) !important;
}
</style>