下载好Openlayers包之后,只需要把Openlayers.js,img文件夹,theme文件夹复制到同一个目录即可。
2. 基本的页面调用方式: (通过下面的例子)
<html>
<head>
<title>Test OpenLayers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="openlayers/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
var map;
function init(){
// 创建一个地图map,参数为现实地图的div名字
map = new OpenLayers.Map('map');
// 创建一个WMS图层layer
layer = new OpenLayers.Layer.WMS(
"深圳行政区域", // 图层的名字
"http://geoserver.dev.gehouse.cn/wms", // WMS服务器的URL
{layers: "gehouse_sz_2004:sz_zone"} // 图层的各种选项option的key和value
);
// 将layer图层加入到地图中
map.addLayer(layer);
// 添加图层切换控件
map.addControl(new OpenLayers.Control.LayerSwitcher());
// 确定地图的中心点
map.setCenter(new OpenLayers.LonLat(-100, 60), 3);
}
</script>
<style type="text/css">
#map {
100%;
height: 512px;
border: 1px solid black;
background-color: blue;
}
</style>
</head>
<body onload="init()">
<h1>OpenLayers Test</h1>
<!-- 定义一个现实地图的div -->
<div id="map"></div>
</body>
</html>
<head>
<title>Test OpenLayers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="openlayers/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
var map;
function init(){
// 创建一个地图map,参数为现实地图的div名字
map = new OpenLayers.Map('map');
// 创建一个WMS图层layer
layer = new OpenLayers.Layer.WMS(
"深圳行政区域", // 图层的名字
"http://geoserver.dev.gehouse.cn/wms", // WMS服务器的URL
{layers: "gehouse_sz_2004:sz_zone"} // 图层的各种选项option的key和value
);
// 将layer图层加入到地图中
map.addLayer(layer);
// 添加图层切换控件
map.addControl(new OpenLayers.Control.LayerSwitcher());
// 确定地图的中心点
map.setCenter(new OpenLayers.LonLat(-100, 60), 3);
}
</script>
<style type="text/css">
#map {
100%;
height: 512px;
border: 1px solid black;
background-color: blue;
}
</style>
</head>
<body onload="init()">
<h1>OpenLayers Test</h1>
<!-- 定义一个现实地图的div -->
<div id="map"></div>
</body>
</html>