Skip to content

WebGIS

GIS开发也叫webgis,web就是指网页端,所以GIS开发大部分情况下是指网页端的地图可视化开发。

三维GIS是在传统二维GIS基础上再一步扩展,增加了对地球表面的第三维度,即高度或深度。研究的对象也都是三维的,如地质、水文、采矿、地下水、灾害、污染、城市规划,建筑规划等等。相比于二维层面的WebGIS,三维GIS能够更好的分析和处理地理空间数据,使用准确的三维地理模型可。以帮助决策者和规划者更好地理解地理空间数据,进行可视化分析。

常见的WebGIS开源框架有:OpenLayersLeafletMapBoxMapFishGeoServer、GeoEXT、MapInfo,Cesium等等,我们常用的有OpenLayers、Leaflet、MapBox以及Cesium四大框架。

1、四大前端地图库介绍

Leaflet: 地理信息可视化神器

Leaflet 是一个轻量级、易于使用的开源 JavaScript 库,为开发者提供了创建交互式地图的强大工具。它具有丰富的地图功能和插件生态系统,支持各种地图数据源,从基本的点标记到复杂的地图覆盖物都可以轻松实现。Leaflet 的优势在于其简洁性和易用性,使得它成为初学者和专业开发者的首选。

除了在普通地图应用程序中广泛应用外,Leaflet 在公共卫生和生物计算等领域也有着广泛的应用。

评价: Leaflet 对 vue 支持较好,与前端交互方便,对地图服务支持不好,性能较差,点位超过两三千就会变卡

OpenLayers: 功能强大的地图库

OpenLayers 是一个开源的地图库,用于在 Web 应用中展示交互式地图。它使用 JavaScript 构建,并且支持多种地图数据源,包括 OpenStreetMap、Google Maps、Bing Maps 等。OpenLayers 提供了丰富的地图功能和交互性,使开发者能够在网页中轻松集成地图,并实现各种地理信息展示和交互。

OpenLayers 能够帮助开发者使网页程序拥有强大的地图功能,用于实施各种项目,包括地理空间搜索、室内分析、地图影像分析和动画模拟等。例如,使用 OpenLayers,开发者可以创建支持多个空间图层的互动 Web 应用程序,可以显示不同底图和支持多种地图操作,比如缩放和平移。此外,开发者还可以在其中添加自定义内容,如文字标签和街景,使 Web 地图更加完整和生动。

主要功能使用场景:

  1. 地图展示和导航
  2. 地图数据可视化
  3. GIS 应用开发
  4. 地图数据分析

主要应用场景:

  1. 支持多种地图数据源
  2. 丰富的地图控件
  3. 矢量数据渲染
  4. 空间查询和分析
  5. 支持移动设备

评价: OpenLayers 对各种地图服务支持较好,比如各种 vms,vmts 等。OpenLayers 性能好,可以支持超大数据量点位叠加,超过百万数据量点位只能用 OpenLayers,动态效果较差,动态效果实现完全看个人技术沉淀。

  1. OpenLayers 详细介绍和 OpenLayers 的优点有哪些?
  2. vue 项目集成并使用 OpenLayers 地图的两种方式
Mapbox : 高性能的地图渲染

mapbox 是一个开源的地图类库,通过使用 mapbox 的类库,可以很方便的构建 web、app 等地图应用,支持的地图 sdk 有 web、ios、Android 和 Unity。

mapbox gl js 是 mapbox 地图的一部分,使用了 webgl 技术渲染地图上的一些酷炫的效果。

网址:https://docs.mapbox.com/mapbox-gl-js/overview/

mapbox gl 要使用 mapbox 在线的一些资源,所以,要申请开发者的 key 才能进行开发使用。 mapbox gl 包括了二维三维地图的交互,三维地图是在平面地图的基础上进行立体展示,三维模型是简单的颜色形状渲染,能够基于 geojson 数据进行渲染,渲染的数据量还是挺可观的,并可以进行数据的交互。

Maplibre-gl: 继承自 Mapbox-2d 的开源分支,Mapbox 商业化后 Maplibre-gl 项目从 Mapbox-2d 的开源分支开始继续维护更新,号称地图服务中动态效果最好的库,插件较多,个人感觉像是地图引擎里的游戏引擎,各种动态效果极好。(注:国内 supermap 等地图引擎也都基于 Mapbox-2d 开源分支开发而来。)

Cesium: 三维地球的奇妙之旅

