搭建VUE大屏展示项目（五） VUE集成leaflet地图

1.vue集成

首先需要注册一个账号然后获取token
account.mapbox.com/
在该网址注册一个账户然后使用默认token即可

npm install leaflet

安装完成后引入css和leaflet

<script>
import * as L from 'leaflet'
</script>
<style scoped lang='less'>
@import "../../../../node_modules/leaflet/dist/leaflet.css";
</style>

2.初始化

写一个简单的template，这里要注意必须要给定一个高度不可以使用%比高度（我试了试不起作用不知道为什么）：

 <div id='map'
         style="width:100%;height:937px">
    </div>

然后是在钩子函数中创建地图

 data () {
    return {
      map: null,
      token: 'pk.eyJ1IjoiY2hyaXNld2Fybm5lciIsImEiOiJja3NwbjF6bjUwNGJtMm5rdHdlbjhyYm05In0.6bXLpBBZJCFXeYMX6pjL9w'
    }
  }
,
  mounted () {
    this.map = L.map('map').setView([40.28, 116.48], 9)
    // 设置地图切片
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + this.token, {
      id: 'mapbox/satellite-v9',
      tileSize: 512,
      zoomOffset: -1
    }).addTo(this.map)
    // 创建边界线
    var style = {
      color: '#ffffff', // 边框颜色
      weight: 3, // 边框粗细
      opacity: 0.8, // 透明度
      fillColor: 'transparent', // 区域填充颜色
      fillOpacity: 0 // 区域填充颜色的透明
    }
    L.geoJSON(beijing, { style: style }).addTo(this.map) // features是指geojson数据
  }

注意！！！！这里有个beijing是我在阿里云上弄下来的
直接访问红圈网址拷贝下来自己用就行，是个json对象

3.各种api使用

maker

 L.marker([40.28, 116.48]).addTo(this.map);

直接这么用会出现加载不出来图片的问题（base64的竟然加载失败，官网也没个提示过分）

import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'


created () {
    const DefaultIcon = L.icon({
      iconUrl: icon,
      shadowUrl: iconShadow
    })
    L.Marker.prototype.options.icon = DefaultIcon
  }

参考文献

阿里云瓦片： datav.aliyun.com/tools/atlas…
bilibili： www.bilibili.com/video/BV1sZ…
leaflet官方网站： leafletjs.com/reference-1…

github地址

github.com/1142235090/…