带你剖析WebGis的世界奥秘----Geojson数据加载(高级)

前言：前两周我带你们分析了WebGis中关键步骤瓦片加载+点击事件（具体的看前两篇文章），下面呢，我带大家来看看Geojson的加载及其点击事件

  • Geojson数据解析

    GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

    一个完整的GeoJSON数据结构总是一个（JSON术语里的）对象。在GeoJSON里，对象由名/值对–也称作成员的集合组成。对每个成员来说，名字总是字符串。成员的值要么是字符串、数字、对象、数组，要么是下面文本常量中的一个：”true”,”false”和”null”。数组是由值是上面所说的元素组成。

    GeoJSON集合特征：

{"type":"FeatureCollection","features":[{"type":"Feature","id":"001","properties":{"name":"新华001"},"geometry":{"type": "Point", "coordinates":[121.9850,42.6737]}},{"type":"Feature","id":"002","properties":{"name":"新华002"},"geometry":{"type": "Point", "coordinates":[121.8345,42.4898]}},{"type":"Feature","id":"003","properties":{"name":"峰山1"},"geometry":{"type": "LineString", "coordinates":[[121.9850,42.6737],[121.8345,42.4898]]}},{"type":"Feature","id":"004","properties":{"name":"新华1001"},"geometry":{"type": "Point", "coordinates":[128.9850,42.6737]}},{"type":"Feature","id":"005","properties":{"name":"新华1002"},"geometry":{"type": "Point", "coordinates":[125.8345,42.4898]}},{"type":"Feature","id":"006","properties":{"name":"峰山2"},"geometry":{"type": "LineString", "coordinates":[[121.9850,42.6737],[125.8345,42.4898]]}}]}

  • openlayers3代码加载

    至于如何加载地图在第一篇的加载瓦片式地图已经提过了，看完第一篇的你应该知道我是将地图map交接给页面的div中，而map中包含了很多遮罩层，我现在加载GeoJSON就是在最上面的层上在加载url数据。

var vector = new ol.layer.Vector( {source : new ol.source.Vector( {// url:// 'http://openlayers.org/en/v3.17.1/examples/data/geojson/countries.geojson',url : './source/china.json',format : new ol.format.GeoJSON()}),style : selectStyleFunction
});

我这是引用本地准备好的数据（可以从服务器上获得，从服务器上只需要将url地址改写成服务地址），加载url完成后并不会在map中显示出来，我们还需要指定数据的显示样式，这里和之前瓦片是加载不同，样式很重要我调节了好久才调通的，这里我将封装在方法里。

方法的具体实现：

    var style;if(feature.getGeometry().getType()=="Point"){style = [new ol.style.Style({image : new ol.style.Circle( {fill : new ol.style.Fill( {color : 'rgba(255,255,0,0.4)'}),radius : 2,stroke : new ol.style.Stroke( {color : 'black',width : 1})}),text : new ol.style.Text( {fill : textFill,stroke : textStroke,text : view.getZoom()>5?(feature.getId()>2?feature.get("name"):""):""})})];}else if(feature.getGeometry().getType()=="LineString"){if(view.getZoom()<3){return ;}style = [new ol.style.Style( {stroke : new ol.style.Stroke( {color : '#CD950C',width : 2}),text : new ol.style.Text( {fill : textFill,stroke : textStroke,text : view.getZoom()>6?feature.get("name"):""})})];}else if(feature.getGeometry().getType()=="Polygon"){style = [new ol.style.Style( {stroke : new ol.style.Stroke( {color : '#FFE4B5',width : 3}),text : new ol.style.Text( {fill : textFill,stroke : textStroke,text : feature.get("name")})})];}else if(feature.getGeometry().getType()=="MultiLineString"){style = [new ol.style.Style( {stroke : new ol.style.Stroke( {color : 'black',width : 3})})];}return style;

申明 里面有些参数没有进行申明，因为定义了全局变量，因为在之前的js中改的，所以并没贴出所有代码。这里需要完整代码的请CSDN上私信我或者在留言板上留言

  • 效果欣赏

    1、地图加载完毕 这里你看到的地图不是上次的了，这次这个地图就是GeoJSON里的数据，只不过将数据以图形化的形式展现在我们的面前，看到地图右上方的两个点和一条线了吗，那都是通过数据动态加载出来的，换句话来说就是，我只需要将GeoJSON里的数据进行修改一下，这个地图就不一样了，这很方便我们在后台修改地图。还有这个中国的框架也是数据里的，总之一句话你看到的这个地图里所有元素都是数据里设置的（除了样式）

    这里写图片描述

    2、放大缩小地图和之前效果一样，值得注意的是我在js中设置了显示级别，就是放大缩小的不同级别显示的数据也是不同的，比如说那条线吧，我设置在6级以上的才能看到，下面我缩小地图线就不见了，下面是消失了的并不是太小看不见的

    这里写图片描述

    3、在放大到一定级别我设置了点的周围显示点的名称！看效果

    这里写图片描述

    这里就是加载的效果，下面我们继续探讨。下面就是点击事件了，点击事件在上篇文章我是着重讲了原理及实现，而在新技术中我们的点击事件就很Easy了

  • 点击事件

    我们要在map中绑定事件，也就是注册事件

map.on('singleclick', mapClick);
function mapClick(e) {var pixel = map.getEventPixel(e.originalEvent);var featureInfo = map.forEachFeatureAtPixel(pixel,function(feature, layer) {return {feature : feature,layer : layer};});var coordinate = e.coordinate;var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate,'EPSG:3857', 'EPSG:4326'));if (featureInfo !== undefined && featureInfo !== null&& featureInfo.layer !== null) {if (featureInfo.feature.get("geometry").B.length == 2) {
//          alert(view.getZoom());alert(hdms + "\n这里属于" + featureInfo.feature.get("name") + "点");} else if (featureInfo.feature.get("geometry").B.length == 4) {alert(hdms + "\n这里属于" + featureInfo.feature.get("name") + "线");alert("两端信息" + featureInfo.feature.get("geometry").B);} else {// alert(hdms+"\n这里属于"+featureInfo.feature.get("name")+"省");//显示点击区域的}console.log('打印选择要素');console.log(featureInfo.feature);console.log('打印选择要素所属Layer');console.log(featureInfo.layer);} else {alert(hdms + "\n这里不属于中国或者这里是大海");// 显示点击区域的}
}

在这里我需要讲解一下：

这里的featureInfo是我们在方法里拼接的（feature+layer）组成的，在if条件判断里我们featureInfo.feature.get(“geometry”).B.length == 2是判断feature里数字点的个数，大家想一想如果是点是不是有两个数字点，如果是线就是两个点也就是四个数字点，如果是区域的话那就是至少是超过4的偶数了，这样我们就可以区别出点线和区域了，这也就是说我们在这里就实现了之前很难解决的点线问题了，区域问题我们就不多加讨论了。

var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate,'EPSG:3857', 'EPSG:4326'));

