设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 5485|回复: 0

[经验分享] Geoserver基本使用、WMS服务发布与OpenLayers测试

[复制链接]
haixin3036

尚未签到
发表于 2017-3-1 06:04:29 | 显示全部楼层 |阅读模式
　　1.Geoserver与OpenLayers的下载
　　Geoserver：http://geoserver.org/
DSC0000.png

　　OpenLayers：http://openlayers.org/
DSC0001.png

　　2.安装部署Geoserver
　　环境：jdk 1.7,geoserver-2.5
　　配置：修改geoserver-2.5/ect/jetty.xml 的端口为8089，避免端口冲突。



<Call name="addConnector">
<Arg>
<New class="org.mortbay.jetty.nio.SelectChannelConnector">
<Set name="port"><SystemProperty name="jetty.port" default="8089"/></Set>
<Set name="maxIdleTime">30000</Set>
<Set name="Acceptors">2</Set>
<Set name="confidentialPort">8443</Set>
</New>
</Arg>
</Call>
　　3.启动、停止Geoserver服务器，准备地图数据
　　启动：在geoserver-2.5/bin下启动startup.bat
　　停止：在geoserver-2.5/bin下启动shutdown.bat
　　数据：可以说数据文件也可以是数据库数据，数据库支持PostGIS、Oralce、Mysql等数据库，这里我们准备的是*.shp数据。
　　注：将shp格式数据放在geoserver-2.5/data_dir/data下。
　　4.创建工作区
　　启动服务器后，使用用户:  admin ,密码：geoserver登录系统创建工作区。
DSC0002.png

　　此处以chinamap为例。
　　5.添加数据存储并发布层
　　这里的数据存储名称代表一个分层layer，在同一个工作区不允许重复分层名称存在。
DSC0003.png

　　添加数据存储并选择数据类型
DSC0004.png

　　选择对应类型的数据，这里我们选择shp类型的。
DSC0005.png

　　若上面“数据源名称”填写的是poi,那么得到的新建图层就是poi.
DSC0006.png

　　点击“发布”此图层，设置发布参数：
DSC0007.png

DSC0008.png

　　定义SRS选择数据的EPSG投影类型，这里因为数据的关系我选的是EPSG:4600，点击保存"数据存储"层（layer）发布成功。
　　6.Layer Preview地图层预览
　　最终加入的数据层可以在此处看到，这里都是添加后的数据层。
DSC0009.png

　　图层（Layers）中也可以看到刚才添加的层.
DSC00010.png

　　另外在系统欢迎界面还可以看到所有的层、商店、工作区的统计视图，点击即可查看详情.
DSC00011.png

　　7.发布geoserverWMS服务
　　修改chinamap工作区的参数，勾选WMS服务，修改后点击保存.
DSC00012.png

　　注：这里有个“代理服务器URL"，建议先保持为空，不要填写任何内容。
　　验证WMS是否发布成功，在浏览器中输入地址：http://192.168.1.147:8089/geoserver/wms，看到如下图所示内容表示发布成功。
DSC00013.png

　　8.Openlayers编写客户端访问WMS服务
　　创建一个web项目GisOpenlayersGeoserver，OpenLayers的包添加的时候很多注意不要加入不必要的包。
DSC00014.png

　　创建JSP页面测试地图，index.jsp文件内容如下：


