地图组件上的自定义区域叠加层显示 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即可,然后下载到本地,再导入到自己的工程中去使用

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

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

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

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

这仅仅只是截取了某个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);

原文地址:https://www.cnblogs.com/leechenxiang/p/9560111.html

时间: 2024-11-09 00:45:54

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

Google 地图 API V3 之 叠加层

叠加层概述 叠加层是地图上与纬度/经度坐标绑定的对象,会随您拖动或缩放地图而移动.叠加层表示的是“添加”到地图中以标明点.线.区域或对象集合的对象. Maps API 包含以下几种叠加层: 地图上的单个位置是使用标记显示的.标记有时可显示自定义的图标图片,这种情况下标记通常被称为“图标”.标记和图标是 Marker 类型的对象.(有关详情,请参阅下面的标记和图标.) 地图上的线是使用折线(表示一系列按顺序排列的位置)显示的.线是 Polyline 类型的对象.(有关详情,请参阅折线.) 地图上的

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

Google Maps API 第 3 版提供了用于创建自定义叠加层的 OverlayView 类.OverlayView 是一个基类,提供了您在创建叠加层时必须实现的若干方法.该类还提供了一些方法,用于实现屏幕坐标和地图位置之间的转换. 要创建自定义叠加层,请执行以下操作: 将自定义对象的 prototype 设置为 google.maps.OverlayView() 的新实例.这可以有效地实现叠加层类的“子类化”. 为自定义叠加层创建构造函数,并将该构造函数中的所有初始化参数都设置为自定义属

微信小程序开发-地图map组件上使用input组件

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

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

原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体机.要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作.当然满足客户的要求也可以有其它途径.但鉴于咱是搞 .NET技术的,首先其冲想到的微软WPF方面,之前对WPF的了解与学习也只是停留在比较浅的层面,没有进一步深入学习与应用.所以在项目接来以后,也就赶鸭子上架了,经过

Linq to Sql:N层应用中的查询(上) : 返回自定义实体

原文:Linq to Sql:N层应用中的查询(上) : 返回自定义实体 如果允许在UI层直接访问Linq to Sql的DataContext,可以省去很多问题,譬如在处理多表join的时候,我们使用var来定义L2S查询,让IDE自动推断变量的具体类型(IQueryable<匿名类型>),并提供友好的智能提示:而且可以充分应用L2S的延迟加载特性,来进行动态查询.但如果我们希望将业务逻辑放在一个独立的层中(譬如封装在远程的WCF应用中),又希望在逻辑层应用Linq to sql,则情况就比

Unity3D 在自定义脚本中实现Button组件上的OnClick面板

Unity3D 在自定义脚本中实现Button组件上的OnClick面板UnityEvent脚本代码事件传参多参数传入下述内容不对c#语法做过多讲解,仅对已入门并有兴趣的同学做为学习和拓展的资料 大家在Unity制作的过程中一定都使用过UI功能,那么很多人也一定见过这个面板: 那么我们如何能在自己的脚本中添加上像OnClick这样的面板呢. UnityEventUnity中内置了一个UnityEvent类作为事件处理的类,我们只要在脚本中声明出来,Unity便会自动添加到脚本面板上,这样便可以在

如何用水经注万能地图下载器的自定义功能下载浙江天地图

打开浙江天地图网址http://www.zjditu.cn/,并选择影像地图,如下图所示. 如果你是IE,请选择"F12开发人员工具"(其它浏览器也有类似开发人员工具菜单),如下图所示. 点击"启用网流量捕获(F5)"按钮,如下图所示. 放大显示卫星地图,可以看到IE捕获到当前显示的卫星地图瓦片图片的URL地址,如下图所示. 在其中一项上单击鼠标右键,并选择"复制URL"菜单可以复制到类似于如下所示链接的URL图片地址. http://srv.z

高德地图组件在Android的应用以及Android与JavaScript的交互

最近在慕课网学习了关于高德地图组件的课程(其实就是一个广告,内容和官网的API完全一样),发现这个JavaScript API比Android API简单方便多了,于是就打算放在Android APP上来实现,花了一点小功夫,但是最终还是实现了,后来打算扩展的时候遇到个问题:就是高德官网有一个坐标拾取点(高德的坐标和我们平时取的坐标不一样,可以将高德坐标理解为中国的国标,直接获取的坐标是国际标准的坐标),后来发现有html文件直接实现了这个功能,于是就把这个html扒出来了,但是重点问题来了:如

艾恩ASP无组件上传类(上传组件)说明文档(from www.sysoft.cc)

艾恩ASP无组件上传类(上传组件)说明文档2010-1-18 By Anlige一.简介自从接触ASP就开始接触上传,看过一些上传类,但是总感觉封装的还是不够简单,因此自己尝试写一个能够用最少最简单的代码实现各种上传方式的上传类.在学校期间就开始写,一点点的完善.优化,到现在的版本,现在的版本能适应各种上传方式.上传类的主要的功能如下:1.自由设置最大上传大小.单文件最大上传大小2.自由设置允许上传的文件类型3.可设置文本的编码,以适应各种上传环境4.内置进度条,a用户可选择开启和关闭5.多种错