这个是将坐标进行转换的，这个不多说

  • 定位

    在之前我们的定位就是以某个点中心显示并加上图标那就是所谓的定位，那么在我们的新技术中定位是不是有所改变呢？让我们来一探究竟。

    如果你认为既然是新技术了就一定要有突破，那么我的回答可能会让你很失望，新技术里仍然是用上述的思想来实现定位的，但多多少少还是有不同的。

    新旧对比openlayers2openlayers3
    点击获取经纬度查询点线类别区分
    定位map中心显示view中心显示

    由上图的表格我们可以看出我们的定位还是有所区别的，在新技术中我么能采用的是view中心显示法，什么叫view中心显示法呢，就是通过view来调用设置中心的方法。

view.setCenter(ol.proj.fromLonLat( [Number(document.getElementById('jd').value),Number(document.getElementById('wd').value) ]));
  • 其他常用的事件介绍

事件句柄

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

具体事件

属性当以下情况发生时，出现此事件FFNIE
onabort图像加载被中断134
onblur元素失去焦点123
onchange用户改变域的内容123
onclick鼠标点击某个对象123
ondblclick鼠标双击某个对象144
onerror当加载文档或图像时发生某个错误134
onfocus元素获得焦点123
onkeydown某个键盘的键被按下143
onkeypress某个键盘的键被按下或按住143

此处参考的w3School

在我的地图中我就随便加了几个试试效果的。

var select = null; // ref to currently selected interaction
// select interaction working on "singleclick"
var selectSingleClick = new ol.interaction.Select();// select interaction working on "click"
var selectClick = new ol.interaction.Select( {condition : ol.events.condition.click
});// select interaction working on "pointermove"
var selectPointerMove = new ol.interaction.Select( {condition : ol.events.condition.pointerMove
});var selectAltClick = new ol.interaction.Select( {condition : function(mapBrowserEvent) {return ol.events.condition.click(mapBrowserEvent)&& ol.events.condition.altKeyOnly(mapBrowserEvent);}
});var selectElement = document.getElementById('type');var changeInteraction = function() {if (select !== null) {map.removeInteraction(select);}var value = selectElement.value;if (value == 'singleclick') {select = selectSingleClick;} else if (value == 'click') {select = selectClick;} else if (value == 'pointermove') {select = selectPointerMove;} else if (value == 'altclick') {select = selectAltClick;} else {select = null;}if (select !== null) {map.addInteraction(select);select.on('select', function(e) {document.getElementById('status').innerHTML = '&nbsp;'+ e.target.getFeatures().getLength()+ ' selected features (last operation selected '+ e.selected.length + ' and deselected '+ e.deselected.length + ' features)';});}
};

