leaflet(一)初始化地图

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

1. 安装依赖

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

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

2. 引入 Leaflet 和样式

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

<template><divid="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) 请改为 0noWrap: 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>