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. <!-- body.onload is called once the page is loaded (call the 'init' function) -->
81. <body onload="init();">
- 82. <!-- define a DIV into which the map will appear. Make it take up the whole window -->
- 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>
91. </body>
92. </html>
访问网页，OK拉
下一篇，我们来导入全球的数据，并进行地名翻译。
转载：http://blog.csdn.net/goldenhawking/article/details/7952303
linux环境下搭建osm_web服务器三（Openlays和slippymap）：的更多相关文章
- linux环境下搭建osm_web服务器一（Postgresql配置及osm2pgsql原始数据导入）：
Postgresql配置及osm2pgsql原始数据导入 2012年,Ubuntu 12.04LTS发布,又一个长效支持版,我们又该更新OpenStreetMap服务器了,这次,将详细在博客中记录配置 ...
- linux环境下搭建osm_web服务器二(Mapnik及apache2mod_tile配置)：
Mapnik及apache2mod_tile配置 上一篇,我们配置好了PostgreSQL服务器,导入了测试数据.今天,我们来配置 mapnik2 + apache2 + mod_tile 的WMS服 ...
- linux环境下搭建osm_web服务器四（对万国语的地名进行翻译和检索）：
对万国语的地名进行翻译和检索 经过 前三篇的调试,已经有了一个完整的Map可以浏览,我们痛苦的世界范围数据下载.导入过程也结束了.要提醒一下的是,鉴于网速,不要下载 planetosm.lastest ...
- Windows和Linux环境下搭建SVN服务器
--------------------------Windows下搭建SVN服务器----------------------------- 一.安装SVN服务端 软件包Setup-Subversi ...
- linux环境下搭建solr服务器--单机版
前提需要在安装好jdk和tomcat,本人用的是jdk1.8+tomcat8.5+solr4.10. 第一步:安装linux.jdk.tomcat.(这步都是比较简单的,就不多说了) 第二步:把sol ...
- 在Linux 环境下搭建 JDK 和 Tomcat
在Linux 环境下搭建 JDK 和 Tomcat 参考地址:http://www.cnblogs.com/liulinghua90/p/4661424.html [JDK安装] 1.首先下载 ...
- Linux环境下搭建禅道管理工具-包含软件资源
Linux环境下搭建禅道管理工具 1:百度云盘下载: 禅道--链接: https://pan.baidu.com/s/1Stu7nOZVIPO5TnpJWjWtiQ 提取码:dnik CentOs操 ...
- ubuntu 14.04LTS 环境下搭建tftp服务器
花费我一整天的时间在 ubuntu 14.04LTS 环境下搭建tftp服务器,网上好多资料参差不齐,简单来说,TFTP(Trivial File Transfer Protocol),是一个基于UD ...
- freeSSHD在windows环境下搭建SFTP服务器
freeSSHD在windows环境下搭建SFTP服务器 0 建议现在windows环境下安装cygwin,否则在windows环境下cmd模式使用不了sftp去连接,可以利用win scp去测试连接 ...
随机推荐
- laravel里面的一些变量
laravel5里面一些配置,比如数据库,debug的,实际上在项目的.env里面定义过了 //forge是默认值 'database' => env('DB_DATABASE', 'forge ...
- GOF23设计模式之模板方法模式（template method）
一.模板方法模式概述 模板方法模式是编程中经常使用的模式.它定义了一种操作中的算法架构,将某些步骤延迟到子类中实现.这样,新的子类可以在不改变一个算法结构的前提下重新定义该算法的某些特定步骤. (1) ...
- 018：InnoDB 存储引擎、表空间
目录 一.InnoDB 存储引擎 1. InnoDB的历史 2. InnoDB的特点 3. InnoDB存储引擎的文件 3.1 概述 3.2 InnoDB - 表空间 3.3 General表空间 3 ...
- SQLSERVER出错提示：此上下文中不允许使用''。此处只允许使用常量、表达式或变量。不允许使用列名。
在执行一段SQL语句时出现了这样的一段错误提示,在网上找了不少答案,都说的不是很详细,反复修改试验,最终解决了此问题.原SQl语句为: insert into shoufei(djbh,sflb,jk ...
- 工具类MyBatisUtils创建SqlSessionFactory
package com.js.ai.modules.pointwall.interfac; import java.io.IOException; import java.io.InputStream ...
- 【翻译】用 Expression Blend 创建酷炫的 Button
原文:Creating “Cool” Buttons with Expression Blend Author: Alex 在本文中,我们将考虑在Expression Blend用几种方法来创建酷炫的 ...
- 0007-一套完整的CRUD_DEMO
好久没写了,一直在忙别的东西,但是想想,还是把之前的补充完整好了.给大家一个参考,也为自己留个备份. 首先写一个Html作为内容载体,主要结构如下 <div ui-view="navb ...
- Julia - 字符串判断函数
isascii() 判断是否是 ascii 码,返回 Bool 值 julia> isascii('a') true julia> isascii('α') false julia> ...
- 详解华为交换机iStack特性
iStack特性的产品支持 iStack也就是我们平时所说的“堆叠”,但是华为交换机的iStack功能与其他厂商的交换机堆叠功能相比又有许多不同.在最新的Sx700大系中,只有S2700.S3700. ...
- 用Theano学习Deep Learning（三）：卷积神经网络
写在前面的废话: 出了托福成绩啦,本人战战兢兢考了个97!成绩好的出乎意料!喜大普奔!撒花庆祝! 傻…………寒假还要怒学一个月刷100庆祝个毛线………… 正题: 题目是CNN,但是CNN的具体原理和之 ...