openlayers 加载瓦片详解 一
在这先说点题外话，本人在研究webgl 三维球过程中惊人发现，openlayers 的开发人员也在研究webgl并经证实他们也正在研发基于
webgl的三维gis开源平台，这可能是首个开源的三维平台，在现在三维大趋势下，看来 openlayers 前景还是一片大好，闲话少说，静候佳音。
在这将分4篇文章来系统的详细的介绍openlayers 是怎么来加载本地及服务器瓦片，为了提高开发人员的工作效率 采用倒叙，
在第一篇先给实用的算法及简单的参数说明，后面介绍原理，彻底的理解其工作原理。
第一篇 ：加载瓦片的算法类
第二篇 ：瓦片制作
第三篇 ：瓦片参数确定
第四篇 ：openlayers 加载的瓦片投影
第一篇加载瓦片的算法类
1、先给个类图简单的介绍下
我们在客户端看到的瓦片其实是一个图片列表 也就是上面的grid 类 ，每张图片都是通过http从后来请求过来的图片也就是方法getURL（bound），
每张图片都有自己的url 也就是他的请求地址，而且grid的列表的每个单元格都有边框也就是bound，那要获取每个单元格中正确的图片都是通过bound来计
算而获取到相应的图片，如想要加载自己瓦片就需要重写grid中的getURL(bound)方法，这也就是最下排6个不同类型的瓦片根据自己的瓦片特点及地图服务
的特点编写的类，如果你有自己的瓦片却跟上面的几种都不相同也不相似，那你可以选择重写grid类，如果你的瓦片操作跟下面的6中服务相同或者类似，那
可以根据自己工作考虑重写那面6个类中的其中某一个中的getURL(bound)的方法。在计算的过程中能涉及到多个参数将在下篇来详细介绍，在这给几个重写
getURL(bound)的例子, 第一个例子是网上的不过在工作中验证过，绝对可用，写的还不错给大家个参考。
1、重写grid类中的getURL(bound)方法加载本地图片(天地图)
OpenLayers.Layer.TiandituLayer = OpenLayers.Class(OpenLayers.Layer.Grid,
{ TileType : null,
mirrorUrls : null,
topLevel : null,
bottomLevel : null,
topLevelIndex : 0,
bottomLevelIndex : 20,
topTileFromX : -180,
topTileFromY : 90,
topTileToX : 180,
topTileToY : -90,
isBaseLayer : true,
initialize : function(name, url, options) { options.topLevel = options.topLevel ? options.topLevel
: this.topLevelIndex;
options.bottomLevel = options.bottomLevel ? options.bottomLevel
: this.bottomLevelIndex;
options.maxResolution = this
.getResolutionForLevel(options.topLevel);
options.minResolution = this
.getResolutionForLevel(options.bottomLevel);
var newArguments = [ name, url, {}, options ];
OpenLayers.Layer.Grid.prototype.initialize.apply(this,
newArguments);
}, clone : function(obj) { if (obj == null) {
obj = new OpenLayers.Layer.TDTLayer(this.name, this.url,
this.options);
} obj = OpenLayers.Layer.Grid.prototype.clone
.apply(this, [ obj ]); return obj;
}, getURL : function(bounds) {
var level = this.getLevelForResolution(this.map.getResolution());
var coef = 360 / Math.pow(2, level);
var Row = this.topTileFromX < this.topTileToX ? Math.round((bounds.left - this.topTileFromX) / coef) : Math.round((this.topTileFromX - bounds.right) / coef);
var Col = this.topTileFromY < this.topTileToY ? Math.round((bounds.bottom - this.topTileFromY) / coef): Math.round((this.topTileFromY - bounds.top) / coef); var type = this.TileType;
if (type == "EMap") {
if (level >= 2 && level <= 10) {
type = "A0512_EMap";
} else if (level == 11 || level == 12) {
type = "B0627_EMap1112";
} else if (level >= 13 && level <= 18) {
type = "siwei0608";
}
}else if(type=="RMap"){
if (level >= 2 && level <= 7) {
type = "sbsm0210";
} else if (level >= 8 && level <= 10) {
type = "sbsm0210";
} else if (level >= 11 && level <= 14) {
type = "e11";
}else if (level >= 15 && level <= 18) {
type = "sbsm1518";
}
} var url = this.url; if (this.mirrorUrls != null) {
url = this.selectUrl(Row, this.mirrorUrls);
} return this.getFullRequestString({
T : type,
X : Row,
Y : Col,
L : level
}, url);
},
selectUrl : function(a, b) {
return b[a % b.length]
},
getLevelForResolution : function(res) {
var ratio = this.getMaxResolution() / res;
if (ratio < 1)
return 0;
for ( var level = 0; ratio / 2 >= 1;) {
level++;
ratio /= 2;
}
return level;
},
getResolutionForLevel : function(level) {
return 360 / 256 / Math.pow(2, level);
},
getMaxResolution : function() {
return this.getResolutionForLevel(this.topLevelIndex)
},
getMinResolution : function() {
return this.getResolutionForLevel(this.bottomLevelIndex)
},
addTile : function(bounds, position) {
var url = this.getURL(bounds);
return new OpenLayers.Tile.Image(this, position, bounds, url,
this.tileSize);
}, CLASS_NAME : "OpenLayers.Layer.TiandituLayer"
});
测试页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Tiled Map Service Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> var map, layer; function init(){
var extent = new OpenLayers.Bounds(-180.0, -90.0, 180.0, 90.0);
var tempScales = [295497593.05875003,147748796.52937502,73874398.264687508,36937199.132343754,18468599.566171877];
var mapOptions = {
maxExtent: extent
};
var options= {
mapType:"EMap",
topLevel: 3,
bottomLevel: 20 };
map = new OpenLayers.Map("map",mapOptions); layer = new OpenLayers.Layer.TiandituLayer("qincy", "http://tile0.tianditu.com/DataServer",options);
map.addLayer(layer);
map.addControls([new OpenLayers.Control.MousePosition()]); map.setCenter(new OpenLayers.LonLat(106,39), 3); }
</script>
</head>
<body onload="init()">
<div id="map" style="width:1000px;height:500px"></div>
</body>
</html>
2、重写TileCache类加载本地图片。
/**
* 对自定义规则切割的图片进行拼装的类
*/
SimpleTileCache=OpenLayers.Class(OpenLayers.Layer.TileCache,{
initialize:function(name,url,options){
var tempoptions = OpenLayers.Util.extend(
{'format': 'image/png',isBaseLayer:true},options);
OpenLayers.Layer.TileCache.prototype.initialize.apply(this,[name, url, {}, tempoptions]);
this.extension = this.format.split('/')[1].toLowerCase();
this.extension = (this.extension == 'jpg') ? 'jpeg' : this.extension;
this.transitionEffect="resize";
this.buffer=2;
},
/**
* 按地图引擎切图规则实现的拼接方式
*/
getURL: function(bounds) {
var res = this.map.getResolution();
var bbox = this.map.getMaxExtent();
var size = this.tileSize;
//计算列号
var tileX = Math.round((bounds.left - bbox.left) / (res * size.w));
//计算行号
var tileY = Math.round((bbox.top-bounds.top) / (res * size.h));
//当前的等级
var tileZ = this.map.zoom;
if(tileX<0) tileX=tileX+Math.round(bbox.getWidth()/bounds.getWidth());
if(tileY<0) tileY=tileY+Math.round(bbox.getHeight()/bounds.getHeight());
return this.getTilePic(tileX,tileY,tileZ);
},
getTilePic: function(tileX,tileY,tileZ){
var dir = '';
if(tileZ > 6) {
var delta = Math.pow(2,tileZ-5);
var rowDir = 'R'+ Math.floor(tileY /delta);
var colDir = 'C'+Math.floor(tileX /delta);
dir = tileZ + "/" + rowDir + "/" + colDir + "/";
} else {
dir= tileZ + '/';
}
var tileNo = tileZ + "-" + tileX + "-" + tileY;
var sUrl = this.url + dir + tileNo + '.png';
return sUrl;
},
clone: function (obj) {
if (obj == null) {
obj = new SimpleTileCache(this.name,this.url,this.options);
}
obj = OpenLayers.Layer.TileCache.prototype.clone.apply(this, [obj]);
return obj;
},
CLASS_NAME: "SimpleTileCache"
});
3、直接修改TileCache类中的getURL方法
修改后 的 TileCache.js
OpenLayers.Layer.TileCache = OpenLayers.Class(OpenLayers.Layer.Grid, {
isBaseLayer: true,
format: 'image/png',
serverResolutions: null,
initialize: function(name, url, layername, options) {
this.layername = layername;
OpenLayers.Layer.Grid.prototype.initialize.apply(this,
[name, url, {}, options]);
this.extension = this.format.split('/')[1].toLowerCase();
this.extension = (this.extension == 'jpg') ? 'jpeg' : this.extension;
},
clone: function (obj) {
if (obj == null) {
obj = new OpenLayers.Layer.TileCache(this.name,
this.url,
this.layername,
this.getOptions());
}
//get all additions from superclasses
obj = OpenLayers.Layer.Grid.prototype.clone.apply(this, [obj]);
// copy/set any non-init, non-simple values here
return obj;
},
getURL: function(bounds) {
var res = this.map.getResolution();
var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var path =z+9+ "/" + x + "/" + y + "." + this.type;
var url = this.url;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
//我用resin 发布的地图瓦片的位置
url="http://192.168.0.90:88/roadmap2/"+path;
return url
},
/*getURL: function(bounds) {
var res = this.getServerResolution();
var bbox = this.maxExtent;
var size = this.tileSize;
var tileX = Math.round((bounds.left - bbox.left) / (res * size.w));
var tileY = Math.round((bounds.bottom - bbox.bottom) / (res * size.h));
var tileZ = this.serverResolutions != null ?
OpenLayers.Util.indexOf(this.serverResolutions, res) :
this.map.getZoom();
var components = [
this.layername,
OpenLayers.Number.zeroPad(tileZ, 2),
OpenLayers.Number.zeroPad(parseInt(tileX / 1000000), 3),
OpenLayers.Number.zeroPad((parseInt(tileX / 1000) % 1000), 3),
OpenLayers.Number.zeroPad((parseInt(tileX) % 1000), 3),
OpenLayers.Number.zeroPad(parseInt(tileY / 1000000), 3),
OpenLayers.Number.zeroPad((parseInt(tileY / 1000) % 1000), 3),
OpenLayers.Number.zeroPad((parseInt(tileY) % 1000), 3) + '.' + this.extension
];
var path = components.join('/');
var url = this.url;
if (OpenLayers.Util.isArray(url)) {
url = this.selectUrl(path, url);
}
url = (url.charAt(url.length - 1) == '/') ? url : url + '/'; //url+path
//alert(url+path);
return "http://192.168.0.90:88/roadmap/1/0/0.png"
},*/
CLASS_NAME: "OpenLayers.Layer.TileCache"
});
测试页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers TileCache Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script src="../lib/Firebug/firebug.js"></script>
<script type="text/javascript">
//alert("adsf");
var proj='EPSG:900913'; //900913
var map, layer;
var proj2 = new OpenLayers.Projection("EPSG:4326");
var agsTileOrigin = new OpenLayers.LonLat(-180,85);
agsTileOrigin.transform(proj2, new OpenLayers.Projection("EPSG:900913"));
//alert(agsTileOrigin.);
var mapExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
function init(){ //添加编辑图层 图层名称为editLayer
var EditLayer=new OpenLayers.Layer.Vector("EidtLayer");
//添加地图
map = new OpenLayers.Map( 'map', {
numZoomLevels:3, //缩放级别
resolutions:[305.7481,152.8741,76.437], //分别率 单位是米
controls:[
new OpenLayers.Control.EditingToolbar(EditLayer), //添加编辑控件
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher({'ascending':false}),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.Permalink('permalink'),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.OverviewMap(),
new OpenLayers.Control.KeyboardDefaults()
]
});
layer = new OpenLayers.Layer.TileCache("TileCache Layer",
"http://c0.tilecache.osgeo.org/wms-c/cache/",
"basic",
{
serverResolutions:[305.7481,152.8741,76.437],
projection:proj,
type:'png'
}
); map.addLayers([layer, EditLayer]);
var lob_ll=new OpenLayers.LonLat(121.34457, 31.329235);
map.setCenter(lob_ll.transform(proj2, new OpenLayers.Projection("EPSG:900913")), 0);
}
</script>
<style type="text/css">
html,body{width:100%;height:100%;margin:0;}
</style>
</head>
<body onload="init()">
<div id="map" class="smallmap" style="width:100%; height:100%; backround-color:Red;"></div>
</body>
</html>
openlayers 加载瓦片详解 一的更多相关文章
- C编译器、链接器、加载器详解
摘自http://blog.csdn.net/zzxian/article/details/16820035 C编译器.链接器.加载器详解 一.概述 C语言的编译链接过程要把我们编写的一个c程序(源代 ...
- Spring Boot 配置加载顺序详解
使用 Spring Boot 会涉及到各种各样的配置,如开发.测试.线上就至少 3 套配置信息了.Spring Boot 可以轻松的帮助我们使用相同的代码就能使开发.测试.线上环境使用不同的配置. 在 ...
- jboss之启动加载过程详解
今天看了看jboss的boot.log和server.log日志,结合自己的理解和其他的资料,现对jboss的启动和加载过程做出如下总结: boot.xml是服务器的启动过程的日志,不涉及后续的操作过 ...
- 插件化框架解读之Android 资源加载机制详解（二）
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680Android提供了一种非常灵活的资源系统,可以根据不同的条件提供 ...
- jquery插件图片延时加载实例详解
效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...
- JS魔法堂：IMG元素加载行为详解
一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...
- java中带继承类的加载顺序详解及实战
一.背景: 在面试中,在java基础方面,类的加载顺序经常被问及,很多时候我们是搞不清楚到底类的加载顺序是怎么样的,那么今天我们就来看看带有继承的类的加载顺序到底是怎么一回事?在此记下也方便以后复习巩 ...
- （转）面试题--JAVA中静态块、静态变量加载顺序详解
public class Test { //1.第一步,准备加载类 public static void main(String[] args) { new Test(); //4.第四步,new一个 ...
- Hive学习之四 《Hive分区表场景案例应用案例，企业日志加载》 详解
文件的加载,只需要三步就够了,废话不多说,来直接的吧. 一.建表 话不多说,直接开始. 建表,对于日志文件来说,最后有分区,在此案例中,对年月日和小时进行了分区. 建表tracktest_log,分隔 ...
随机推荐
- hdoj 4324 Triangle LOVE 【拓扑】
Triangle LOVE Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) To ...
- 初创互联网公司简明创业指南 - YC新掌门Sam Altman
本文只是一个创业指南的简明版 - 更详细的版本请查看:http://startupclass.samaltman.com 创业之前,你更应该去拥有一个好的创意,而不是一个公司.如果开始前你拥有一个好的 ...
- SqlServer-COMPUTE BY
原文:SqlServer-COMPUTE BY COMPUTE BY子句可以通过同一个select语句即查看明细行,又查看汇总行.可以计算子组的汇总值,也可以计算整个结果集的汇总值 COMPUTE 子 ...
- Java泛型和集合之泛型介绍
在声明一个接口和类的时候可以使用尖括号带有一个或者多个参数但是当你在声明属于一个接口或者类的变量的时候或者你在创建一个类实例的时候需要提供他们的具体类型.我们来看下下面这个例子 List<Str ...
- android项目--上下文菜单
一般说到上下文菜单基本上都是长按事件,在一个控件上长按,就会弹出一个菜单. 1.创建上下文菜单: //覆盖方法,创建上下文菜单 @Override public void onCreateContex ...
- php和表单(1)
先来一段处理表单的html代码(test.html) <form action="index.php" method="post"> name : ...
- C#开发157
C#开发157条建议 编写高质量代码改善C#程序的157个建议[匿名类型.Lambda.延迟求值和主动求值] 摘要: 前言 从.NET3.0开始,C#开始一直支持一个新特性:匿名类型.匿名类型由v ...
- HttpClient 检索与获取过程数据
使用 HttpClient 检索与获取过程数据 对于System.Net.Http的学习(一)——System.Net.Http 简介 对于System.Net.Http的学习(二)——使用 Ht ...
- 细节MARK
在刷vijos1046的时候遇到了一些细节,MARK一下 1.哲学之前有告诫我说,输出long long的数的时候,最好用cout,不然容易出现编译器的问题,今天算是领教了 2.对于数组赋值问题 me ...
- String和StringBuilder的使用
如果有理解错误的地方希望有朋友能指出,谢谢! String是特殊的引用类型的,更像值类型,StringBuilder的是规规矩矩引用类型的. 首先看这样的对比图,Equals()方法是判断两个 ...