码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-09-24 01:05:45      阅读:723      评论:0      收藏:0      [点我收藏+]

标签: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库来转换获取。

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

标签:openlayers   高德地图   指定等级加载   

原文地址:http://blog.csdn.net/devcopper/article/details/39506017

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!