由于项目需要，需要用到geoserver和openlayers,再此将对openlayers的学习记录下来。学习Openlayers的第一步是要熟悉javascript语法。
1.什么是openlayers
OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库，制作的地图几乎可以在所有的浏览器中查看。因为是客户端类库，它不需要特殊的服务器端软件或配置，甚至不用下载任何东西就可以使用它。OpenLayers最初由Metacarta开发，现在它已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架。
2.Openlayers下载
2.1打开官网http://openlayers.org/，会看到如下界面
可以看到openlayers最新版是3.0版，点击下载，由于本人水平有限，下载了第三版不知道如何使用，又重新下了2.13.1版。
2.2 点击如下图所示.zip。下载openlayers2.13.1版
2.3 把下载到的openlayers压缩包解压缩，得到的文件夹如图所示：
2.4 复制上面图中用矩形框框住的3个文件：img theme 和openlayers.js到一个新文件夹中，这里取的是C盘下面的code文件夹。拷贝完成后code文件夹的结构如下：
3.创建地图
3.1在code文件夹中新建一个文件，此处为index.html
3.2打开index.html,编辑如下：
<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<meta charset='utf-8' />
<title>My First OpenLayers Map</title>
<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript'>
var map;
function init() {
map = new OpenLayers.Map('map', {});
var wms = new OpenLayers.Layer.WMS(
'OpenLayers WMS',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{
layers: 'basic'
},
{}
);
map.addLayer(wms);
if (!map.getCenter()) {
map.zoomToMaxExtent();
}
}
</script>
</head>
<body onload='init();'>
<div id='map' style='width: 500px; height: 500px;'>
</div>
</body>
</html>
4.显示地图
用浏览器打开index.html文件，看到浏览器显示如下，则说明显示成功。
时间： 2024-12-12 10:37:04