高效訪問海量地圖數據--用OpenLayers訪問GeoServer發佈的地圖

時間 2019-11-21

標籤高效訪問海量地圖數據 openlayers geoserver 發佈欄目系統性能简体版

原文原文鏈接

上一篇文章中，咱們介紹了用GeoServer手動發佈本地Shapefile地圖，那麼如何在谷歌地圖中展現GeoServer發佈好的地圖呢？javascript

大夥先來看看本文實現最終結果：css

地圖放大後：html

1、解決Geoserver跨域問題

爲了讓GeoServer發佈的地圖能被其餘服務加載。須要設置跨域。跨域問題是由瀏覽器的同源策略形成的，是一種安全機制。所謂同源是要域名，端口，協議均相同。好比127.0.0.1：8080端口訪問127.0.0.1：8081端口的數據就會出現問題。java

咱們須要在tomcat\geoserver\webapps\geoserver\WEB-INF\lib目錄下加入兩個jar包web

下載地址：https://pan.baidu.com/s/1jIbZmopK_9hyv2bo3OltiQajax

打開tomcat\geoserver\webapps\geoserver\web.xml文件，找到文件中<filter>平級的位置，添加以下內容:chrome

<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>

2、建立HTML並引入OpenLayers

放入到Tomcat的ROOT下，引入所需包(能夠和GeoServer同一個Tomcat)瀏覽器

index.html內容以下：tomcat

<!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必定要去掉後面這段話，否則圖層會加載不出來