js 寫法參考__js

//create 2015/12/22window.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]),  //初始化地圖顯示地區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({  //建立地圖層，可以建立多個渲染層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({  //滑鼠經緯度座標coordinateFormat: ol.coordinate.createStringXY(4), //精度.有效數字位projection: 'EPSG:4326',className: 'custom-mouse-position',undefinedHTML: ' '});var bt = [/*[12954100.55, 4854873.96],*/[12619367.26, 2655607.59]];//建立自訂元素和按鈕        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 經緯座標        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'})            })        ]        })      ];        //需要配置渲染層的將其放入數組中，注意順序，最上層的放在數組末尾，避免被遮蓋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]);        //需要配置控制項的將其放入數組中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  //視圖地區配置});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()//  建立XMLRequest //  無傳回值//---------------------------------------------------------createXMLHttpRequest:function(){        if(window.ActiveXObject) {            return new ActiveXObject("Microsoft.XMLHTTP");        }        else if(window.XMLHttpRequest) {            return new XMLHttpRequest();        }    },//---------------------------------------------------------//  drawLine(arry, width, color)//  參數 arry  width  color 類型：array,number,string//  arry:數組, width:整數字//  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)//  參數 arry  radius  color 類型：array,number,string//  arry:數組, radius:整數字//  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請求獲得經緯座標//---------------------------------------------------------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() 添加進度條//無參數//傳回值 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});}};