基本使用 {#基本使用}

安装依赖

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 &amp;copy; &lt;a href="https://github.com/guqing"&gt;guqing&lt;/a&gt;',
        minZoom: 3, // 最大缩放级别
        // maxZoom: 18 // 修小缩放级别
      }).addTo(this.map)
    }




}
}
\</script\>


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

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

使用自定义的mbtiles瓦片 {#使用自定义的mbtiles瓦片}

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

1. 定义一个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
}
`

2. 使用自定义瓦片

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