Recently, the company has a demand that directly on the map, you can switch the map of the sky map and the satellite image as the background image, aside from the layerswitcher that comes with ol (the label of the sky map and the base map are separate, so it is not convenient to switch between two layers. ), expanded a mapswitcher by myself, encapsulated the satellite map and map of the sky map, first come with a packaged rendering:
Satellite imagery:
map:
Note that there is a radio button in the upper right corner of the map, you can choose "Satellite Map" or "Map".
OK, not much to say, let’s take a look at the external map service of Tiantu: http://www.tianditu.com/service/query.html I chose all the latitude and longitude systems here, and did not use Mercator.
Paste a demo of ol calling the sky map wmts as a follow-up reference:
var l1 = new OpenLayers.Layer.WMTS({
name: "ditu", //layername
url: "http://t0.tianditu.com/vec_c/wmts",
layer: "vec", //reference specification
style: "default",
matrixSet: "c", //reference specification
format:"tiles",
isBaseLayer: true
})
, the rest of the nonsense is not much to say, directly paste the written control
OpenLayers.Control.MapSwitcher = OpenLayers
.Class(
OpenLayers.Control,
{
/**
* APIProperty: autoActivate {Boolean} Activate the control
* when it is added to a map. Default is true.
*/
autoActivate : true,
/**
* Property: element {DOMElement}
*/
element : null,
/**
* Method: destroy
*/
destroy : function() {
this.deactivate();
OpenLayers.Control.prototype.destroy.apply(this,
arguments);
},
imgbutton : null,
vecbutton: null,
/**
* APIMethod: activate
*/
activate : function() {
this.map.events.register("buttonclick_vec_",
this, this.onVecClick);
this.map.events.register("buttonclick_img_",
this, this.onImgClick);
this.map.events.register("zoomend",this, this.zoom_);
},
/**
* APIMethod: deactivate
*/
deactivate : function() {
this.map.events.unregister("buttonclick_vec_",
this, this.onVecClick);
this.map.events.unregister("buttonclick_img_",
this, this.onImgClick);
},
/**
* Method: draw {DOMElement}
*/
draw : function() {
OpenLayers.Control.prototype.draw
.apply(this, arguments);
this.div.left = "";
this.div.top = "";
this.div.style.right="15ex" ;
this.div.style.background="#ddd";
imgbutton = document.createElement("input");/* Generate input object*/
imgbutton.type = "radio"; /* Generate input attribute value*/
imgbutton.value = "Satellite";
imgbutton.name = "1";
imgbutton.id = "buttonclick_img_" ;
vecbutton = document.createElement("input"); /* Generate input object*/
vecbutton.type = "radio"; /* Generate input attribute value */
vecbutton.value = "Map";
vecbutton.name = "1";
vecbutton.id = "buttonclick_vec_" ;
//<label for="male">Male</label>
var lab1 = document.createElement("label"); /* Generate input object*/
lab1.innerHTML="Satellite" ;
lab1["for"] = imgbutton.id;
var lab2 = document.createElement("label"); /* Generate input object*/
lab2.innerHTML="map";
lab2["for"] = vecbutton.id;
this.div.appendChild(lab1);
this.div.appendChild(imgbutton);
this.div.appendChild(lab2);
this.div.appendChild(vecbutton);
var _map = this.map;
imgbutton.onclick = function() {
_map.events.triggerEvent("buttonclick_img_");
};
vecbutton.onclick = function() {
_map.events.triggerEvent("buttonclick_vec_");
};
//default map
this.setBackLayerType('vec');
vecbutton.checked = true ;
return this.div;
},
onVecClick : function() {
this.setBackLayerType('vec');
},
onImgClick : function() {
//alert("Satellite");
this.setBackLayerType('img');
},
clearBackgroupLayer : function(){
//Clear the current background layer
//Get the background layer contains tms and wmts
var layers = this.map.layers;
var rmLayers = new Array ();
for(var i in layers) {
var layer = layers[i];
//console.log("i:%" + i);
//Determine layer properties
if(layer.name.indexOf('tdt_') >= 0 && ( layer instanceof OpenLayers.Layer.TMS
|| layer instanceof OpenLayers.Layer.WMTS)) {
// remove the layer
//this.map.removeLayer(layer);
rmLayers.push(layer);
}
}
for(var i in rmLayers) {
this.map.removeLayer(rmLayers[i]);
}
},
setBackLayerType:function (e) {
this. clearBackgroupLayer();
if(e == 'img') {
var l1 = new OpenLayers.Layer.WMTS({
name: "tdt_weix",
url: "http://t0.tianditu.com/img_c/wmts",
layer: "img",
style: "default",
matrixSet: "c",
format:"tiles",
isBaseLayer: true
})
var l2 = new OpenLayers.Layer.WMTS({
name: "tdt_weixbz",
url: "http://t0.tianditu.com/cia_c/wmts",
layer: "cia",
style: "default",
matrixSet: "c",
format:"tiles",
isBaseLayer: false
}) ;
this.map.addLayer(l1);
this.map.addLayer(l2);
// this. map.setBaseLayer(l1);
this.map.setLayerIndex(l1,1);
this.map.setLayerIndex(l2,2);
if(this.imgbutton && !this.imgbutton.checked) {
this.imgbutton.checked = true;
}
} else if(e == 'vec'){
//add map
var l1 = new OpenLayers.Layer.WMTS({
name: "tdt_ditu",
url: "http://t0.tianditu.com/vec_c/wmts",
layer: "vec",
style: "default",
matrixSet: "c",
format:"tiles",
isBaseLayer: true
})
var l2 = new OpenLayers.Layer.WMTS({
name: "tdt_ditubz",
url: "http://t0.tianditu.com/cva_c/wmts",
layer: "cva",
style: "default",
matrixSet: "c",
format:"tiles",
isBaseLayer: false
}) ;
this.map.addLayer(l1);
this.map.addLayer(l2);
// this. map.setBaseLayer(l1);
this. map.setLayerIndex(l1,1);
this.map.setLayerIndex(l2,2);
if(this.vecbutton && !this.vecbutton.checked) {
this.vecbutton.checked = true;
}
}
},
CLASS_NAME : "OpenLayers.Control.MapSwitcher"
});
: The code is bad, but the writing should be clearer. lalala
ol can be used after repackaging. In the test environment, this js is introduced into lib/Openlayers.js, as shown in the figure:
Specific code reference:
.......
"OpenLayers/Control/Split.js",
"OpenLayers/Control/LayerSwitcher.js",
"OpenLayers/Control/MapSwitcher.js", //加入
"OpenLayers/Control/DrawFeature.js",
"OpenLayers/Control/DragFeature.js",
........
OK to a demo page:
<body onload="init()">
<div id="map" >
</div>
<script type="text/javascript">
var lat = Number ('30 .4 ');
var lon = Number ('120.3');
var map = null;
var mapMaxZoom = 19;
function init() {
var options = {
controls : [ new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Zoom(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition() ],
numZoomLevels : mapMaxZoom,
};
var map = new OpenLayers.Map('map', options ) ;
var mapswitcher = new OpenLayers.Control.MapSwitcher();
map.addControl(mapswitcher);
var point = new OpenLayers.LonLat(lon , lat );
map.setCenter(point , 15);
}
</script>
</html>
The demo is in the attachment.