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

wallimn

浏览: 5156756 次
性别:
来自: 北京

最近访客更多访客>>

java-007

xckouy

lengyun3566

zxjun8771

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

geoserver openlayers 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键）。

src.rar (131.6 KB)
下载次数: 70

1
顶

3
踩

分享到：

GeoServer学习——发布shp格式的地图 | SpringMVC快速入门示例

2016-02-26 23:24
浏览 11244
评论(6)
分类:编程语言
查看更多

6 楼 jcrack 2018-01-24

0123456789abcdefghij01234567890123456789abcdefghij0123456789

5 楼 jcrack 2018-01-23

0123456789abcdefghij0123456789

4 楼 yy64566496 2017-11-15

现在使用文件形式可以显示数据，但是第二点您说使用生成文件的链接，这个是怎么得到链接的？

3 楼 wallimn 2017-03-24

巩大星写道

就是用官方的例子中的kml文件，可以在openlayers中正常显示。但是用geoserver生成的kml文件，在openlayers中就无法显示。是不是因为geoserver中导出的kml里面的数据是链接形式的呢。

巩大星写道

提供了一种很好地思路，但是为啥tomcat里面访问后，也没有背景地图，也没有点数据呢。

对不起，浅尝辄止地了解了一下，没有深入研究，也没有实际应用。不能回答你们的问题。

2 楼巩大星 2017-03-18

1 楼巩大星 2017-03-17

提供了一种很好地思路，但是为啥tomcat里面访问后，也没有背景地图，也没有点数据呢。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论