Cesium 是一个用于创建三维地球和地图应用程序的 JavaScript 库。它利用 WebGL 技术实现高性能的地球渲染,为开发者提供了强大的地理空间分析和可视化功能。Cesium 不仅支持地球表面的三维渲染,还可以展示地球上的各种数据,如卫星轨道、地质信息等。借助 Cesium,开发者可以在 Web 浏览器中实现惊人的三维地球应用

Cesium 目前的功能: 3D 地球可视化漫游和导航地形和影像数据 3D 建筑模型 3D TilesCZML 实时位置追踪地下和空中场景天文数据集成其他 GIS 工具

Cesiumjs 开源的三维地图引擎,主要是面向 BIM(注:国内 supermap-3d 等地图引擎也都基于开源 Cesiumjs 修改而来。)

2、OGC

OGC 全称是开放地理空间信息联盟 (Open Geospatial Consortium), 是一个非盈利的国际标准组织,它制定了数据和服务的一系列标准,GIS 厂商按照这个标准进行开发可保证空间数据的互操作, 致力于提供地理信息行业软件和数据及服务的标准化工作。

3、几种地图服务介绍

WMS(Web Map Service)

网络地图服务,它是利用具有地理空间位置信息的数据制作地图,其中将地图定义为地理数据的可视化表现,能够根据用户的请求,返回相应的地图,包括 PNG、GIF、JPEG 等栅格形式,或者 SVG 或者 WEB CGM 等矢量形式。WMS 支持 HTTP 协议,所支持的操作是由 URL 决定的。 个人理解 WMS 动态地图服务,在 ArcGIS 中我们经常利用理由的 mxd 文件发布的服务,就是这种地图服务,如果你的数据会变化,建议发这种服务。这种服务优点是动态,缺点是慢。

WMS 服务提供的功能:

  • GetCapabitities:返回服务级元数据,它是对服务信息内容和要求参数的一种描述。
  • GetMap:返回一个地图影像,其地理空间参考和大小参数是明确定义了的。
  • GetFeatureInfo:返回显示在地图上的某些特殊要素的信息。
  • GetLegendGraphic:返回地图的图例信息。
WMS-C(Web Mapping Service - Cached)

对它完整的定义来源于 OSGeo Wiki,2006 年在 FOSS4G 会议上提出讨论,目的在于提供一种预先缓存数据的方法,以提升地图请求的速度,自始至终该标准都没有写入 OGC 之中。 可以理解为 WMS 的升级版,预先缓存瓦片,按需请求,提高了访问的速度。

TMS(tile map Servcie)

TMS 图层(Tile Map Service Layer)是一种用于显示地图数据的图层类型。它基于瓦片(Tile)的概念,将地图数据切割成小块瓦片,并以金字塔形式组织在服务器上。在使用 TMS 图层时,地图客户端通过请求服务器获取需要显示的瓦片,然后将这些瓦片拼接在一起形成完整的地图。

TMS 图层提供了一种灵活、快速的方式来加载和显示地图数据。瓦片的切割和缓存使得只需加载和显示当前视窗范围内的瓦片,从而提高了地图显示的性能。此外,使用 TMS 图层可以方便地支持多个不同的投影和坐标系。

TMS 图层常用于地图应用程序和地理信息系统(GIS)中,用于显示各种类型的地图数据,如街道地图、卫星影像、地形图等。许多地图供应商和开源地图库都支持 TMS 图层,使得开发人员能够轻松地集成和显示各种地图数据。

XYZ

XYZ 图层是一种常见的地图瓦片切割方案,也被称为 Slippy Map 的标准。它是由 Google Maps 引入,并广泛应用于许多地图应用程序和地理信息系统中。

在 XYZ 图层中,地图数据被切割成小块的瓦片,每个瓦片都具有唯一的行列编号以及对应的缩放级别。XYZ 图层的瓦片编号方式通常为(列,行,缩放级别),其中列和行从左上角开始逐渐增加,缩放级别通常从 0 级开始逐渐增加。

具体地,XYZ 图层的特点包括:

  1. 瓦片编号方式:XYZ 图层使用(列,行,缩放级别)的瓦片编号方式。列和行的编号都从左上角开始,列从左到右逐渐增加,行从上到下逐渐增加。缩放级别从最小级别(通常为 0 级)开始逐渐增加,表示地图数据的精细程度增加。

  2. 坐标系:XYZ 图层通常使用 Web 墨卡托投影(Web Mercator Projection)作为默认的坐标系。这是一种二维平面坐标系,适用于在 Web 上显示地图数据。

  3. 数据加载:地图客户端通常通过发出 URL 请求来获取所需的瓦片数据。URL 中的占位符会被具体的行、列和缩放级别值替换,以便获取相应的瓦片数据。

