Geoserver基本使用、WMS服务发布与OpenLayers测试
1.Geoserver与OpenLayers的下载
Geoserver：http://geoserver.org/
OpenLayers：http://openlayers.org/
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登录系统创建工作区。
此处以chinamap为例。
5.添加数据存储并发布层
这里的数据存储名称代表一个分层layer，在同一个工作区不允许重复分层名称存在。
添加数据存储并选择数据类型
选择对应类型的数据，这里我们选择shp类型的。
若上面“数据源名称”填写的是poi,那么得到的新建图层就是poi.
点击“发布”此图层，设置发布参数：
定义SRS选择数据的EPSG投影类型，这里因为数据的关系我选的是EPSG:4600，点击保存"数据存储"层（layer）发布成功。
6.Layer Preview地图层预览
最终加入的数据层可以在此处看到，这里都是添加后的数据层。
图层（Layers）中也可以看到刚才添加的层.
另外在系统欢迎界面还可以看到所有的层、商店、工作区的统计视图，点击即可查看详情.
7.发布geoserverWMS服务
修改chinamap工作区的参数，勾选WMS服务，修改后点击保存.
注：这里有个“代理服务器URL"，建议先保持为空，不要填写任何内容。
验证WMS是否发布成功，在浏览器中输入地址：http://192.168.1.147:8089/geoserver/wms，看到如下图所示内容表示发布成功。
8.Openlayers编写客户端访问WMS服务
创建一个web项目GisOpenlayersGeoserver，OpenLayers的包添加的时候很多注意不要加入不必要的包。
创建JSP页面测试地图，index.jsp文件内容如下：
<%@ 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>
添加项目到Tomcat启动测试，Tomcat端口8090，与geoserver所使用的服务端口不一致。测试效果如下：
自此，整个搭建过程完成。
Geoserver基本使用、WMS服务发布与OpenLayers测试的更多相关文章
- Arcgis for Js之加载wms服务
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...
- 使用GeoServer发布shp数据为WMS服务和WFS服务
使用GeoServer发布shp数据为WMS服务和WFS服务 1安装GeoServer 2使用GeoServer上传数据 3使用GeoServer发布数据为WMS和WFS 看完本教程,你将学会安装Ge ...
- World Wind Java开发之十三——加载Geoserver发布的WMS服务（转）
这篇是转载的平常心博客,原地址见:http://www.v5cn.cn/?p=171 1.WMSTiledImageLayer类说明 一个WMSTiledImageLayer类对象只能对应一个WMS发 ...
- Geoserver发布WMS服务出错分析
使用Geoserver发布一个空间表,在图层预览的过程中没有任何问题,但是当我根据这个空间表传创建视图再发布wms服务,访问时就会报错,错误信息如下: Caused by: java.sql.SQLE ...
- OpenLayers 6 学习笔记2 WMS服务避坑记录
心血来潮,花1小时安装软件写代码+复习api,顺便熟悉一波wms 再次强化认知了wms获取要素的能力没有wfs强,有待考究 原文链接(转载请声明@秋意正寒 博客园/知乎/B站/csdn/小专栏):h ...
- SkylineGlobe SFS发布的WFS和WMS服务测试
SkylineGlobe SFS发布的WFS服务:http://localhost/SFS/streamer.ashx?service=wfs&request=GetCapabilities& ...
- geoserver中WMS服务详细说明
官方geoserver中WMS服务中几种操作的API的详细说明地址: http://docs.geoserver.org/stable/en/user/services/wms/reference.h ...
- PIE SDK加载WMS服务数据
1. 功能简介 WMS服务,WMS是OGC标准中比较简单也是比较重要的标准之一.它全称是“Web Map Service”(网络地图服务):利用具有地理空间位置信息的数据制作地图.其中将地图定义为 ...
- （十九）ArcGIS JS 加载WMS服务（超图示例）
前言 在工作中,需要在ArcGIS API for JavaScript中加载超图服务,因为超图的rest服务只可以用于Leaflet .openlayers3 (with MVT) .MapboxG ...
随机推荐
- 在javascript中使用com组件的方法
转载自: http://dhailin.blog.163.com/blog/static/230738322011128102043880/ 首先创建一个COM组件,插入一个双接口Itest,在此接 ...
- Populating Next Right Pointers in Each Node 解答
Question Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLink ...
- HDU 1272 小希的迷宫（并查集） 分类： 并查集 2015-07-07 23:38 2人阅读 评论(0) 收藏
Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就 ...
- C:\Program Files (x86)\Common Files\microsoft shared\TextTemplating\11.0
Generating Files with the TextTransform Utility \Program Files\Common Files\Microsoft Shared\TextTem ...
- HBase 4、Phoenix安装和Squirrel安装
描述 现有hbase的查询工具有很多如:Hive,Tez,Impala,Shark/Spark,Phoenix等.今天主要记录Phoenix. phoenix,中文译为“凤凰”,很美的名字.Phoen ...
- wxpython StatuBar 带进度条的状态栏
# -*- coding: utf- -*- import wx class customStatusBar(wx.StatusBar): def __init__(self, parent): wx ...
- 清除mac上安装软件的用户信息
有时候在mac系统上安装了一些软件后,尽管你将该软件卸载之后,可是原来的登录信息依然存在, 那么你就可以到下面的这个目录中查看一下,是否残留有信息文件.
- 蚂蚁的难题(二)首尾相连数组的最大子数组和（DP）
蚂蚁的难题(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种食材 ...
- [Android4.4.3] Nubia Z5S Mokee4.4.3 RC2.0 by syhost
这个ROM先前在Mokee官网公布过,但一些人測试bug不少,因此已经撤下, 但又有人反馈跟之前RC1.0版的bug差点儿相同, 所以再次在网盘单独公布, 截图以及注意事项见之前的RC1.0的帖子, ...
- 购买DigtalOcean VPS 以及 连接Linux
1.DigtalOcean简介 digitalocean是一家成立于2012年的总部设置在纽约的云主机商家,眼下在荷兰的阿姆斯特丹(AMS1.AMS2).美国的纽约(NYC1.NYC2)和旧金山(SF ...