文档章节

高效访问海量地图数据--用OpenLayers访问GeoServer发布的地图

我叫刘半仙
 我叫刘半仙
发布于 2018/04/18 19:56
字数 906
阅读 1986
收藏 2

上一篇文章中,我们介绍了用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的地图服务

 

 

© 著作权归作者所有

共有 人打赏支持
我叫刘半仙
粉丝 273
博文 29
码字总数 61209
作品 0
西安
程序员
私信 提问
基于GeoServer切片地图服务的发布

接着上一篇文章,如何将JPG格式的图片转化为带地理坐标的TIFF格式里提及的最近的一个项目,数据源是一张高分辨率的2.5维图片,现在已经成功转化成了带有地理坐标的TIFF格式。下面将介绍借助G...

陶诗德
2015/01/05
0
0
【环境配置】 geoserver、openlayers、PostgreSQL 开发环境配置

1.准备工作   1)PostgreSQL http://www.postgresql.org/   2)Geoserver http://geoserver.org/display/GEOS/Download   3)Openlayers http://trac.openlayers.org/wiki/HowToDownloa......

JungleKing
2014/01/05
0
0
android环境移动GIS的问题

android环境 问题:像Geoserver + OpenLayers 这样的B/S模式很成熟了,但野外有的地方没信号,需要桌面客户端实现,各位能推荐下开源免费C/S模式的 客户端和 地图服务器组合么? 我看了个gvS...

gyy
2011/09/24
4.7K
3
GeoServer与ArcServer对比

一、GeoServer与ArcServer简介 1、 GeoServer简介 GeoServer是OpenGIS Web服务器规范的J2EE实现的社区开源项目,利用GeoServer可以方便的发布地图数据,允许用户对特征数据进行更新、删除、插...

HarleyZhuge
2018/05/08
0
0
通过Java代码自动发布Geoserver的地图服务WMS

GeoServer 顾名思义。是一个Server,它是开源的,允许用户查看和编辑地理数据的服务器,它可以比较容易的在用户之间迅速共享空间地理信息。利用Geoserver可以把数据作为maps/images来发布(利...

我叫刘半仙
2018/08/12
0
4

没有更多内容

加载失败,请刷新页面

加载更多

5、redis分布式锁

参考链接:https://www.cnblogs.com/linjiqin/p/8003838.html 一:介绍 实现分布式锁有三种方式:1、数据库乐观锁,2、基于redis,3、基于zookeeper。 redis服务端是单线程操作,完美地避免了...

刘付kin
21分钟前
3
0
OSChina 周日乱弹 —— 我重新说

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享矢野立美的单曲《LOVE Theme from TIGA <M-2>》: 《LOVE Theme from TIGA <M-2>》- 矢野立美 手机党少年们想听歌,请使劲儿戳...

小小编辑
今天
56
5
Java单例模式学习记录

在项目开发中经常能遇见的设计模式就是单例模式了,而实现的方式最常见的有两种:饿汉和饱汉(懒汉)。由于日常接触较多而研究的不够深入,导致面试的时候被询问到后有点没底,这里记录一下学习...

JerryLin123
昨天
10
0
VSCODE 无法调试

VSCODE 无法调试 可以运行 可能的原因: GCC 的参数忘了加 -g

shzwork
昨天
5
0
理解去中心化 稳定币 DAI

随着摩根大通推出JPM Coin 稳定币,可以预见稳定币将成为区块链落地的一大助推器。 坦白来讲,对于一个程序员的我来讲(不懂一点专业经济和金融),理解DAI的机制,真的有一点复杂。耐心看完...

Tiny熊
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部