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，框选的时候不显示选框。
[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键）。
转载自：https://blog.csdn.net/wallimn/article/details/84767280
