一个页面仔必备的 WebGIS
「适合人群:对 WebGIS 感兴趣的页面仔」
「观看时间:30min」
「本文主要阐述一些 WebGIS 的上手指引以及这两年一来所接触的 gis 知识汇总,没有具体的教程,全是干货分享~」
前言
最两年打开的大多是地理可视化系统,趁最近有时间,将这些经验知识总结归纳~如有不对,还请帮忙提出~
我理解的 WebGIS
什么是 WebGIS, GIS 是一套地理可视化解决方案,WebGIS 是一套 web/pc 的地理可视化解决方案,那么说到 WebGIS,你想到的工具有什么~Leaflet?Openlayers?
这些在实际业务中会用到吗,肯定会用到,当然我没用到过~,因为这些底层的 gis 框架都是老外开发的,上手有些费劲,应用到业务上更加难,还好国内有比较靠谱的行业大佬,高德/百度/腾讯等,基于这些底层 api 封装成我们比较容易理解,能够快速上手的 api
在我实际工作中,用的比较多的是高德和百度~相比之下,我更喜欢高德的 API 文档说明,当然不管是高德还是百度,理论基本是一样的,掌握了一个,另外一个就很容易了
再后来,社区上各种各样基于高德百度这些 api 又封装了结合自身图层的 api,何必呢~
再后来,基于高德百度的 vue/react 等这些组件库又相继而出
到目前,我更偏向于使用这种最新的组件进行业务开发,为什么呢~站在巨人的肩膀上,真香!
那么 WebGIS 的工具只有这些吗,当然不是,最常用的还有 echarts,里面的二维/三维场景结合我们的业务场景也能实现很多不错的效果
这些工具能仅仅是工具,想要用好,一些概念/api 还是要好好掌握
WebGIS 用来干什么,作为一个地理可视化解决方案,可以将各种各样的数据信息放在地理空间上分析,从中挖掘出意想不到的信息,应用案例看一下超图的吧www.supermap.com/cn/Applicat…
工具/框架上手指南
这里拿百度地图作为例子
几个概念的理解(必须要理解的,如果我说的你理解不了,一定要查查资料)
底图
我们使用高德,底图就是高德底图;我们使用百度,底图就是百度底图,底图就是地图最基础的的图层,一切图层/覆盖物都是在它上面进行操作
图层
图层指的是基于底图展示的内容,默认都会有一个基础图层,常见的还有卫星图层/交通道路图层,当然,还能自定义图层
覆盖物
覆盖物就是叠加在图层上面的物体,像它自带的一些房屋/医院这些~那我们可以基于百度提供的 API 来实现点/线/面/矢量图/文字的叠加
瓦片
我们地图的默认图层都是由一张张小图片组成的,这些小图片就是瓦片~
坐标
我们常见的坐标是平面坐标,x 轴和 y 轴,那么我们地图里面也有坐标,地理位置的坐标大家应该清楚,是经度和纬度,那么平面坐标和经纬度能转换吗,答案是能的~它们坐标的转换是基于一张地图的大小来转换的。我们通常处理位置坐标需要注意,百度地图里面识别的坐标为地理点坐标对象,一定要通过 Point()方法来转换。还有,坐标轴需要主要,和常见的平面坐标不一样,地图里面的坐标轴 X 轴朝左,Y 轴朝下(常见的是朝上)
除了这些,对应的底图,使用对应的坐标才能准确的显示位置,常用的坐标系有 GCJ02,WGS84,BD09;GCJ-02 是由国测局测量加密后的坐标,被称为火星坐标系,高德地图用的就是它;WGS-84 是世界大地坐标系统,好像是国家规定不允许直接用 WGS84 坐标系,必须转为其它的使用;BD-09 是百度基于 GCJ-02 用自己的加密算法又加密了一层;这些坐标系之间是可以互转的,一般后台写脚本转~后端大佬牛逼,关于坐标的还有其它的,附上一篇链接吧常用坐标系汇总
学习 API ~ 去吧,少年
API 地址:
新手上路
如果你之前没接触过,我先告诉你,这些地图加载都是需要 key 的,可以理解为密钥,如果是项目用,记得问公司要哦,没有的让公司注册哦~千万不要用自己的个人 key 哦
如果之前没接触过,建议先把开发指南和示例 demo,粗略的看一看,差不多有印象,最关键的在于学习类参考,也就是提供的 API,API 要理解,不用死记硬背,理解了,开发起来就顺手很多
百度地图的只要理解了,像什么高德。腾讯。都类似的~
学习成本略高,除了基础的掌握,不断的实践才能有更深的记忆,我在刚开始使用的时候也是一脸懵逼,就是因为没有好好看文档
类参考说明:
核心类/基础类/覆盖物类,这三个为重点,并且也是业务处理的核心!
控件类,辅助作用,知道有哪些即可
地图类型类,地图图层类,就是影像图/路网图这些,用到的也少
服务类/全景类 服务类里面地址检索很常用,像什么路线推荐/导航什么的如果用到了,查阅 API 即可
右击菜单类,比较复杂的操作,一般来说使用右击菜单会增加客户的学习,所以很少会用
常用的 API,常见的场景
PanTo() 平移至指定点,需要注意,点为地理点坐标对象,平移和信息窗体有冲突,至今还未解决,目前采用 setTimeout 的方案临时解决了,不影响效果
setCenter() 设置中心点,效果和 PanTo 不一样,没有动画,但这个和信息窗体无冲突
添加覆盖物,点线面 其中数据格式要搞清楚,官方 API 的数据格式就是坐标集合,但在处理 gis 时,行业标准数据格式是GeoJSON,所以这就意味着要掌握这个数据格式,一些类库,还有 echarts 都是使用 GeoJSON 来绘制覆盖物的,还有处理数据的工具 SuperMap iDesktop Cross,运维必备
像素转换,覆盖物的偏移,大小的设置,都需要将像素转换
常用的 API 太多了,还是需要多尝试实践,下面列举一些场景,感兴趣的可以尝试一下
场景 1:遮罩的实现
遮罩在大多数组件和类库里都没有,需要自行实现,上次基于 vue-baidu-map 的我已经实现了,😄,参考:www.cnblogs.com/tangjie85/p… 遮罩是什么,遮罩是除了默认覆盖物之外的其它覆盖物全部隐藏,实现方法呢,就是以四个极点向你的覆盖物画一个面,面的边线透明,背景用一个不透明的纯色遮挡,画个图理解一下
场景 2: 覆盖物灵活使用,比如在规定的区域显示终端的当前位置,点击终端查看终端详情
很简单的一个场景吧,用到的内容还是不少的呢~,首先要添加规定的区域,并调整默认的缩放级别,中心点,让这个看起来舒服,说不定还要个性化皮肤~然后添加终端的当前位置点覆盖物,同时叠加文字覆盖物,将终端名称显示出来,点击查看详情,这个还要分析是否需要跟随底图的信息窗体,因为信息窗体是 gis 操作的标配,但是处理起来需要用字符串拼接的方法,修改样式修改比较麻烦,如果没有要求,直接放在弹窗里面岂不香
其中可能用到 Marker Polygon Label InfoWindow centerAndZoom MapStyle Point Icon 这些 api
场景 3:位置搜索
实现步骤,根据用户输入内容调用位置搜索 api,将查询到的列表显示在输入框下方列表,选中位置,底图平移至用户选中位置,并缩放至较为舒适级别,叠加位置点,并展示改位置的基本信息~
其中可能用到 panTo setZoom LocalSearch
场景 4:空间对比
通过空间对比各个区域的一些指标,这种场景也很常见,主要通过区域色值来区分,那么实现这样的业务场景使用 echarts 更容易实现
场景 5:局部陋空
局部陋空就是遮挡(陋空)在指定的区域,比较简单,叠加适合的覆盖物达到陋空效果即可
场景 6:框选目标
_通过鼠标框选/圈选出指定区域的信息点
使用插件 DrawingManager_min.js 轻松实现框选/全选/多边形选择/店型功能,配合后台查询出指定区域的信息点
通过这几个场景下来,无非就是点线面叠加,缩放平移等,用好这些做出较好的体验还是挺具挑战性的
组件库的使用
基于 vue 的地图组件库,vue-amap 和 vue-baidu-map,不管是什么,核心类对象必须要拿到,当然,这两个组件库也都说明了如何拿到核心类以及实例对象,有了核心类对象,组件库才能配合核心类对象灵活使用
内置的一些组件使用和操作上比较符合我们这种数据操作 dom 的思想,还是比较爽的
Echarts 在 WebGIS 里还是很棒的!
echarts 内置了二维和三维地图,结合散点/飞线等也能实现一些很炫酷的效果,但是 echarts 不能显示底图,所以在不要求显示的底图场景使用,echarts 坐标使用的是百度坐标
踩过的坑:
属性名 name 对应底图显示的 label,如果 name 为大写 NAME 会显示不出来~工具处理后导出的数据默认都是大写
坐标精度问题,什么原因引起的呢,论坛上说是官方 bug,表现为覆盖物在部分缩放级别出不来,解决方法是所有的坐标乘以 100,没错,是乘以 100,比如一个坐标是[118.1121323,36.2123312],乘以 100 后是[11811.21323,3621.23312]
三维 cesium
参考我的另一篇文章初探 cesium,凉了
最后,一些工作中的效果图分享一下:
有对某一块感兴趣的,评论~ 如有不对,还请帮忙提出~ 如果文档对你有帮助,点赞支持
公众号:
本文使用 mdnice 排版