DSC00015.gif DSC00016.gif


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>OpenLayers map preview</title>  
<!-- Import OL CSS, auto import does not work with our minified OL.js build -->  
<link rel="stylesheet" type="text/css" href="${ctx}/openlayers/theme/default/style.css"/>  
<link rel="stylesheet" href="${ctx}/openlayers/theme/default/google.css" type="text/css"/>  
<!-- Basic CSS definitions -->  
<style type="text/css">  
/* General settings */  
body {  
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
font-size: small;  
}  
/* Toolbar styles */  
#toolbar {  
position: relative;  
padding-bottom: 0.5em;   
}  
/* The map and the location bar */  
#map {  
clear: both;  
position: relative;  
width: 100%;  
height: 620px;  
border: 1px solid black;  
}  
#wrapper {  
width: 698px;  
}  
#location {  
float: right;  
}  
/* Styles used by the default GetFeatureInfo output, added to make IE happy */  
table.featureInfo, table.featureInfo td, table.featureInfo th {  
border: 1px solid #ddd;  
border-collapse: collapse;  
margin: 0;  
padding: 0;  
font-size: 90%;  
padding: .2em .1em;  
}  
table.featureInfo th {  
padding: .2em .2em;  
text-transform: uppercase;  
font-weight: bold;  
background: #eee;  
}  
table.featureInfo td {  
background: #fff;  
}  
table.featureInfo tr.odd td {  
background: #eee;  
}  
table.featureInfo caption {  
text-align: left;  
font-size: 100%;  
font-weight: bold;  
text-transform: uppercase;  
padding: .2em .2em;  
}  
</style>  
<!-- Import OpenLayers, reduced, wms read only version -->  
<script src="${ctx}/openlayers/lib/OpenLayers.js" ></script>  
<script src="${ctx}/jslib/jquery-1.10.2.min.js" ></script>  
<!--  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>  -->
<script defer="defer" type="text/javascript">  
var map, measureControls;  
var untiled;  
var tiled;  
function init(){  
format = 'image/png';  
var bounds = new OpenLayers.Bounds(  //地图区域范围  
74.137, 6.319,  
135.086, 53.558  
);  
var options = {  
controls: [],  
maxExtent: bounds,  
maxResolution: 0.23808203125,  
projection: "EPSG:4600",  
numZoomLevels: 15,   
units: 'degrees'  
};  
map = new OpenLayers.Map('map', options);  
/**********************加载图层 开始*******************************/  
/*   tiled = new OpenLayers.Layer.WMS(  //图层组  
"基础图层", "http://localhost:8080/geoserver/wms",  
{  
height: '330',  
width: '698',  
layers: 'sf',  
styles: '',  
srs: 'EPSG:4326',  
format: format,  
tiled: 'true',  
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom  
},  
{  
buffer: 0,  
displayOutsideMaxExtent: true  
}   
);*/  
var streams = new OpenLayers.Layer.WMS(    //图层组  
"中国地州界", "http://192.168.1.147:8089/geoserver/wms",  
{  
height: '330',  
width: '698',  
layers: 'chinamap:中国地州界',  
styles: '',  
srs: 'EPSG:4600',  
format: format,  
tiled: 'true',  
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom  
},  
{  
buffer: 0,  
displayOutsideMaxExtent: true  
}   
);  
untiled = new OpenLayers.Layer.WMS(  //单独图层  
"省会城市", "http://192.168.1.147:8089/geoserver/wms",  
{  
height: '330',  
width: '698',  
layers: 'chinamap:省会城市',  
styles: '',  
srs: 'EPSG:4600',  
transparent: "true",  
format: format  
},  
{singleTile: true, ratio: 1}   
);  
//  untiled.setVisibility(false); //设置为不显示  
//var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});      
/* var dm_wms = new OpenLayers.Layer.WMS( "点图层",  
"http://127.0.0.1:8080/geoserver/wms",  
{layers: "sf:bugsites,sf:archsites",  
transparent: "true", format: "image/png"});*/  
map.addLayers([streams,untiled]);  
/********************END 加载图层*********************************/  
/************************加载一般的基础控件********************************/     
map.addControl(new OpenLayers.Control.PanZoomBar({  //添加平移缩放工具条  
                    position: new OpenLayers.Pixel(2, 15)  
}));  
map.addControl(new OpenLayers.Control.Navigation());  //双击放大,平移  
                map.addControl(new OpenLayers.Control.Scale($('scale')));  //获取地图比例尺  
                map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));  //获取鼠标的经纬度  
                map.setCenter(new OpenLayers.LonLat(100.254, 35.25), 1);  //添加平移缩放工具条  
                map.addControl(new OpenLayers.Control.OverviewMap());  //添加鹰眼图  
                map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));  //图层切换工具              
                map.addControl(new OpenLayers.Control.Permalink('xxxx'));  //添加永久链接  
