leaflet地图总结（不断更新）

一、创建leaflet地图

输入指令npm install leaflet

页面引入

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

页面创建展示地图的div

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

初始化地图

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, //去掉右下角logollayers: [layer],//图层});
}

OK，创建完成！

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

画点

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/

leaflet地图总结（不断更新）相关推荐

在Leaflet地图上集成Echarts
需求背景: 现在我要在地图上加上Echarts的散点图还有线集,看起来就很牛B的那种.上效果图: 需求分析: 我先看了看Echarts官网上有提供加载地图的例子,主要包括三种方式: 1.加载js格式的 ...
leaflet地图资源整理
leaflet地图资源整理均来自网络 React-Leaflet(v2.0-beta)を試す https://qiita.com/sugasaki/items/d225cf548e9a787dbd9c ...
浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式]
为什么要取这样的一个题目呢?主要是因为今天去了一家公司和他们谈了谈,本来是指望做兼职的,谈到最后当然是不成了.去谈的是地图制作(可兼职)一职,要求是地图制图经验,最后加了个有WEBGIS开发经验.本来 ...
Mapv 结合 Leaflet 地图使用
看了Mapv的源码才发现,它是支持 Leaflet 地图的,Mapv作者也是有和Leaflet地图结合的案例的,但是直接百度 "Mapv Leaflet" 却没有结果,为了补全这个 ...
leaflet地图插件汇总
参考博文 https://leafletjs.com/reference-1.7.1.html leaflet地图文档 https://blog.csdn.net/bigbear00007/artic ...
车机高德导航Linux版升级,高德地图车机版最新版本V2.8.2地图数据+软件更新方法...
最近购买了android的车载导航,导航用的是高德地图车机版,原车用的版本是2.0的版本,跟最近的2.8.2的差别有点大,这里就为大家分享一下如果将软件升级到2.8.2,地图也跟进更新到最新版本,方便 ...
leaflet地图原理_使用Leaflet创建地图拓扑图
之前我们采用过 Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一个古老项目,略显臃肿,对于现代的前端地图应用,显得笨重,在客户的介绍下,我们找到了leaflet - ...
leaflet地图截图批量导出(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
关于Leaflet 地图遮罩反选
关于Leaflet 地图遮罩反选最近项目用到leaflet作为地图开发插件,需要将某个区域突出显示,其余部分隐藏,之前做过百度地图的开发,有过类似的经验,就简单写一下作为记录. leaflet 地 ...

leaflet地图总结（不断更新）

一、创建leaflet地图

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

三、省、县、区域边界

四、热力图

五、动态风场

参考API文档

leaflet地图总结（不断更新）相关推荐

最新文章

热门文章