//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; }; // 進度條方法 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 * 100).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:[], //渲染層ctrlsArry:[], //控制按鈕 init: function(){ //地圖初始化var that = this;var view = new ol.View({ center: ol.proj.fromLonLat([113.2644, 39.2228]), //初始化地圖顯示區(qū)域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\\??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({ //創(chuàng)建地圖層，可以創(chuàng)建多個渲染層source: new ol.source.OSM({})}),layery = new ol.layer.Tile({ //渲染層source: new ol.source.MapQuest({layer: 'sat'})});var fullScreen = new ol.control.FullScreen(), //new ol.control 添加事件和按鈕mousePosition = new ol.control.MousePosition({ //鼠標經(jīng)緯度坐標coordinateFormat: ol.coordinate.createStringXY(4), //精度.有效數(shù)字位projection: 'EPSG:4326',className: 'custom-mouse-position',undefinedHTML: '?'});var bt = [/*[12954100.55, 4854873.96],*/[12619367.26, 2655607.59]];//創(chuàng)建自定義元素和按鈕var app = {}; app.FindPlaceControl = function(opt_options) {var options = opt_options || {};var inputs = document.createElement('input');inputs.type = 'text';inputs.id = 'cityInput';//inputs.value = '請輸入城市';var button = document.createElement('button');button.type = 'button';button.id = 'gotoCity';button.innerHTML = '前往';var handleFindPlace = function(e) {var london = ol.proj.fromLonLat([-0.12755, 51.507222]); //113.2644, 23.2228 經(jīng)緯坐標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);//特殊形狀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.style.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 = [ //視圖模式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 ol.source.MapQuest({layer: 'hyb'})})]})];//需要配置渲染層的將其放入數(shù)組中，注意順序，最上層的放在數(shù)組末尾，避免被遮蓋that.layerArry.push(layerPage); //基礎渲染層//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()); // 加載進度條that.layerArry.push(layers[0]);that.layerArry.push(layers[1]);that.layerArry.push(layers[2]);//需要配置控制項的將其放入數(shù)組中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')], //渲染層配置target: "map",controls: ol.control.defaults().extend(that.ctrlsArry), //控制事件和按鈕配置view: view //視圖區(qū)域配置});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()// 創(chuàng)建XMLRequest // 無返回值//---------------------------------------------------------createXMLHttpRequest:function(){if(window.ActiveXObject) {return new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest) {return new XMLHttpRequest();}},//---------------------------------------------------------// drawLine(arry, width, color)// 參數(shù) arry width color 類型：array,number,string// arry:數(shù)組, width:整數(shù)字// color:十六進制(#)或RGBA值([r,g,b,a])或顏色單詞 // 返回 layer obj//---------------------------------------------------------drawLine:function(arry, width, color){var playLine = (new ol.format.Polyline({factor: 1e6}).readGeometry(arry, {dataProjection: '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)// 參數(shù) arry radius color 類型：array,number,string// arry:數(shù)組, radius:整數(shù)字// color:十六進制(#)或RGBA值([r,g,b,a])或顏色單詞 // 返回 layer obj//---------------------------------------------------------drawCircle:function(arry, radius, color){var feat = [],temp = null;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()// 移動到指定位置// ajax請求獲得經(jīng)緯坐標//---------------------------------------------------------gotoFixed:function(){var xmlReq = this.createXMLHttpRequest();var url = '';xmlReq.open('get',url,true);xmlReq.onreadystatechange = function(){if(xmlReq.readState == 4 && xmlReq.status == 200){var result = xmlReq.responseText;}}xmlReq.send(null);},//---------------------------------------------------------// addProgress() 添加進度條// 無參數(shù)// 返回值 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: {'LAYERS': '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});} };

總結(jié)

以上是生活随笔為你收集整理的js 写法参考的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。