leaflet + 天地图底图 + 地图点击选点标注

最新推荐文章于 2025-03-25 17:07:16 发布

夏尔墨

最新推荐文章于 2025-03-25 17:07:16 发布

阅读量1.5k

点赞数 5

分类专栏： leaflet 文章标签：前端

本文链接：https://blog.csdn.net/weixin_50583912/article/details/131261326

版权

leaflet 专栏收录该内容

1 篇文章

订阅专栏

该代码段展示了如何利用Leaflet库和天地图服务初始化地图，设置标注并实现标注的拖拽事件。地图上标注的经纬度和地址信息可通过拖拽更新，并且有点击地图获取POI的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化地图和数据

<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] }); //每个标注绑定tooltip
        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]}); //marker重新绑定tooltip
  	}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
      })
  	}
}