带你剖析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，一经查实，立即删除！

相关文章

如果要存ip地址，用什么数据类型比较好

如果要存ip地址，用什么数据类型比较好

在看高性能MySQL第3版&#xff08;4.1.7节&#xff09;时&#xff0c;作者建议当存储IPv4地址时&#xff0c;应该使用32位的无符号整数&#xff08;UNSIGNED INT&#xff09;来存储IP地址&#xff0c;而不是使用字符串。但是没有给出具体原因。为了搞清楚这个原因&#xff0c;查…
阅读更多...
微软 .NET Core 3.1 年底将结束支持，请升级到.NET 6

微软 .NET Core 3.1 年底将结束支持，请升级到.NET 6

微软近日宣布&#xff0c;将于 2022 年 12 月 13 日停止为 .NET Core 3.1 提供服务更新、安全修复和技术支持。.NET Core 是一个免费开源的、用于 Windows、Linux 和 macOS 操作系统的软件框架。该项目主要由微软员工通过 .NET 基金会开发&#xff0c;并在 MIT 许可下发布。202…
阅读更多...
软件团队的模式选择

软件团队的模式选择

软件团队的模式分为&#xff1a;主治医生模式、明星模式、社区模式、业余剧团模式、秘密团队、特工团队、交响乐团模式、爵士乐模式、功能团队模式和官僚模式。 经过小组的讨论&#xff0c;我们决定选用交响乐团模式获得功能团队模式。 交响乐团模式的优点是种类多&#xff0c;…
阅读更多...
Angular 2

Angular 2

1. Angular2 官网 https://angular.io/guide/quickstart Node.js 下载 https://nodejs.org/en/ 怎么在vs code中使用angualr2 https://code.visualstudio.com/docs/nodejs/angular-tutorial moment.js:(javacript日期处理库) http://momentjs.cn/ 2. ng2-hightCharts https://…
阅读更多...
「Docker入门指北」容器很难理解？带你从头到尾捋一遍

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

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

微服务：事务管理

几乎所有的信息管理系统都会涉及到事务&#xff0c;事务的目的是为了保证数据的一致性&#xff0c;这里说的一致性是数据库状态的一致性。说到数据库状态的一致性&#xff0c;相信大家都会想到 ACID &#xff1a;原子性&#xff08;Atomic&#xff09;&#xff1a;在一个事件的…
阅读更多...
js - flex布局测试案例:完美居中

js - flex布局测试案例:完美居中

<span>I love flex layout!</span><style>body{display:flex;justify-content:center;align-items:center;font-size:3em;color:#00ffff;}</style>![enter image description here][1]<p>与自己为敌&#xff0c;</p><p>与自己为友&a…
阅读更多...
操作数据库（对战小游戏）

操作数据库（对战小游戏）

创建数据库 1 create database duizhan2 go3 use duizhan4 go5 create table duizhan6 (7 Code varchar(20) not null primary key,8 Name varchar(20) not null,9 Sex varchar(20) not null, 10 Blood int, 11 Attack int, 12 Defence int, 13 Mingzhong…
阅读更多...
8-Python3从入门到实战—基础之数据类型（集合-Sets）

8-Python3从入门到实战—基础之数据类型（集合-Sets）

Python从入门到实战系列——目录 集合的定义 集合&#xff08;set&#xff09;和字典类似&#xff0c;也是一组key的集合&#xff0c;但不存储value&#xff1b;由于key不能重复&#xff0c;所以&#xff0c;在set中&#xff0c;没有重复的key。创建一个set&#xff0c;需要提供…
阅读更多...
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…
阅读更多...
同域和不同域长啥样

同域和不同域长啥样

相同域http://www.jiangdou.com/http://www.jiangdou.com/maidou 不同域http://www.jiangdou.comhttp://bbs.jiangdou.comhttps://www.jiangdou.comhttp://www.jiangdou.com:8080转载于:https://www.cnblogs.com/MaiJiangDou/p/6689133.html
阅读更多...
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;。指挥部设在第一个哨所。当指挥部下达…
阅读更多...
VC解析XML--使用CMarkup类解析XML

VC解析XML--使用CMarkup类解析XML

经过今天尝试MFC解析XML串&#xff0c;也算有了不少收获&#xff0c;总结一下。 我是使用的CMarkup类对XML进行操作。 CMarkup好象都是先从一个xml文件里面把内容读出来&#xff0c;再进行解析&#xff0c;搞得我恨不得要把我的CString写到xml文件里面…
阅读更多...
MongoDB精华总结

MongoDB精华总结

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

认清性能问题

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

Copyright @ 2022~2023