openlayer怎么加载瓦片

1、先给个类图简单的介绍下

我们在客户端看到的瓦片其实是一个图片列表 也就是上面的grid 类 ，每张图片都是通过http从后来请求过来的图片也就是方法getURL（bound），

每张图片都有自己的url 也就是他的请求地址，而且grid的列表的每个单元格都有边框也就是bound，那要获取每个单元格中正确的图片都是通过bound来计

算而获取到相应的图片，如想要加载自己瓦片就需要重写grid中的getURL(bound)方法，这也就是最下排6个不同类型的瓦片根据自己的瓦片特点及地图服务

的特点编写的类，如果你有自己的瓦片却跟上面的几种都不相同也不相似，那你可以选择重写grid类，如果你的瓦片 *** 作跟下面的6中服务相同或者类似，那

可以根据自己工作考虑重写那面6个类中的其中某一个中的getURL(bound)的方法。在计算的过程中能涉及到多个参数将在下篇来详细介绍，在这给几个重写

getURL(bound)的例子, 第一个例子是网上的不过在工作中验证过，绝对可用，写的还不错给大家个参考。

1、重写grid类中的getURL(bound)方法加载本地图片(天地图)

[html] view plain copy print?

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 = 0ratio / 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"

})

笔者最近实践了利用openlayers在android app中实现离线地图应用，本文记录了笔者实践的思路。

1、加载本地的地图瓦片；

2、GPS定位；

3、叠加部件（矢量）图层；

android端用webview加载在线页面或离线的html页面都是没问题的，同时，android原生与JS之间可以互相调用。这一部分不是本文的重点，参考资料如下：

笔者想到ol加载地瓦片地图时，可以用tileUrlFunction返回一个瓦片的链接，例如：

本文献给大连机场，感谢您延误航班，使我有时间有耐心写完本文，谢谢。

包example.stackoverflow.osmdroid

进口android.app.Activity

进口android.os.Bundle

进口org.osmdroid.tileprovider.tilesource.TileSourceFactory

进口org.osmdroid.util.GeoPoint

进口org.osmdroid.views.MapView

公共类YourMap延伸活动{

//的MapView变量：

私人MapView类m_mapView

//默认的地图缩放级别：

私人诠释MAP_DEFAULT_ZOOM = 15

//默认的地图纬度：

私人双人MAP_DEFAULT_LATITUDE = 38.535350

//默认的地图经度：

私人双人MAP_DEFAULT_LONGITUDE = -121.753807

@覆盖

公共无效的onCreate（包savedInstanceState）{

super.onCreate（savedInstanceState）

//指定XML布局的使用方法：

的setContentView（R.layout.osm_map）

//查找该布局的MapView控制器：

m_mapView =（图形页面）findViewById（R.id.mapview）

//设置的MapView控制器：

m_mapView.setBuiltInZoomControls（真正的）

m_mapView.setMultiTouchControls（真正的）

m_mapView.setClickable（真正的）

m_mapView.setUseDataConnection（假）

m_mapView.getController（）setZoom（MAP_DEFAULT_ZOOM）。

m_mapView.getController（）。setCenter（

新的GeoPoint（MAP_DEFAULT_LATITUDE，MAP_DEFAULT_LONGITUDE））

m_mapView.setTileSource（TileSourceFactory.MAPNIK）

} //结束的onCreate（）

} //结束类YourMap

---