[关闭]
@Rico 2015-01-13T10:06:32.000000Z 字数 1342 阅读 3452

OpenLayers之Hello world

OpenLayers


准备OpenLayers

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

下载完成之后目录结构式这样的
pic.
安装python
完成之后打开cmd,进入到build目录
pic
在命令行中输入py build.py

pic

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

创建第一个地图

新建一个例子文件夹,放入OpenLayers中的 theme文件夹和img文件夹和刚才生成的OpenLayers.js并新建一个index.html文件。
pic
在index.html中,添加如下代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>My OpenLayers Map</title>
  6. <script type='text/javascript' src='OpenLayers.js'></script>
  7. <style>
  8. html, body { height: 100%; width: 100%; margin: 0;}
  9. </style>
  10. <script type='text/javascript'>
  11. var map;
  12. function init() {
  13. map = new OpenLayers.Map('map'});
  14. var wms = new OpenLayers.Layer.WMS(
  15. 'OpenLayers WMS',
  16. 'http://vmap0.tiles.osgeo.org/wms/vmap0',
  17. {
  18. layers: 'basic'
  19. }
  20. );
  21. map.addLayer(wms);
  22. if (!map.getCenter()) {
  23. map.zoomToMaxExtent();
  24. }
  25. }
  26. </script>
  27. </head>
  28. <body onload='init();'>
  29. <div id="map" style="z-index:0;position:absolute;left:5%;top:5%;width:90%;height:90%;"></div>
  30. </body>
  31. </html>

pic

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


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

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注