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

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
1
2
3
4

main.js或.vue引入

1. main.js引入css

   import "leaflet/dist/leaflet.css";
   1

2. .vue引入js

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

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

具体代码

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

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

	  /* 初始化地图 */
      this.map = L.map("map", {
        center: [39.909187, 116.397451],
        zoom: 10
      });
      
      /* 离线地图为底图 */
      L.tileLayer(
        "../../../static/tiles/mapabc/roadmap/{z}/{x}/{y}.png",
        {}
      ).addTo(this.map);

      /* 引入高德地图为底图 */
      //   L.tileLayer
      //     .chinaProvider("GaoDe.Normal.Map", {
      //       maxZoom: 18,
      //       minZoom: 5
      //     }).addTo(this.map);
      
      /* OpenStreetMap地图为底图 */
      //   L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
      //     attribution: "Haut-Gis-Org © OpenStreetMap"
      //   }).addTo(this.map);

      /* 热力图 */
      // 配置
      let cfg = {
        radius: 0.05,
        maxOpacity: 0.8,
        scaleRadius: true,
        useLocalExtrema: true,
        latField: "lat",
        lngField: "lng",
        valueField: "count"
      };
      // 数据
      let testData = {
        max: 8,
        data: [
          { lat: 39.6408, lng: 116.7728, count: 1 },
          { lat: 39.75, lng: 116.55, count: 1 },
          { lat: 39.55, lng: 116.55, count: 1 },
          { lat: 39.65, lng: 116.45, count: 1 },
          { lat: 39.45, lng: 116.35, count: 1 },
          { lat: 39.35, lng: 116.25, count: 1 },
          { lat: 39.25, lng: 116.15, count: 1 }
        ]
      };
      this.heatmapLayer = new HeatmapOverlay(cfg);
      this.heatmapLayer.addTo(this.map);
      this.heatmapLayer.setData(testData);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

瓦片地图下载

寻找与类似的瓦片地图下载器，可以按需要的地区和级别下载，级别高所需存储空间越大

下载后的目录结构如下

注意事项

1. 地图容器要有宽高
2. 确保css已正确加载

问题：地图瓦片加载错乱，且页面显示有些图片加载失败
原因：import "leaflet/dist/leaflet.css";一开始放在了.vue文件的<style>，导致并没有成功加载