OpenLayers learning-load AMAP map data of a specified level, openlayers AMAP

OpenLayers learning-load AMAP map data of a specified level, openlayers AMAP

When using AMAP data, we usually do not need to load world maps, but only need to specify the map data of the project area. Similarly, we do not need data of all levels, you only need to specify the level data.

According to the method in OpenLayers learning-Layer system (I), directly use the XYZ Layer class for loading. Obviously, this function cannot be implemented. There are two main reasons:
1. No resolution is specified for the map.

The mechanism of OpenLayers is that when you do not specify a resolution for the Layer or a resolution for the Map, the upper-left point of the maximum range of the Map is directly used as the cut graph origin, in addition, the resolution of the cut graph is calculated according to the 18-level, and the resolution is reduced downward by 1/2.

Take the 900913 projection as an example. maxExtent is (if you don't know why this value is used, please use Baidu's principle ):

maxExtent: new OpenLayers.Bounds(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892)

The resolution of level 0th is:

(maxExtent.right - maxExtent.left)/256;

That is, res [0] = 156543.033928040625.

Therefore, res [z] = res [0]/Math. pow (2, z );

To put it bluntly, the XYZ layer calculates the row and column number of the slice, constructs the URL directly, and fills the image in the DIV of the layer.

Therefore, it is clear that if you only specify the resolutions in the Map to limit the display level of the Map, the resolution corresponding to the actual Z of the Map will not match, resulting in incorrect constructed URLs.

2. The maximum MAP range is not specified.

Assume that a maxExtent is forcibly specified for Map. As mentioned above, when the resolution is not given, the Layer resolution is calculated directly using the Map Extent, this will obviously cause all of our XYZ computing errors at the same time.

Therefore, it is concluded that to use OpenLayers to load a map at a specified scale and within a specified range, the address of the server where the map slice is located must be correctly calculated.

A solution is provided below

1. Construct the AMAP data source Layer

        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. Example

Initialize the Layer and specify the address of the autonavi server. It mainly provides the baseURL of the spliced URL.

        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"]                        );

Initialize the Map to display the Map range and resolution. You need to display those levels of maps to retain those levels of resolutions and delete other items.

Note that the resolution here is strictly consistent with the resolution of the server cut graph.

If you do not want to maintain consistency, rewrite the code in the getURL method in the Layer to obtain the resolution.

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,                ],            });

At the same time, pay attention to the coordinates given by maxExtent as the 900913 projection. If you do not know how the coordinates come from, you can use the Proj4js library for conversion.

First, you can use smart computers to learn how to use AMAP and AMAP navigation. I want to teach you how to use AMAP and AMAP navigation,

Hello!
1. AMAP searches nearby base stations based on network signals (LBS). It requires network support and enables wireless network or data traffic during use, AMAP navigation is a professional gps-based navigation software. You need to enable the gps switch to search for satellites in an open area.
2. The use of AMAP is relatively simple. Turn on the network switch. Press and hold down at the bottom of the standby screen, find the icon of data connection or wireless network, and click it.
3. AMAP navigation
1) enable AMAP navigation. When the mobile phone starts the GPS navigation function for the first time (set-location service-gps satellite (checked, it takes some time to download the calendars and search for satellites (about 20 minutes) to implement the positioning function. This is a normal phenomenon of GPS navigation.
2) during the process of downloading and searching for stars, you need to go outdoors in an open environment. We recommend that you place your mobile phone in a fixed location, such as frame/window sill, to speed up searching for stars.
3) in the system settings-location service check the use of A-GPS, via mobile phone location server as an auxiliary server to assist the GPS receiver to complete the ranging and positioning services.
4) Remember not to rain the weather or the clouds are thick;

If the technical solution we provide is valid, you can choose to adopt it as a valid answer for reference by other users. Thank you.