重写openalyers 的方法,加载天地图瓦片数据
程序员文章站
2022-06-13 07:53:23
...
将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
加载两个图层一个图层设置成隐藏。
上一篇: 富康公主嫁给一个大才子,却移情别恋太监
下一篇: 因桃花夫人国家被灭了,被骂红颜祸水而自杀