到这里整个GeoJSON加载地图已经讲解完毕了，上述只是为了帮助各位梳理思路，并不是项目的完整代码，如果新入门的没有看明白，可以在博客下方留言，我会将源码发送给你。

转载于:https://www.cnblogs.com/zhangxinhua/p/8319246.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/283961.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

「Docker入门指北」容器很难理解？带你从头到尾捋一遍

「Docker入门指北」容器很难理解？带你从头到尾捋一遍

文章目录 1. 初始虚拟化 &#x1f351; 虚拟化概念&#x1f351; 硬件虚拟化2. Docker容器 &#x1f351; Docker技术的诞生&#x1f351; 容器与虚拟化&#x1f351; 性能差别&#x1f351; Docker优势 编排有序高效易迁移快速部署3. 容器生态系统 &#x1f351; 核心技术 容器…
阅读更多...
微服务：事务管理

微服务：事务管理

几乎所有的信息管理系统都会涉及到事务&#xff0c;事务的目的是为了保证数据的一致性&#xff0c;这里说的一致性是数据库状态的一致性。说到数据库状态的一致性&#xff0c;相信大家都会想到 ACID &#xff1a;原子性&#xff08;Atomic&#xff09;&#xff1a;在一个事件的…
阅读更多...
Redis的那些事：一文入门Redis的基础操作

Redis的那些事：一文入门Redis的基础操作

Redis是什么Redis&#xff0c;全称是Remote Dictionary Service,翻译过来就是&#xff0c;远程字典服务。redis属于nosql非关系型数据库。Nosql常见的数据关系&#xff0c;基本上是以key-value键值对形式存在的。Key-value: 就像翻阅中文字典或者单词字典&#xff0c;通过指定的…
阅读更多...
10种提问型爆文标题句式 直接套用

10种提问型爆文标题句式 直接套用

如果你用1天的时间来写篇好文章&#xff0c;那你花掉半天时间想一个好标题都不过分&#xff01; 你是不是觉得我有点言过其实了&#xff1f;没关系&#xff0c;先来问你2个问题&#xff1a; 1、花了很长时间&#xff0c;写了一篇很牛的卖货推文&#xff0c;定稿后&#xff0c…
阅读更多...
2016 China Joy抢先看，文末有彩蛋！

2016 China Joy抢先看，文末有彩蛋！

这里只有你想不到的&#xff0c;没有你看不到的。 2016 China Joy开幕在即&#xff0c;天气成了最折磨各种媒体、展商和观众的小妖精&#xff0c;一会艳阳天&#xff0c;一会大暴雨&#xff0c;轩轩现在是这样的&#xff01; 七月底的魔都&#xff0c;热的那叫一个销魂&#x…
阅读更多...
JdbcTemplate+PageImpl实现多表分页查询

JdbcTemplate+PageImpl实现多表分页查询

