为了账号安全,请及时绑定邮箱和手机立即绑定

地图组件上的自定义区域叠加层显示 ArcGis + GeoJson

最近参与了一个IOT环境项目,需要对某个城市的某几个区域做环境监控与治理,其中就用到了地图叠加层的功能,粗看很复杂,其实很简单,先来看一下效果,然后再来讲一下如何实现的:

https://img1.sycdn.imooc.com//5b87665000016b6417510855.jpg

中间的黄色轮廓线包括的几块区域就是通过gis坐标和百度的叠加层来实现的,来简单说一下实现的步骤吧:

首先需要有每块区域的坐标集合,这个主要是由工程队施工人员,在当地采集坐标,采集后会生成相应的文件给到开发人员

这些文件主要为如下:

https://img1.sycdn.imooc.com//5b8767480001a53806310234.jpg

其中这个红框内的文件是我们最需要的文件,他是一个shp文件,轮廓文件,开发人员需要转换为一个jsonlist,才可以使用,

那么如何转换呢,首先,要有个知识点需要说明,就是工程队测量的坐标系,可能并不是我们真正要使用的经纬度,因为不同坐标系的规范导致地图坐标显示不正确,所以需要转换坐标系为国标(也就是1984)

这时需要下载并且安装 ArcGis 这个软件,专门用于处理地图的,安装完毕后,如下,然后打开红框中的ArcMap

https://img1.sycdn.imooc.com//5b8768410001916102320187.jpg

参考如下图,按照层级打开ArcToolBox,这时一个工具箱,里面有坐标系的转换工具

https://img1.sycdn.imooc.com//5b8786da0001975806160828.jpg

首先使用“Define Projecttion” ,用于定义一个工程,其实就相当于是eclipse中的一个工程,然后又相关的操作都根据这个工程来就行

https://img1.sycdn.imooc.com//5b878adf0001ac2805280340.jpg

如上图,选择一个shp文件,然后就会自动生成他自己的坐标系,导入后,默认识别

https://img1.sycdn.imooc.com//5b878af70001813205250278.jpg

导入后的效果如下:

https://img1.sycdn.imooc.com//5b878bba000139ac14760820.jpg

这个时候我们可以进行转换一下,双击project

https://img1.sycdn.imooc.com//5b878b21000149b703690173.jpg

第一栏选择刚刚导入的porject,然后选择一个输出的目录,最后就是你想要转换的坐标系,完了之后,点击OK生成

https://img1.sycdn.imooc.com//5b878b5c00017d7606040419.jpg

 最后到输出的目录去看一下,文件都在里面

https://img1.sycdn.imooc.com//5b878c2b000170d406570187.jpg

此时,我们只需要把shp文件在转换为程序可识别的文件即可,那么对于程序来讲,可以识别的就是json,所以,我们来转换一下,先打开 http://mapshaper.org/ 这个网站,这是专门用于转换坐标的。

https://img1.sycdn.imooc.com//5b878c9b0001d40504810193.jpg

首先选择一个shp文件,就是我们刚刚生成的,,导入后入下图:

https://img1.sycdn.imooc.com//5b878ce100013e1218200932.jpg

选择右上角的 export 导出,选择geojson即可,然后下载到本地,再导入到自己的工程中去使用,看一下这个json文件吧:

https://img1.sycdn.imooc.com//5b878db80001a7a008640449.jpg

其实就是一个json对象里包含了坐标的json数组

接下来的工作就是通过js来渲染图层了

最终效果获取了某个地区进行了渲染如下:

https://img1.sycdn.imooc.com//5b87918a00014f2307970640.jpg

这仅仅只是截取了某个array进行的展示,如果显示全部,还需对json进行循环,这边就省略了,代码参考如下,其中包含了一些百度地图的相关api:

https://img1.sycdn.imooc.com//5b87921f0001da0f07890637.jpg

推荐课程:

  1. 《Netty/Springboot仿微信聊天全栈实战 从0开发到上线部署》

  2. 《SpringBoot 仿抖音短视频小程序开发 全栈式实战项目》

  3. 《ZooKeeper分布式专题与Dubbo微服务入门》


点击查看更多内容
“小礼物走一走,来慕课关注我”
赞赏支持
风间影月说 去围观
创业公司技术总监, 10年+开发和技术管理经验。SUN认证SCJP、PMP、MCP认证。主要从事后端技术和架构领域,有丰富的电商平台与物流平台核心系统的架构设计和开发经验。
评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消