一步步DIY: OSM-Web服务器(三) OpenLays 与 SlippyMap
来源:互联网 发布:mac 终端显示文件路径 编辑:程序博客网 时间:2024/04/29 19:41
上一步,我们已经有了自己的地图瓦片服务器,现在,开始实现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拉
0 0
- 一步步DIY: OSM-Web服务器(三) OpenLays 与 SlippyMap
- 一步步DIY: OSM-Web服务器(三) OpenLays 与 SlippyMap
- 一步步DIY: OSM-Web服务器(二) mapnik 与 apache2 mod_tile 的配置
- 一步步DIY: OSM-Web服务器(四) 对万国语的地名进行翻译与检索
- 一步步DIY: OSM-Web服务器(五) GeoServer与矢量叠加图层
- 一步步DIY: OSM-Web服务器(二) mapnik 与 apache2 mod_tile 的配置
- 一步步DIY: OSM-Web服务器(四) 对万国语的地名进行翻译与检索
- 一步步DIY: OSM-Web服务器(五) GeoServer与矢量叠加图层
- 一步步DIY: OSM-Web服务器(五) GeoServer与矢量叠加图层
- 一步步DIY: OSM-Web服务器(一) PostgreSql 配置以及osm2pgsql原始PBF数据导入
- 一步步DIY: OSM-Web服务器(六) C/S架构客户端开发中的细节问题
- 一步步DIY: OSM-Web服务器(七) 利用 Google WebService 批量下载遥感瓦片数据
- 一步步DIY: OSM-Web服务器(八) 使用 C FCGI 返回瓦片并登记下载
- 一步步DIY: OSM-Web服务器(一) PostgreSql 配置以及osm2pgsql原始PBF数据导入
- 一步步DIY: OSM-Web服务器(六) C/S架构客户端开发中的细节问题
- 一步步DIY: OSM-Web服务器(七) 利用 Google WebService 批量下载遥感瓦片数据
- 一步步搭建web服务器(1)
- 一步步搭建web服务器(2)
- 字符串循环左移k位
- 利用dispatch_once创建单例
- DWZ (JUI) 教程 表单提交重定向问题
- 高访问量UGC系统设计总结
- 一步步DIY: OSM-Web服务器(二) mapnik 与 apache2 mod_tile 的配置
- 一步步DIY: OSM-Web服务器(三) OpenLays 与 SlippyMap
- poj 1947 Rebuilding Roads(树形dp)
- 一步步DIY: OSM-Web服务器(四) 对万国语的地名进行翻译与检索
- 单例模式
- StringBuffer和StringBuilder
- uva11151(DP最长回文)
- 将手机micro USB口转换为USB type C连接器的低成本方案(非标准,需要定制线缆)
- 编译原理 消除左递归
- 一步步DIY: OSM-Web服务器(五) GeoServer与矢量叠加图层