【vue】【leaflet】离线地图及热力图

leaflet

leaflet也可用cdn引入，但由于本文目标是离线环境，所以用npm

npm安装依赖

1. vue2-leaflet、leaflet：使用leaflet必须
2. leaflet.chinatmsproviderss：非必须，便于引入底图
   chinatmsproviderss加载各种地图
3. heatmap.js：非必须，热力图才需要

npm install vue2-leaflet --save
npm install leaflet --save
npm install leaflet.chinatmsproviderss --save
npm install heatmap.js --save

main.js或.vue引入

1. main.js引入css

   import "leaflet/dist/leaflet.css";
   

2. .vue引入js

   HeatmapOverlay用于热力图
   chinatmsproviders可用于提供中国普通地图底图

   import L from "leaflet";
   import HeatmapOverlay from "heatmap.js/plugins/leaflet-heatmap";
   import "leaflet.chinatmsproviders";
   

具体代码

由于只是学习测试，瓦片放在了本地的static文件下，部署需要放在服务器

	  <div id="map" style="width: 500px;height: 500px" />

	  /* 初始化地图 */
      this