一、创建leaflet地图
- 输入指令
npm install leaflet
- 页面引入
import L from "leaflet"; import "leaflet/dist/leaflet.css"
- 页面创建展示地图的div
<div id="map-container" style="width: 100%;height: 100%;"></div>
- 初始化地图
OK,创建完成!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],//图层 }); }
二、地图上绘制点、线、多边形、弹框
-
画点
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) },
效果图
-
画线
//画线 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); },
效果图
-
画多边形
//画多边形 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('<p style="color:red;">我是summer_du!<br />我在北京</p>') marker.bindPopup(popup)
效果图
三、省、县、区域边界
- 首先,要获取要显示地区的json数据。获取地址可参考(可以只显示所选区域,或者显示所选区域下的所有子区域)
http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5 - 将下载好的json文件复制到项目中,引入json文件
import beijing from './beijing.json'
- 绘制高亮区域
效果如下//绘制区域颜色 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); },
四、热力图
-
输入指令
npm install heatmap.js
进行安装 -
页面引入
import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'
-
创建热力图图层数据,并加载到地图上
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)
效果如下
五、动态风场
- 输入命令
npm install leaflet-velocity
进行安装 - 页面引入
import 'leaflet-velocity/dist/leaflet-velocity.css' import 'leaflet-velocity/dist/leaflet-velocity'
- 绘制风场
我们来看一下风场动态效果。//加载风场 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/