帶你剖析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.pswp.cn/news/283961.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/283961.shtml
英文地址，請注明出處：http://en.pswp.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