一、基础实体　 MappedSuperclass public abstract class AbsIdEntity implements Serializable {private static final long serialVersionUID 7988377299341530426L;public final static int IS_DELETE_YES 1;// 标记删除public final static int IS_DELETE_NO 0;// 未删除…
阅读更多...
消息队列选型手册

消息队列选型手册

前言 消息队列中间件重要吗&#xff1f;面试必问问题之一&#xff0c;你说重不重要。我有时会问同事&#xff0c;为啥你用 RabbitMQ&#xff0c;不用 Kafka&#xff0c;或者 RocketMQ 呢&#xff1f; 他给我的回答&#xff1a;“因为公司用的就是这个&#xff0c;大家都这么用…
阅读更多...
Jenkins 持续集成国产嵌入式操作系统 RT-Thread 的CI

Jenkins 持续集成国产嵌入式操作系统 RT-Thread 的CI

我们直接在Jenkins的镜像基础上进行集成RT-Thread 的编译环境&#xff0c; 这样直接使用Shell 命令 最直接了当&#xff0c; 通过 第三方docker等插件&#xff0c; 尝试了计重方案&#xff0c; 没有找到理想中的感觉&#xff0c; 如果其他人有想法可以告知一二。 我们有现成的镜…
阅读更多...
codevs原创抄袭题 5960 信使

codevs原创抄袭题 5960 信使

题目描述 Description•战争时期&#xff0c;前线有n个哨所&#xff0c;每个哨所可能会与其他若干个哨所之间有通信联系。信使负责在哨所之间传递信息&#xff0c;当然&#xff0c;这是要花费一定时间的&#xff08;以天为单位&#xff09;。指挥部设在第一个哨所。当指挥部下达…
阅读更多...
MongoDB精华总结

MongoDB精华总结

概述 MongoDB是属于文档型的NoSQL数据库&#xff0c;也就是文档数据库。文档数据库区别于传统的其它数据库&#xff0c;它是用来管理文档。在传统的数据库中&#xff0c;信息被分割成离散的数据段&#xff0c;而在文档数据库中&#xff0c;文档是处理信息的基本单位&#xff0c…
阅读更多...
认清性能问题

认清性能问题

本文翻译自 Thinking Clearly About Performance 这是我三年前读到的一篇关于性能问题的好文&#xff0c;读完后还觉不过瘾&#xff0c;怕理解的不够遂又翻译了一遍&#xff0c;这也是当年我的第一次翻译。 这几年来每次碰到性能问题&#xff0c;我都会想起这篇文章&#xff0c…
阅读更多...
简述：分布式CAP理论和BASE理论

简述：分布式CAP理论和BASE理论

目录 一、什么是CAP&#xff1f; Consistency (一致性)&#xff1a; Availability (可用性): Partition Tolerance (分区容错性): 二、取舍策略 三、Base理论 1、基本可用 2、软状态 3、最终一致性 四、常见产品 Ereka Zookeeper 五、总结 一、什么是CAP&#xf…
阅读更多...
WinForm（四）一种实现登录的方式

WinForm（四）一种实现登录的方式

首先声明&#xff0c;这只是一种登录方式&#xff0c;并不是最好的方式&#xff0c;用这个例子为了说明登录窗体和Application的关系。在登录前&#xff0c;定义了用户实体&#xff0c;然后是一个通用的类&#xff0c;存放进程中当前登录的用户&#xff0c;所以CurrentUser是静…
阅读更多...
Java多线程4：synchronized锁机制

Java多线程4：synchronized锁机制

脏读 一个常见的概念。在多线程中&#xff0c;难免会出现在多个线程中对同一个对象的实例变量进行并发访问的情况&#xff0c;如果不做正确的同步处理&#xff0c;那么产生的后果就是"脏读"&#xff0c;也就是取到的数据其实是被更改过的。 按照正常来看应该打印&quo…
阅读更多...
.NET Community Toolkit 8.0.0 版本发布

.NET Community Toolkit 8.0.0 版本发布

.NET 社区工具包&#xff08;.NET Community Toolkit &#xff09;现已发布 8.0.0 版&#xff01;.NET 社区工具包是一组适用于所有 .NET 开发人员&#xff0c;且与任何特定 UI 平台无关的帮助程序和 API。该工具包由 Microsoft 维护和发布&#xff0c;是 .NET 基金会的一部分&…
阅读更多...
1、内存

1、内存

程序为什么需要内存 程序运行的目的&#xff1a;程序运行是为了得到一定的结果&#xff0c;程序运行其实是在做一系列的数据计算&#xff0c;所以&#xff1a;程序代码数据&#xff1b;程序运行的目的不外乎2个&#xff1a;过程、结果&#xff1b; 用函数来类比&#xff1a;…
阅读更多...
基于CAP组件实现补偿事务与幂等性保障

基于CAP组件实现补偿事务与幂等性保障

【.NET Core】| 总结/Edison Zhou1补偿事务和幂等性在微服务架构下&#xff0c;我们会采用异步通信来对各个微服务进行解耦&#xff0c;从而我们会用到消息中间件来传递各个消息。 补偿事务某些情况下&#xff0c;消费者需要返回值以告诉发布者执行结果&#xff0c;以便于发布者…
阅读更多...
Docker与k8s

Docker与k8s

前言 随着k8s 作为容器编排解决方案变得越来越流行&#xff0c;有些人开始拿 Docker 和 k8s进行对比&#xff0c;不禁问道&#xff1a;Docker 不香吗&#xff1f; k8s 是kubernets的缩写&#xff0c;’8‘代表中间的八个字符。 其实 Docker 和 k8s 并非直接的竞争对手&#xff…
阅读更多...
Linux下启动tomcat报java.lang.OutOfMemoryError: PermGen space

Linux下启动tomcat报java.lang.OutOfMemoryError: PermGen space

2019独角兽企业重金招聘Python工程师标准>>> 一、错误信息 java.lang.reflect.InvocationTargetException at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.jav…
阅读更多...
Redis安装[Windows]

Redis安装[Windows]

一. redis下载地址: https://github.com/ServiceStack/redis-windows/tree/master/downloads 根据需要的下载对应版本*.zip即可.(我这里是win7x64) 二.使用 1. 下载之后解压到你相应的目录下: 1 文件介绍&#xff1a; 2 redis-benchmark.exe #基准测试 3 redis-check-aof.e…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023