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. <script src="/openlayers/OpenLayers.js"></script>
  9. 10.
  10. 11.     <!-- bring in the OpenStreetMap OpenLayers layers.
  11. 12.          Using this hosted file will make sure we are kept up
  12. 13.          to date with any necessary changes -->
  13. 14.
  14. 15.     <script src="/openlayers/OpenStreetMap.js"></script>
  15. 16.
  16. 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

linux环境下搭建osm_web服务器三（Openlays和slippymap）：的更多相关文章

  1. linux环境下搭建osm_web服务器一（Postgresql配置及osm2pgsql原始数据导入）：

    Postgresql配置及osm2pgsql原始数据导入 2012年,Ubuntu 12.04LTS发布,又一个长效支持版,我们又该更新OpenStreetMap服务器了,这次,将详细在博客中记录配置 ...

  2. linux环境下搭建osm_web服务器二(Mapnik及apache2mod_tile配置)：

    Mapnik及apache2mod_tile配置 上一篇,我们配置好了PostgreSQL服务器,导入了测试数据.今天,我们来配置 mapnik2 + apache2 + mod_tile 的WMS服 ...

  3. linux环境下搭建osm_web服务器四（对万国语的地名进行翻译和检索）：

    对万国语的地名进行翻译和检索 经过 前三篇的调试,已经有了一个完整的Map可以浏览,我们痛苦的世界范围数据下载.导入过程也结束了.要提醒一下的是,鉴于网速,不要下载 planetosm.lastest ...

  4. Windows和Linux环境下搭建SVN服务器

    --------------------------Windows下搭建SVN服务器----------------------------- 一.安装SVN服务端 软件包Setup-Subversi ...

  5. linux环境下搭建solr服务器--单机版

    前提需要在安装好jdk和tomcat,本人用的是jdk1.8+tomcat8.5+solr4.10. 第一步:安装linux.jdk.tomcat.(这步都是比较简单的,就不多说了) 第二步:把sol ...

  6. 在Linux 环境下搭建 JDK 和 Tomcat

      在Linux 环境下搭建 JDK 和 Tomcat 参考地址:http://www.cnblogs.com/liulinghua90/p/4661424.html   [JDK安装] 1.首先下载 ...

  7. ​Linux环境下搭建禅道管理工具-包含软件资源

    ​Linux环境下搭建禅道管理工具 1:百度云盘下载: 禅道--链接: https://pan.baidu.com/s/1Stu7nOZVIPO5TnpJWjWtiQ 提取码:dnik CentOs操 ...

  8. ubuntu 14.04LTS 环境下搭建tftp服务器

    花费我一整天的时间在 ubuntu 14.04LTS 环境下搭建tftp服务器,网上好多资料参差不齐,简单来说,TFTP(Trivial File Transfer Protocol),是一个基于UD ...

  9. freeSSHD在windows环境下搭建SFTP服务器

    freeSSHD在windows环境下搭建SFTP服务器 0 建议现在windows环境下安装cygwin,否则在windows环境下cmd模式使用不了sftp去连接,可以利用win scp去测试连接 ...

随机推荐

  1. 1、spark集群搭建

    前提:已经搭建完全分布式的Hadoop集群,请参看http://www.cnblogs.com/netbloomy/p/6660131.html 1.Scala2.12.1环境搭建 1).下载scal ...

  2. HTML5的LocalStorage和sessionStorage的使用

    本文转载自:http://www.cnblogs.com/qiutianlidehanxing-blog/p/5953746.html html5中的Web Storage包括了两种存储方式:sess ...

  3. python--logging库学习_第三波

    本文介绍如何写一个Python日志类,用来输出不同级别的日志信息到本地文件夹下的日志文件里.为什么需要日志输出呢,我们需要记录我们测试脚本到底做了什么事情,最好的办法是写事件监听.这个事件监听,对我们 ...

  4. Condition分析

    Condition中提供了一组类似于Object中的监视器方法.与Lock配合可以完成等待通知模式. Condition只能通过Lock#newCondition()方法获取,所以Condition是 ...

  5. python解析时间格式脚本

    对于这种时间格式:發表於: 星期一 五月 28, 2012 6:59 am import re INPUT = "發表於: 星期一 五月 28, 2012 6:59 am 文章主題: 對&l ...

  6. 018：InnoDB 存储引擎、表空间

    目录 一.InnoDB 存储引擎 1. InnoDB的历史 2. InnoDB的特点 3. InnoDB存储引擎的文件 3.1 概述 3.2 InnoDB - 表空间 3.3 General表空间 3 ...

  7. Html 上手

    <!-- ctrl + / 注释 ctrl + D 复制整行 html:超文本标记语言标记 标签 元素格式<标签名>标签内容</标签名>标签的写法标签的正确嵌套标签特性 ...

  8. Ubuntu13.10：密码忘记了怎么办？

    重启ubuntu系统,开机时长按shift按键进入GRUB菜单,选择第二个高级模式. 新版的UBUNTU系统居然启用了GRUNB2.0的内核!虽然传说相当的牛X,但是用起来感觉就是非常看不清楚字体,要 ...

  9. 解决windows上安装TortoiseSVN后不能使用命令行问题

    一般我们安装TortoiseSVN的时候都是一路next安装好之后就右键开始使用.但是有时候我们需要在windows的命令窗口下执行SVN命令.这时候我们就会发现svn help之后显示没svn这个命 ...

  10. 【图片】机器学习--名画风格 neural-style

    neural-style 学习画作风格,将风格施加到另外一张图片中 例如将名画<星夜>的风格施加到一副建筑照片中: 源码 https://github.com/jcjohnson/neur ...