![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Leaflet学习笔记
hpugisers
每天进步一点点,美滋滋
展开
-
Leaflet之一个简单的地图展示
至于为啥要学Leaflet我也不知道为啥,随便学学,以后可能用的上,Leafleat好小啊1.4M,很轻巧,官网给的API简单明了,很简单,基本的地图操作都有,支持浏览器和手机客户端一、文件引入(这里用的官网最新的那个18年发布的) <link href="Script/leaflet/leaflet.css" rel="stylesheet" /> <script...原创 2018-07-09 16:21:32 · 2153 阅读 · 1 评论 -
Coverage [minx,miny,maxx,maxy] is [12, 4, 13, 6, 3], index [x,y,z] is [2, 5, 3]错误原因及其解决方式
加载矢量切片的时候会出现上述错误,为什么会出现上述错误呢?以前我也遇到过,今天有个人问我就在这写一下供他人参考。主要的原因是map中设置的坐标系和请求url中坐标系不一致。Openlayers解决方案 var map = new ol.Map({ layers: [osm, vectorTile], target: 'map',...原创 2019-01-11 21:09:56 · 3128 阅读 · 4 评论 -
leaflet加载高德地图和Geoserver的WMS服务
本文主要将如何通过tileLayer加载高德地图,如何通过tileLayer.wms加载Geoserver的WMS服务,下面介绍主要的代码效果图:注:中国板块图是加载Geoserver的WMS服务完成的一、加载高德地图代码 var url = "http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={...原创 2018-11-16 21:11:51 · 7066 阅读 · 1 评论 -
LeaFlet中切片图层使用自定义坐标系
leaflet给定的坐标系中规中矩,就那几个,如果在项目遇到了需要用到我国2000一类的坐标系,怎么办?解决方法只有一个那就是自定义坐标系,由于leaflet是轻量性的,自定义坐标系需要借助Proj4Leaflet,leaflet的生态非常好,插件很多,这是他的有点也是它的缺点。一、如何定义坐标系1、引入插件2、查询所要的定义的坐标系的EPSG,然后https://epsg.io/...原创 2018-11-10 21:25:50 · 6824 阅读 · 0 评论 -
leaflet加载GeoServer的WFS服务
geoserver 能很好地和ol进行结合,geoserver是一个很好的开源的服务器,免费开源,虽然在使用上还比不上ArcGerser但是开源,leaflet主框架支持加载wms服务,没有WFS服务,加载WFS需要用个WFS插件,但是限制太多,在这里选用的方式为Ajax的方式加载,加载返回geojson数据结合散点聚合插件。效果图:一、加载数据代码 fun...原创 2018-10-16 21:56:28 · 5495 阅读 · 5 评论 -
LeaFlet自定义控件
前言:在控件自定义上,比较简单,我们只需要按照特有的模板进行,简单的填充就行了,在模板中添加适当的方法即可。一、基本模板L.Control.XXX= L.Control.extend({ //在此定义参数 options: { }, //在此初始化 initialize: function (options) { L.Uti...原创 2018-09-21 11:09:01 · 3888 阅读 · 2 评论 -
LeaFlet如何和canvas结合进行绘图
前言:canvas是一个非常好的东西,但是这个东西如何与leaflet进行结合,翻了一遍LeaFlet的API没有发现如何用canvas和LeaFlet相结合,难道两者无法集合天无绝人之路,最终我还是找到了DivIcon相结合,能达到目的。也可以利用DivIcon做一些简单的动画,当然也可以同样结合canvas进行绘图动画,下面就看一下如何结合:效果图:一、声明DIVIcon ...原创 2018-09-08 15:58:02 · 6943 阅读 · 2 评论 -
LeaFlet学习之Handler类
前言:Handler,是地图交互的一个类,该类主要是用于和地图的一些基本的交互,例如,缩放,平移一些操作,在map类有handler对象,在map对象中,好多人误认为这是一种属性,用=进行赋值操作,这样做是错误的。下面结合map类中的对象进行一些介绍。首先看张图:一、handler类的一些基本的方法enable()该方法是启用handler disable()该方法是禁用hand...原创 2018-08-30 20:42:57 · 700 阅读 · 0 评论 -
LeaFlet之GeoJson类介绍
前言:对于GeoJson数据相信身为一个GISer都会多少有一些了解,是一种非常重要的数据格式,OL和LeaFlet都有读取该数据格式的方式,在LeaFlet中读取该数据的格式的一些方法,封装到GeoJson类中。一、创建形式L.geoJSON(<Object> geojson?, <GeoJSON options> options?)代码示例:L.geo...原创 2018-08-19 21:46:55 · 4492 阅读 · 0 评论 -
LeaFlet迁徙图的制作
前言:在arcgis openlayer 都会用到迁徙图,这些图都是为了展示一些是数据所需要的,做了一年的gis开发,给我的感受WebGIS始终围绕的是对数据的展示,并不是侧重于数据的深挖掘,WebGIS在分析上还欠完善,个人认为,现在的WebGIS还是查一查,看一看,和前几年的三维可视化差不多,废话不多说,说到用到展示数据,echarts是一个很好的工具,让leaflet和Echarts相结合,...原创 2018-08-18 16:08:01 · 3361 阅读 · 0 评论 -
LeaFlet结合leaflet-dvf实现数据可视化
前言:说起来GIS我觉得侧重于分析,渲染展示,做出来一些直观的专题图让人一眼就能了解数据的含义,今天结合的leaflet的插件实现数据的可视化,该插件可以做很多的功能,下面是一些地址:api插件地址:https://github.com/humangeo/leaflet-dvf/wiki/6.-Markers#lstarmarker在线引用地址:https://cdnjs.com/libr...原创 2018-08-12 21:07:52 · 1630 阅读 · 0 评论 -
LeaFlet学习之聚合效果
leaflet实现聚合效果是通过插件进行的,虽然leaflet是轻量级的但是,许多功能都是没有依赖插件来完成,关于这有缺点也有有点,通过这几天对leaflet感觉一直都在依靠插件完成,本身就两个主题类,map和layer,如果是小型项目展示地图一类的,做一些基本的功能leaflet非常适合,给我最大的感觉leaflet生态环境很好。这里用的不是纯聚合插件,实在聚合插件基础上衍生出的动态移动的聚合插...原创 2018-07-20 21:59:21 · 7465 阅读 · 10 评论 -
LeaFlet学习之地图文字标注
在地图上进行一些文字的标注有些场景我们会用到,在这里我们文字标注用到了DivICon图标,通过与mark相结合,将mark的图标设置为DivICon图标,进行文字标注,放张图看看效果:一、全部代码<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta h...原创 2018-07-28 21:41:25 · 19542 阅读 · 6 评论 -
LeaFlet学习之热力图
这两天一直 在整这个热力图,官网给的插件用的heatmap.js打开插件,很恶心的是我并没有找到插件下载压缩包,无奈我就用给出的demo里面的js做的。一、需要拖入的js <link href="Script/leaflet/leaflet.css" rel="stylesheet" /> <style> #map{ ...原创 2018-07-28 16:31:28 · 7301 阅读 · 0 评论 -
LeaFlet学习之结合turf.js生成简单的等值线demo
本文主要结合turf.js生成等值线俺,进行展示效一、放张图:二、全部源码<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=ut...原创 2018-07-25 10:52:50 · 10487 阅读 · 28 评论 -
LeaFlet学习之动态绘制图形
底图使用mapbox设置样式加载的,由于mapbox我也只会简单的应用在这里就不多说了,本文主要讲的是动态图形的绘制写的比较糙,代码重复太多,仅为展示所用,可以动态绘画点,线,圆,多边形。一、概述主要的用的就是事件click、mousedown、mousemove、mouseup事件,Leaflet对绘图好像没有怎么封装,我们要想自己动态绘制主要通过事件自己实现,代码不难,简单易懂。二、底图加载 ...原创 2018-07-13 18:23:10 · 5471 阅读 · 7 评论 -
LeaFlet学习之GridLayer扩展
官网给的解释:处理HTML元素的网格的泛型类。这是所有tile层的基类,并替换TileLayer.Canvas。GridLayer可以扩展为创建一个HTML元素的网格,比如。GridLayer将为您处理创建和动画这些DOM元素。放张图一、createtile方法1、同步使用要创建自定义层,请扩展GridLayer并实现createTile()方法,该方法将通过一个带有x、y和z...原创 2018-07-23 19:39:31 · 2383 阅读 · 0 评论 -
LeaFlet加载矢量切片
已经谢过了Openlayer的矢量切片,在这里写一篇关于LeaFlet加载矢量切片的文章,关于矢量切片的概念可以参考我写OpenLayer加载矢量切片的那篇文章传送文章一、效果图二、需要用到的插件leaflet 需要使用插件L.vectorGrid.protobuf 这只是插件的一个类用来加载pbf,L.VectorGrid.Slicer用来加载geojson和Protobuf(pb...原创 2019-01-12 20:22:51 · 7450 阅读 · 2 评论