GeoServer学习——OpenLayers3加载KML地图实现框选

时间:2016-02-26,欢迎转载,转载请保留本文地址: http://wallimn.iteye.com/blog/2279201

初学GeoServer、OpenLayers,折腾了几天,终于完成了一个简单的任务:使用GeoServer发布KML数据,WEB页面通过OpenLayers打开,实现显示框选的元素。

GeoServer的版本为:2.7.5,OpenLayers的版本为:3.14.0。

框选的效果与OL的版本有较大关系,注意要使用最新版本。使用GeoServer自带的OL,框选的时候不显示选框。

一、启动GeoServer

使用GeoServer自带的数据做试验,选择一个点元素图层“tiger:poi”,在预览界面生成KML数据文件【All format下拉选框中选择KML(plain)】,将这个文件保存为poi.kml。

二、创建网页文件

进入Tomcat的工程目录,webapps\ROOT目录中,创建bs.html文件。文件内容主要来自于官网的例子,与地图显示相关的部分进行了相应的修改,如坐标系设置、边界、地图大小自适应等。

文件内容如下:

<!DOCTYPE html>
<html>
<head>
<title>GeoStudy--by wallimn</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.14.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.14.0/build/ol.js"></script>

<style>
.ol-dragbox {
	background-color: rgba(255, 255, 255, 0.4);
	border-color: rgba(100, 150, 0, 1);
}
</style>
</head>
<body>
	<div id="map" class="map" style="border: 1px solid red;"></div>
	<div id="info">No countries selected</div>
	<script type="text/javascript">
		//by wallimn, http://wallimn.iteye.com, 2016-02-26
		//以下两个参数,通过GeoServer,查看图层属性可获取
		var projection = ol.proj.get('EPSG:4326');
		var bounds = [ -74.0118315772888, 40.70754683896324,
				-74.00153046439813, 40.719885123828675 ];

		var vectorSource = new ol.source.Vector({
			//1.通过GeoServer生成的KML文件,保存到此网页文件所在的目录
			//2.也可以直接使用生成这个文件的链接,动态生成数据文件
			url : 'poi.kml',
			format : new ol.format.KML()
		});
		var vectorLayer = new ol.layer.Vector({
			source : vectorSource
		});

		var map = new ol.Map({
			layers : [ vectorLayer ],
			renderer : 'canvas',
			target : 'map',
			view : new ol.View({
				projection : projection
			})
		});
		map.getView().fit(bounds, map.getSize());

		// a normal select interaction to handle click
		var select = new ol.interaction.Select();
		map.addInteraction(select);

		var selectedFeatures = select.getFeatures();

		// a DragBox interaction used to select features by drawing boxes
		var dragBox = new ol.interaction.DragBox({
			condition : ol.events.condition.platformModifierKeyOnly
		});

		map.addInteraction(dragBox);

		var infoBox = document.getElementById('info');

		dragBox.on('boxend', function() {
			// features that intersect the box are added to the collection of
			// selected features, and their names are displayed in the "info"
			// div
			var info = [];
			var extent = dragBox.getGeometry().getExtent();
			vectorSource.forEachFeatureIntersectingExtent(extent, function(
					feature) {
				selectedFeatures.push(feature);
				info.push(feature.get('name'));
			});
			if (info.length > 0) {
				infoBox.innerHTML = info.join(', ');
			}
		});

		// clear selection when drawing a new box and when clicking on the map
		dragBox.on('boxstart', function() {
			selectedFeatures.clear();
			infoBox.innerHTML = ' ';
		});
		map.on('click', function() {
			selectedFeatures.clear();
			infoBox.innerHTML = ' ';
		});
	</script>
</body>
</html>
三、设置数据文件

将第一页生成的poi.kml文件,放到bs.html网页文件所在的目录。

四、通过浏览器访问网页我的地址是http://localhost:8080/bs.html,请根据实际情况进行修改。框选时,按住Ctrl键(MAC系统,使用Command键)。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章