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

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

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

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

这些文件主要为如下:

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

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

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

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

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

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

导入后的效果如下:

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

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

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

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

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

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

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

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

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

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

原文发布于微信公众号 - BeJavaGod(wxleechenxiang)

原文发表时间:2018-08-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AI研习社

GitHub项目推荐 | 用于对机器学习模型进行对抗性攻击、防御和基准测试的Python库:CleverHans 3.0.0

项目地址:https://github.com/tensorflow/cleverhans

3956
来自专栏AI研习社

Github 项目推荐 | 用于多元时间序列的 Python 模块 —— Seglearn

Seglearn 是一个通过滑动窗口分割的机器学习多元时间序列的 Python 模块。它为特征提取、特征处理和最终估计提供一个集成的 Pipeline。

1642
来自专栏编程坑太多

jQuery对表格的操作示例

1432
来自专栏Python中文社区

手把手教你用1行代码实现人脸识别

專 欄 ❈Kangvcar,Python爱好者,简书活跃作者,欢迎关注,打赏支持。❈ 环境要求: Ubuntu17.10 Python 2.7.14 环境...

2.7K10
来自专栏程序生活

Leetcode-Easy 72. Edit Distance

72. Edit Distance 描述: 求两个字符串的编辑距离 ? 思路: 动态规划 代码 class Solution: ...

3285
来自专栏编程语言

Python:pygame.image.load

2602
来自专栏大数据文摘

机器学习:如何在安卓上集成TensorFlow

2395
来自专栏磨磨谈

利用火焰图分析ceph pg分布

性能优化大神Brendan Gregg发明了火焰图来定位性能问题,通过图表就可以发现问题出在哪里,通过svg矢量图来查看性能卡在哪个点,哪个操作占用的资源最多 ...

1162
来自专栏AI科技评论

开发 | GitHub项目推荐 : 用于对机器学习模型进行对抗性攻击、防御和基准测试的Python库

此资料库包含CleverHans的源代码,CleverHans是一个Python库,用于将机器学习系统中的漏洞与对抗性示例进行对比。 您可以在随附的博客上了解有...

1222
来自专栏Hadoop实操

Hadoop之上的模型训练 - CDSW1.4新功能模块

CDSW1.4提供了一个新的实验室模块,可以让数据科学家运行批处理的实验。从而跟踪代码版本,输入参数和输出指标与文件。如下图所示,这个功能可以帮助数据科学家实现...

1142

扫码关注云+社区

领取腾讯云代金券