首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

重写openalyers 的方法,加载天map瓦片数据

2012-09-07 
重写openalyers 的方法,加载天地图瓦片数据将TiandituLayer 加载到OpenLayers.js Grid类后。OpenLayers.Lay

重写openalyers 的方法,加载天地图瓦片数据

将TiandituLayer 加载到OpenLayers.js Grid类后。
OpenLayers.Layer.TiandituLayer = OpenLayers.Class(OpenLayers.Layer.Grid,{mapType : null,mirrorUrls : null,topLevel : null,bottomLevel : null,topLevelIndex : 0,bottomLevelIndex : 20,topTileFromX : -180,topTileFromY : 90,topTileToX : 180,topTileToY : -270,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 x_num = this.topTileFromX < this.topTileToX ? Math.round((bounds.left - this.topTileFromX) / coef) : Math.round((this.topTileFromX - bounds.right) / coef);var y_num = this.topTileFromY < this.topTileToY ? Math.round((bounds.bottom - this.topTileFromY) / coef): Math.round((this.topTileFromY - bounds.top) / coef);var type = this.mapType;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(x_num, this.mirrorUrls);}              return this.getFullRequestString({T : type,X : x_num,Y : y_num,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>

? 补充问题,由于天地图12级别以后,标注与地图分离,所以要修改下geturldaim

?? 加载两个图层一个图层设置成隐藏。

热点排行