Openlayers 2.x load map, openlayers2.x

Openlayers 2.x load map, openlayers2.x

Overview:

In the previous section, we talked about how Arcgis for js loads a map of heaven and earth, how to load a map of heaven and earth in Openlayers 2. X, and how to add your own wms service.

Effect:

Map

Images

Terrain

Remove local wms

Implementation:

1. Map World Service

On the official website of map, we can see the following:

The url of our callable graph is listed on the page. The website address is http://www.tianditu.com/guide/index.html.

2. Load map world

You can use openlayers. Layer. XYZ to load the world map in OpenLayers. Here, I encapsulate it into two functions: getBaseLayer and getAnnoLayer to implement the basemap and annotation layers respectively. The Code is as follows:

            function getBaseLayer(layername, layer){                return new OpenLayers.Layer.XYZ(                        layername,                        [                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"                        ],                        {                            isBaseLayer: true,                            displayInLayerSwitcher:true                        }                );            };            function getAnnoLayer(layername, layer, visiable){                return new OpenLayers.Layer.XYZ(                        layername,                        [                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"                        ],                        {                            isBaseLayer: false,                            visibility:visiable,                            displayInLayerSwitcher:false                        }                );            };

The call method is as follows:

Var baseLayers = ["vec_c", "img_c", "ter_c"]; var vecLayer = getBaseLayer ("map", baseLayers [0]); var imgLayer = getBaseLayer ("image", baseLayers [1]); var terLayer = getBaseLayer ("terrain", baseLayers [2]); var vecAnno = getAnnoLayer ("map annotation ", "cva_c", true );

The complete code is as follows:

<! DOCTYPE html>