@Rico 2015-01-13T02:06:32.000000Z 字数 1342 阅读 3310

OpenLayers之Hello world

OpenLayers

准备OpenLayers

从官网上下载OpenLayers的开发包。最新版是3.0，OL的代码已经托管到了github上，下载解压即可。
我下的是2.13版本.
OpenLayers2.X官网
 OpenLayers2.X on github
OpenLayers2.x release下载在线api等

下载完成之后目录结构式这样的
.
安装python
完成之后打开cmd，进入到build目录

在命令行中输入py build.py

这时目录下会多一个OpenLayers.js的文件

创建第一个地图

新建一个例子文件夹，放入OpenLayers中的 theme文件夹和img文件夹和刚才生成的OpenLayers.js并新建一个index.html文件。

在index.html中，添加如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My OpenLayers Map</title>
<script type='text/javascript' src='OpenLayers.js'></script>
<style>  
html, body { height: 100%; width: 100%; margin: 0;} 
</style>  
<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="z-index:0;position:absolute;left:5%;top:5%;width:90%;height:90%;"></div> 
</body>
</html>

如果你之前会ArcGIS for javascript API的话，那么上面的代码相信你都能够理解。
不过本篇只是做一个Hello World的例子，详细API和代码分析后续文章会慢慢介绍。

参考：
OpenLayers2官方主页
 OpenLayers中文API
OpenLayers'Blog
OpenLayers'Library
OpenLayers'Documents
OpenLayers'Doc
OpenLayers'APIDoc
Examples

OpenLayers之Hello world

准备OpenLayers

创建第一个地图

内容目录