vue 使用leaflet加载天地图

原创

已于 2025-09-24 18:15:57 修改 · 830 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-09-24 18:14:26 首次发布

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)</