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,创建完成!
    leaflet地图总结(不断更新)_第1张图片

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

  1. 画点

    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)
    },
    

    效果图
    leaflet地图总结(不断更新)_第2张图片

  2. 画线

    //画线
    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);
    },
    

    效果图
    leaflet地图总结(不断更新)_第3张图片

  3. 画多边形

    //画多边形
    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);
    },
    

    效果图
    leaflet地图总结(不断更新)_第4张图片
    4、绘制弹框

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

    也可以自定义样式

    	//自定义弹框样式
    	var popup = L.popup().setContent('

    我是summer_du!
    我在北京

    '
    ) marker.bindPopup(popup)

    效果图
    leaflet地图总结(不断更新)_第5张图片

三、省、县、区域边界

  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); 
    },
    
    效果如下
    leaflet地图总结(不断更新)_第6张图片

四、热力图

  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)
    

    效果如下
    leaflet地图总结(不断更新)_第7张图片

五、动态风场

  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)
    },
    
    我们来看一下风场动态效果。
    leaflet地图总结(不断更新)_第8张图片

参考API文档

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

你可能感兴趣的:(地图,vue)