当前位置：首页 > news >正文

vue 使用leaflet加载天地图

news 2025/9/25 18:00:56

vue 使用leaflet加载天地图

安装

npm i leaflet@1.9.4 --save

LeafletMapView.vue

<template><div id="map" ref="mapContainer" :style="{ width: width, height: height }"></div>
</template><script>import L from 'leaflet';export default {props: {width: {type: String,default: '100%',},height: {type: String,default: '500px',},},data() {return {map: null,markers: [], // 用于存储点位lineList: [], // 用于存储线polygonList: [], // 用于存储面tiandituKey: 'xxxxxxxxxxx', // 替换为你的天地图 Key};},mounted() {this.initMap();},methods: {/*** 可通过ref调用, 添加地图点位* @param pointList 点位列表 [{lat: 39.9042, lng: 116.4074, name: '北京'},...]* @param type 点位类型 可以用来区分点击回调* @param isClearBefore 是否清除之前的点位 默认false* @param clickCallback* @param mouseoverCallback* @param mouseoutCallback*/addMapMarkers(pointList = [], type = '', isClearBefore = false, clickCallback, mouseoverCallback, mouseoutCallback) {if (isClearBefore) {// 清除旧标记if (this.markers.length > 0) {this.markers.forEach(marker => this.map.removeLayer(marker));this.markers = [];}}pointList.forEach(element => {this.addSingleMapMarker(element, type, clickCallback, mouseoverCallback, mouseoutCallback);});},/*** 可通过ref调用, 通过geojson数据添加地图点位* @param geojsonData* @param type 点位类型 可以用来区分点击回调* @param isClearBefore 是否清除之前的点位 默认false* @param clickCallback* @param mouseoverCallback* @param mouseoutCallback*/addMapMarkersByGeojson(geojsonData, type = '', isClearBefore = false, clickCallback, mouseoverCallback, mouseoutCallback) {if (isClearBefore) {// 清除旧标记if (this.markers.length > 0) {this.markers.forEach(marker => this.map.removeLayer(marker));this.markers = [];}}L.geoJSON(geojsonData, {pointToLayer: function (feature, latlng) {const marker = this.addSingleMapMarker({ lng: latlng[0], lat: latlng[1] },type,clickCallback,mouseoverCallback,mouseoutCallback,);return marker;},onEachFeature: function (feature, layer) {},}).addTo(this.map);},/*** 可通过ref调用, 添加线* @param points 线坐标点 [ [纬度,经度], [纬度,经度], ... ]*/addMapPolyline(points = []) {// 创建 Polylineconst polyline = L.polyline(points, { color: '#ff0000' }).addTo(this.map);// 将地图视图调整到包含所画线的范围this.map.fitBounds(polyline.getBounds());this.lineList.push(polyline);},/*** 可通过ref调用, 通过geojson画线* @param geojsonData*/addMapPolylineByGeojson(geojsonData) {const lineStyle = {color: feature.properties.color || '#ff0000',weight: feature.properties.weight || 3,opacity: 1, lineCap: 'round',lineJoin: 'round',};const geoJsonLayer = L.geoJSON(geojsonData, {style: lineStyle,}).addTo(this.map);this.lineList.push(geoJsonLayer);},/*** 可通过ref调用, 添加面积, 多边形* @param points 线坐标点 [ [纬度,经度], [纬度,经度], ... ]*/addMapPolygon(points = []) {// 创建多边形样式const polygonStyle = {color: '#ff7800',weight: 3,opacity: 0.8,fillColor: '#ff7800',fillOpacity: 0.35,// 可选：添加类名，用于 CSS 控制className: 'custom-polygon',};// 创建多边形并添加到地图const polygon = L.polygon(points, polygonStyle).addTo(this.map);// 将多边形飞到视野内this.map.fitBounds(polygon.getBounds());this.polygonList.push(polygon);},/*** 可通过ref调用, 通过geojson画面* @param geojsonData*/addMapPolygonByGeojson(geojsonData, clickCallback) {// 创建多边形样式const polygonStyle = {color: '#ff7800',weight: 3,opacity: 0.8,fillColor: '#ff7800',fillOpacity: 0.35,};const geoJsonLayer = L.geoJSON(geojsonData, {style: polygonStyle,onEachFeature: function (feature, layer) {layer.on({click: e => {clickCallback && clickCallback(feature, layer);},});},}).addTo(this.map);// 将多边形飞到视野内this.map.fitBounds(geoJsonLayer.getBounds());this.polygonList.push(geoJsonLayer);},/*** 添加地图点位* @param point 点位 {lat: 39.9042, lng: 116.4074, name: '北京'}* @param type 点位类型 可以用来区分点击回调*/addSingleMapMarker(point, type, clickCallback, mouseoverCallback, mouseoutCallback) {// 创建自定义图标const customIcon = new L.Icon({iconUrl: require('../assets/img/didian.png'),iconSize: [43, 60], // 图标大小 [宽, 高]iconAnchor: [22.5, 60], // 图标锚点（点击位置），通常是底部中心});// 添加标记const marker = L.marker([point.lat, point.lng], {icon: customIcon,}).addTo(this.map);// 绑定点击事件marker.on('click', event => {marker.dragging.disable();this.$emit('markerClick', point, event, type);clickCallback && clickCallback(point, event, type);});// 监听 mouseover 事件marker.on('mouseover', event => {this.$emit('markermouseover', point, event, type);mouseoverCallback && mouseoverCallback(point, event, type);});// 监听 mouseout 事件marker.on('mouseout', event => {this.$emit('markermouseout', point, event, type);mouseoutCallback && mouseoutCallback(point, event, type);});// 监听右键点击事件marker.on('contextmenu', event => {event.originalEvent.preventDefault();event.originalEvent.stopPropagation();this.$emit('markerRightClick', point, event, type, marker);});// 监听双击事件marker.on('dblclick', e => {marker.dragging.enable();this.$emit('markerDblclick', point, event, type, marker);});// 监听拖拽开始marker.on('dragstart', event => {marker.setZIndexOffset(1000); this.$emit('markerDragstart', point, event, type, marker);});// 监听拖拽中（持续触发）marker.on('drag', event => {//const latlng = marker.getLatLng(); // 实时获取当前位置this.$emit('markerDraging', point, event, type, marker);});// 监听拖拽结束marker.on('dragend', event => {marker.setZIndexOffset(0);this.$emit('markerDragend', point, event, type, marker);});this.markers.push(marker);return marker;},removeMarker(marker) {if (marker) {this.map.removeLayer(marker);}},initMap() {// 天地图瓦片 (矢量底图)const tiandituVecUrl = `https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=${this.tiandituKey}`;// 天地图标注层 (可选，用于显示文字标注)const tiandituCvaUrl = `https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=${this.tiandituKey}`;// 创建地图实例this.map = L.map(this.$refs.mapContainer, {center: [39.915599, 116.402544], // 初始中心点（北京）zoom: 12,layers: [// 添加天地图矢量底图L.tileLayer(tiandituVecUrl, {subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],minZoom: 1,maxZoom: 18,attribution: '天地图',}),L.tileLayer(tiandituCvaUrl, {subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],minZoom: 1,maxZoom: 18,attribution: '天地图标注',}),],});this.map.on('click', event => {this.$emit('mapClick', event);});},},beforeDestroy() {if (this.map) {this.map.remove();}},};
</script><style scoped>/* 引入 Leaflet CSS */@import '~leaflet/dist/leaflet.css';/* 可选：修复图标显示问题 */.leaflet-container {font: inherit;background: transparent;}/* 避免地图容器被其他样式影响 */#map {z-index: 1;}::v-deep .leaflet-control-container {display: none;}
</style>