leaflet地图总结（不断更新）

一、创建leaflet地图

1. 输入指令npm install leaflet
2. 页面引入

   import L from "leaflet";
   import "leaflet/dist/leaflet.css"
   

3. 页面创建展示地图的div

   <div id="map-container" style="width: 100%;height: 100%;"></div>
   

4. 初始化地图

   initMap: function() {
   		//定义图层样式
   		var layer = L.tileLayer("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}");
   		//创建地图
   		var map = L.map('map-container', {
   				center: [39.89854, 116.3347],//中心坐标
   				zoom: 10,//缩放级别
   				minZoom: 3,
   				maxZoom: 14,
   				zoomControl: true, //缩放组件
   				attributionControl: false, //去掉右下角logol
   				layers: [layer],//图层
   		});
   }
   

   OK，创建完成！
   

二、地图上绘制点、线、多边形、弹框

5. 画点

   addMarker: function() {
   	//设置图标样式
   	var myIcon = L.icon({
   		iconUrl: "http://pic.616pic.com/ys_img/00/08/06/TnCNKnPVDY.jpg",
   		iconSize: [30, 30],
   	});
   	var marker = L.marker([39.89854, 116.3347], {
   		icon: myIcon
   	}).addTo(map)
   },
   

   效果图
   

6. 画线

   //画线
   addPolyline:function(map){
   	var points =[[39.89854, 116.3347],[39.95854, 116.5347],[39.88854, 116.5747]]
   	var polyline = L.polyline(points, {color: 'red'}).addTo(map);
   },
   

   效果图
   

7. 画多边形

   //画多边形
   addPolygon:function(){
   	var points= [[39.89854, 116.3347],[39.95854, 116.5347],[39.88854, 116.5747]]
   	var polygon = L.polygon(points, {color: '#aa0000',fillColor:'#ff15c9',
   	              weight:1}).addTo(map);
   },
   

   效果图
   
   4、绘制弹框

   	//直接在自己的组件上使用。点、线、面都可以
   	marker.bindPopup("我是summer_du!我在北京")
   

   也可以自定义样式

   	//自定义弹框样式
   	var popup = L.popup().setContent('
   我是summer_du!
   我在北京
   ')
   	marker.bindPopup(popup)
   

   效果图
   

三、省、县、区域边界

1. 首先，要获取要显示地区的json数据。获取地址可参考（可以只显示所选区域，或者显示所选区域下的所有子区域）
   http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
2. 将下载好的json文件复制到项目中，引入json文件

   import beijing from './beijing.json'
   

3. 绘制高亮区域

   //绘制区域颜色
   addAreaColor: function(map) {
   	//区域样式
   	var style = {
   	    "color": "#0000ff", //边框颜色
   	    "weight": 3, //边框粗细
   	    "opacity": 0.4, //透明度
   	    "fillColor": '#55ff7f', //区域填充颜色
   	    "fillOpacity": 0.5, //区域填充颜色的透明
   	};
   	var s = L.geoJSON(beijing,{style:style}).addTo(map); 
   },
   

   效果如下
   

四、热力图

1. 输入指令npm install heatmap.js 进行安装

2. 页面引入

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

3. 创建热力图图层数据，并加载到地图上

   			var testData = {
   				max: 8,//最大值
   				data: [{
   					lat:39.89854,
   					lng:116.3347,
   					count:5
   				},
   				{
   					lat:39.90854,
   					lng:116.3447,
   					count:8
   				},
   				{
   					lat:39.89654,
   					lng:116.3947,
   					count:2
   				},
   				{
   					lat:39.91854,
   					lng:116.3447,
   					count:7
   				},
   				{
   					lat:39.91554,
   					lng:116.4147,
   					count:8
   				},
   				{
   					lat:39.88654,
   					lng:116.3647,
   					count:3
   				}]
   			};
   			//配置
   			var cfg = {
   				"radius": 0.015,//设置每一个热力点的半径
   				"maxOpacity": 0.8,//设置最大的不透明度
   				"minOpacity": 0, //设置最小的不透明度
   				"scaleRadius": true,//设置热力点是否平滑过渡
   				"useLocalExtrema": false,//使用局部极值
   				"latField": 'lat',//纬度
   				"lngField": 'lng',//经度
   				"valueField": 'count',//热力点的值
   				"gradient": { //热力点颜色的变化范围
   					"0.99": "rgba(255,0,0,1)",
   					"0.9": "rgba(255,255,0,1)",
   					"0.8": "rgba(0,255,0,1)",
   					"0.5": "rgba(0,255,255,1)",
   					"0": "rgba(0,0,255,1)"
   				},
   			};
   			var heatmapLayer = new HeatmapOverlay(cfg);
   			heatmapLayer.setData(testData);
   			map.addLayer(heatmapLayer)
   

   效果如下
   

五、动态风场

1. 输入命令 npm install leaflet-velocity 进行安装
2. 页面引入

   import 'leaflet-velocity/dist/leaflet-velocity.css'
   import 'leaflet-velocity/dist/leaflet-velocity'
   

3. 绘制风场

   //加载风场
   initWind: function() {
   		var velocityLayer = L.velocityLayer({
   			displayValues: true,
   			//鼠标位置风场信息。也可以自定义html来进行显示
   			displayOptions: {
   				velocityType: '',//鼠标所在位置的风场提示信息说明，会在地图上显示
   				displayPosition: 'bottomleft',//风场提示信息位置
   				displayEmptyString: 'No wind data'
   			},
   			data: windData,//风场数据,需要从外部引入
   			minVelocity: 2, //速率
   			lineWidth: 2, //粒子的粗细
   			frameRate: 15, //定义每秒执行的次数
   			colorScale: ["#2b5783"], //风场颜色
   			velocityScale: 0.05, //线条速度
   			particleMultiplier: "0.001", //线条密度
   			maxVelocity: 3, //颜色配比
   		});
   		// 风场实例添加到地图上
   		velocityLayer.addTo(map)
   },
   

   我们来看一下风场动态效果。
   

参考API文档

leaflet中文API文档可参考https://www.giserdqy.com/secdev/leaflet/14523/