OpenLayer加载WFS
更新于2019-03-06（下面的这种配置方式仅针对jetty-servlets-9.2.13.v20150730.jar这个版本，geoserver2.15、2.14、2.13版本都可以使用这个）
关于使用Geoserver上传wfs数据，百度有许多教程在这里不在陈述，
一、什么是跨域
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域
域名：
主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/test.js
子域名不同 http://www.666.baidu.com/index.html –>http://www.555.baidu.com/test.js
域名和域名ip http://www.baidu.com/index.html –>http://180.149.132.47/test.js
端口：
http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/test.js
协议：
http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js
备注：
1、端口和协议的不同，只能通过后台来解决
2、localhost和127.0.0.1虽然都指向本机，但也属于跨域
二、如何解决跨域问题
在这里我们使用cros解决具体流程：
针对geoserver2.9版本以上的设置
1、从http://central.maven.org/maven2/org/eclipse/jetty/jetty-servlets/上面下载
jetty-servlets-9.2.13.v20150730.jar
2、将下载好的 jetty-servlets-9.2.13.v20150730.jar 放到webapps/geoserver下的lib中
3、配置下webapps/geoserver/web.xml：
在filter最后面加上
<filter>
<filter-name>cross-origin</filter-name>
<filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
</filter>
在filter-mapping最后面加上
<filter-mapping>
<filter-name>cross-origin</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
4、重启geoserver
三、加载示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>wfs demo</title>
<link href="Script/ol.css" rel="stylesheet" />
<script src="Script/ol.js"></script>
<script src="../Scripts/jquery-1.7.1.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:100%;"></div>
<script>
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
}),
style: function (feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
})
});
}
});
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
}), vector],
target: 'map',
view: new ol.View({
center: [-73.99710639567148, 40.742270050255556],
maxZoom: 19,
zoom: 14,
projection: 'EPSG:4326'
})
});
map.on('pointermove', function (event) {
//先移除样式
var total = vector.getSource().getFeatures();
for (var i in total) {
total[i].setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
})
}));
}
//获得鼠标移动上的feature
map.forEachFeatureAtPixel(event.pixel, function (feature) {
//设置高亮显示填充颜色
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3,
}),
fill: new ol.style.Fill({
color: 'red'
})
}));
});
});
</script>
</body>
</html>
数据加载代码参考了扯淡大叔的文章，实现的效果实鼠标掠过要素实现高亮显示，数据用的是官方geoserver给的数据。
四、总结
代码加载很容易就是在跨域请求的时候会遇到了一些问题，关于在geoserver数据的上传的使用的给i哦城中还不太熟练，用惯了arcserver这个还不太习惯，也有些加载解决跨域问题，比如，C#代理或者java代理，这些需要声明一般处理程序（C#），用的时候得需要加上比较麻烦，还有注释那个jsonp方法，虽然方便只能用于get请求，如果url太长也不行。
转载自：https://blog.csdn.net/weixin_40184249/article/details/80957873
