vue项目如何使用Leaflet

guqing

2019-10-21

Tools Vue

2194

基本使用

安装依赖

cnpm install leaflet

配置main.js

import Vue from 'vue'
import App from './App.vue'

/* import leaflet */
import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'

/* leaflet icon, 如果不配置这里无法使用marker点标记 */
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})
Vue.prototype.L = L


new Vue({
  router,
  store,
  created () {
    bootstrap()
  },
  render: h => h(App)
}).$mount('#app')

按需导入

<template>
  <div class="map-wrapper">
    <div id="mapContainer"></div>
  </div>
</template>

<script>
import * as L from 'leaflet'
// openstreetmap地图瓦片地址
// const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}'

// 高德地图瓦片地址
const tileUrl = 'https://wprd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'

export default {
  name: 'app',
  data () {
    return {
      map: {}
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      // 设置左上角经纬度
      // var corner1 = L.latLng(34.041276143397731, 108.4084198740709)
      // 设置右下点经纬度
      // var corner2 = L.latLng(34.652635225618667, 109.56107192878135)
      // 构建视图限制范围
      // var bounds = L.latLngBounds(corner1, corner2)

      this.map = new L.Map('mapContainer', {
        // maxBounds: bounds, // 如果需要限定地图边界
        center: [34.29126107845571, 108.97509816353342],
        zoom: 14,
        zoomControl: true
      })

      // tileUrl用来指定需要加载的瓦片服务地址,如果使用自定义瓦片服务可能需要重载L.TileLayer的getTileUrl方法
      this.L.tileLayer(tileUrl, {
        foo: 'bar',
        attribution: 'Map Exaple &copy; <a href="https://github.com/guqing">guqing</a>',
        minZoom: 3, // 最大缩放级别
        // maxZoom: 18 // 修小缩放级别
      }).addTo(this.map)
    }
  }
}
</script>

<style>
  .map-wrapper {
    margin-bottom: 24px;
  }

  #mapContainer {
    height: 500px;
  }
</style>

使用自定义的mbtiles瓦片

使用自定义mbtiles瓦片需要重写L.TileLayer的getTileUrl()方法

定义一个loadTiles.js

import * as L from 'leaflet'

L.TileLayer.loadTileLayer = L.TileLayer.extend({ // eslint-disable-line
  getTileUrl: function (coords) {
    var data = {
      // r: retina ? '@2x' : '',
      s: this._getSubdomain(coords),
      x: coords.x,
      y: this._globalTileRange.max.y - coords.y,
      z: this._getZoomForUrl()
    }

    return L.Util.template(this._url, L.extend(data, this.options)) // eslint-disable-line
  }
})

L.tileLayer.loadTileLayer = function (url, options) {// eslint-disable-line
  return new L.TileLayer.loadTileLayer(url, options) // eslint-disable-line
}

使用自定义瓦片

// 导入js
import '@/assets/js/loadTiles.js'

// 用该方法替换之前的this.L.tileLayer即可
this.L.tileLayer.loadTileLayer(tileUrl, {
    foo: 'bar',
    attribution: '',
    minZoom: 3, // 最大缩放级别
    // maxZoom: 18 // 修小缩放级别
}).addTo(this.map)