OpenLayers学习–加载指定等级指定范围的高德地图数据

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

按照《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", [
                        "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7",
                        "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7",
                        "http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7",
                        "http://webrd04.is.autonavi.com/appmaptile?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库来转换获取。

转载自：https://blog.csdn.net/devCopper/article/details/39506017