从零开始，构建电子地图网站：0_13_VUE整合leaflet

一.效果图

我们大概要做这样的地图底图，腾讯底图，上面覆盖物有点point和面polygon，点击覆盖物会出现触发事件。

页面长成这个样子，因为仅作示例用，所以写在了helpdocument上面，除了地图外，覆盖物有一个点、一个标签、一个面，右侧是chrome浏览器的开发者工具（crtl+shift+i），触发事件在工具上（console）打印了日志。

 

 

 

二.安装leaflet模块

首先要安装leaflet模块。

Ctrl+c，退出dev界面。

运行：

npm install vue2-leaflet -S

npm install leaflet -S

 

 

三.加载腾讯底图

1. 瓦片原理

Leaflet加载底图以栅格瓦片的形式加载。

官方示例是这样的：

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

}).addTo(map);

其中{}中的s是源，z是比例尺，xy是瓦片的坐标，加载的是openstreetmap。

地图瓦片是比较基础的概念，为了提升性能，将地图按照比例尺逐级切成瓦片，调用的时候，根据比例尺和网页尺寸调用需要调用的瓦片。

关于地图瓦片，开放地理信息空间联盟OGC专门有规范WMTS对其进行阐述，国内的高德、腾讯地图瓦片切分方式，完全按照WMTS来，但是谷歌和mapbox、OSM等稍有变化。

因为leaflet默认加载的是谷歌地图这样的瓦片，所以要加载腾讯地图，还需要对瓦片函数进行一个转换，才能正确加载。

1. 程序源码