OpenLayers/leaflet/Mapbox/AGS等GIS前端总结概述

一、轻量级的leaflet,轻在哪里?

leaflet/openlayers轻量级,那么轻在哪里(相比ArcGIS js,甚至Openlayers)?

查询分析:本身版本不支持属性查询、空间查询;(但可以其他GIS厂家已经开发出插件来支持)Leaflet 关于查询的总结

编辑功能:leaflet不支持编辑

服务类型:leaflet只支持OGC标准的WMS\WMTS服务,暂未看到其他服务;AGS全面支持且支持AGS独有的各项服务。

数据对象:对AGS的要素类等内置数据对象支持,例FeauteSet、Geometry、Symbol

可视化组件多:更丰富的视图组件,如图例、编辑控件等

动态修改渲染方式:AGS可以分级渲染等动态的修改样式,而leaflet的图层是否只能固定渲染方式?

AGS基于Dojo框架,一个比较大的框架,考虑了兼容多浏览器一致性。

leaflet默认只支持WGS 1984 Web Mercator (Auxiliary Sphere)坐标系的服务。

leaflet没有三维相关,AGS有,Openlayers包含了cesium

这里有个leaflet与openlayer的对比(可以类比与AGS)http://ivansanchez.github.io/leaflet-vs-openlayers-slides/#/


二、MapBox.js与Leaflet.js

原leaflet的团队似乎现在在为Mapbox工作。

leaflet没有OpenLayer那么复杂,专注性能和可用性,简单的API,精巧,移动支持。

MapBox.js与Leaflet.js主要的不同点:

1、Mapbox.js是Leaflet的一个插件,使用方式是通过结合leaflet使用。

2、mapbox-gl.js 则是使用WebGL技术独立渲染前端库,不需要结合其它渲染引擎(比如Leaflet、OpenLayer)来使用。

3、使用mapbox-gl.js的浏览器必须支持WebGL渲染,在老旧的浏览器中是不支持mapbox-gl.js的。而mapbox.js则没有此限制。

参考链接


三、OpenLayers概述

3.1OpenLayers核心职责

  OpenLayers最新大版本是openlayers4,它是一个基于h5的GIS前端库,地图渲染方式为Canvas和WebGL,常用Canvas展示二维地图,支持WebGL渲染显示出将来的OpenLayers有支持三维方向的可能。OpenLayers作为一个地图前端库主要负责GIS数据的展示与交互。

  OpenLayers仅仅是开源GIS框架中的前端部分,并不等于是GIS系统,所以很多非GIS专业的前端使用OpenLayers常常会出现很多误区,如社区中每隔几天就有人问的问题:

请问怎样用ol加载几百万点啊?我现在加载了感觉很卡。

请问ol能实现路径分析吗?ol能实现缓冲区分析吗?

提问的人忽略了ol的核心职责是展示与交互,实际项目中也不可能有将几千万几百万数据推到前端展示和交互的,一般这种都是后端渲染图刷到前端展示,或者使用矢量切片抽希数据到前端展示,正如普通的web开发中的表单需要分页查询和分页展示是一个道理。至于分析一般是服务端或者空间数据库负责分析,分析结果提交前端展示。业务常常是复杂的,但是每个工具的职责是清晰的,请将复杂的业务交由正确的工具去完成!


3.2 OpenLayers的定位

  GIS前端渲染库除了OpenLayers还有LeafLet和ESRI公司的ArcGIS API,同样能支持地图的前端库还有百度api,高德api,谷歌api等,还有Echarts,D3.js等,初学者常常不能理解他们之间的关系。常常听人说,路径分析我就用高德API不就可以了吗?展示数据我用下Echarts不可以吗?仍然是一句话,选择什么样的工具,完全是依据实际业务需求而定的。当前和地图相关的库大概分类如下:

在线地图lbs服务:这类库的代表是百度api,高德api,谷歌api,主要特点是:公网环境,开发者需要申请key,key的地图请求服务有次数限制。地图数据和服务都是百度高德提供的,开发者常常是将业务有限的点(几个点,几十个点,几百个点等)定到地图上定个位置。开发中使用它们主要是如招聘网站上公司位置的一个定位,互联网应用中的lbs服务,如各种快递,外卖等app中附近的餐馆影院等。在企业和政府应用中,业务非常复杂,在线地图服务提供的数据不是我们要的,提供的服务不能满足我们的应用,所以实际上基本不会在企业开发中使用。LBS!=GIS。

数据可视化库:Echarts,D3.js主要作用是web端实现数据可视化的,提供丰富的图表等展示和交互,由于地图的使用越来越普及,所以不可避免的他们也会支持数据在地图上的展示。但主要定位仍然是数据可视化,在开发中,常常指定某个div,用来展示和交互下数据,属于页面的一小部分业务。而一般的综合指挥调度系统的地图是一个应用,加载非常多的图层,可以随时通过地图向地图单元发送指挥命令。page!=application。

GIS地图库:ol,LeafLet,arcgis api等都属于企业级地图应用开发库,彼此之间大同小异。稍微的差异是arcgis api需要arcserver提供服务,离开了server基本没任何优势。leaflet主要优势还是在开发的第三方控件比较多,但是兼容性比较差。且以“体积小,对移动端友好”为著称,在ol2的年代的确如此,但个人认为API的结构不如ol好,且ol3之后版本支持自定义打包,也支持移动端应用,ol4版本实现es6的import语法,实现按需加载,足以胜任开发大型GIS应用的要求。

综述:OpenLayers是GIS地图库,定位于开发GIS应用,而非地图页面,用于复杂的展示和交互用户数据。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342