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.