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

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

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

19. var lat=31.27386;
20. var lon=121.48132;
21. var zoom=7;
22.
23. var map; //complex object of type OpenLayers.Map
24.
25. //Initialise the 'map' object
26. function init() {
27.

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

79. </head>

80.

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

82.
83. <div style="width: 100%; height: 93%" id="map">
84. </div>
85. <P><a href='/index.html'>start screen</a></P>
86. <div style="width: 100%; height: 5%" id="mousepos_div">
87.
88.
89.
90. </div>