概述

最近做数字工程实践涉及到大量的地图操作，刚开始跳过依赖于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/lea