带你剖析WebGis的世界奥秘----Geojson数据加载(高级)
前言：前兩周我?guī)銈兎治隽薟ebGis中關(guān)鍵步驟瓦片加載+點(diǎn)擊事件（具體的看前兩篇文章），下面呢，我?guī)Т蠹襾砜纯碐eojson的加載及其點(diǎn)擊事件
Geojson數(shù)據(jù)解析
GeoJSON是一種對各種地理數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼的格式。GeoJSON對象可以表示幾何、特征或者特征集合。GeoJSON支持下面幾何類型：點(diǎn)、線、面、多點(diǎn)、多線、多面和幾何集合。GeoJSON里的特征包含一個(gè)幾何對象和其他屬性，特征集合表示一系列特征。
一個(gè)完整的GeoJSON數(shù)據(jù)結(jié)構(gòu)總是一個(gè)（JSON術(shù)語里的）對象。在GeoJSON里，對象由名/值對–也稱作成員的集合組成。對每個(gè)成員來說，名字總是字符串。成員的值要么是字符串、數(shù)字、對象、數(shù)組，要么是下面文本常量中的一個(gè)：”true”,”false”和”null”。數(shù)組是由值是上面所說的元素組成。
GeoJSON集合特征：
openlayers3代碼加載
至于如何加載地圖在第一篇的加載瓦片式地圖已經(jīng)提過了，看完第一篇的你應(yīng)該知道我是將地圖map交接給頁面的div中，而map中包含了很多遮罩層，我現(xiàn)在加載GeoJSON就是在最上面的層上在加載url數(shù)據(jù)。
我這是引用本地準(zhǔn)備好的數(shù)據(jù)（可以從服務(wù)器上獲得，從服務(wù)器上只需要將url地址改寫成服務(wù)地址），加載url完成后并不會(huì)在map中顯示出來，我們還需要指定數(shù)據(jù)的顯示樣式，這里和之前瓦片是加載不同，樣式很重要我調(diào)節(jié)了好久才調(diào)通的，這里我將封裝在方法里。
方法的具體實(shí)現(xiàn)：
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;申明 里面有些參數(shù)沒有進(jìn)行申明，因?yàn)槎x了全局變量，因?yàn)樵谥暗膉s中改的，所以并沒貼出所有代碼。這里需要完整代碼的請CSDN上私信我或者在留言板上留言
效果欣賞
1、地圖加載完畢 這里你看到的地圖不是上次的了，這次這個(gè)地圖就是GeoJSON里的數(shù)據(jù)，只不過將數(shù)據(jù)以圖形化的形式展現(xiàn)在我們的面前，看到地圖右上方的兩個(gè)點(diǎn)和一條線了嗎，那都是通過數(shù)據(jù)動(dòng)態(tài)加載出來的，換句話來說就是，我只需要將GeoJSON里的數(shù)據(jù)進(jìn)行修改一下，這個(gè)地圖就不一樣了，這很方便我們在后臺(tái)修改地圖。還有這個(gè)中國的框架也是數(shù)據(jù)里的，總之一句話你看到的這個(gè)地圖里所有元素都是數(shù)據(jù)里設(shè)置的（除了樣式）
2、放大縮小地圖和之前效果一樣，值得注意的是我在js中設(shè)置了顯示級別，就是放大縮小的不同級別顯示的數(shù)據(jù)也是不同的，比如說那條線吧，我設(shè)置在6級以上的才能看到，下面我縮小地圖線就不見了，下面是消失了的并不是太小看不見的
3、在放大到一定級別我設(shè)置了點(diǎn)的周圍顯示點(diǎn)的名稱！看效果
這里就是加載的效果，下面我們繼續(xù)探討。下面就是點(diǎn)擊事件了，點(diǎn)擊事件在上篇文章我是著重講了原理及實(shí)現(xiàn)，而在新技術(shù)中我們的點(diǎn)擊事件就很Easy了
點(diǎn)擊事件
我們要在map中綁定事件，也就是注冊事件
在這里我需要講解一下：
這里的featureInfo是我們在方法里拼接的（feature+layer）組成的，在if條件判斷里我們featureInfo.feature.get(“geometry”).B.length == 2是判斷feature里數(shù)字點(diǎn)的個(gè)數(shù)，大家想一想如果是點(diǎn)是不是有兩個(gè)數(shù)字點(diǎn)，如果是線就是兩個(gè)點(diǎn)也就是四個(gè)數(shù)字點(diǎn)，如果是區(qū)域的話那就是至少是超過4的偶數(shù)了，這樣我們就可以區(qū)別出點(diǎn)線和區(qū)域了，這也就是說我們在這里就實(shí)現(xiàn)了之前很難解決的點(diǎn)線問題了，區(qū)域問題我們就不多加討論了。
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate,'EPSG:3857', 'EPSG:4326'));這個(gè)是將坐標(biāo)進(jìn)行轉(zhuǎn)換的，這個(gè)不多說
定位
在之前我們的定位就是以某個(gè)點(diǎn)中心顯示并加上圖標(biāo)那就是所謂的定位，那么在我們的新技術(shù)中定位是不是有所改變呢？讓我們來一探究竟。
如果你認(rèn)為既然是新技術(shù)了就一定要有突破，那么我的回答可能會(huì)讓你很失望，新技術(shù)里仍然是用上述的思想來實(shí)現(xiàn)定位的，但多多少少還是有不同的。
新舊對比openlayers2openlayers3 點(diǎn)擊 獲取經(jīng)緯度查詢 點(diǎn)線類別區(qū)分 定位 map中心顯示 view中心顯示 由上圖的表格我們可以看出我們的定位還是有所區(qū)別的，在新技術(shù)中我么能采用的是view中心顯示法，什么叫view中心顯示法呢，就是通過view來調(diào)用設(shè)置中心的方法。
- 其他常用的事件介紹
事件句柄
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發(fā)瀏覽器中的動(dòng)作（action），比如當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript。下面是一個(gè)屬性列表，這些屬性可插入 HTML 標(biāo)簽來定義事件動(dòng)作。
具體事件
| onabort | 圖像加載被中斷 | 1 | 3 | 4 |
| onblur | 元素失去焦點(diǎn) | 1 | 2 | 3 |
| onchange | 用戶改變域的內(nèi)容 | 1 | 2 | 3 |
| onclick | 鼠標(biāo)點(diǎn)擊某個(gè)對象 | 1 | 2 | 3 |
| ondblclick | 鼠標(biāo)雙擊某個(gè)對象 | 1 | 4 | 4 |
| onerror | 當(dāng)加載文檔或圖像時(shí)發(fā)生某個(gè)錯(cuò)誤 | 1 | 3 | 4 |
| onfocus | 元素獲得焦點(diǎn) | 1 | 2 | 3 |
| onkeydown | 某個(gè)鍵盤的鍵被按下 | 1 | 4 | 3 |
| onkeypress | 某個(gè)鍵盤的鍵被按下或按住 | 1 | 4 | 3 |
此處參考的w3School
在我的地圖中我就隨便加了幾個(gè)試試效果的。
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 = ' '+ e.target.getFeatures().getLength()+ ' selected features (last operation selected '+ e.selected.length + ' and deselected '+ e.deselected.length + ' features)';});} };到這里整個(gè)GeoJSON加載地圖已經(jīng)講解完畢了，上述只是為了幫助各位梳理思路，并不是項(xiàng)目的完整代碼，如果新入門的沒有看明白，可以在博客下方留言，我會(huì)將源碼發(fā)送給你。
轉(zhuǎn)載于:https://www.cnblogs.com/zhangxinhua/p/8319246.html
總結(jié)
以上是生活随笔為你收集整理的带你剖析WebGis的世界奥秘----Geojson数据加载(高级)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 顶岗实习周记java方向_java 实习
- 下一篇： MASM5.0下载安装与运行第一个Hel