Leaflet
GIS开发者
辽宁工程技术大学硕士研究生毕业,长期从事WebGIS、移动GIS开发工作,全栈 (前端、后端、Android、小程序、H5),现任某地理信息公司研发部经理,叩叩965894265
展开
-
基于leaflet用svg图片实现一个最简单的室内地图
之前在CSDN上写了一些关于室内地图的博客,很多人问我要室内地图的资料,今天特地分享一个室内地图的demo,非常简单,但是展示效果还是非常好的。主要是有个室内地图的svg,然后通过leaflet加载出来。SVG展示由于没法展示svg,这里只能转成图片展示了leaflet加载效果实现代码<!DOCTYPE html><html lang="en"&g...原创 2019-12-05 10:00:42 · 4853 阅读 · 10 评论 -
Leaflet 加载Mapbox studio pbf格式矢量切片(二)
关于使用加载加载Mapbox studio pbf格式矢量切片,还有一种方案,使用leaflet-mapbox-gl。这个插件的本质是在leaflet上添加一个div图层,把这个div给mapbox作为容器进行渲染。可以简单的理解为两个div的叠加,当你移动地图时,两个地图同步移动。注意把Mapbox的地图背景设置成透明的MapboxGL设置地图背景透明,否则永远看不到leaflet图层。...原创 2019-09-24 21:00:35 · 3237 阅读 · 1 评论 -
Leaflet 加载Mapbox studio pbf格式矢量切片(一)
矢量切片数量小,传输速度快,不受分辨率影响,可以动态调整样式,有着不可替代的优点。最近在研究如何使用Leaflet加载Mapbox studio生成的pbf格式的切片。主要用了两种方案。这里讲第一种,使用Leaflet.VectorGrid插件。代码<!DOCTYPE html><html lang="zh-cn"><head> <met...原创 2019-09-24 20:21:45 · 2684 阅读 · 1 评论 -
基于Leaflet的地图导航与左右转弯提示
最近的一个小项目需求,需要在路径导航的基础上,增加左右转弯的提示,效果图吐下:导航的算法在之前的博文中均有提到,这里就提供一下左转右转的计算代码:/** * point1,2,2均为屏幕像素点,leaflet提供了转换方法 * @param point1 * @param point2 * @param point3 */function getLeftOrRight...原创 2019-01-25 17:19:52 · 2594 阅读 · 4 评论 -
Leaflet加载MBTiles离线瓦片数据
MBTiles利用SQLite数据库来存储,并提供一种规范,使得数以百万的瓦片数据存储在一个文件中,而且SQLite数据库支持多种平台,所以使用MBTiles在移动设备上浏览瓦片数据是比较理想的方式。在Leaflet上展示MBTiles数据需要使用Leaflet.TileLayer.MBTiles.js和sql.js。具体代码如下:<!DOCTYPE html><...原创 2018-06-25 15:15:05 · 7090 阅读 · 24 评论 -
Leaflet加载GeoServer发布的WMTS地图服务
leaflet本身并不支持WMTS服务,需要借助leaflet-tilelayer-wmts插件实现,但是插件是为通用WMTS服务实现的。在使用的过程中出现了无法调用的问题,这里进行了稍微修改。加载地图var map = L.map('map', { attributionControl: false, zoomControl: false, measureC...原创 2018-06-22 09:07:29 · 7062 阅读 · 1 评论 -
基于postGIS的室内地图最短路径算法四
在上一篇博文基于postGIS的室内地图最短路径算法三,虽然路径分析的结果,最后返回了起点到终点的完整线路,但是可能产生起点或终点到路网的连线穿越障碍物的情况,这里就需要用虚线表示。 这样就需要将路径分析的结果分三条记录返回,起点到路网、路网中路径、路网到终点线,并需要对这三段线进行区别。然后在Goeserver中配置样式。运行结果如下图所示:数据库代码:--DROP F...原创 2018-03-28 10:57:57 · 1827 阅读 · 5 评论 -
基于postGIS的室内地图最短路径算法三
在上一篇基于postGIS的室内地图最短路径算法二中,在路径搜索中加入了楼层分析的概念。在使用过程中会产生一个问题就是,只给出了路网上的线,没有给出起点、终点到路网的连线,用户体验很差。 在这里加入了起点终点到路网分析结果的连线,最后返回,geoserver和leaflet部分代码同前两篇路径分析代码一致,这里就只给出数据库代码:DROP FUNCTION pgr_flo...原创 2018-03-28 10:52:03 · 2246 阅读 · 2 评论 -
基于Leaflet的室内地图最短路径查询部分
使用LeafLet做的最短路径查询,服务使用的是前两篇博文中的地图服务,只是 将OpenLayer换成了LeafLet;效果图:核心部分代码如下:var route = { num: false, startPoint: null, endPoint: null, routingLayer: null, startMarker: null原创 2018-01-17 09:47:48 · 4419 阅读 · 2 评论 -
spatiallite空间数据库转换到leaflet.js的GeoJson格式
spatiallite是一个轻量型的空间数据库,可以将GIS的点线面数据以GeoJson的格式读取出来,但是这个GeoJson的格式与Leaflet的GeoJson格式不同,具体的格式大家可以去网上看。这里公布一下,转换的代码: public void queryGeometry(String tableName) { net.sf.json.JSONObject j原创 2017-10-24 08:32:27 · 1472 阅读 · 1 评论 -
Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定
Leaflet调用各种地图的功能十分复杂,幸好有leaflet.ChineseTmsProviders这个插件,这四种地图直接就可以加载进来,十分方便。下面是我做的例子:原创 2017-08-26 11:35:01 · 29363 阅读 · 14 评论 -
Leaflet加载百度题图
Leaflet是一款开源的轻量级地图插件,但是个人人为这个轻量级有点假,因为轻的代价就是很多东西都没有,需要插件或者自己扩展,在别人的基础上修改了加载百度地图的功能。 首先,需要使用leaflet的一款proj4插件。然后才能使用下面的代码。 测试 > var crs = new L.Proj.CR转载 2017-08-26 10:49:05 · 2832 阅读 · 3 评论