初始化地图和数据
<div id="map"></div>
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';
var map = null;
const tdtMapKey = '天地图key';
var markerArr = [];
function initMap(data = []){
const VEC_C = 'http://{s}.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=';
const CVA_C = 'http://{s}.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=';
let { lat, lng } = data.length && data[0]
map = L.map('map', {
minZoom: 3,
maxZoom: 17,
center: [lat || 34.33213, lng || 109.00945],
zoom: 10,
zoomControl: false,
attributionControl: false,
crs: L.CRS.EPSG4326,
});
L.tileLayer(VEC_C + tdtMapKey, {
zoomOffset: 1,
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
}).addTo(map);
L.tileLayer(CVA_C + tdtMapKey, {
tileSize: 256,
zoomOffset: 1,
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
}).addTo(map);
map.on('click', ($event) => clickMap($event));
data.forEach(v => {
const marker = L.marker([ v.lat, v.lng ], config).addTo(this.map);
marker.bindTooltip(`经度:${v.lng}<br>纬度:${v.lat}<br>地名:${v.address}`, { direction: 'top', className: 'my-tooltip', offset: [0, -10] });
marker.on('dragend', ($event) => dragend(v.id,$event));
v.marker = marker;
})
markerArr = data;
}
地图点击事件
function clickMap({ latlng }){
getPoi(latlng,Date.now())
}
标注的拖拽事件
dragend(id,{ target }){
getPoi(target._latlng,id)
}
数据处理
getPoi(latlng,id = ""){
let { lat, lng } = latlng;
let index = markerArr.findIndex(obj => obj.id == id);
let item = index >= 0 ? markerArr[index] : {};
if(item?.lat == lat && item?.lng == lng) return;
if(index >= 0){
item.lng = lng;
item.lat = lat;
item.marker.bindTooltip(`经度:${lng}<br>纬度:${lat}`,{ direction: 'top', className: 'my-tooltip',offset: [0, -10]});
}else{
const marker = L.marker([ lat, lng ], config).addTo(map);
marker.bindTooltip(`经度:${lng}<br>纬度:${lat}`, { direction: 'top', className: 'my-tooltip', offset: [0, -10] });
marker.on('dragend', ($event) => dragend(id,$event));
markerArr.push({
marker, lat, lng, id
})
}
}