码迷,mamicode.com
首页 > 其他好文 > 详细

图解OpenLayers-2.13.1入门实例

时间:2016-05-12 14:52:00      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:

1 下载

http://www.openlayers.cn/forum.php?mod=viewthread&tid=171

解压后有如下内容;

技术分享

2 实例1

把img, theme 文件夹,OpenLayers.js,拷贝到一个新建文件夹,并新建index.html;

技术分享

index.html:

<!DOCTYPE html>
 <html lang='zh-cn'>
 <head>
     <meta charset='utf-8' />
     <title>My 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/vmap3',
                     {
                         layers: 'basic'
                     },
                     {}
                  );
             map.addLayer(wms);
             if (!map.getCenter()) {
                 map.zoomToMaxExtent();
              }
         }
     </script>
 </head>
 <body onload='init();'>
     <div id='map' style='width: 800px; height: 600px;'>
      </div>
 </body>
 </html>

效果;

技术分享

3 实例2

index2.html

<!DOCTYPE html>
 <html lang='zh-cn'>
 <head>
     <meta charset='utf-8' />
     <title>My 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/vmap3',
                     {
                         layers: 'basic'
                     },
                     {}
                  );
             map.addLayer(wms);
             if (!map.getCenter()) {
                 map.zoomToMaxExtent();
              }
         }
     </script>
 </head>
 <body onload='init();'>
     <div id='map' style='width: 800px; height: 600px;'>
      </div>
 </body>
 </html>

效果;

技术分享


4 链接

http://openlayers.org/en/v3.5.0/examples/

openlayer官方例子;


http://www.openlayers.cn/portal.php

openlayer中文网



http://www.cnblogs.com/kaituorensheng/p/4526149.html

http://blog.csdn.net/linlzk/article/details/17354093

http://www.cnblogs.com/nianming/archive/2012/07/19/2600272.html



图解OpenLayers-2.13.1入门实例

标签:

原文地址:http://blog.csdn.net/bcbobo21cn/article/details/51364036

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!