高效访问海量地图数据--用OpenLayers访问GeoServer发布的地图
高效访问海量地图数据--用OpenLayers访问GeoServer发布的地图
上一篇文章中，我们介绍了用GeoServer手动发布本地Shapefile地图，那么如何在谷歌地图中展示GeoServer发布好的地图呢？
大伙先来看看本文实现最终结果：
地图放大后：
一、解决Geoserver跨域问题
为了让GeoServer发布的地图能被其他服务加载。需要设置跨域。跨域问题是由浏览器的同源策略造成的，是一种安全机制。所谓同源是要域名，端口，协议均相同。比如127.0.0.1：8080端口访问127.0.0.1：8081端口的数据就会出现问题。
我们需要在tomcat\geoserver\webapps\geoserver\WEB-INF\lib目录下加入两个jar包
下载地址：https://pan.baidu.com/s/1jIbZmopK_9hyv2bo3OltiQ
打开tomcat\geoserver\webapps\geoserver\web.xml文件，找到文件中<filter>平级的位置，添加如下内容:
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>继续在web.xml中找到<filter-mapping>平级的位置，添加:
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>二、创建HTML并引入OpenLayers
放入到Tomcat的ROOT下，引入所需包(可以和GeoServer同一个Tomcat)
index.html内容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<title>googlemap</title>
<link href="resource/css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resource/js/ol.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script src="http://epsg.io/21461-1753.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script type="text/javascript">
var wfsVectorLayer="";
//初始化加载中心点
var extent= [374501.6659553682, 4581745.5281843925,625498.3340446339,5569829.626271695];
//加载google地图
var googleMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
})
});
//加载google交通标注图
var googleMapLayerTranffic = new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}'
})
});
//new 地图对象
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine()
]),
layers: [
googleMapLayer
],
view: new ol.View({
center: ol.proj.transform(ol.extent.getCenter(extent), 'EPSG:21461', 'EPSG:4326'),
projection: 'EPSG:4326',
zoom: 11
}),
target: 'map'
});
addWms();
//加载geoserver发布的地图
function addWms(){
wfsVectorLayer = new ol.layer.Tile({
source:new ol.source.TileWMS({
url:'http://localhost:18080/geoserver/liugh/wms?service=WMS&version=1.1.0&request=GetMap&layers=liugh:liugh&styles=&bbox=121.64615683700006,40.87619799400008,131.15122178300007,46.289391897000115&width=768&height=437&srs=EPSG:4610',
projection: 'EPSG:4326',
params:{
'LAYERS':'gdzygldyt' ,
'VERSION':'1.1.0'
}
})
});
map.addLayer(wfsVectorLayer);
map.addLayer(googleMapLayerTranffic);
}
</script> 加载GeoServer发布好的地图时，填入的url是点击OpenLayers的地址：
如果还不知道如何发布地图，请参考上一篇文章：GeoServer手动发布本地Shapefile地图
这里重点强调一下，浏览器的url地址如果要加入代码中时，复制url一定要去掉后面这段话，不然图层会加载不出来
三、启动Tomcat，并验证是否成功
在浏览器输入：http://localhost:18080/index.html
我自己把Tomcat8080端口改成18080了，读者可以自行修改，到这里就完成本文的功能了。
虽然已经实现了基本功能，可如果每次发布地图都要去GeoServer的管理端添加.shp文件，手动发布实在太麻烦，敬请期待下一篇文章：
高效访问海量地图数据--用Java代码自动发布Geoserver的地图服务