leaflet地图库-初始化（1）

言诺意深2025-04-29 15:22

注意：

1. 创建地图实例 map的第一个参数可以是this.$refs.leafletMap 或者容器Id'字符串'
2. 添加瓦片层图层 -这里使用的是高德地图瓦片层（可自行使用别的图层），用高德地图作为瓦片层的时候，需要注意【subdomains】必须传值，可以是'1234'也可以是'1'任意数值

xml 复制代码

<template>
  <!-- Leaflet地图容器 注意需要设置容器宽高-->
  <div id="leaflet-map" ref="leafletMap"></div>
</template>

<script>
  // 导入Leaflet地图库及其样式
  import L from 'leaflet'
  import 'leaflet/dist/leaflet.css'
  export default {
    data() {
      return {
        map: null, // Leaflet地图实例对象
        zoom: 11, // 地图初始缩放级别
        center: [31.230378, 121.473658], // 地图初始中心点坐标（上海）
      }
    },
     mounted() {
      // 组件挂载后初始化地图
      this.initMap()
    },
     methods: {
      initMap() {
        // 创建地图实例-第一参数还可以使用 --id字符串格式 例：'leaflet-map'
        this.map = L.map(this.$refs.leafletMap, {
          center: this.center, // 初始化中心店
          zoom: this.zoom, // 初始化层级
          zoomControl: false,
          attributionControl: false // 版权信息，正常开发应基于尊重，应该加上！
        })
        
        //  添加瓦片层图层 -这里使用的是高德地图瓦片层
        L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
          subdomains: '1234',
          maxZoom: 19, // 最大层级
          minZoom: 10 // z最小层级
        }).addTo(this.map)
      }
    }
  }
</script>

<style scoped>
  #leaflet-map {
    width: 500px;
    height: 500px;
  }
</style>

这样leaflet 地图初始化就完成了