//map.addControl(new OpenLayers.Control.MouseToolbar());  
//map.zoomToMaxExtent();  
var zb=new OpenLayers.Control.ZoomBox({out:true});  
var panel = new OpenLayers.Control.Panel({defaultControl: zb});  
map.addControl(panel);  
/************END************加载一般的基础控件********************************/     
/***********************鼠标点击，获取图层数据*******************************/     
map.events.register('click', map, function (e) {  
document.getElementById('nodelist').innerHTML = "Loading... please wait...";  
var params = {  
REQUEST: "GetFeatureInfo",  
EXCEPTIONS: "application/vnd.ogc.se_xml",  
BBOX: map.getExtent().toBBOX(),  
X: e.xy.x,  
Y: e.xy.y,  
INFO_FORMAT: 'text/html',  
QUERY_LAYERS: map.layers[0].params.LAYERS,  
FEATURE_COUNT: 50,  
Layers: 'ok',  
Styles: '',  
Srs: 'EPSG:4600',  
WIDTH: map.size.w,  
HEIGHT: map.size.h,  
format: format};  
OpenLayers.loadURL("http://192.168.1.147:8089/geoserver/wms", params, this, setHTML, setHTML);  
OpenLayers.Event.stop(e);  
});  
/**************END*********鼠标点击，获取图层数据*******************************/     
/**********************************点、线、面测量开始**********************************************/  
var sketchSymbolizers = {  
"Point": {  
pointRadius: 4,   
graphicName: "square",  
fillColor: "white",  
fillOpacity: 1,  
strokeWidth: 1,  
strokeOpacity: 1,  
strokeColor: "#333333"  
},  
"Line": {  
strokeWidth: 3,  
strokeOpacity: 1,  
strokeColor: "#666666",  
strokeDashstyle: "dash"  
},  
"Polygon": {  
strokeWidth: 2,  
strokeOpacity: 1,  
strokeColor: "#666666",  
fillColor: "white",  
fillOpacity: 0.3  
}  
};  
var style = new OpenLayers.Style();  
style.addRules([  
new OpenLayers.Rule({symbolizer: sketchSymbolizers})  
]);  
var styleMap = new OpenLayers.StyleMap({"default": style});  
measureControls = {  
line: new OpenLayers.Control.Measure(  
OpenLayers.Handler.Path, {  
persist: true,  
handlerOptions: {  
layerOptions: {styleMap: styleMap}  
}  
}  
),  
polygon: new OpenLayers.Control.Measure(  
OpenLayers.Handler.Polygon, {  
persist: true,  
handlerOptions: {  
layerOptions: {styleMap: styleMap}  
}  
}  
)  
};  
var control;  
for(var key in measureControls) {  
control = measureControls[key];
control.events.on({  
"measure": handleMeasurements,  
"measurepartial": handleMeasurements  
});  
map.addControl(control);  
}  
/***************************END************点，线、面积测量*****************************************/  
//添加点标注的图层  
              markers = new OpenLayers.Layer.Markers("markers");  
