GIS开发记录(四)：WebGIS的HelloWorld–WMS
1. 通过MyEclipse创建一个Web Project (例子：OpenLayersTest)，在源码目录WebRoot新建两个目录css和js，在js目录下创建目录OpenLayers，如下图：
2. 到OpenLayers Home下载OpenLayers2.11，找个目录解压
3. 复制OpenLayers-2.11\theme\default\style.css到开发源码目录WebRoot\css
4. 复制OpenLayers-2.11\img 和 OpenLayers-2.11\theme\default\img目录下的所有图片到开发目录WebRoot\js\OpenLayers\img
5. 复制OpenLayers-2.11\lib和OpenLayers-2.11\OpenLayers.js到可发目录WebRoot\js\OpenLayers
6. 刷新工程，新建helloworld.html
<!DOCTYPE html>
<html>
<head>
<title>中国地图</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
height: 100%;
}
.bigmap {
position: absolute;
left: 0;
top: 0px;
padding: 0;
width: 100%;
height: 100%;
border: 1px solid #333;
}
</style>
<script type="text/javascript" src="js/OpenLayers/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer_province;
// 第一次打开地图的中心位置（经度、纬度）
var firstLon = 109.33981;
var firstLat = 33.72419;
function init() {
// 创建MAP DIV框架
map = new OpenLayers.Map("map",
{
maxResolution: 'auto',
maxExtent: new OpenLayers.Bounds(
73.44696044921875, 6.318641185760498,
135.08583068847656, 53.557926177978516)
});
layer_province = new OpenLayers.Layer.WMS(
"China:province", "http://10.0.0.239:8081/geoserver/wms",
{
layers: "China:province",
},
{
singleTile: true, //set single label
isBaseLayer: true,
projection: "EPSG:4326",
maxExtent: new OpenLayers.Bounds(
73.44696044921875, 6.318641185760498,
135.08583068847656, 53.557926177978516)
}
);
map.addLayer(layer_province);
map.zoomToMaxExtent();
map.setCenter(new OpenLayers.LonLat(firstLon, firstLat), 0);
map.addControl(new OpenLayers.Control.Scale());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.LayerSwitcher());
}
</script>
</head>
<body onload="init()">
<div id="map" class="bigmap"></div>
</body>
</html>
maxExtent: 地图最大范围，通过查看GeoServer Layer的Bounding Boxes属性获得
maxResolution: 自动放大地图
参考：
http://openlayers.org/dev/examples/example.html
Creating Your First Map http://docs.openlayers.org/library/introduction.html
转载自：https://blog.csdn.net/iteye_1007/article/details/82303375
