2.3. WebGIS开发前端开源框架

之前给大家介绍了webgis常用的地图框架,没看过的点这里。

本篇文章主要介绍GIS开发四大地图框架的差异和特点。

2.3.1. OpenLayers

OpenLayers(http://openlayers.org/)是一个开源的jS框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一方面OpenLayers提供了非常多的选择。此外,OpenLayers实现了行业标准的地理数据访问方法如OGC的Web Mapping Service(WMS)and Web Feature Service(WFS)协议。OpenLayers可以简单的在任何页面中放入动态的地图。它可以从多种的数据源加载显示地图。MetaCarta公司开始开发了OpenLayers的初始版本同时将它开放给了公众以作为以后各种地理信息系统的应用。

稳定可靠的集成式地图开发脚本,兼容老旧版本的IE浏览器,适合传统webGIS开发。

2.3.2. OpenScales

OpenScales是一个基于Flex的优秀前台地图框架,可以用来开发各种网络版、手机版和桌面版地图程序。OpenScales是开源的、免费的客户端开发框架,基于LGPL开源协议,它在FlashPlayer中运行,可以在各个浏览器中使用,具有很好的跨平台特性。鉴于主要对Flash的友好支持,故可不放在第一梯队考虑

2.3.3. Leaflet.JS

Leaflet(https://leafletjs.com/) 是一个为构建交互性好、适用于移动设备地图应用,而开发的现代的、开源的 JavaScript 库。 它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,代码量很小(仅33Kb),但具有开发人员开发在线地图的大部分功能。 Leaflet设计坚持简便、高性能和可用性好的哲学思想,在所有主要桌面和移动平台能高效运作, 在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。它支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码。

Leaflet 强大的开源库插件涉及地图应用的各个方面包括地图服务、数据提供、数据格式、地理编码、路线和路线搜索、地图控件和交互等类型的插件共有140多个。这些控件大大扩展了LeafLet 的功能,同时也可以设计开发自定义的控件,具有良好的可扩展性。其中Esri提供面向ArcGIS Services的leaflet的插件,插件支持Esri底图服务、要素服务、瓦片和动态图服务。Leaflet API可以调用各种在线的地图服务天地图、Google 地图、高德地图可以满足多种服务的需要。系统外观UI采用BootStrap 响应式结构设计框架对各种尺寸的屏幕进行优化显示,开发者只需具有基本的CSS基础就可以设计适合多终端、多平台的GIS应用。

轻量级的地图脚本,丰富插件,优秀拓展性,适合轻应用及移动端webGIS开发。

2.3.4. Cesium

Cesium(https://cesium.com/cesiumjs/)基于 WebGL 的前端3D JavaScript 类库。 Cesium在2016年3月份左右推出3D Tiles数据规范,在gltf基础上提供了LOD能力, 就是Web环境下海量三维模型数据。

Cesium是目前主流的一款三维地图框架,支持桌面端、web端、移动端等多平台。

2.3.5. Mapbox

高清经纬度矢量瓦片,个性化前端表达,前端矢量绘制,支持海量地名地址。

2.3.6. 下面是四个不同的框架的对比:

地图框架 基本信息 优缺点

  1. Cesium WebGL渲染机制、二三维一体化可视化表达;经纬度坐标系、支持球体; 优点:唯一开源的WebGIS三维引擎;适用于Web强三维应用场景

  2. Mapbox WebGL渲染机制、二三维一体化;三维方面存在一定争议,有人认为3D有的认为是2.5D;墨卡托坐标系,不支持球体 优点:最具美感的专题地图缺点:没有球体运用于互联网场景复杂地理信息表达,追求地图可视化效果

  3. Openlayers 仅支持二维表达;不限制坐标系; 优点:二维GIS功能最丰富全面缺点:地图样式简单,难以定制高颜值的可视化效果适用于传统地理信息强GIS的二维数据Web维护和展示

  4. Leaflet Canvas渲染机制;仅支持二维表达;墨卡托投影; 优点:入手简单缺点:不支持Webgl渲染性能有瓶颈适用于轻量级简单地理信息主题可视化

2.3.7. 二维地图框架与GIS的关系

前端地图框架:

能力:地图可视化能力、支持各种数据的加载显示、提供前端地图交互功能 缺点:前端的数据存储、数据增删查改、空间分析功能有限,更多的依赖后端去实现。 WebGIS二维地图框架:

WebGIS二维框架的核心部分就是weblayer,下面有几种参数:

View视图图层,包括中心点、缩放等级、分辨率等数据都是依赖图层去展示的;

Layer图层分为三大类:

Image图片图层 Tile 瓦片图层 Vector矢量图层(openlayer的矢量图层,可以通过前端进行编辑) 支持Image、KML、 GML 、WMS、 WMTS、 WFS、 Json等不同格式的数据,通过渲染就可以到地图中进行显示。