![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WEBGIS
文章平均质量分 67
才华横溢吴道简
实践出真知。
展开
-
GeoServer发布影像金字塔并leaflet加载
如果是几百M的影像数据,我们直接用GeoServer发布就可以了。但如果是几十G的影像数据怎么办?有经验的同学都知道,首选要先将影像数据构建成金字塔,才可以将数据发布浏览,要不然会卡死。我们现在就看下,怎么用GeoServer发布影像数据金字塔吧。一、安装插件ImagePyramid1-1.下载插件首先,我们要给GeoServer安装ImagePyramid插件:看下自己的GeoServer的版本号,在以下链接下载插件:因为我的GeoServer版本号是2.19.1,所以我下载插原创 2021-07-27 18:59:32 · 1600 阅读 · 1 评论 -
GeoServer+vue2+leaflet构建地图服务
因为geoserver就是后端服务,所以如果没有太强烈的数据安全需求,其实没有必要再加一个python django或者java springboot来做服务中转,转发请求。现在其实有一个大前端的概念,前端开发模式下,能模拟服务端请求,也能解决get和post请求的跨域问题,而且前端也可以直接部署到服务器上,所以,我们只要有一个前端平台就可以了。我这里选用的前端框架是vue2,主要出于三点考虑,其一是简单易用上手快;其二是leaflet对它的集成比较好;其三是用的人比较多,有点问题上网搜,容易找到回原创 2021-06-22 16:47:51 · 1601 阅读 · 2 评论 -
GeoServer+Django(python3)+leaflet构建地图服务
做个最简单的,地图服务用GeoServer发布;Django做后端转发服务请求,leaflet做前端渲染并实现绘制功能。Python是python3.7,IDE是社区版pycharm。GeoServer如何发布地图,并测试数据位置见视频教程与图文教程:https://zhuanlan.zhihu.com/p/377826133本例代码见git,如果觉得有用,辛苦帮忙点个star:https://github.com/yimengyao13/geoserver_django_leaflet原创 2021-06-17 18:44:05 · 2020 阅读 · 3 评论 -
GeoServer进阶:要素的增删改查
本节主题:使用geoserver进行属性和几何要素的增删改查,预计学习时间10分钟。查找:按属性查找、按位置查找;删除:按fid删除;新增:新增几何要素;修改:修改要素属性、修改要素几何。如何使用GeoServer发布地图,并样例数据下载位置,参见:https://zhuanlan.zhihu.com/p/377826133视频教程见:一、查找记得要先启动geoserver。先预热一下,打开网址http://localhost:8080...原创 2021-06-17 18:13:26 · 3518 阅读 · 6 评论 -
GeoServer速成:安装启动,发布地图,加载QGIS
本节主题:Geoserver下载配置启动,发布地图,发布服务用QGIS查看。预计时间15分钟。练习数据位置:https://download.csdn.net/download/sinat_41310868/19362372视频教程见:https://www.bilibili.com/video/BV1Sg41137EZ/如果CSDN图片不清楚,请移步知乎:https://zhuanlan.zhihu.com/p/377826133一、下载配置启动访问http://geoserver原创 2021-06-17 17:29:22 · 1709 阅读 · 1 评论 -
Leaflet实现测量功能
效果如下,标签中,In是前进方向的进入角度(方位角),out是出去角度(方位角),加号后面是当前完成的线段长度,黑色的当前完成的折线长度。代码如下:<!DOCTYPE html><html><head> <title>osm-测量</title> <meta charset="utf-8"> <style type="text/css"> body {...原创 2021-04-13 16:36:56 · 1275 阅读 · 0 评论 -
Leaflet加载高德瓦片到WGS84坐标系下
效果如下图,高德矢量底图、影像底图、OSM地图、天地图影像底图,坐标系都统一到WGS84坐标系下,复选框有注记图层和半透明底图图层。对图层进行叠加,能看出,纠正后的高德影像底图与OSM路网是套合的,说明瓦片中心点的平移,就能满足误差小于瓦片层级的像素分辨率,既误差在可见之内,那就够了。代码如下:<!DOCTYPE html><html><head> <title>高德-OSM-天地图瓦片对比</title&g...原创 2021-04-13 16:13:28 · 2856 阅读 · 0 评论 -
Leaflet加载百度瓦片到WGS84坐标系下
Leaflet加载百度瓦片到WGS84坐标系下百度技术真的很好,但还是忍不住吐槽,bd09坐标系、bd09mc投影、百度地图瓦片,真是诡异的存在。下面的代码能实现,将leaflet中加载的百度地图瓦片纠正到WGS84坐标系下。<!DOCTYPE html><html><head> <title>加载百度地图-WGS84坐标系</title> <meta charset="utf-8">...原创 2021-04-13 15:48:26 · 1558 阅读 · 0 评论 -
Leaflet加载百度地图
为了验证一下百度地图的影像、矢量、注记等瓦片数据是否是坐标统一的,写了一个简单的leaflet加载百度影像瓦片、矢量瓦片、注记瓦片的页面,叠加在一起,看了一下,果然坐标系是统一的。<!DOCTYPE html><html><head> <title>加载百度地图</title> <meta charset="utf-8"> <style type="text/css"&...原创 2021-04-13 10:30:51 · 2143 阅读 · 0 评论 -
百度地图瓦片切片规则
谷歌、高德、天地图、OSM、腾讯等的瓦片组织模式参见:https://blog.csdn.net/sinat_41310868/article/details/115561425这篇文章单独说一下百度地图的瓦片组织规则。相对于谷歌等地图的瓦片地图切片规则,百度的瓦片差异主要在如下两个方面:1.瓦片坐标系原点由东经180°,南纬85.05°,变为了东经0°,北纬0°,既赤道与格林尼治经线的交点。2.Y轴由向下,变为向上,既Y由南向北。原点也变了,坐标轴也转向了,百度地图这个瓦片切片模式,的原创 2021-04-11 23:32:11 · 4259 阅读 · 1 评论 -
WMTS服务及地图瓦片原理
WMTS,web map tile service,网络地图瓦片服务;TMS,tile map service,瓦片地图服务。名称虽然不一致,但指的都是地图瓦片服务,TMS形成更早,不过WMTS有官方OGC盖章认可。WMTS的目的是,更高效快速的加载渲染地图数据。如果海量的地图数据以矢量的形式传输到客户端,在客户端渲染,首先需要消耗大量的网络流量,其次对客户端的CPU也是很大的负荷。考虑到这些情况,WMTS提出预渲染图块的模式,在服务端将地图渲染好,并根据比例尺分割不同的栅格图块,根据客户端的请求,传输原创 2021-04-09 23:15:39 · 14030 阅读 · 3 评论 -
常用坐标系及投影:WGS84\GCJ02\CGCS2000\BD09\Pseudo-Mercator\UTM\BD09MC
把地图坐标系和相关投影的知识整理一下。一、简介先分类:WGS84\GCJ02\CGCS2000\BD09是地心坐标系,坐标表现形式为经度、纬度。Pseudo-Mercator\UTM\BD09MC是投影坐标系,坐标表现形式为x、y。WGS84\CGCS2000是原始坐标系,GCJ02\BD09是加密坐标系。目前,谷歌、OSM等地图使用的是WGS84坐标系和Pseudo-Mercator投影坐标系;高德、腾讯等地图使用的是GCJ02坐标系和Pseudo-Mercator投影坐标系;天地原创 2021-04-09 15:16:44 · 10296 阅读 · 1 评论 -
mapbox加载建筑物真型osm building
效果如下,按住ctrl键和鼠标左键,可以倾斜旋转地图。一、代码代码如下,把mapboxgl.accessToken替换成自己的key:<!DOCTYPE html><html><head><meta charset="utf-8" /><title>mapbox buildings</title><meta name="viewport" content="initial-scale=1.原创 2021-04-04 23:50:02 · 1121 阅读 · 0 评论 -
leaflet加载建筑物真型osm building
效果如下,按住alt键和鼠标左键,拖动鼠标,可以倾斜地图。一、代码代码如下:<html><head> <title>leaflet building</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <script src="https://unpkg.com...原创 2021-04-04 23:16:04 · 1315 阅读 · 1 评论 -
Leaflet渲染TopoJSON数据demo
非常简单,就是做一下topoJSON数据的渲染,用的是leaflet。代码如下:Html:<html><head> <title>leaflet TopoJSON</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <script src="https:...原创 2021-03-30 22:03:08 · 444 阅读 · 0 评论 -
geojson和topojson数据格式
要对地理要素数据进行传输和渲染,有两种数据格式必须要了解,基于json的地理要素扩展格式geojson,和基于geojson的拓扑扩展格式topojson。一、geojsonGeoJSON是一种基于JSON的地理空间数据交换格式,它定义了几种类型JSON对象以及它们组合在一起的方法,以表示有关地理要素、属性和它们的空间范围的数据。2015年,互联网工程任务组(IETF)与原始规范作者组建了一个GeoJSON工作组,一起规范GeoJSON标准。在2016年8月,推出了最新的GeoJSON数据格式标原创 2021-03-30 21:08:59 · 1147 阅读 · 0 评论 -
前端实现概化算法:Douglas-Peucker和Visvalingam-Whyatt
拿内蒙古自治区的省界线,做道格拉斯-普克算法的概化测试。前端用的是leaflet,大概效果如下,黑色的线是原始的省界线数据,红色的线是概化成101个节点后的效果,参数由url传递,nodes=101。通常情况,我们做数据概化,选用的参数也都是概化后的节点数量,而不是距离容差,这样计算效率和渲染效率会更高。全部代码如下:Leaflet_map.html:<!DOCTYPE html><html><head> <...原创 2021-03-29 00:42:22 · 1147 阅读 · 1 评论 -
位置数据可视化工具kepler.gl
提供位置数据可视化的平台挺多的,先捡重点的,说下mapbox的kepler.gl,废话放在后面。除了mapbox生态,我最近也没有找到能把地图可视化做的更全面的平台了,支持专题图、支持三维、支持空间计算,支持位置可视化。All in。kepler.gl不仅是支持js api,更支持通过平台操作,无代码制作位置数据可视化地图。效果看上去很炫酷。会写代码的,直接引用js api就行,参考:https://github.com/keplergl/kepler.gl,https://docs.k原创 2021-02-25 22:53:09 · 3818 阅读 · 2 评论 -
三维地图数据资源汇总
做地图应用,数据很重要,看看从哪里能获取数据吧。要做三维地图应用,至少需要以下几种类型的数据:影像,DEM、BIM、CIM。一个一个来。一、影像各家地图,高德、百度、腾讯、天地图、谷歌、必应,都提供影像地图。直接访问访问网站,就能获取到地图瓦片。https://ditu.amap.com/?amapexchange=%2Fhttps://map.baidu.com/@12985426.375229215,4812340.450940835,13.18z/mapty...原创 2021-02-22 22:13:46 · 7184 阅读 · 0 评论 -
mapbox turf求缓冲区demo(代码)
Mapbox是一个大而全的开源地图前端平台,turf是mapbox的一个开源的地理空间计算脚本js库。Turf可以在前端实现缓冲区计算、拆分、合并、不规则三角网生成等功能。Turf官网:http://turfjs.org/Turf的github:https://github.com/Turfjs/turf/以下是用mapbox和turf实现一个查看缓冲区的页面。代码如下:<!DOCTYPE html><html><head>..原创 2021-02-21 21:56:37 · 1316 阅读 · 0 评论 -
三维地图前端js api对比分析
三维前端渲染的技术已经很成熟了,可使用的商业、开源的js api也很多,很多时候,三维地形数据的展示效果、效率不尽如人意,原因和难点不在于前端,而在于后台数据的质量和数据的组织方式,还有硬件的配置。以下简单盘点一下市面上比较常用的三维地图前端js api吧。一、单项简述1.高德、百度、天地图目前国内的图商,高德、百度、腾讯都不支持实际意义上的三维渲染,支持的只是影像地球或2.5D。例如百度的卫星地球:http://lbsyun.baidu.com/jsdemo.htm#w...原创 2021-02-21 21:35:43 · 3099 阅读 · 0 评论 -
2.5维地图前端js api对比分析
汇总一下市面上能支持2.5D的地图相关前端。一、2D、2.5D、3D区分我们一般习惯于将地图分为2D、2.5D、3D,2.5D是介于二维和三维之间的一种假三维地图,说它不是三维吧,它还有高度概念,说它是三维吧,它还不太真实。二维地图长如下,完全平面:三维地图长如下,栩栩如生:2.5维长如下,建筑物轮廓是有呈现的,但它只是抽象模型,并不是真实还原的:2.5维最常见的是CIM模型,柱形图等。目前大部分开源的、商业的、平台的地图前端,都...原创 2021-02-21 00:59:13 · 3431 阅读 · 0 评论 -
二维地图前端js api对比分析
我一直认为,实践是检验真理的唯一标准。这段时间,分别用7个地图前端js api做了同一份专题图,so,可以通过实践,说出这7个前端各自的优劣和适用方向。这7个地图前端分别是:百度地图、腾讯地图、高德地图、天地图、mapbox、leaflet、openlayer,至于谷歌地图、必应地图、搜狗地图等,要么国内很少用,要么太小众,就没实践。一、教程列表专题图制作教程如下(包含代码):CSDN (没有效果图片,说图片违规,属于网站误杀):百度地图JS API制作专题图https:/...原创 2021-02-15 20:33:52 · 1470 阅读 · 2 评论 -
openlayer制作专题图
最近看了一份人民大学的报告,《中国城市政商关系排行榜2020》,https://new.qq.com/omn/20201230/20201230A0F3MY00.html。讲的是中国各个城市的政商关系健康指数,决定拿这份报告中的数据,来做一份html的专题图。数据是使用python脚本从腾讯地图webapi上获取的,前端页面使用的是高德地图瓦片。效果如下:一、数据获取参考腾讯web api:https://lbs.qq.com/service/webService/web...原创 2021-02-14 09:52:29 · 1254 阅读 · 0 评论 -
Leaflet制作专题图
最近看了一份人民大学的报告,《中国城市政商关系排行榜2020》,https://new.qq.com/omn/20201230/20201230A0F3MY00.html。讲的是中国各个城市的政商关系健康指数,决定拿这份报告中的数据,来做一份html的专题图。效果如下(腾讯瓦片):一、数据获取参考腾讯web api:https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistrict脚本:...原创 2021-02-12 22:54:37 · 1193 阅读 · 0 评论 -
天地图JS API制作专题图
最近看了一份人民大学的报告,《中国城市政商关系排行榜2020》,https://new.qq.com/omn/20201230/20201230A0F3MY00.html。讲的是中国各个城市的政商关系健康指数,决定拿这份报告中的数据,来做一份html的专题图。效果如下(有审图号,地图不违规):一、数据获取做这份专题图,需要两个数据,一个是各省的边界数据,一个是各省的政商关系健康指数,后者从报告中摘取就行。前者的参考腾讯地图web api:https://lbs.qq...原创 2021-02-12 15:25:20 · 1239 阅读 · 0 评论 -
百度地图JS API制作专题图
最近看了一份人民大学的报告,《中国城市政商关系排行榜2020》,https://new.qq.com/omn/20201230/20201230A0F3MY00.html。讲的是中国各个城市的政商关系健康指数,决定拿这份报告中的数据,来做一份html的专题图。效果如下:一、数据获取做这份专题图,需要两个数据,一个是各省的边界数据,一个是各省的政商关系健康指数,后者从报告中摘取就行。前者的参考腾讯地图web api:https://lbs.qq.com/service/webSe.原创 2021-02-12 09:06:26 · 1595 阅读 · 0 评论 -
Python3 Wgs84\gcj02\bd09\mercator\bd09mc坐标系转换与投影
最基础的一组经纬度坐标转换,在网上找到过JavaScript和java版本的,但是没有找到python版本的,把JavaScript版本的改成了python版本的,能凑合用。"""# wgs84\gcj02\bd09坐标系转换# wgs84\Pseudo-Mercator投影转换# bd09\bd09mc投影转换"""import mathx_pi = 3.14159265358979324 * 3000.0 / 180.0pi = 3.1415926535897932384626...原创 2021-02-11 20:54:43 · 2499 阅读 · 6 评论 -
MAPBOX制作专题图
最近看了一份人民大学的报告,《中国城市政商关系排行榜2020》,https://new.qq.com/omn/20201230/20201230A0F3MY00.html。讲的是中国各个城市的政商关系健康指数,决定拿这份报告中的数据,来做一份html的专题图。数据是使用python脚本从腾讯地图webapi上获取的,前端页面使用的是高德地图瓦片。效果如下:一、数据获取参考腾讯web api:https://lbs.qq.com/service/webService/web...原创 2021-01-29 08:08:03 · 1175 阅读 · 0 评论 -
高德地图JS API制作专题图
最近看了一份人民大学的报告,《中国城市政商关系排行榜2020》,https://new.qq.com/omn/20201230/20201230A0F3MY00.html。讲的是中国各个城市的政商关系健康指数,决定拿这份报告中的数据,来做一份html的专题图。效果如下:一、官方示例1.简易行政区图+标注https://lbs.amap.com/api/javascript-api/example/district/district-labels2.行政区拾取+修...原创 2021-01-23 08:19:30 · 1248 阅读 · 0 评论 -
腾讯地图JS API制作专题图
最近看了一份人民大学的报告,《中国城市政商关系排行榜2020》,https://new.qq.com/omn/20201230/20201230A0F3MY00.html。讲的是中国各个城市的政商关系健康指数,决定拿这份报告中的数据,来做一份html的专题图。效果如下:一、数据获取做这份专题图,需要两个数据,一个是各省的边界数据,一个是各省的政商关系健康指数,后者从报告中摘取就行。前者的参考腾讯地图web api:https://lbs.qq.com/service/webSe.原创 2021-01-21 22:04:30 · 2328 阅读 · 0 评论 -
三维地图之cesium轨迹回放(有代码)
一、cesium加载三维地图和三维模型Cesium的官方教程写得是非常详尽的,用chrome打开官方学习文档https://cesium.com/docs/,一键翻译,照着学习是最好的方案。最简单的加载三维地图的方法:https://cesium.com/docs/tutorials/quick-start/代码非常简短,如果你注册了cesium,网站会自动识别你的ak,填充入代码中。(下面这段代码,把Cesium.Ion.defaultAccessToken = 你的ak中,你的ak.原创 2020-10-25 22:30:57 · 5239 阅读 · 3 评论 -
三维地图之cesium加载天地图(有代码)
天地图官网上写了cesium加载天地图的方法,http://lbs.tianditu.gov.cn/docs/#/sanwei/,但读起来,写起来,的确令人费解。下面写一段非常简单的代码,用cesium加载天地图影像和影像注记,并且飞行到中国。效果如下:代码非常简单,把其中的cesiumAsset换成在cesium官网注册的asset,tiandituTk换成在天地图官网上注册的tk就行。<!DOCTYPE html><html lang="en"><原创 2020-10-22 23:45:28 · 8436 阅读 · 4 评论 -
Cesium开发学习路径
Cesium.js是做三维地球建模可视化的前端库,网上的教程很多,官网文档和例子都非常详细,这里只是整理一下学习路径,以备后续不时之需。一、中文网络资料Cesium有一定的使用基数,所以搜索cesium中文教程有很多结果,有整理得很详细的中文网站:Cesium中文网:cesium.coinidea.com/Cesium中文网:cesium.xin/Cesium资料大全:https://zhuanlan.zhihu.com/p/34217817,这里整理的资料很全,还有视频资料。.原创 2020-08-13 22:31:05 · 2192 阅读 · 0 评论 -
Cesium平台构建诗词地图故事
Cesium平台访问起来的确很慢,但有时候又没有慢到令人发指,尤其是在不加载3D模型,仅展示三维地球和kml的时候,还是能忍受的。所以,可以用cesium制作地图故事。一、地图故事效果制作的地图故事效果如下:查看网址:https://cesium.com/ion/stories/viewer/?id=e8c4c827-cd3a-4516-9808-61e3925786a8嵌入了三首诗词,按时间顺序来。第一首是柳永的《望海潮·东南形胜》,1054年写于杭州西湖,彼时,东南形胜,歌.原创 2020-08-12 21:48:02 · 665 阅读 · 0 评论 -
三维地图之cesium入门使用
三维地图与三维空间建模,目前来看,应用还是在可视化层面,因为硬件设备的限制,可视化的效果也不尽如人意。只要加载的数据量一大,或者非本地数据网络不极速,渲染就会非常卡顿,呈现出满屏后现代主义的拼贴风格。做三维地图的桌面端软件有Google earth,但Google earth做出来的东西只能自己看,不太好共享,如果想做一个能共享的web应用,还得使用前端技术,cesium就可以。当然卡顿的问题,哪里都存在,这个得靠摩尔定律来解决了。一、什么是cesiumcesium.js是一个开源的前.原创 2020-08-10 22:55:11 · 14023 阅读 · 0 评论 -
三维地图之Google earth安装使用
整理一些三维地图相关的技术,目前来看,三维地图都是用于展示的,其他的交互和更深层次的分析利用几乎没有。毕竟Google Earth面世这么多年了,除了能看,好像也没有什么其他的用处。一、什么是Google EarthGoogle Earth是Google提供的一款免费的桌面端软件,使用户可以采用上帝之眼的视角查看地球。Google Earth官网:earth.google.com/,但是因为国内把谷歌禁了,所以无法访问。Google Earth贴吧:https://tie..原创 2020-08-09 21:51:56 · 2566 阅读 · 0 评论 -
GIS开发实战图谱
总结了GIS开发的技术栈,罗列了应该了解的内容。算是比较大而全的了,分理论、规范、数据、算法、软件、后端、前端、方向8个专项。不求短期内全部都会,但还是一个比较好的学习框架和实践索引,如果基础好的话,两三年达到入门水平,应该是没有问题的吧,不过凡事,因人而异。内容比较多,一个一个说吧。一、理论学好理论知识非常重要,尤其是GIS还是相对来说比较偏冷门的内容。刚入门看不出来,但时间长了,基础才决定一个人的技术之路能走多远。学理论和基础,手头需要备几本专业书,谁知道网上..原创 2020-06-29 00:11:20 · 9304 阅读 · 4 评论 -
leaflet学习路径
本文是一个学习leaflet的索引说明文档,因为leaflet的官方文档非常清晰详实,所以,只要知道大体的方向,就能很好的自学。一、leaflet优势前端地图框架不少,leaflet凭借简单、易用、上手快、拓展多、轻量级等优点,一直深受欢迎,由github上的点星量就可见一斑。1.简单上手快如果说,学习使用腾讯、百度、高德图商的前端js api的难度是1,那么学习使用leaflet的难度也是1。而且相对于封装性很强的图商js api,leaflet更灵活,更可配置,能加载更多的地图,设置原创 2020-06-07 23:15:41 · 1284 阅读 · 0 评论 -
GIS数据源汇总
1.OSM open street map数据下载:download.geofabrik.de/可以分国家分地区下载OSM地图的所有矢量数据。2.地理信息专业知识服务系统:kmap.ckcest.cn/可以下载地表覆盖数据,和1:100万全国地形图、1:25万全国地形图等。3.全国地理信息资源目录服务系统www.webmap.cn/main.do?method=index可以下载不涉密的影像数据。4.地理空间数据云www.gscloud.cn/...原创 2020-05-30 23:21:33 · 1981 阅读 · 0 评论