图层组名称：layTest（可随便起）
topp:bou2和topp:bou2p为geoserver连接mysql数据库取出的地图数据（两个图层）
提交后就可在
Mapbuiler客户端查看地图
1、使用java代码调用使用wms发布的地图 （可选择图层）
页面代码：
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>调用geoserver发布好的图层(可选择图层)</title>
<style type="text/css">
#map {
800px;
height: 380px;
border: 1px solid black;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js"
type="text/javascript">
</script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
var options = {numZoomLevels: 3};
var graphic = new OpenLayers.Layer.WMS("图层1",
"http://localhost:8080/geoserver/wms",
{layers: "topp:bou2"}, options);
var jpl_wms = new OpenLayers.Layer.WMS("图层2",
"http://localhost:8080/geoserver/wms",
{layers: "topp:bou2p"}, options);
map.addLayers([graphic, jpl_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
<html>
<head>
<title>调用geoserver发布好的图层(可选择图层)</title>
<style type="text/css">
#map {
800px;
height: 380px;
border: 1px solid black;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js"
type="text/javascript">
</script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
var options = {numZoomLevels: 3};
var graphic = new OpenLayers.Layer.WMS("图层1",
"http://localhost:8080/geoserver/wms",
{layers: "topp:bou2"}, options);
var jpl_wms = new OpenLayers.Layer.WMS("图层2",
"http://localhost:8080/geoserver/wms",
{layers: "topp:bou2p"}, options);
map.addLayers([graphic, jpl_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
2、使用java代码调用使用wms发布的地图 （不选择图层）
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>调用geoserver发布好的图层</title>
<style type="text/css">
#map {
800px;
height: 380px;
border: 1px solid black;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js"
type="text/javascript">
</script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map', options);
var options = {
controls: [new OpenLayers.Control.KeyboardDefaults()]
};
var wms = new OpenLayers.Layer.WMS("图层",
"http://localhost:8080/geoserver/wms",
{layers: "layTest"},options);
map.addLayer(wms);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
<html>
<head>
<title>调用geoserver发布好的图层</title>
<style type="text/css">
#map {
800px;
height: 380px;
border: 1px solid black;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js"
type="text/javascript">
</script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map', options);
var options = {
controls: [new OpenLayers.Control.KeyboardDefaults()]
};
var wms = new OpenLayers.Layer.WMS("图层",
"http://localhost:8080/geoserver/wms",
{layers: "layTest"},options);
map.addLayer(wms);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
以下是本人做的一个调用google 地图和 调用 geoserver使用wms发布的地图的例子