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

时间:2022-09-07 16:07:26

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

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

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

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

这些文件主要为如下:

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

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

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

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

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

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

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

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

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

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

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

导入后的效果如下

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

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

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

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

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

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

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

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

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

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

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

选择右上角的 export 导出,选择geojson即可,然后下载到本地,再导入到自己的工程中去使用

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

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

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

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

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

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

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

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

var china = new BMap.Polygon([], {
strokeColor : "orange",
strokeWeight : 2,
strokeOpacity : 0.5,
fillOpacity: 0.1,
strokeStyle: "solid",
fillColor: "red"
}); //创建多边形
$.ajax({
url: "${ctx}/resources/module/script/dashboard/china.json",
type: 'GET',
async: true
}).done(function (res) {
var pointArray = res.geometries[0].coordinates[0];
var convertor = new BMap.Convertor();
var realPointArray = [];
for (var i = 0 ; i < pointArray.length ; i ++) {
var obj = pointArray[i];
var mapPoint = new BMap.Point(obj[0], obj[1])
var pointArr = [];
pointArr.push(mapPoint);
realPointArray.push(mapPoint);
}
china.setPath(realPointArray);
})
map.addOverlay(china);

地图组件上的自定义区域叠加层显示 ArcGis + GeoJson的更多相关文章

  1. Google 地图 API V3 之 叠加层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  2. Google地图之OverlayView使用(自定义叠加层)

    Google Maps API 第 3 版提供了用于创建自定义叠加层的 OverlayView 类.OverlayView 是一个基类,提供了您在创建叠加层时必须实现的若干方法.该类还提供了一些方法, ...

  3. opencv 3 core组件进阶&lpar;2 ROI区域图像叠加&amp&semi;图像混合;分离颜色通道、多通道图像混合;图像对比度,亮度值调整)

    ROI区域图像叠加&图像混合 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp&g ...

  4. 地图 SDK 系列教程-在地图上展示指定区域(转载)

    腾讯位置服务地图SDK是一套提供多种地理位置服务的应用程序接口.通过调用该接口,开发者可以在自己的应用中加入地图相关的功能(如地图展示.标注.绘制图形等),轻松访问腾讯地图服务和数据,构建功能丰富.交 ...

  5. WPF技术触屏上的应用系列(二)&colon; 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现

    原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...

  6. Linq to Sql:N层应用中的查询&lpar;上&rpar; &colon; 返回自定义实体

    原文:Linq to Sql:N层应用中的查询(上) : 返回自定义实体 如果允许在UI层直接访问Linq to Sql的DataContext,可以省去很多问题,譬如在处理多表join的时候,我们使 ...

  7. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  8. 根据自定义区域裁剪ArcGIS切片地图服务

    切片地图服务是访问地图最快捷的服务方式.假如要根据地理区域对切图进行访问控制,往往只能针对不同地理区域制作相应的地图,并发布为切片地图服务.而一般在切图的时候又是按全区域实施的,所以给切片管理者造成不 ...

  9. element-ui上传组件,通过自定义请求上传文件

    记录使用element-ui上传组件,通过自定义请求上传文件需要注意的地方. <el-upload ref="uploadMutiple" :auto-upload=&quo ...

随机推荐

  1. 今年第一季全球PC出貨量同比下降5&period;2&percnt;

    市場調研公司Gartner上周發佈報告稱,隨著企業支出的下滑,今年第一季全球PC出貨量同比下降5.2%迪士尼美語評價.英特爾稱,第一季筆記本晶片出貨量同比增長3%,但是筆記本晶片的平均銷售價格下降了3 ...

  2. 利用Socket远程发送文件

    思想: 1.注意使用两个通道,一个普通对象通信通道,另一个纯净的文件字节流通道 2.利用通信通道发送文件请求,新建字节流通道,开始发送文件

  3. CLR via C&num; 3rd - 04 - Type Fundamentals

    1. System.Object        The runtime requires every type to ultimately be derived from the System.Obj ...

  4. 在jQuery代码中,实现转跳

    隐藏转跳,浏览器不产生历史记录(replace).代码片段: window.location.replace("http://insus.cnblogs.com"); 当然我们还不 ...

  5. 【Android】数据存储-java IO流文件存储

    1.数据持久化:将在内存中的瞬时数据保存在存储设备中.瞬时数据:设备关机数据丢失.持久化技术提供一种机制可以让数据在瞬时状态和持久状态之间转换. 2.Android中简单的三种存储方式:文件存储.Sh ...

  6. ajax修改密码

    <div>用户名:<input type="text" id="uid" /><span id="tt" st ...

  7. java 集合框架&lpar;十&rpar;List

    一.概述 List是一种有序集合,有时也被称为序列,可以有重复的元素.List集合相比Collection,除了直接继承的方法外,有以下拓展的操作方法 位置访问---可以基于元素索引来操作元素,比如g ...

  8. EventBus详解

    EventBus详解 简介 github原文 EventBus... * simplifies the communication between components - decouples eve ...

  9. 提高MYSQL大数据量查询的速度

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  10. 白盒测试实践-day04

    一.任务进展情况 通过小组成员的共同努力,终于完成了此次“白盒测试实践”任务.目前的主要任务将之前的文件汇总,整理出来. 二.存在的问题 由于测试系统的不完善,导致单元测试比较麻烦. 三.解决方法 认 ...