OpenLayers 学习笔记 (1)
1. 环境准备：
下载好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;
“深圳行政区域“, // 图层的名字
“http://geoserver.dev.gehouse.cn/wms“, // WMS服务器的URL
{layers: “gehouse_sz_2004:sz_zone“} // 图层的各种选项option的key和value
);
}
</script>
<style type=“text/css“>
#map {
width: 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名字
// 创建一个WMS图层layer
layer
“深圳行政区域“, // 图层的名字
“http://geoserver.dev.gehouse.cn/wms“, // WMS服务器的URL
{layers: “gehouse_sz_2004:sz_zone“} // 图层的各种选项option的key和value
);
// 将layer图层加入到地图中
map.addLayer(layer);
// 添加图层切换控件
map.addControl(
// 确定地图的中心点
map.setCenter(
}
</script>
<style type=“text/css“>
#map {
width: 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>
转载自：https://blog.csdn.net/limina/article/details/2743643