map.addLayer(markers);   
markers.setZIndex(200);  
map.zoomTo(2);  
}  
//获取面积的结果赋值  
function handleMeasurements(event) {  
var geometry = event.geometry;  
var units = event.units;  
var order = event.order;  
var measure = event.measure;  
var element = document.getElementById('output');  
var out = "";  
if(order == 1) {  
out += "面积为: " + measure.toFixed(3) + " " + units;  
} else {  
out += "面积为: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";  
}  
element.innerHTML = out;  
}  
function setHTML(response){  
document.getElementById('nodelist').innerHTML = response.responseText;  
};  
//缩小  
function zoomOut(){  
map.zoomOut();  
}  
//放大  
function zoomIn(){  
map.zoomIn();  
}  
//获取地图数据  
function getSize(){  
alert(map.getSize()+",高度为="+map.getSize().h);  
}  
//切换鼠标事件功能  
function toggleControl(_value) {  
for(key in measureControls) {  
var control = measureControls[key];  
if(_value == key ) {  
control.activate();  
} else {  
control.deactivate();  
}  
}  
}  
/*********************拉宽并获取经纬度坐标系*********************************/  
function boxExtend(){  
var controlBox = new OpenLayers.Control();  
OpenLayers.Util.extend(controlBox, {  
draw: function () {  
this.box = new OpenLayers.Handler.Box( controlBox,  
{"done": this.notice},{ "persist": true},  
{keyMask:OpenLayers.Handler.MOD_SHIFT });  
this.box.activate();  
},  
notice: function (bounds) {      
var ll = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom));   
var ur = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top));   
alert(ll.lon.toFixed(4) + ", " +   
ll.lat.toFixed(4) + ", " +   
ur.lon.toFixed(4) + ", " +   
ur.lat.toFixed(4));  
}  
});  
map.addControl(controlBox);  
}  
var markers,marker;  
var markArr=new Array();  
function addMarker(){  
var url = 'http://www.openlayers.org/dev/img/marker.png';  
var sz = new OpenLayers.Size(20, 20);  //尺寸大小  
var calculateOffset = function(size) {  
return new OpenLayers.Pixel(-(size.w/2), -size.h);  
                                 };  
var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);  
marker = new OpenLayers.Marker(new OpenLayers.LonLat(113.34851,33.22630), icon);  
markers.addMarker(marker);  
// marker = new OpenLayers.Marker(madrid, icon.clone());  
// markers.addMarker(marker);              
        }  
function removeMarker() {  
markers.removeMarker(marker);  
}  
/*******************多边形获取经纬度坐标系*************************/  
function test(){  
var getpolygonxy = new OpenLayers.Control();  
OpenLayers.Util.extend(getpolygonxy, {  
draw: function() {  
this.polygon= new OpenLayers.Handler.Polygon(getpolygonxy ,  
{ "done": this.notice },{ "persist": true},  
{ keyMask: OpenLayers.Handler.MOD_SHIFT });  
this.polygon.activate();  
},  
notice: function(bounds) {  
alert(bounds);//坐标信息                     
                }  
});  
map.addControl(getpolygonxy);  
}  
</script>  
</head>  
<body onload="init()">  
<div id="toolbar" style="display:">            
<input type="button" value="放大" onclick="zoomIn()"/>  
<input type="button" value="缩小" onclick="zoomOut()"/>  
<input type="button" value="获取地图大小" onclick="getSize()"/>  
<input type="button" value="平移" onclick="toggleControl('none')"/>  
<input type="button" value="线路测量" onclick="toggleControl('line')"/>  
<input type="button" value="测量面积" onclick="toggleControl('polygon')"/>  
<input type="button" value="shift拉框" onclick="boxExtend()"/>  
<input type="button" value="显示标注" onclick="addMarker()"/>  
<input type="button" value="移除标注" onclick="removeMarker()"/>  
<input type="button" value="画多边形获取经纬度坐标" onclick="test()"/>  
</div>  
<div id="map">  
</div>  
<div id="wrapper">  
<div id="location">经纬度坐标</div>  
<div id="scale">  
</div>  
<div id="output">  
</div>  
</div>  
<div id="xystr"></div>  
<div id="nodelist">  
<em>Click on the map to get feature info</em>  
</div>  
</body>  
</html>  
View Code　　添加项目到Tomcat启动测试，Tomcat端口8090，与geoserver所使用的服务端口不一致。测试效果如下：
DSC00017.png

　　自此，整个搭建过程完成。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-348468-1-1.html 上篇帖子： WebService之JAX-WS、CXF、Spring3.0+ 下篇帖子： Spark安装过程
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表