linux环境下搭建osm_web服务器三（Openlays和slippymap）：

Openlays和slippymap

 上一步，我们已经有了自己的地图瓦片服务器，现在，开始实现SlippyMap啦！

<1>下载释放OpenLayers到 www文件夹

SlippyMap 利用 OpenLays 的AJax实现，直接从Openlays官网下载最新版文件 

http://www.openlayers.org/

这里是2.12 版本。

http://www.openlayers.org/download/OpenLayers-2.12.tar.gz

释放到 /var/www/openlayes下，并为www-data 设置可读权限，就完成了！

(http://openlayers.org/two/在此路径下载了openlayer2)

<2>下载OpenStreetMap.js

对OSM的数据，下载这个文件，放在上面第一步创建的文件夹里。

http://www.openstreetmap.org/openlayers/OpenStreetMap.js

 

于是，目录看起来如下：

接着，我们来写网页

<2> 编写第一个网页，实现SlippyMap

我们编写第一个网页, 参考图书  OpenLayers 2.10 Beginner's Guide，该图书在 http://download.csdn.net/detail/zyk0511/3473416

代码 

[html] view plain copy

  1. <html>  
  2. <head>  
  3.     <title>OSM Local Tiles</title>  
  4.     <link rel="stylesheet" href="/openlayers/theme/default/style.css" type="text/css" />  
  5.     <!-- bring in the OpenLayers javascript library  
  6.          (here we bring it from the remote site, but you could  
  7.          easily serve up this javascript yourself) -->  
  8.   
  9.     <script src="/openlayers/OpenLayers.js"></script>  
  10. 10.   
  11. 11.     <!-- bring in the OpenStreetMap OpenLayers layers.  
  12. 12.          Using this hosted file will make sure we are kept up  
  13. 13.          to date with any necessary changes -->  
  14. 14.   
  15. 15.     <script src="/openlayers/OpenStreetMap.js"></script>  
  16. 16.   
  17. 17.     <script type="text/javascript">  

18. // Start position for the map (hardcoded here for simplicity)  

  1. 19.         var lat=31.27386;  
  2. 20.         var lon=121.48132;  
  3. 21.         var zoom=7;  
  4. 22.    
  5. 23.         var map; //complex object of type OpenLayers.Map  
  6. 24.    
  7. 25.         //Initialise the 'map' object  
  8. 26.         function init() {  
  9. 27.    
  1. 28.             map = new OpenLayers.Map ("map", {  
  2. 29.                 controls:[  
  3. 30.                      new OpenLayers.Control.Navigation(),  
  4. 31.                     new OpenLayers.Control.PanZoomBar(),  
  5. 32.                     //new OpenLayers.Control.PanZoom(),  
  6. 33.                     new OpenLayers.Control.Permalink(),  
  7. 34.                     new OpenLayers.Control.ScaleLine({geodesic: true}),  
  8. 35.                     new OpenLayers.Control.Permalink('permalink'),  
  9. 36.                     new OpenLayers.Control.KeyboardDefaults(),  
  10. 37.                     new OpenLayers.Control.NavToolbar(),  
  11. 38.                      new OpenLayers.Control.Attribution()],  
  12. 39.                 maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),  
  13. 40.                 maxResolution: 156543.0339,  
  14. 41.                 numZoomLevels: 19,  
  15. 42.                 units: 'm',  
  16. 43.                 projection: new OpenLayers.Projection("EPSG:900913"),  
  17. 44.                 displayProjection: new OpenLayers.Projection("EPSG:4326")  
  18. 45.             } );  
  19. 46.    
  20. 47.             // This is the layer that uses the locally stored tiles  
  21. 48.             var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "/osm_tiles2/${z}/${x}/${y}.png", {numZoomLevels: 19, transitionEffect: "resize"});  
  22. 49.             map.addLayer(newLayer);  
  23. 50.   
  24. 51.             var switcherControl = new OpenLayers.Control.LayerSwitcher();  
  25. 52.             map.addControl(switcherControl);  
  26. 53.             var vector_layer = new OpenLayers.Layer.Vector('Editable Vectors');  
  27. 54.             map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));  
  28. 55.             map.addLayer(vector_layer);  
  29. 56.   
  30. 57.             map.addControl(new OpenLayers.Control.Graticule({visible: false}));  
  31. 58.             var mousepos = new OpenLayers.Control.MousePosition({div: document.getElementById('mousepos_div')});  
  32. 59.             map.addControl(mousepos);  
  33. 60.             //mousepos.moveTo(new OpenLayers.Pixel(64,0));  
  34. 61.               
  35. 62.             map.addControl(new OpenLayers.Control.OverviewMap());  
  36. 63.              /*  
  37. 64.             var navigationT =    new OpenLayers.Control.TouchNavigation({  
  38. 65.                 dragPanOptions:{  
  39. 66.                     enableKinetic: true  
  40. 67.                 }  
  41. 68.             });  
  42. 69.             map.addControl(navigationT);  
  43. 70.             */  
  44. 71.             if( ! map.getCenter() ){  
  45. 72.                 var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());  
  46. 73.                 map.setCenter (lonLat, zoom);  
  47. 74.             }  
  48. 75.         }  
  49. 76.    
  50. 77.     </script>  
  51. 78.   

79. </head>  

80. <!-- body.onload is called once the page is loaded (call the 'init' function) -->  

81. <body onload="init();">  

  1. 82.     <!-- define a DIV into which the map will appear. Make it take up the whole window -->  
  2. 83.     <div style="width: 100%; height: 93%" id="map">  
  3. 84.     </div>  
  4. 85.     <P><a href='/index.html'>start screen</a></P>  
  5. 86.     <div style="width: 100%; height: 5%" id="mousepos_div">  
  6. 87.       
  7. 88.       
  8. 89.       
  9. 90.     </div>  

91. </body>  

92. </html>  

 

访问网页，OK拉

下一篇，我们来导入全球的数据，并进行地名翻译。

转载：http://blog.csdn.net/goldenhawking/article/details/7952303

posted @ 2017-02-08 21:10  知行Lee  阅读(423)  评论(0)  编辑  收藏  举报