一步步DIY: OSM-Web服务器(三) OpenLays 与 SlippyMap
2012-09-07 16:32
507 查看
(-:<转载时请注明本文由goldenhawking在 CSDN blog 撰写 http://blog.csdn.net/goldenhawking/article/details/7955441
上一步,我们已经有了自己的地图瓦片服务器,现在,开始实现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 设置可读权限,就完成了!
<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
代码
访问网页,OK拉
下一篇,我们来导入全球的数据,并进行地名翻译。
上一步,我们已经有了自己的地图瓦片服务器,现在,开始实现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 设置可读权限,就完成了!
<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> <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> <!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes --> <script src="/openlayers/OpenStreetMap.js"></script> <script type="text/javascript"> // Start position for the map (hardcoded here for simplicity) var lat=31.27386; var lon=121.48132; var zoom=7; var map; //complex object of type OpenLayers.Map //Initialise the 'map' object function init() { map = new OpenLayers.Map ("map", { controls:[ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), //new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Permalink(), new OpenLayers.Control.ScaleLine({geodesic: true}), new OpenLayers.Control.Permalink('permalink'), new OpenLayers.Control.KeyboardDefaults(), new OpenLayers.Control.NavToolbar(), new OpenLayers.Control.Attribution()], maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34), maxResolution: 156543.0339, numZoomLevels: 19, units: 'm', projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326") } ); // This is the layer that uses the locally stored tiles var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "/osm_tiles2/${z}/${x}/${y}.png", {numZoomLevels: 19, transitionEffect: "resize"}); map.addLayer(newLayer); var switcherControl = new OpenLayers.Control.LayerSwitcher(); map.addControl(switcherControl); var vector_layer = new OpenLayers.Layer.Vector('Editable Vectors'); map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer)); map.addLayer(vector_layer); map.addControl(new OpenLayers.Control.Graticule({visible: false})); var mousepos = new OpenLayers.Control.MousePosition({div: document.getElementById('mousepos_div')}); map.addControl(mousepos); //mousepos.moveTo(new OpenLayers.Pixel(64,0)); map.addControl(new OpenLayers.Control.OverviewMap()); /* var navigationT = new OpenLayers.Control.TouchNavigation({ dragPanOptions:{ enableKinetic: true } }); map.addControl(navigationT); */ if( ! map.getCenter() ){ var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); map.setCenter (lonLat, zoom); } } </script> </head> <!-- body.onload is called once the page is loaded (call the 'init' function) --> <body onload="init();"> <!-- define a DIV into which the map will appear. Make it take up the whole window --> <div style="width: 100%; height: 93%" id="map"> </div> <P><a href='/index.html'>start screen</a></P> <div style="width: 100%; height: 5%" id="mousepos_div"> </div> </body> </html>
访问网页,OK拉
下一篇,我们来导入全球的数据,并进行地名翻译。
相关文章推荐
- 一步步DIY: OSM-Web服务器(三) OpenLays 与 SlippyMap
- 一步步DIY: OSM-Web服务器(四) 对万国语的地名进行翻译与检索
- 一步步DIY: OSM-Web服务器(七) 利用 Google WebService 批量下载遥感瓦片数据
- 一步步DIY: OSM-Web服务器(六) C/S架构客户端开发中的细节问题
- 一步步DIY: OSM-Web服务器(一) PostgreSql 配置以及osm2pgsql原始PBF数据导入
- 一步步DIY: OSM-Web服务器(八) 使用 C FCGI 返回瓦片并登记下载
- 一步步DIY: OSM-Web服务器(二) mapnik 与 apache2 mod_tile 的配置
- 一步步DIY: OSM-Web服务器(二) mapnik 与 apache2 mod_tile 的配置
- 一步步DIY: OSM-Web服务器(一) PostgreSql 配置以及osm2pgsql原始PBF数据导入
- 一步步DIY: OSM-Web服务器(五) GeoServer与矢量叠加图层
- 一步步DIY: OSM-Web服务器(五) GeoServer与矢量叠加图层
- 一步步DIY: OSM-Web服务器(五) GeoServer与矢量叠加图层
- 一步步DIY: OSM-Web服务器(四) 对万国语的地名进行翻译与检索
- 一步步DIY: OSM-Web服务器(六) C/S架构客户端开发中的细节问题
- 一步步DIY: OSM-Web服务器(七) 利用 Google WebService 批量下载遥感瓦片数据
- linux环境下搭建osm_web服务器三(Openlays和slippymap):
- 一步步学习SPD2010--第十四章节--在Web页面使用控件(7)--使用SP服务器控件
- 一步步搭建web服务器(3)
- 一步步搭建自己的web服务器
- 一步步搭建web服务器(2)