一个页面仔必备的 WebGIS

5,460 阅读10分钟

一个页面仔必备的 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…

工具/框架上手指南

这里拿百度地图作为例子

几个概念的理解(必须要理解的,如果我说的你理解不了,一定要查查资料)

来吧,图文结合
来吧,图文结合
  1. 底图

    我们使用高德,底图就是高德底图;我们使用百度,底图就是百度底图,底图就是地图最基础的的图层,一切图层/覆盖物都是在它上面进行操作

  2. 图层

    图层指的是基于底图展示的内容,默认都会有一个基础图层,常见的还有卫星图层/交通道路图层,当然,还能自定义图层

  3. 覆盖物

    覆盖物就是叠加在图层上面的物体,像它自带的一些房屋/医院这些~那我们可以基于百度提供的 API 来实现点/线/面/矢量图/文字的叠加

  4. 瓦片

    我们地图的默认图层都是由一张张小图片组成的,这些小图片就是瓦片~

  5. 坐标

    我们常见的坐标是平面坐标,x 轴和 y 轴,那么我们地图里面也有坐标,地理位置的坐标大家应该清楚,是经度和纬度,那么平面坐标和经纬度能转换吗,答案是能的~它们坐标的转换是基于一张地图的大小来转换的。我们通常处理位置坐标需要注意,百度地图里面识别的坐标为地理点坐标对象,一定要通过 Point()方法来转换。还有,坐标轴需要主要,和常见的平面坐标不一样,地图里面的坐标轴 X 轴朝左,Y 轴朝下(常见的是朝上)

    除了这些,对应的底图,使用对应的坐标才能准确的显示位置,常用的坐标系有 GCJ02,WGS84,BD09;GCJ-02 是由国测局测量加密后的坐标,被称为火星坐标系,高德地图用的就是它;WGS-84 是世界大地坐标系统,好像是国家规定不允许直接用 WGS84 坐标系,必须转为其它的使用;BD-09 是百度基于 GCJ-02 用自己的加密算法又加密了一层;这些坐标系之间是可以互转的,一般后台写脚本转~后端大佬牛逼,关于坐标的还有其它的,附上一篇链接吧常用坐标系汇总

学习 API ~ 去吧,少年

API 地址:

手动进入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,凉了

最后,一些工作中的效果图分享一下:

坐标转换图层叠加的工具
坐标转换图层叠加的工具

专题图
专题图

指挥调度实时监控
指挥调度实时监控

echarts实现的每日案件情况
echarts实现的每日案件情况

有对某一块感兴趣的,评论~ 如有不对,还请帮忙提出~ 如果文档对你有帮助,点赞支持

公众号:

本文使用 mdnice 排版