XYZ 图层已经成为开发地图应用的常用标准,许多地图库和地图供应商都支持 XYZ 图层,使得开发人员可以轻松地集成和显示各种类型的地图数据,例如街道地图、卫星影像、地形图等。

img

XYZ 和 TMS 区别

TMS 图层(Tile Map Service Layer)和 XYZ 图层是两种常见的地图瓦片切割方案,它们均用于在地图应用中加载和显示地图数据,但存在一些区别。

TMS 图层:

瓦片编号方式:TMS 图层使用(列,行,缩放级别)的瓦片编号方式,其中列和行从左上角开始递增,缩放级别从最大级别开始递减。 行列编号方向:行和列的编号都从左上角开始,行从上到下递增,列从左到右递增。 缩放级别:缩放级别从最大级别(通常为 0 级)开始递增,表示地图数据的精细程度降低。

XYZ 图层:

瓦片编号方式:XYZ 图层使用(列,行,缩放级别)的瓦片编号方式,其中列和行从左上角开始递增,缩放级别从最小级别(通常为 0 级)开始递增。 行列编号方向:行和列的编号都从左上角开始,行从上到下递增,列从左到右递增。 缩放级别:缩放级别从最小级别(通常为 0 级)开始递增,表示地图数据的精细程度增加。 两者的主要区别在于瓦片编号中缩放级别的起始点和变化方向。在 TMS 图层中,较小的缩放级别具有较大的值,而在 XYZ 图层中,较小的缩放级别具有较小的值。因此,相同的(列,行,缩放级别)瓦片编号在 TMS 图层和 XYZ 图层中代表不同的瓦片。

WMTS (OpenGIS Web Map Title Service)

VMTS 服务之前在 GeoServer 中介绍过了(两种方式获取 GeoServer 发布的 Web 地图平铺服务(wmts)标准 WMTSCapabilities.xml 文件),这里简单提一下。 相比 WMS,WMTS 牺牲了提供定制地图的灵活性,代之以通过提供静态数据(基础地图)来增强伸缩性,这些静态数据的范围框和比例尺被限定在各个图块内。常见 GeoServer 等用 WMTS 发布静态图层,GeoServer 发布的 VMTS 地图如何使用请参见:OpenLayer 加载 GeoServer 发布的 WMTS 服务

img

WFS

网络要素服务(WFS)支持用户在分布式的环境下通过 HTTP 对地理要素进行插入,更新,删除,检索和发现服务。该服务根据 HTTP 客户请求返回要素级的 GML(Geography Markup Language、地理标识语言) 数据,并提供对要素的增加、修改、删除等事务操作,是对 Web 地图服务的进一步深入。WFS 通过 OGC Filter 构造查询条件,支持基于空间几何关系的查询,基于属性域的查询,当然还包括基于空间关系和属性域的共同查询。 支持要素的增删改等事务操作,支持空间和属性查询。

WCS

网络覆盖服务是面向空间影像数据,它将包含地理位置的地理空间数据作为 "覆盖(Coverage)" 在网上相互交换,如卫星影像、数字高程数据等栅格数据。

WCS 提供如下操作:

  • GetCapabitities:返回服务级元数据,它是对服务信息内容和要求参数的一种描述。
  • DescribeCoverage:支持用户从特定WCS服务器获取一个或多个覆盖的详细的描述文档。
  • GetCoverage:可根据查询要求返回一个包含或者引用被请求的覆盖数据的响应文档。

个人理解WCS主要是面向空间影像数据。

WPS(Web Processing Server)

Processing 即 ArcView 中的 GeoProcessing,诸如 Union,Intersect 等方法。WPS 要做的就是暴露基于 URL 接口来实现客户端通过 WebService 对此类方法的调用、并返回数据。 这块我理解的主要是用来发起 web 端的空间运算处理工作,入裁切、合并等空间运算。

GeoJSON 介绍

GeoJSON 是一种使用 JSON 格式描述地理数据结构的编码格式

json
{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

GeoJSON (地理JSON格式)

参考文章

GIS开发入门,OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts、TMS和XYZ介绍

WebGIS四大地图框架:Leaflet、OpenLayers、Mapbox、Cesium