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

太过爱你忘了你带给我的痛 2022-04-12 12:57 378阅读 0赞

时间：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，框选的时候不显示选框。  
  
\[b\]一、启动GeoServer\[/b\]  
　　使用GeoServer自带的数据做试验，选择一个点元素图层“tiger:poi”，在预览界面生成KML数据文件【All format下拉选框中选择KML(plain)】，将这个文件保存为poi.kml。  
  
\[b\]二、创建网页文件\[/b\]  
　　进入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>

\[b\]三、设置数据文件\[/b\]  
　　将第一页生成的poi.kml文件，放到bs.html网页文件所在的目录。  
  
\[b\]四、通过浏览器访问网页\[/b\]  
　　我的地址是http://localhost:8080/bs.html，请根据实际情况进行修改。框选时，按住Ctrl键（MAC系统，使用Command键）。