空间查询是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 οnlοad="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>';
}
})
}