您的位置：首页 > 运维架构

OpenLayers3 学习心得（四）——空间查询

2014-11-20 14:27 393 查看
空间查询是GIS的一个重要的功能，根据空间查询可进行专题图分析、统计分析、缓冲区分析以及周边查询等。本实例介绍的查询是基于Image图层的查询，其他图层的查询方法一样。Ol的查询对ogc标准（ogc规范不在本文讨论范围内）查询进行了一定的封装，开发人员同样可以自己根据ogc标准进行要素的属性信息等进行查询。实例很简单，同时也是上述复杂查询的基础，掌握好基础才能进行复杂的工作。

1创建页面

新建名为getImageFeatureInfo的html，页面内容如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>获取image layer的要素信息</title>
<link rel="stylesheet" href="../css/ol.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="../css/layout.css">
<script type="text/javascript" src="../ol3/ol-debug.js"></script>
<script type="text/javascript" src="../goog/base.js"></script>
<script type="text/javascript" src="../plugins/jquery2.1.1.js"></script>
<script type="text/javascript" src="../example/example-behaviour.js"></script>
<script type="text/javascript" src="../example/getImageFeatureInfo.js"></script>
</head>
<body onload="init()">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../images/logo.png">OL3 Example</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

<div class="row-fluid">
<div class="span4">
<h4 id="title">GetFeatureInfo example (image layer)</h4>
<p id="shortdesc">这个例子说明在点击一个wms图片图层时如何使用 wms的GetFeatureInfo方法获取要素信息。</p>
</div>
<div class="span4 offset4">
<div id="info" class="alert alert-success">
 
</div>
</div>
</div>

</div>
</body>
</html>


2新建名为getImageFeatureInfo的js文件

创建初始函数function init(){}，在初始函数中初始化如下几项

初始化图层

首先，新建wms的数据源：

var wmsSource=new ol.source.ImageWMS({
url:'http://demo.opengeo.org/geoserver/wms',
params:{'LAYERS':'ne:ne'},
serverType:'geoserver'
});


其次，创建image图层：

var wmsLayer=new ol.layer.Image({
source:wmsSource
});


初始化地图

设置视图，中心点（0,0），缩放级别1：

var view=new ol.View({
center:[0,0],
zoom:1
});

初始化地图，将初始化的wmsLayer和view赋值给新建的地图：

var map=new ol.Map({
layers:[wmsLayer],
target:'map',
view:view
});

注册地图的单击事件，在单击后获取地图的地理坐标，通过wmsSource.getGetFeatureInfoUrl（）方法获取符合ogc标准的url。代码如下：

map.on('singleclick',function(evt){
document.getElementById('info').innerHTML='';
var viewResolution=view.getResolution();
var url=wmsSource.getGetFeatureInfoUrl(
evt.coordinate,viewResolution,'EPSG:3857',
{'INFO_FORMAT':'text/html'}
);
if(url){
document.getElementById('info').innerHTML=
'<iframe seamless src="'+url+'"></iframe>';
}
})

整个初始化函数如下：

function init(){
var wmsSource=new ol.source.ImageWMS({
url:'http://demo.opengeo.org/geoserver/wms',
params:{'LAYERS':'ne:ne'},
serverType:'geoserver'
});var wmsLayer=new ol.layer.Image({
source:wmsSource
});var view=new ol.View({
center:[0,0],
zoom:1
});var map=new ol.Map({
layers:[wmsLayer],
target:'map',
view:view
});map.on('singleclick',function(evt){
document.getElementById('info').innerHTML='';
var viewResolution=view.getResolution();
var url=wmsSource.getGetFeatureInfoUrl(
evt.coordinate,viewResolution,'EPSG:3857',
{'INFO_FORMAT':'text/html'}
);
if(url){
document.getElementById('info').innerHTML=
'<iframe seamless src="'+url+'"></iframe>';
}
})}

3运行结果

因结果的返回格式是html形式，返回后的结果加载到iframe中，右下角为查询后的内容。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航