加载指定等级指定范围的高德地图数据

在使用高德地图数据的时候,我们通常不需要加载世界地图,只需要指定项目片区地图数据即可;同样,我们也不需要所有等级的数据,只需要指定等级数据即可。

按照《OpenLayers学习–Layer体系(一)》中的方法,直接使用XYZ图层类来加载,显然无法实现该功能。主要原因有以下两点:1.没有指定地图的分辨率

OpenLayers的机制就是,当你没有给Layer指定分辨率,也没有给Map指定分辨率,则直接将地图的最大范围的左上角点作为切图原点,并且按照18级来计算切图分辨率,分辨率是以1/2向下递减。

以900913投影为例,maxExtent为(至于不知道为什么是这个值的,请自己百度其原理):

maxExtent: new OpenLayers.Bounds(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892)那么第0级的分辨率为:(maxExtent.right – maxExtent.left)/256;即:res[0] =156543.033928040625。

由此:res[z] = res[0]/Math.pow(2,z);

而对于XYZ图层,说白了就是计算切片的行列号,直接构造网址,将图片填充到图层的DIV里面。

由此明白,假设只是给Map中指定resolutions来限定地图的显示等级,会导致Map中的Z 之和实际Z对应的resolution不匹配,导致构造出来的网址不正确。

2.没有指定地图的最大范围

假设强行给Map指定一个maxExtent,,上面说过,没有给分辨率的时候Layer的分辨率的计算是直接使用Map的Extent来计算,这样显然会导致我们的XYZ同时都计算错误。

因此得出结论,要使用OpenLayers加载高德地图的指定比例尺和指定范围下的地图,就必须要给出正确的计算地图切片所在服务器的地址。

下面给出一种解决办法

1.构造高德地图数据源图层

OpenLayers.Layer.GaodeCache = OpenLayers.Class(OpenLayers.Layer.TMS, {tileOriginCorner: 'tl',type: 'png',myResolutions: [156543.0339,78271.516953125,39135.7584765625,19567.87923828125,9783.939619140625,4891.9698095703125,2445.9849047851562,1222.9924523925781,611.4962261962891,305.74811309814453,152.87405654907226,76.43702827453613,38.218514137268066,19.109257068634033,9.554628534317016,4.777314267158508,2.388657133579254,1.194328566789627,0.5971642833948135,],tileOrigin: new OpenLayers.LonLat(-20037508.3427892, 20037508.3427892),initialize: function (name, url, options) {OpenLayers.Layer.TMS.prototype.initialize.apply(this, [name, url, options]);},getURL: function (bounds) {var res = this.map.getResolution();var x = parseInt((bounds.getCenterLonLat().lon – this.tileOrigin.lon) / (256 * res));var y = parseInt((this.tileOrigin.lat – bounds.getCenterLonLat().lat) / (256 * res));var z = this.map.getZoom();if (Math.abs(this.myResolutions[z] – res) > 0.0000000000000000001) {for (var i = 0; i < this.myResolutions.length; i++) {if (Math.abs(this.myResolutions[i] – res) <= 0.0000000000000000001) {z = i;break;}}}if (OpenLayers.Util.isArray(this.url)) {var serverNo = parseInt( Math.random(0, this.url.length));return this.url[serverNo] + "&z="+z + '&y=' + y + '&x=' + x;}else{return this.url + "&z="+z + '&y=' + y + '&x=' + x;}},});2.使用示例

初始化Layer,指定高德服务器的地址,主要是提供拼接URL的baseURL。

var layer = new OpenLayers.Layer.GaodeCache("Gaode", ["?lang=zh_cn&size=1&scale=1&style=7","?lang=zh_cn&size=1&scale=1&style=7","?lang=zh_cn&size=1&scale=1&style=7","?lang=zh_cn&size=1&scale=1&style=7"]);初始化Map,给出显示地图范围,以及分辨率,需要显示那几级地图就保留那几级分辨率,其他的删掉即可。

请留意这里的分辨率是和服务器切图的分辨率严格保持一致的。

如果不想保持一致的话,请自己重写Layer中getURL方法中的获取分辨率部分的代码。

map = new OpenLayers.Map('map', {projection: "EPSG:900913",displayProjection: "EPSG:4326",controls: [],maxExtent: new OpenLayers.Bounds(12139249.47917,2440079.81851,12157670.80299,2450494.36362),resolutions: [//156543.0339,//78271.516953125,//39135.7584765625,//19567.87923828125,//9783.939619140625,//4891.9698095703125,//2445.9849047851562,//1222.9924523925781,//611.4962261962891,//305.74811309814453,//152.87405654907226,76.43702827453613,38.218514137268066,19.109257068634033,9.554628534317016,4.777314267158508,2.388657133579254,1.194328566789627,0.5971642833948135,],});同时,留意maxExtent给定的是900913投影的坐标,如果不知道该坐标怎么来,可以通过Proj4js库来转换获取。

出门走好路,出口说好话,出手做好事。

加载指定等级指定范围的高德地图数据

相关文章:

你感兴趣的文章:

标签云: