在vue中使用leaflet加載地圖

之前碰到局域網中搭建地圖需求,用leaflet進行操作(vue2項目),以此記錄:

一.安裝引入

npm install leaflet --save

在main.js中引入(也可以在所需頁面引入,由於leftlet很小,只有38K,就直接全局了)

import L from "leaflet"
import "leaflet/dist/leaflet.css"　

二.在vue中使用

<template>
  <div class="mapBox">
    <div>在vue2中使用leaflet</div>
    <!-- 地圖容器 -->
    <div id="map"></div>
  </div>
</template>

<script>
  export default {
    name: 'LeafletMap',
    data() {
      return {
        map: null
      }
    },
    mounted() {
      // 地圖初始化
      this.initMap()
    },
    methods: {
      // 使用id為map的div容器初始化地圖，同時指定地圖的中心點和縮放級別
      initMap() {
        let map = L.map("map", {
          center: [24.485666, 118.095498], // 中心位置
          zoom: 12, // 縮放等級
          attributionControl: true, // 版權控件
          zoomControl: true //縮放控件
        });
        this.map = map; // data上需要掛載
        L.tileLayer(
          "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
        ).addTo(map) // 加載底圖
      }
    }
  }
</script>
<style scoped>
  #map {
    width: 800px;
    height: 500px;
    margin: 50px auto;
  }
</style>

　　效果如下:

 初始化的時候還有一些別的參數可配置:地圖狀態:minZoom,maxZoom,crs,交互選項:dragging等,

官方文檔地址:  https://leafletjs.com/reference.html,

木遙翻譯中文版地址:鏈接：https://pan.baidu.com/s/143LMcNA9leTWuscplaf3JQ提取碼：g7i2

tileLayer底圖用的是高德的,地址參考:  https://blog.csdn.net/sinat_41310868/article/details/105959659

高德路網：
https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8&ltype=11
高德影像：
https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
高德矢量：
http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}
谷歌矢量：
http://mt2.google.cn/vt/lyrs=m&scale=2&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}
谷歌路網：
https://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={z}
谷歌影像：
http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}
谷歌影像帶注記：
https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}
谷歌地形：
https://mt1.google.com/vt/lyrs=t&x={x}&y={y}&z={z}
谷歌地圖矢量帶地形渲染：
https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}
街景地圖：
https://tile.openstreetmap.org/{z}/{x}/{y}.png
天地圖影像：
http://t7.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911
天地圖影像注記：
http://t7.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911
天地圖矢量：
http://t7.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911

天地圖矢量注記：
http://t7.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911

天地圖地形：
http://t7.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911
天地圖地形注記：
http://t7.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911

騰訊地圖矢量：
http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0

多說一句,本來想在高德官網找類似的地址,結果沒找到.問過客服說是暫時不對外提供三方渲染引擎使用,所以如果商用,慎重,可以找開放的.

github也有大神把leaflet進行了封裝,github地址:  https://github.com/vue-leaflet/Vue2Leaflet

當然,還有地圖標點,划線,划區域我們下次再說