概述

最近做数字工程实践涉及到大量的地图操作，刚开始跳过依赖于 supermap iclient for JavaScript，但是越做深入越发现局限性太大，于是开始考虑使用开源地图库做各项操作，本文记录在 vue 项目中引入原生 leaflet 及 heatmap 打开地图及显示热力图的各项操作。

各项操作

leaflet 打开地图

第一步：下载 leaflet

Leaflet官网下载即可

第二步：vue 引入 leaflet

新建 vue 项目不在叙述，将 leaflet 库解压后拷入项目目录

使用 vendor 方式引入 leaflet 库，不会编译 js 文件

找到 webpack.base.conf.js 文件，在其中的 module.exports 中，找到 entry，在其中找到或新建 vendor，引入即可

第三步：打开第一幅地图

在 vue 文件中操作

template 标签下增加如下代码

template>
  <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
</template>

style 中引入 css

<style scoped>
  @import "https://unpkg.com/leaflet@1.0.3/dist/leaflet.css";
</style>

script 文件中引入 L

import L from 'leaflet'

新建地图容器

let map = L.map('map', {
          center: [39.9788, 116.30226],
          zoom: 14
        })

打开 openstreetmap

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: 'Haut-Gis-Org © OpenStreetMap'
        }).addTo(this.map)

heatmap 渲染热力图

第一步：npm 方式引入 headmap.js

npm install heatmap.js

第二步：引入 leaflet 中使用的函数

import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'

第四步：配置

// 配置
        var cfg = {
          'radius': 2,
          'maxOpacity': 0.8,
          'scaleRadius': true,
          'useLocalExtrema': true,
          latField: 'lat',
          lngField: 'lng',
          valueField: 'count'
        }

第五步：模拟数据

// 数据
        var testData = {
          max: 8,
          data: [{ lat: 24.6408, lng: 46.7728, count: 3 },
            { lat: 50.75, lng: -1.55, count: 1 },
            { lat: 51.55, lng: -1.55, count: 9 },
            { lat: 52.65, lng: -1.45, count: 8 },
            { lat: 53.45, lng: -1.35, count: 7 },
            { lat: 54.35, lng: -1.25, count: 6 },
            { lat: 5.25, lng: -1.15, count: 5 }
          ]
        }

第六步：叠加图层

this.heatmapLayer = new HeatmapOverlay(cfg)
        // 图层
        let baseLayer = L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Haut-Gis-Org © OpenStreetMap'
          }
        )

        this.heatmapLayer.addTo(map)
        this.heatmapLayer.setData(testData)

效果图

参考代码

<template>

  <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
</template>

<script>
  import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'
  import L from 'leaflet'

  export default {
    name: 'gis-population-density',
    data () {
      return {
        heatmapLayer: null,
        map: null
      }
    },
    mounted () {
      // 引用heatmap.js
      // let script = document.createElement('script')
      // script.type = 'text/javascript'
      // script.src =
      // 'http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js'
      // document.body.appendChild(script)
      this.initmap()
    },
    methods: {
      initmap: function () {
        // this.map = L.map('map', {
        //   center: [39.9788, 116.30226],
        //   zoom: 14
        // })
        //
        // L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        //   attribution: 'Haut-Gis-Org © OpenStreetMap'
        // }).addTo(this.map)

        // 数据
        var testData = {
          max: 8,
          data: [{ lat: 24.6408, lng: 46.7728, count: 3 },
            { lat: 50.75, lng: -1.55, count: 1 },
            { lat: 51.55, lng: -1.55, count: 9 },
            { lat: 52.65, lng: -1.45, count: 8 },
            { lat: 53.45, lng: -1.35, count: 7 },
            { lat: 54.35, lng: -1.25, count: 6 },
            { lat: 5.25, lng: -1.15, count: 5 }
          ]
        }
        // 配置
        var cfg = {
          'radius': 2,
          'maxOpacity': 0.8,
          'scaleRadius': true,
          'useLocalExtrema': true,
          latField: 'lat',
          lngField: 'lng',
          valueField: 'count'
        }
        this.heatmapLayer = new HeatmapOverlay(cfg)
        // 图层
        let baseLayer = L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Haut-Gis-Org © OpenStreetMap'
          }
        )
        this.map = L.map('map', {
          center: [25.6586, -80.3568],
          zoom: 4
        })
        baseLayer.addTo(this.map)
        this.heatmapLayer.addTo(this.map)
        this.heatmapLayer.setData(testData)

        L.control.scale({ maxWidth: 200, metric: true, imperial: false }).addTo(this.map)

        let baseLayers = {
          'heatmapLayer': this.heatmapLayer,
          'OpenStreetMap': baseLayer
        }
        // let overlays = {
        //   'Marker': null,
        //   'Roads': null
        // }
        L.control.layers(baseLayers).addTo(this.map)
      }
    }
  }
</script>

<style scoped>
  @import "https://unpkg.com/leaflet@1.0.3/dist/leaflet.css";
</style>

常用插件

• leaflet.ChineseTmsProviders-加载各种国内地图

npm安装指令
npm i leaflet.chinatmsproviders

• Leaflet.markercluster

npm安装指令
npm install leaflet.markercluster

• heatmap.js

npm安装指令
npm install heatmap.js

参考文档

• Leaflet官网
• 【Leaflet·1】从加载出第一幅地图开始
• Leaflet学习之路三——地图控件
• leaflet常用插件地址整理
• LeaFlet学习之热力图
• heatmap.js官网
• Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定

简介

vue是一个渐进式javascript框架，用来快速构建网页项目，在vue框架之上结构化leaflet地图库的产物vue2leaflet可以在vue项目中很方便的加载地图，下面简单介绍一个vue2leaflet加载地图的过程。

第一个地图显示页面

第一步：新建vue项目

第二步：安装Vue2Leaflet

在项目目录下运行如下代码

npm i vue2-leaflet -S

实测项目还需安装leaflet

npm install --save leaflet

第三步： 新建VueLeaflet.vue

在components文件夹中新建vue文件VueLeaflet.vue

在template标签下增加如下内容，显示地图，并增加一个marker

<div class="vue-leaflet">
    <l-map style="width: 100%; height: 600px;" :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker :lat-lng="marker">
        <l-popup :content="text"></l-popup>
      </l-marker>
    </l-map>

  </div>

在script标签，name之下增加如下内容

data () {
    return {

    }
  }

第三步：修改路由

修改index.js，将helloworld修改为vueleaflet

第四步：引入组件

在vueleaflet.vue的script标签下增加如下内容（注意合并部分）

import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet'
import L from 'leaflet'
export default {
  name: 'VueLeaflet.vue',
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup
  },
  data () {
    return {
      zoom: 13,
      center: L.latLng(47.413220, -1.219482),
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> Haut-Gis-Org',
      marker: L.latLng(47.413220, -1.219482),
      text: 'this is a marker'
    }
  }
}

第五步：引入css

在main.js中添加

import 'leaflet/dist/leaflet.css'
import L from 'leaflet'

第六步：修改icon路径

在main.js中添加如下代码

/* leaflet icon */
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')
})

效果展示

项目地址

完成这个项目花费了一些精力，故将项目源码分享在了github上

GitHub