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

淩亂°似流年 2022-09-25 08:26 451阅读 0赞

*前言：前两周我带你们分析了WebGis中关键步骤[瓦片加载][Link 1]\+[点击事件][Link 2]（具体的看前两篇文章），下面呢，我带大家来看看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代码加载
    
    至于如何加载地图在第一篇的[加载瓦片式地图][Link 1]已经提过了，看完第一篇的你应该知道我是将地图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里的数据进行修改一下，这个地图就不一样了，这很方便我们在后台修改地图。还有这个中国的框架也是数据里的，总之一句话你看到的这个地图里所有元素都是数据里设置的（除了样式）

![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODE3MTcyMjQ0ODE1]

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

![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODE3MTcyOTE5NTA4]

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

![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODE3MTczMTIyMjU2]

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

--------------------

*  点击事件

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

map.on('singleclick', mapClick);

在这里我需要讲解一下：

这里的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'));

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

--------------------

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

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

| 新旧对比 | openlayers2 | openlayers3 |
     |:-------------- |:-------------|:-----|
     | 点击 | 获取经纬度查询 | 点线类别区分 |
     | 定位 | 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 标签来定义事件动作。

> 具体事件

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">当以下情况发生时，出现此事件</th> 
   <th align="left">FF</th> 
   <th align="left">N</th> 
   <th align="left">IE</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">onabort</td> 
   <td align="left">图像加载被中断</td> 
   <td align="left">1</td> 
   <td align="left">3</td> 
   <td align="left">4</td> 
  </tr> 
  <tr> 
   <td align="left">onblur</td> 
   <td align="left">元素失去焦点</td> 
   <td align="left">1</td> 
   <td align="left">2</td> 
   <td align="left">3</td> 
  </tr> 
  <tr> 
   <td align="left">onchange</td> 
   <td align="left">用户改变域的内容</td> 
   <td align="left">1</td> 
   <td align="left">2</td> 
   <td align="left">3</td> 
  </tr> 
  <tr> 
   <td align="left">onclick</td> 
   <td align="left">鼠标点击某个对象</td> 
   <td align="left">1</td> 
   <td align="left">2</td> 
   <td align="left">3</td> 
  </tr> 
  <tr> 
   <td align="left">ondblclick</td> 
   <td align="left">鼠标双击某个对象</td> 
   <td align="left">1</td> 
   <td align="left">4</td> 
   <td align="left">4</td> 
  </tr> 
  <tr> 
   <td align="left">onerror</td> 
   <td align="left">当加载文档或图像时发生某个错误</td> 
   <td align="left">1</td> 
   <td align="left">3</td> 
   <td align="left">4</td> 
  </tr> 
  <tr> 
   <td align="left">onfocus</td> 
   <td align="left">元素获得焦点</td> 
   <td align="left">1</td> 
   <td align="left">2</td> 
   <td align="left">3</td> 
  </tr> 
  <tr> 
   <td align="left">onkeydown</td> 
   <td align="left">某个键盘的键被按下</td> 
   <td align="left">1</td> 
   <td align="left">4</td> 
   <td align="left">3</td> 
  </tr> 
  <tr> 
   <td align="left">onkeypress</td> 
   <td align="left">某个键盘的键被按下或按住</td> 
   <td align="left">1</td> 
   <td align="left">4</td> 
   <td align="left">3</td> 
  </tr> 
 </tbody> 
</table>

[此处参考的w3School][w3School]

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

--------------------

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

![微信公众号][aHR0cDovL295dG14eXVlay5ia3QuY2xvdWRkbi5jb20vd2VpeGluLmpwZWc]

[Link 1]: http://blog.csdn.net/u013132051/article/details/52129011
[Link 2]: http://blog.csdn.net/u013132051/article/details/52197798
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODE3MTcyMjQ0ODE1]: /images/20220718/212d7fe3f22c488dacea2314ce45f557.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODE3MTcyOTE5NTA4]: /images/20220718/595d4610219c46128242ee769956bbec.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODE3MTczMTIyMjU2]: /images/20220718/52fdf2113eb5433db3d56698683836a5.png
[w3School]: http://www.w3school.com.cn/jsref/jsref_events.asp
[aHR0cDovL295dG14eXVlay5ia3QuY2xvdWRkbi5jb20vd2VpeGluLmpwZWc]: /images/20220718/e6935d859a7c417e961b36b1a76b0bf2.png