初学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键)。