webgis 技术分享

1,096 阅读5分钟

什么是webgis?

webgis是将前端可视化技术与GIS技术相结合,提供更好的信息展示和用户交互。 近年来,前端技术日新月异,突飞猛进,发展十分迅速,尤其是以canvas和webgl为代表的前端可视化技术不断完善。实现了很多酷炫的效果,提供了良好的用户交互。 web前端技术和GIS技术深度融合,涌现出了大量优秀的框架。

.处理二维GIS的openlayers、MapBOX、leaflet

.处理三维GIS的cesium

这些框架的出现,为开发者提供了极大的便利

webGis开发需要掌握的技术

webGis开发需要掌握的很多第三方的技术、例如ArcGis/QGIS软件图层制作、ArcgisServer/GeoServer地图服务器对图层的管理、openlayer2D技术开发、Cesium3D技术开发、postGis数据库的使用、借助nginx发布离线地图、离线地图的瓦片的制作,有时候还需要借助一些其他网站的公开资源,例如阿里的国家地图GeoJson数据,天地图的各种底图、一些网站提供的shp文件转换其他文件格式等等....

WebGis开发中的一些概念

坐标系

WGS84和CGCS2000

CGCS2000(EPSG:4490)与WGS84(EPSG:4326)这两种坐标系都是地心坐标系,采用的参考椭球非常接近。由于扁率差异引起椭球面上的纬度和高度变化最大达 0.1mm,在当前测量精度范围内是可以忽略这点差异的,可以说两者相容至cm级水平,但若是一个点的坐标精度达不到cm水平时,就不认为CGCS2000和WGS84的坐标是相容的,反之两者皆可。 在现有的测绘精度和非专业情况下,可以将CGCS2000坐标系视为等同于WGS84。

GCJ-02

火星坐标系,国测局02年发布的坐标体系,在WGS84基础上加密而成,高德、腾讯、谷歌地图中国大陆板块等使用。

BD-09

百度坐标系,在GCJ-02基础上再次加密,百度地图使用。

js版本的坐标系转换[方法](https://blog.csdn.net/zhengjie0722/article/details/108534842)

地理编码

正向地理编码服务实现了将地址或地名描述转换为地球表面上相应位置的功能。

反向地理编码服务实现了将地球表面的地址坐标转换为标准地址的过程

底图数据

现阶段,电子地图瓦片主要使用两种方式,一种是传统的栅格瓦片,另外一种是新出的矢量瓦片(Vector Tiles),前者是采用四叉树金字塔模型的分级方式,将地图切割成无数大小相等的矩形栅格图片,由这些矩形栅格图片按照一定规则拼接成不同层级的地图显示。 矢量瓦片类似栅格瓦片,是将矢量数据用多层次模型分割成矢量要素描述文件存储在服务器端,再到客户端根据指定样式进行渲染绘制地图,在单个矢量瓦片上存储着投影于一个矩形区域内的几何信息和属性信息。当客户端通过分布式网络获取矢量瓦片、地图标注字体、图标、样式文件等数据后,最终在客户端进行渲染输出地图。

image.png

栅格瓦片

每一块都是图片,可以是.png,也可以是.jpg。 image.png

image.png

矢量瓦片

每一块都是由点、线、面构造的矢量数据。 矢量瓦片没有统一数据标准,mapbox基于Google protocol buffers制定了MAPBOX CECTOR TILE SPECIFICATION通用的矢量瓦片数据标准,被许多公司和组织采用。

image.png

图层

在不同的业务场景中,在底图上需要叠加不同的数据图层,如路网,兴趣点,河流等,对这些图层进行归类后其实就3类,点、线、面三种。通过对数据进行分层可以更好的处理业务之间的交互和减低检索的性能消耗。

image.png

1. 点

通常以图标的形式展示

image.png

2. 线

可显示导航信息,路网等信息

20191102224943877.gif

3. 面

可展示网格,行政边界,河流等信息。

image.png

气泡

在对点线面图层进行点击,浮动等交互的时候,展示一些数据信息的容器(覆盖物)。

1.以dom节点,通过传递给对应的地图开发api。(这种方案需注意css的编写)

2.将dom转成图片,通过框架的api当点绘制。(气泡无法进行复杂的交互)

image.png

聚合

将一些点位合并成一个点显示,这样减低gpu绘制的消耗。

聚合可根据数据量分成前端聚合和后端聚合,再应对大数据量呈现的时候,还可采用抽稀的方式提高地图浏览的体验。

image.png

热力图

热力图 通过不同颜色展示点位数据的密度信息。

image.png

掩膜分析

什么是掩膜,以物理的角度来看看掩膜分析到底是什么过程。 在半导体制造中,许多芯片工艺步骤采用光刻技术,用于这些步骤的图形“底片”称为掩膜(也称作“掩模”),其作用是:在硅片上选定的区域中对一个不透明的图形模板遮盖,继而下面的腐蚀或扩散将只影响选定的区域以外的区域。

地理信息中掩膜与其类似,用选定的面要素图形,对处理的要素进行进行遮挡,来控制要素显示的过程。

image.png

image.png

第三方插件

echart和mapv和地图引擎一样,都是使用canvas渲染的,可使用离屏渲染的技术将效果好的canvas库渲染成图片加载到地图引擎里。效果如下。

image.png

image.png

turf.js

一些基础的空间分析库。常用的有判断点与面的包含关系。