JS notation Reference __js

Create 2015/12/22 window.onload = function () {var maps = new maps ();
Maps.init ();
};
var Maps = function () {};
	function Progress (ele) {this.ele = Ele;
	this.loading = 0;
this.loaded = 0;
};
		The progress bar Method Progress.prototype = {Addloading:function () {if (this.loading = = 0) {this.show ();
		} ++this.loading;
	This.update ();
		}, Addloaded:function () {var _this = this;
			settimeout (function () {++_this.loaded;
		_this.update ();
	},100);
        }, Update:function () {var width = (this.loaded/this.loading *). toFixed (1) + '% ';
        This.ele.style.width = width;
           if (this.loading = = this.loaded) {this.loading = 0;
           this.loaded = 0;
           var _this = this;
           settimeout (function () {_this.hide ();
        }, 500);
	}, Show:function () {this.ele.style.visibility = ' visible ';
           }, Hide:function () {if (this.loading = = this.loaded) {this.ele.style.visibility = ' hidden '; This.ele.style.width = 0;
}
	}
};
		Maps.prototype = {layerarry:[],//Render layer ctrlsarry:[],//control button init:function () {//Map initialize var that = this; var view = new ol.
		
		View ({center:ol.proj.fromLonLat ([113.2644, 39.2228]),//Initialize map display area zoom:6, Minzoom:2, maxzoom:18}); var polyline = [' Hldhx@lnau ' Bcg_eac?? Cfjawdjf?? ublkmd@}@z@?? Ac^yk@z_@se@b[wfde?? Wffe}n ', ' fiogxb_i\\gg} @eHoCyTmPqGaBaHOoD \ n?? yvrgota| N?? o[n_stiwatemhgehcakia}^ ', ' Amybihokfnoi ' CCVVM?? Gg^gf_@ijwc?? Ecca]ool}dwfycacgcccwdcgwhssox?? Wi_e ', ' Kufmq@hbioqbgtws?? iyse@gyq\\cp@ce@{va}s@csjqae}{@iRaqE {lberoiwd@_t{]_ ', ' ngn@{pmhewaa{sef_u@kquyaw]wqeegtasz}licarakvwi}d?? _}rcjeinpspdwsqcgs@ ', ' spua@_okxamet_nwk@ob@gv}tiys[utwxonmt{uyb@wng]{nqa@odgneju_@_g}ysfw]k ', ' DuZyDmm@i_@uyIJe ~ @jCg | @nGiv @zui_bfnqaaviow@deed@dccf@r@qz@egs@{acu@mc ', ' um@yiey@ggig@ck_m@asku@qril@we@{maetej@} Tkz@clgr@ahko@qomceajw~c{w@ka ', ' I@qbchbq@kmbs{kdnbscbnfu_dbc@_~qheu ' iuydrc_} @bByp @fcyoa?qmbd}{aikeagb ', ' k_A_A{ Usdke@gfej@qh{o@qggb@qh{' @mMgm @uqus@kl{_@yomd@ymbgwe}x@oubwta__ ', ' duhegakuwct@gp@cnbii@mlba_@}| Asj@qrcg^eac}l{daaj_aaioyjbyh{nauyu ' Gsaw ', ' Xyn@ywmyoyqd{_@cficde}@y@aebjmwa ' Ckiabfkhbltgdddpyib ' W}xDnSa} Dbjyhcrx ', ' itaht}x@be}z_@qw_kwv@qkaaaibgxvim}a~jovaxcqw~wanb ' xewbbk{_a ' k}fbvami@ ', ' xBycBeCauBoF}}@ Qjioaww@gjhapopa_nurayjku@ugmi@cds[eraibkqstasqkcbynma ', ' CSK_UBCJGBEW@GKB_@YPEQDOQSM@EZCDWJBOGW ' BoMegBaU_ ' Ce_@ _ubqb@ytbwkfqit_ ', ' faqfewe@mfcka@_ec_umlb}mmabewkkdehwqaox}~dcbszmlcxbqowqe_dkyaujmrj\\o ', ' ~CfIewG| Yibqxbssb?es@qgcia}roraovaja_naodd{[y ' Agpqp@mkwr@ms@umeaw{dam ', ' b@umaw| @ojBwzDaaJsmBwbEgdCsrFqhAihDquAi ' fux@}_ Dui@_eb_u@gucuyauihuka_ ', ' lkszau| OMAA{WKM} @clHs_A_rEahCssKo \\sgbssglaqk@yvdcs_waytwpbmpc| Bwzknf ', ' ofscb_gsadizmymylgthgqonhqt{hkapg}dqq@m~hym@c ' Euibudiabb{hf{pwifx@sna ', ' W ' gkfyvqf@y~bkoai}lel@wtc@} ' @ oaxi_c}pzsi@eqgssuqj| Lqeb@e]kgpcaau}skdw ', ' ZGHN@GJYH\\QLNZOVJIEBQJA@ED@SIO{[OL\\KCMJME\\ISHORCMEC@ULEBB}EQIBACG} ', ' @m@qwHrT_ Vfps@kki ' UASzirphuzyxx@e{crw@kpdhn{wbtqardy@knfgp_ycu\\wycwy ', ' a{kho~ @omEoYmoDaEcPiuAosDagD}ro{{asyeihcayfillaiuqm@_ Baumfo}dgqa_ubyi ', ' @swC ~akzdlha}xevcba}cxk@ql@ ' rao|@~bbq{@ ' bye@djdww@z_c_catn@ye@nfc_ec ', ' |gGahH~s@w}@ ' Fi~ Fpnaooc|u@wleaeedrlykrpvkerbfys}arg@m}atrckzelw@gjbb ', ' h@wobhr{gcwgkgcc[wtcuoapacfoh@uby[ybgr@c@iq@o@wvev@sp@ ' Fajbfcaq@fiipa ', ' Dy@ewjluc ' exguabdembbpbssarauqbbg}@s@g{akb{bbif@_bymc}r@kdgm@spq_buj_ ', ' s@{X_{AsK_d@eM{ d@wvgx@owcu@?? admoknia@wfosmdymyckpibepwaob@xcq| @oNdCo ', ' sffwxhemonli\\lbaulb ' x_d@|k@au@bc@oc@bqc}{bhwdgcd ' l@ed@?? bl{g|a@etje@ ', ' Os~]clr~bgh@|b@}jv}eiealv@splud{z@nza_] ' | kchctd@spvb@wsb{@ko @f ' rooq~e ', ' [upzbuioli|gfaffzu@iq@nmmj| oejn^{qjh@yqhc@uj~j@igdd@kap~bkbxo{@| Qsafy ', ' Getyigd]}jpd@wrhvonznek ' j@ce@vgk}cjnsoszqkvvum^rsgc@ ' uql@xiq\\vigg@~k ', ' dyq[ niir@jnoq@xnwc@fyik@tk@su@neb}ubhqeesfjogeyhtcod| d}ed| @ctAbIuOzqB ', ' _}d~ngy ' \\UM@V[GM@V{CW ' G ' w@o{adjawzbh{c} ' gpp@ypaxn@}mafz@{bbbnia@?? JI ', ' ab@ ' CUOLC}YNACV ' @_^m@aeb} @yk @yutubg^uckzigk\\ygey}lu_@ooszite[uwi[sl@ ', ' mo@soaauasrbgzbqgaglayd@ig@asacyakla}qawhkgi{@s~ @goAmsAyDeEirB_ {B}IsJ ' , ' ueefymassakdamhaytcvkfeeokih}l@kp@wg@sj@ku@ey@uh@kj@}esfmg}jk^_r@_f@m ', ' ~ @ym @yja?? a@cfd@kbrcgdbaunacbhayadk@et@?? Kf}d??
		
		OL '].join ('); var layerpage = new Ol.layer.Tile ({//Create map layer, can create multiple render layers Source:new Ol.source.OSM ({})}), layery = new ol.layer.t

		Ile ({///Render layer Source:new ol.source.MapQuest ({layer: ' Sat '})});  var fullscreen = new Ol.control.FullScreen (),//new Ol.control add events and buttons mouseposition = new Ol.control.MousePosition ({ Mouse latitude and longitude coordinates coordinateFormat:ol.coordinate.createStringXY (4),//precision. Effective digit digit projection: ' epsg:4326 ', ClassName: ' Cust

		Om-mouse-position ', undefinedhtml: '   '});

		var bt = [/*[12954100.55, 4854873.96],*/[12619367.26, 2655607.59]];	
		Create a custom element and button var app = {}; App. Findplacecontrol = function (opt_options) {var options = Opt_options | |
	        {}; var inputs = Document.crEateelement (' input ');
	        Inputs.type = ' text ';
	        inputs.id = ' cityinput ';
	        Inputs.value = ' Please enter the city ';
	        var button = document.createelement (' button ');
	        Button.type = ' button ';
	        button.id = ' gotocity ';
	        
	        button.innerhtml = ' Go '; var handlefindplace = function (e) {var London = Ol.proj.fromLonLat ([-0.12755, 51.507222]);//113.2644, 23.2228 Latitude and longitude coordinates var pan = Ol.animation.pan ({duration:2000, Source: (View.getcenter ())//@type {ol.
			    Coordinate}});
			    Map.beforerender (PAN);
	    	View.setcenter (London);

	        };

	        Button.addeventlistener (' Click ', Handlefindplace, false);
	        var element = document.createelement (' div ');
	        Element.classname = ' Findplace Ol-control ';
	        Element.appendchild (inputs);

	        Element.appendchild (button);
	        Ol.control.Control.call (this, {element:element, target:options.target});
        }; Ol.inherits (app.


        Findplacecontrol, Ol.control.Control); Special shape var vect = new Ol.layer.Vector ({source:new ol.source.Vector ({features: [New ol. Feature ({geometry:new ol.geom.Point ([12954100.55, 4854873.96])}), Style:new Ol.style.Style ({image:new ol.s Tyle. Regularshape ({fill:new Ol.style.Fill ({color: ' red '}),//stroke:new ol.style.Stroke ({color:
		            ' Red ', width:1}),//New Ol.style.Stroke ({color: ' Black ', width:1});

		Points:5, Radius:10, Radius2:4, angle:0})}); var layers = [//view mode new Ol.layer.Tile ({style: ' Road ', Source:new ol.source.MapQuest ({
	          	Layer: ' OSM '}), new Ol.layer.Tile ({style: ' aerial ', Visible:false, Source:new ol.source.MapQuest ({layer: ' Sat '})}, new Ol.layer.Group ({style: ' AERIALWIthlabels ', Visible:false, layers: [//new ol.layer.Tile ({//source : New Ol.source.MapQuest ({layer: ' sat '})///}), new Ol.layer.Tile ({source:new o

        L.source.mapquest ({layer: ' Hyb '})}]})]; You need to configure the rendering layer to put it into the array, note the order, the top layer at the end of the array, to avoid being masked that.layerArry.push (layerpage);
		Basic rendering Layer//that.layerarry.push (layery); That.layerArry.push (That.drawcircle (bt,8, ' red '));
		That.layerArry.push (Vect);
		That.layerArry.push (That.drawline (polyline,6, ' #ff0000 ')); That.layerArry.push (That.addprogress ());
        Load progress bar That.layerArry.push (Layers[0]);
        That.layerArry.push (Layers[1]);

        That.layerArry.push (layers[2]);
		You need to configure the control to put it into an array of that.ctrlsArry.push (fullscreen);
		That.ctrlsArry.push (mouseposition); That.ctrlsArry.push (new app.)

		Findplacecontrol ()); var map = new ol. Map ({layers:that.layerArry,//[layerpage,that.drawline (Polyline,6, ' #ff0000 '), That.drawcircle (bt,8, ' Red ')],//Render layer Configuration target: "Map", Controls:ol.control.defaults (). Extend (that.ctr

		Lsarry),//Control events and button configuration View:view/view zone configuration});
      	var select = document.getElementById (' Layer-select ');
        	function OnChange () {var style = Select.value;
        	var i, J;
        	for (i = 0, j = layers.length I < J; ++i) {layers[i].set (' visible ', (layers[i].get (' style ') = = style));
      	
	} select.addeventlistener (' Change ', onChange);
	},//---------------------------------------------------------//Createxmlhttprequest ()//Create XMLRequest//no return value ---------------------------------------------------------createxmlhttprequest:function () {if (window).
        ActiveXObject) {return new ActiveXObject ("Microsoft.XMLHTTP"); else if (window.
        XMLHttpRequest) {return new XMLHttpRequest (); }
    },
	//---------------------------------------------------------//drawLine (Arry, width, color)//Parameter Arry width color type: array,number,string//Arry: Array, Width: whole number//color : Hexadecimal (#) or Rgba value ([r,g,b,a]) or color Word//return layer obj//---------------------------------------------------------drawLine: function (arry, width, color) {var playline = (new Ol.format.Polyline ({factor:1e6}). Readgeometry (Arry, {Datap Rojection: ' epsg:4326 ', featureprojection: ' epsg:3857 '}), linecoords = Playline.getcoordinates (), lineLength = Linecoords.length, linefeature = new ol. Feature ({type: ' route ', Geometry:playline}), start = new ol. Feature ({type: ' Icon ', Geometry:new ol.geom.Point (Linecoords[0)}), end = new ol.
		Feature ({type: ' Icon ', Geometry:new ol.geom.Point (Linecoords[linelength-1)});  var linelayer = new Ol.layer.Vector ({source:new ol.source.Vector ({features:[linefeature, start, end]}), style:new
Ol.style.Style ({stroke:new ol.style.Stroke ({width:width, Color:color				}), Image:new Ol.style.Icon ({anchor: [0.5, 1], src: ' Images/marker-icon.png '})});
	return linelayer;  },//---------------------------------------------------------//Drawcircle (Arry, radius, color)//Parameter Arry radius Color type: array,number,string//Arry: Array, Radius: integer//color: hexadecimal (#) or Rgba value ([r,g,b,a]) or color Word//return layer obj//---- -----------------------------------------------------drawcircle:function (arry, radius, color) {var feat = [],temp = Nu
		ll for (var i=0,j = arry.length;i<j;i++) {temp = new ol.
			Feature ({type: ' Icon ', Geometry:new ol.geom.Point (Arry[i)});
		Feat.push (temp);
				var vector = new Ol.layer.Vector ({source:new ol.source.Vector ({features:feat}), Style:new Ol.style.Style ({
				Image:new ol.style.Circle ({radius:radius, fill:new Ol.style.Fill ({color:color})
		})
			})
		});
	return vector; },
	//---------------------------------------------------------//Gotofixed ()//move to the specified location//Ajax request for latitude/longitude coordinates//---------------------------------------------------------Gotofix
		Ed:function () {var xmlreq = this.createxmlhttprequest ();
		var url = ';
		Xmlreq.open (' Get ', url,true); Xmlreq.onreadystatechange = function () {if (xmlreq.readstate = = 4 && xmlreq.status =) {var result = xml
			Req.responsetext;
	} xmlreq.send (NULL); },//---------------------------------------------------------//Addprogress () Add progress bar//no parameter//return value layer obj//---- -----------------------------------------------------addprogress:function () {var progress = new Progress (
        document.getElementById (' progress ')); var Source = new Ol.source.ImageWMS ({url: ' http://demo.boundlessgeo.com/geoserver/wms ', params: {' LAYER
      	S ': ' Topp:states '}, ServerType: ' GeoServer '});
      	Source.on (' Imageloadstart ', function (event) {progress.addloading ();
      	}); Source.on (' Imageloadend ', function (Event) {progress.addloaded ();
      	});
      	Source.on (' Imageloaderror ', function (event) {progress.addloaded ();
      	});
	return new Ol.layer.Image ({source:source});
 }
};