{"version":3,"sources":["webpack:///./src/assets/images/all/icon_location_gray.svg","webpack:///../../../src/components/VForm/VForm.ts","webpack:///./src/assets/images/all/icon_cusepa_orange.svg","webpack:///./src/views/history/History.vue?521c","webpack:///./src/views/history/History.vue?78f6","webpack:///./src/views/history/History.vue","webpack:///src/views/history/History.vue"],"names":["module","exports","mixins","BindsAttrs","RegistrableProvide","extend","name","provide","form","this","inheritAttrs","props","disabled","Boolean","lazyValidation","readonly","value","data","inputs","watchers","errorBag","watch","handler","val","errors","Object","values","includes","$emit","deep","immediate","methods","watchInput","input","watcher","$watch","$set","_uid","valid","shouldValidate","hasOwnProperty","validate","filter","length","reset","forEach","resetErrorBag","setTimeout","resetValidation","register","push","unregister","found","find","i","unwatch","$delete","render","h","staticClass","attrs","novalidate","attrs$","on","submit","e","$slots","default","_vm","_h","$createElement","_c","_self","_v","ref","firstDay","format","cancelLabel","applyLabel","scopedSlots","_u","key","fn","picker","_s","_f","startDate","endDate","model","callback","$$v","dateRange","expression","$event","searchTimes","_m","staticRenderFns","component","VBtn","VForm","map","marker_basic","markerlayerGroup","LeafIcon","greenIcon","dataArry","markers_pos","geoJsonLayer","components","mdiCalendar","mdiClockTimeNineOutline","DateRangePicker","icons","datetime1","datetime2","created","axios","nav_str_ay","nav_arry_str","alert","location","mounted","$","timeDimensionControl","timeDimensionControlOptions","loopButton","timeDimension","fitWorld","setView","maxZoom","overLatlng","overRadius","default_latlon","L","baselayers","options","iconSize","iconAnchor","popupAnchor","iconUrl","redIcon","yellowIcon","orangeIcon","purpleIcon","darkredIcon","grayIcon","epaIcon","cusepaIcon_orange","icon","title","ev","deg","wind_s","pointRadius","strokeLength","fillColor","strokeWidth","windbab_marker","windcwblayerGroup","computed","myDates","str","success","ala_msg","stime","etime","latlon_arry","val_arry","new_arry","_getFeatureBetweenDates","time","featureTimes","console","pointToLayer","iconType","coords_ini","updateTimeDimension","updateTimeDimensionMode","duration","geoJsonTimeLayer","filters","dateFormat"],"mappings":"qGAAAA,EAAOC,QAAU,IAA0B,uC,gKCoB5BC,sBACbC,OACAC,eAAmB,SAEnBC,OAAO,CACPC,KAAM,SAENC,QAHO,WAIL,MAAO,CAAEC,KAAMC,OAGjBC,cAAc,EAEdC,MAAO,CACLC,SAAUC,QACVC,eAAgBD,QAChBE,SAAUF,QACVG,MAAOH,SAGTI,KAAM,iBAAO,CACXC,OAAQ,GACRC,SAAU,GACVC,SAAU,KAGZC,MAAO,CACLD,SAAU,CACRE,QADQ,SACCC,GACP,IAAMC,EAASC,OAAOC,OAAOH,GAAKI,UAAS,GAE3ClB,KAAKmB,MAAM,SAAUJ,IAEvBK,MAAM,EACNC,WAAW,IAIfC,QAAS,CACPC,WADO,SACKC,GAAU,WACdC,EAAW,SAAAD,GACf,OAAOA,EAAME,OAAO,YAAa,SAAAZ,GAC/B,EAAKa,KAAK,EAAKhB,SAAUa,EAAMI,KAAMd,KACpC,CAAEO,WAAW,KAGZX,EAAqB,CACzBkB,KAAMJ,EAAMI,KACZC,MAAO,aACPC,eAAgB,cAiBlB,OAdI9B,KAAKK,eAEPK,EAASoB,eAAiBN,EAAME,OAAO,kBAAmB,SAAAZ,GACnDA,IAGD,EAAKH,SAASoB,eAAeP,EAAMI,QAEvClB,EAASmB,MAAQJ,EAAQD,QAG3Bd,EAASmB,MAAQJ,EAAQD,GAGpBd,GAGTsB,SA/BO,WAgCL,OAAqE,IAA9DhC,KAAKS,OAAOwB,QAAO,SAAAT,GAAK,OAAKA,EAAMQ,UAAS,MAAOE,QAG5DC,MAnCO,WAoCLnC,KAAKS,OAAO2B,SAAQ,SAAAZ,GAAK,OAAIA,EAAMW,WACnCnC,KAAKqC,iBAEPA,cAvCO,WAuCM,WACPrC,KAAKK,gBAEPiC,YAAW,WACT,EAAK3B,SAAW,KACf,IAIP4B,gBAhDO,WAiDLvC,KAAKS,OAAO2B,SAAQ,SAAAZ,GAAK,OAAIA,EAAMe,qBACnCvC,KAAKqC,iBAEPG,SApDO,SAoDGhB,GACRxB,KAAKS,OAAOgC,KAAKjB,GACjBxB,KAAKU,SAAS+B,KAAKzC,KAAKuB,WAAWC,KAErCkB,WAxDO,SAwDKlB,GACV,IAAMmB,EAAQ3C,KAAKS,OAAOmC,MAAK,SAAAC,GAAC,OAAIA,EAAEjB,OAASJ,EAAMI,QAErD,GAAKe,EAAL,CAEA,IAAMG,EAAU9C,KAAKU,SAASkC,MAAK,SAAAC,GAAC,OAAIA,EAAEjB,OAASe,EAAMf,QACrDkB,IACFA,EAAQjB,QACRiB,EAAQhB,kBAGV9B,KAAKU,SAAWV,KAAKU,SAASuB,QAAO,SAAAY,GAAC,OAAIA,EAAEjB,OAASe,EAAMf,QAC3D5B,KAAKS,OAAST,KAAKS,OAAOwB,QAAO,SAAAY,GAAC,OAAIA,EAAEjB,OAASe,EAAMf,QACvD5B,KAAK+C,QAAQ/C,KAAKW,SAAUgC,EAAMf,SAItCoB,OA3GO,SA2GCC,GAAC,WACP,OAAOA,EAAE,OAAQ,CACfC,YAAa,SACbC,MAAO,gBACLC,YAAY,GACTpD,KAAKqD,QAEVC,GAAI,CACFC,OAAS,SAAAC,GAAD,OAAc,EAAKrC,MAAM,SAAUqC,MAE5CxD,KAAKyD,OAAOC,a,uBC7InBnE,EAAOC,QAAU,IAA0B,uC,2CCA3C,IAAIwD,EAAS,WAAa,IAAIW,EAAI3D,KAAS4D,EAAGD,EAAIE,eAAmBC,EAAGH,EAAII,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,MAAM,CAACZ,YAAY,gDAAgD,CAACY,EAAG,MAAM,CAACZ,YAAY,4BAA4B,CAACY,EAAG,MAAM,CAACZ,YAAY,cAAc,CAACY,EAAG,SAAS,CAACZ,YAAY,wBAAwB,CAACY,EAAG,MAAM,CAACZ,YAAY,sEAAsE,CAACY,EAAG,MAAM,CAACZ,YAAY,aAAa,CAACY,EAAG,MAAM,CAACZ,YAAY,6CAA6C,CAACY,EAAG,MAAM,CAACZ,YAAY,cAAc,CAACY,EAAG,QAAQ,CAACZ,YAAY,cAAc,CAACS,EAAIK,GAAG,QAAQF,EAAG,MAAM,CAACZ,YAAY,8BAA8B,CAACY,EAAG,oBAAoB,CAACG,IAAI,SAASf,YAAY,eAAeC,MAAM,CAAC,MAAQ,QAAQ,cAAc,CAAEe,SAAU,EAAGC,OAAQ,sBAAsBC,YAAY,KAAKC,WAAW,MAAO,YAAa,EAAK,kBAAmB,EAAK,iBAAkB,EAAM,eAAgB,EAAM,WAAY,EAAM,QAAS,GAAOC,YAAYX,EAAIY,GAAG,CAAC,CAACC,IAAI,QAAQC,GAAG,SAASC,GAAQ,MAAO,CAACf,EAAIK,GAAG,IAAIL,EAAIgB,GAAGhB,EAAIiB,GAAG,aAAPjB,CAAqBe,EAAOG,YAAY,MAAMlB,EAAIgB,GAAGhB,EAAIiB,GAAG,aAAPjB,CAAqBe,EAAOI,UAAU,UAAUC,MAAM,CAACxE,MAAOoD,EAAa,UAAEqB,SAAS,SAAUC,GAAMtB,EAAIuB,UAAUD,GAAKE,WAAW,gBAAgB,KAAKrB,EAAG,QAAQ,CAACZ,YAAY,wDAAwDC,MAAM,CAAC,MAAQ,WAAWG,GAAG,CAAC,MAAQ,SAAS8B,GAAQ,OAAOzB,EAAI0B,iBAAiB,CAAC1B,EAAIK,GAAG,SAAS,UAAU,KAAKL,EAAI2B,GAAG,QACl6CC,EAAkB,CAAC,WAAa,IAAI5B,EAAI3D,KAAS4D,EAAGD,EAAIE,eAAmBC,EAAGH,EAAII,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACZ,YAAY,YAAY,CAACY,EAAG,MAAM,CAACZ,YAAY,WAAW,CAACY,EAAG,MAAM,CAACZ,YAAY,yCAAyC,CAACY,EAAG,MAAM,CAACX,MAAM,CAAC,GAAK,wB,YCD2F,S,yDCO5VqC,EAAY,eACd,EACAxC,EACAuC,GACA,EACA,KACA,KACA,MAIa,aAAAC,EAAiB,QAMhC,IAAkBA,EAAW,CAACC,OAAA,KAAKC,QAAA,Q,mDCkE/BC,EACAC,EACAC,EAGAC,EACAC,EAAJ,Y,2XAPIC,G,UAAJ,IAKIC,EAAJ,GAKIC,EAAJ,KAEA,QACEC,WAAFA,CACIC,YAAJA,OACIC,wBAAJA,OACIC,gBAAJA,KAEEzG,KAAFA,UACEW,KAAFA,WAAI,MAAJ,CACM+F,MAANA,CACQH,YAARA,OACQC,wBAARA,QAEMG,UAANA,GACMC,UAANA,GACMvB,UAANA,CACQL,UAARA,KACQC,QAARA,QAGE4B,QAnBF,WAoBI,IAAJ,KAEA,0CACA,wCACIC,6BAEE,GAAN,aACQ,IAAR,wBACQC,EAARA,qBACUC,EAAVA,qBAEA,gBACUC,MAAVA,iBACUC,SAAVA,aAGQD,MAARA,iBACQC,SAARA,WAIEC,QAzCF,WA0CIC,GAAJA,WACMA,EAANA,gCAEI,IAGJ,WAEA,8BACI,KAAJ,uCACI,KAAJ,qCAGI,IAAJ,2CACIN,6BACE,IAAN,EAGMhB,EAANA,oBACQuB,sBAARA,EACQC,4BAARA,CACUC,YAAVA,GAEQC,eAARA,IACAC,WACM3B,EAANA,QAAQ4B,SAARA,EAAQC,QAARA,KACM7B,EAANA,gCACQ,IAAR,aACQ8B,EAARA,SACAC,EACAC,KAGMhC,EAANA,qCAKME,EAANA,wBACM,IAAN,0BAKA,GACQ,KAAR,kEACQ,MAAR,8GAGA,GACQ,MAAR,EACQ,QAAR,GAEM+B,EAANA,6BACMC,EAANA,eAGM/B,EAANA,eACQgC,QAARA,CACUC,SAAVA,QACUC,WAAVA,MACUC,YAAVA,SAIMlC,EAANA,OAAQmC,QAARA,MACMC,EAANA,OAAQD,QAARA,MACME,EAANA,OAAQF,QAARA,MACMG,EAANA,OAAQH,QAARA,MACMI,EAANA,OAAQJ,QAARA,MACMK,EAANA,OAAQL,QAARA,MACMM,EAANA,OAAQN,QAARA,MACAO,OAAQP,QAARA,MACAQ,OAAQR,QAARA,MAEMN,EAANA,iBACQ,OAAR,eAKM5B,EAANA,OAGM,IAAN,IACMiB,EAANA,mBACQ,IAAR,IAiBA,+HACUrB,EAAVA,8BAAY+C,KAAZA,EAAYC,MAAZA,UAAA,UAWQhD,EAARA,6DAEQA,EAARA,4BACUiD,EAAVA,sBAGQ5C,EAARA,QACQJ,EAARA,YAEQhD,OAKF,IAAN,0CACM8D,6BACE,GAAR,8BAEU,IAAV,SACUM,EAAVA,sBACY,IAAZ,IACA,IACA,QACA,QACA,mBAAc6B,IAAdA,EAAcC,OAAdA,EAAcC,YAAdA,EAAcC,aAAdA,GAAcC,UAAdA,UAAcC,YAAdA,IACA,0CAAcR,KAAdA,IACYS,EAAZA,wDACYA,EAAZA,4BACcP,EAAdA,sBAEYQ,EAAZA,uBAUEC,SAAFA,CACIC,QADJ,WAGM,IAAN,kCACQ,MAAR,GAEM,IAAN,EAEA,2BAAU,EAAV,oBAAU,EAAV,KAAU,EAAV,KAAU,EAAV,KAIM,GAFAC,EAANA,yCAEA,qBAEQ,IAAR,2BAAY,EAAZ,oBAAY,EAAZ,KAAY,EAAZ,KAAY,EAAZ,KAEA,2CAEA,4BACUA,EAAVA,6BACA,8BACUA,GAAVA,iBAIM,OAAN,IAGElI,QAAFA,CACI+D,YADJ,WAGMM,EAANA,eACA,UACQA,EAARA,eACQO,EAARA,cACQA,EAARA,MASM,IAEN,KACA,KACM,GAAN,wHACQ,IAAR,qCACA,mCAEQ,GAAR,KACU,IAAV,0BACA,KACYuD,GAAZA,EAGYC,EAAZA,qBAGUA,EAAVA,eAIM,GAAN,GAIQ,IAAR,2CACQ/C,6BACEX,EAAVA,UAIQ,IAAR,qCACA,mCACA,iGACA,iGAGA,+CAAU2D,MAAVA,EAAUC,MAAVA,IACQjD,6BACE,IAAV,SACA,KACU,GAAV,oBAGY,IAAZ,wBAOc,IALA,IAAd,KACA,KACA,KAEA,sBACA,mBACgB,IAAhB,eACkB,IAAlB,UACkB,GAAlB,SACA,wBAAsB,OAAtB,eACoB,GAApB,YACA,wHACA,qBAC0BkD,EAA1BA,kDAC0B,IAA1B,uBAC0BC,EAA1BA,sBAoCc,IAAd,YACA,wBAEcC,EAAdA,MACgB,KAAhB,UACgB,WAAhB,CACkB,KAAlB,EACkB,GAAlB,IACkB,OAAlB,GAEgB,SAAhB,CACkB,KAAlB,qBACkB,WAAlB,EACoB,KAApB,aACoB,YAApB,OAWYnC,EAAZA,qFAIcoC,wBAAdA,gBACgB,IAAhB,2BACgB,GAAhB,YACkB,OAAlB,EAGgB,IADA,IAAhB,KACA,wBACkB,IAAlB,QACA,2CACoBC,EAApBA,sBAEkBC,EAAlBA,QAGgB,OAAhB,iBACA,KAEA,KAKYtC,EAAZA,6DACc,OAAd,2DAyCY,IAAZ,GACc,KAAd,oBACc,SAAd,GAoIYuC,QAAZA,OACA,wBAAY,IACZ,IAGYjE,EAAZA,aACckE,aAAdA,cAGgB,IAAhB,sBAGA,GAFA,gBAEA,GACA,yBAEA,WAIA,IAEgB,GAAhB,KAUkB,IAAlB,OAEA,2CAEsBC,EADtB,qCACAA,EACA,wCACAA,EACA,wCACAA,EACA,yCACAA,EACA,0CACAA,EAEAA,GAUkBC,IACA,IAAlB,MACA,iBAEkBA,EAAlBA,EAGgB,OAAhB,4BAAkB3B,KAAlBA,OAiBY,IAAZ,sDACc4B,qBAAdA,EACcC,wBAAdA,UAEcC,SAAdA,SAGYC,EAAZA,qBACYA,EAAZA,kBAMQ5D,MAARA,KAIE6D,QAAFA,CACIC,WAAJA,YACM,OAAN,uB","file":"js/chunk-74d77208.020d79ff.js","sourcesContent":["module.exports = __webpack_public_path__ + \"img/icon_location_gray.30b7f43b.svg\";","// Components\nimport VInput from '../VInput/VInput'\n\n// Mixins\nimport mixins from '../../util/mixins'\nimport BindsAttrs from '../../mixins/binds-attrs'\nimport { provide as RegistrableProvide } from '../../mixins/registrable'\n\n// Helpers\nimport { VNode } from 'vue'\n\ntype ErrorBag = Record<number, boolean>\ntype VInputInstance = InstanceType<typeof VInput>\ntype Watchers = {\n  _uid: number\n  valid: () => void\n  shouldValidate: () => void\n}\n\n/* @vue/component */\nexport default mixins(\n  BindsAttrs,\n  RegistrableProvide('form')\n  /* @vue/component */\n).extend({\n  name: 'v-form',\n\n  provide (): object {\n    return { form: this }\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    disabled: Boolean,\n    lazyValidation: Boolean,\n    readonly: Boolean,\n    value: Boolean,\n  },\n\n  data: () => ({\n    inputs: [] as VInputInstance[],\n    watchers: [] as Watchers[],\n    errorBag: {} as ErrorBag,\n  }),\n\n  watch: {\n    errorBag: {\n      handler (val) {\n        const errors = Object.values(val).includes(true)\n\n        this.$emit('input', !errors)\n      },\n      deep: true,\n      immediate: true,\n    },\n  },\n\n  methods: {\n    watchInput (input: any): Watchers {\n      const watcher = (input: any): (() => void) => {\n        return input.$watch('hasError', (val: boolean) => {\n          this.$set(this.errorBag, input._uid, val)\n        }, { immediate: true })\n      }\n\n      const watchers: Watchers = {\n        _uid: input._uid,\n        valid: () => {},\n        shouldValidate: () => {},\n      }\n\n      if (this.lazyValidation) {\n        // Only start watching inputs if we need to\n        watchers.shouldValidate = input.$watch('shouldValidate', (val: boolean) => {\n          if (!val) return\n\n          // Only watch if we're not already doing it\n          if (this.errorBag.hasOwnProperty(input._uid)) return\n\n          watchers.valid = watcher(input)\n        })\n      } else {\n        watchers.valid = watcher(input)\n      }\n\n      return watchers\n    },\n    /** @public */\n    validate (): boolean {\n      return this.inputs.filter(input => !input.validate(true)).length === 0\n    },\n    /** @public */\n    reset (): void {\n      this.inputs.forEach(input => input.reset())\n      this.resetErrorBag()\n    },\n    resetErrorBag () {\n      if (this.lazyValidation) {\n        // Account for timeout in validatable\n        setTimeout(() => {\n          this.errorBag = {}\n        }, 0)\n      }\n    },\n    /** @public */\n    resetValidation () {\n      this.inputs.forEach(input => input.resetValidation())\n      this.resetErrorBag()\n    },\n    register (input: VInputInstance) {\n      this.inputs.push(input)\n      this.watchers.push(this.watchInput(input))\n    },\n    unregister (input: VInputInstance) {\n      const found = this.inputs.find(i => i._uid === input._uid)\n\n      if (!found) return\n\n      const unwatch = this.watchers.find(i => i._uid === found._uid)\n      if (unwatch) {\n        unwatch.valid()\n        unwatch.shouldValidate()\n      }\n\n      this.watchers = this.watchers.filter(i => i._uid !== found._uid)\n      this.inputs = this.inputs.filter(i => i._uid !== found._uid)\n      this.$delete(this.errorBag, found._uid)\n    },\n  },\n\n  render (h): VNode {\n    return h('form', {\n      staticClass: 'v-form',\n      attrs: {\n        novalidate: true,\n        ...this.attrs$,\n      },\n      on: {\n        submit: (e: Event) => this.$emit('submit', e),\n      },\n    }, this.$slots.default)\n  },\n})\n","module.exports = __webpack_public_path__ + \"img/icon_cusepa_orange.66aa6d14.svg\";","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"normal-card  small-input-height bg-contcolor\"},[_c('div',{staticClass:\"filter-area mb-md-5 mb-3\"},[_c('div',{staticClass:\"filter-box\"},[_c('v-form',{staticClass:\"multi-col-validation\"},[_c('div',{staticClass:\"d-flex justify-md-space-between align-end flex-md-nowrap flex-wrap\"},[_c('div',{staticClass:\"flex-item\"},[_c('div',{staticClass:\"d-flex align-end flex-md-nowrap flex-wrap\"},[_c('div',{staticClass:\"form-group\"},[_c('label',{staticClass:\"form-label\"},[_vm._v(\"時間\")]),_c('div',{staticClass:\"form-fill align-end d-flex\"},[_c('date-range-picker',{ref:\"picker\",staticClass:\"form-control\",attrs:{\"opens\":\"right\",\"locale-data\":{ firstDay: 1, format: 'dd-mm-yyyy HH:mm:ss',cancelLabel:'取消',applyLabel:'確認' },\"timePicker\":true,\"timePicker24Hour\":true,\"showWeekNumbers\":false,\"showDropdowns\":false,\"autoApply\":false,\"ranges\":false},scopedSlots:_vm._u([{key:\"input\",fn:function(picker){return [_vm._v(\" \"+_vm._s(_vm._f(\"dateFormat\")(picker.startDate))+\" - \"+_vm._s(_vm._f(\"dateFormat\")(picker.endDate))+\" \")]}}]),model:{value:(_vm.dateRange),callback:function ($$v) {_vm.dateRange=$$v},expression:\"dateRange\"}})],1)]),_c('v-btn',{staticClass:\"ml-sm-5 mt-md-0 mt-0 mb-md-0 mb-5 w-sm-auto w-full st\",attrs:{\"color\":\"primary\"},on:{\"click\":function($event){return _vm.searchTimes()}}},[_vm._v(\"查詢\")])],1)])])])],1)]),_vm._m(0)])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"map-area\"},[_c('div',{staticClass:\"map-box\"},[_c('div',{staticClass:\"leaflet-area pos-relative full-height\"},[_c('div',{attrs:{\"id\":\"leafletmap\"}})])])])}]\n\nexport { render, staticRenderFns }","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./History.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./History.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./History.vue?vue&type=template&id=6f72be04&\"\nimport script from \"./History.vue?vue&type=script&lang=js&\"\nexport * from \"./History.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VForm } from 'vuetify/lib/components/VForm';\ninstallComponents(component, {VBtn,VForm})\n","<template>\r\n    <div>\r\n        \r\n        <div class=\"normal-card  small-input-height bg-contcolor\">\r\n            <div class=\"filter-area mb-md-5 mb-3\">\r\n                <div class=\"filter-box\">\r\n                    <v-form class=\"multi-col-validation\">\r\n                        <div class=\"d-flex justify-md-space-between align-end flex-md-nowrap flex-wrap\">\r\n                            <div class=\"flex-item\">\r\n                                <div class=\"d-flex align-end flex-md-nowrap flex-wrap\">\r\n                                    <!--<div class=\"datetimepicker input-outlined\">\r\n                                        <v-datetime-picker label=\"起始日期\" v-model=\"datetime1\" outlined dense>\r\n                                            <template slot=\"dateIcon\">\r\n                                                <v-icon>{{ icons.mdiCalendar }}</v-icon>\r\n                                            </template>\r\n                                            <template slot=\"timeIcon\">\r\n                                                <v-icon>{{ icons.mdiClockTimeNineOutline }}</v-icon>\r\n                                            </template>\r\n                                        </v-datetime-picker>\r\n                                    </div>\r\n                                    <div class=\"datetimepicker input-outlined ms-5\">\r\n                                        <v-datetime-picker label=\"結束日期\" v-model=\"datetime2\" outlined dense>\r\n                                            <template slot=\"dateIcon\">\r\n                                                <v-icon>{{ icons.mdiCalendar }}</v-icon>\r\n                                            </template>\r\n                                            <template slot=\"timeIcon\">\r\n                                                <v-icon>{{ icons.mdiClockTimeNineOutline }}</v-icon>\r\n                                            </template>\r\n                                        </v-datetime-picker>\r\n                                    </div>-->\r\n                                    <div class=\"form-group\">\r\n                                        <label class=\"form-label\">時間</label>\r\n                                        <div class=\"form-fill align-end d-flex\">\r\n                                            <date-range-picker\r\n                                                opens=\"right\"\r\n                                                ref=\"picker\"\r\n                                                :locale-data=\"{ firstDay: 1, format: 'dd-mm-yyyy HH:mm:ss',cancelLabel:'取消',applyLabel:'確認' }\"\r\n                                                :timePicker=\"true\"\r\n                                                :timePicker24Hour=\"true\"\r\n                                                :showWeekNumbers=\"false\"\r\n                                                :showDropdowns=\"false\"\r\n                                                :autoApply=\"false\"\r\n                                                :ranges=\"false\"\r\n                                                v-model=\"dateRange\"\r\n                                                class=\"form-control\"\r\n                                            >\r\n                                            <template v-slot:input=\"picker\" class=\"\">\r\n                                                    {{ picker.startDate | dateFormat }} - {{ picker.endDate | dateFormat }}\r\n                                                </template>\r\n                                            </date-range-picker>\r\n                                        </div>\r\n                                    </div>\r\n                                    <v-btn class=\"ml-sm-5 mt-md-0 mt-0 mb-md-0 mb-5 w-sm-auto w-full st\" color=\"primary\" @click=\"searchTimes()\">查詢</v-btn>\r\n                                </div>\r\n                            </div>\r\n                            \r\n                        </div>\r\n                        \r\n                    </v-form>\r\n                </div>\r\n            </div>\r\n            <div class=\"map-area\">\r\n                <div class=\"map-box\">\r\n                    <div class=\"leaflet-area pos-relative full-height\">\r\n                        <div id=\"leafletmap\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport { mdiCalendar,mdiClockTimeNineOutline } from '@mdi/js';\r\nimport locationIcon from '@/assets/images/all/icon_location.svg';\r\nimport locationIcon_red from '@/assets/images/all/icon_location_red.svg';\r\nimport locationIcon_yellow from '@/assets/images/all/icon_location_yellow.svg';\r\nimport locationIcon_orange from '@/assets/images/all/icon_location_orange.svg';\r\nimport locationIcon_purple from '@/assets/images/all/icon_location_purple.svg';\r\nimport locationIcon_darkred from '@/assets/images/all/icon_location_darkred.svg';\r\nimport locationIcon_epa from '@/assets/images/all/icon_location_epa.svg';\r\nimport locationIcon_cusepa_orange from '@/assets/images/all/icon_cusepa_orange.svg';\r\nimport locationIcon_gray from '@/assets/images/all/icon_location_gray.svg';\r\nimport axios from 'axios';\r\nimport config from '@/config.js';\r\n\r\nimport DateRangePicker from 'vue2-daterange-picker';\r\nimport 'vue2-daterange-picker/dist/vue2-daterange-picker.css';\r\n\r\nvar dataArry=[];\r\nvar map;\r\nvar marker_basic;\r\nvar markerlayerGroup;\r\nvar markerlayerClusterGroup;\r\nvar markers_pos =[];\r\nvar LeafIcon;\r\nvar greenIcon,redIcon,yellowIcon,orangeIcon,purpleIcon,darkredIcon,grayIcon,epaIcon,cusepaIcon_orange;\r\nvar pm25Heat=[],tvocHeat=[];\r\nvar default_latlon;\r\nvar geoJsonLayer=null;\r\n\r\nexport default{\r\n    components: {\r\n        mdiCalendar,\r\n        mdiClockTimeNineOutline,\r\n        DateRangePicker\r\n    },\r\n    name: 'History',\r\n    data: () => ({\r\n        icons: {\r\n            mdiCalendar,\r\n            mdiClockTimeNineOutline\r\n        },\r\n        datetime1:\"\",\r\n        datetime2:\"\",\r\n        dateRange: {\r\n          startDate: null,\r\n          endDate: null,\r\n        },\r\n    }),\r\n    created(){\r\n        let nav_arry_str=[];\r\n        //檢查會員權限\r\n        const apiurl_authMem = config.geturl(config.API.exeAuthMem,{});\r\n        const memlogin_url = config.geturl(config.API.memLogin,{});\r\n        axios.get(apiurl_authMem).then(response => {\r\n            //console.log(response.data);\r\n            if(response.data.isOk){\r\n                let nav_str_ay = response.data.log.split(',');\r\n                nav_str_ay.forEach(function(item){\r\n                    nav_arry_str.push(parseInt(item));\r\n                });\r\n                if(!nav_arry_str.includes(4)){\r\n                    alert(\"您沒有該頁權限，請重新登入\");\r\n                    location.href=memlogin_url;\r\n                }\r\n            }else{\r\n                alert(\"您沒有該頁權限，請重新登入\");\r\n                location.href=memlogin_url;\r\n            }\r\n        });\r\n    },\r\n    mounted(){\r\n        $(function() {\r\n            $(\".nav_mainTitle\").text(\"重播\");\r\n        });\r\n        var self = this;\r\n\r\n        //日期範圍預設現在、3小時前\r\n        let today_def = new Date();\r\n        //console.log(formatDatetime(today_def));\r\n        let default_t2 = new Date(today_def.getTime() - 3 * 60 * 60 * 1000);\r\n        this.dateRange.startDate = formatDatetime2(default_t2);\r\n        this.dateRange.endDate = formatDatetime2(today_def);\r\n\r\n        //地圖\r\n        const apiurl=config.geturl(config.API.infostation,{});\r\n        axios.get(apiurl).then(response => {\r\n            var overLatlng;\r\n            var overRadius=200;\r\n            \r\n            map = L.map('leafletmap',{\r\n                timeDimensionControl: true,\r\n                timeDimensionControlOptions: {\r\n                    loopButton: true,\r\n                },\r\n                timeDimension: true\r\n            }).fitWorld();\r\n            map.locate({setView: true, maxZoom: 16});\r\n            map.on('locationfound', function(e){\r\n                var radius = e.accuracy;\r\n                overLatlng = e.latlng;\r\n                overRadius = radius;\r\n                default_latlon = overLatlng;\r\n            });\r\n            //全螢幕\r\n            map.addControl(new L.Control.Fullscreen());\r\n            \r\n            \r\n\r\n            \r\n            markerlayerGroup = L.layerGroup().addTo(map);\r\n            var windcwblayerGroup = L.layerGroup().addTo(map);\r\n\r\n\r\n\r\n            //圖層\r\n            var baselayers = {\r\n            '街景': L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),\r\n            '地景圖': L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')\r\n            };\r\n            //複選圖層\r\n            var overlays = {\r\n                '氣象站':windcwblayerGroup,\r\n                '微型感測器':markerlayerGroup,\r\n            };\r\n            L.control.layers(baselayers, overlays).addTo(map);\r\n            baselayers['街景'].addTo(map);\r\n\r\n\r\n            LeafIcon = L.Icon.extend({\r\n                options: {\r\n                    iconSize: [15, 15],\r\n                iconAnchor: [0, 0],\r\n                popupAnchor: [0, 0]\r\n                }\r\n            });\r\n\r\n            greenIcon = new LeafIcon({iconUrl: locationIcon});\r\n                redIcon = new LeafIcon({iconUrl: locationIcon_red});\r\n                yellowIcon = new LeafIcon({iconUrl: locationIcon_yellow});\r\n                orangeIcon = new LeafIcon({iconUrl: locationIcon_orange});\r\n                purpleIcon = new LeafIcon({iconUrl: locationIcon_purple});\r\n                darkredIcon = new LeafIcon({iconUrl: locationIcon_darkred});\r\n                grayIcon = new LeafIcon({iconUrl: locationIcon_gray});\r\n                epaIcon = new LeafIcon({iconUrl: locationIcon_epa});\r\n                cusepaIcon_orange = new LeafIcon({iconUrl: locationIcon_cusepa_orange});\r\n\r\n            L.icon = function (options) {\r\n                return new L.Icon(options);\r\n            };\r\n\r\n            //全部出現\r\n        \r\n            dataArry=response.data;\r\n\r\n            //一開始就出現所有點\r\n            var i = 0,currTime=\"\";\r\n            $.each(dataArry, function() {\r\n                var iconType=grayIcon;\r\n                    /*if(dataArry[i].pm25 !== \"\" && dataArry[i].pm25 !== null && typeof(dataArry[i].pm25) !== \"undefined\"){\r\n                        if(parseFloat(dataArry[i].pm25) <= 15.4){\r\n                            iconType=greenIcon;\r\n                        }else if(parseFloat(dataArry[i].pm25) > 15.4 && parseFloat(dataArry[i].pm25) <= 35.4){\r\n                            iconType=yellowIcon;\r\n                        }else if(parseFloat(dataArry[i].pm25) > 35.4 && parseFloat(dataArry[i].pm25) <= 54.4){\r\n                            iconType=orangeIcon;\r\n                        }else if(parseFloat(dataArry[i].pm25) > 54.4 && parseFloat(dataArry[i].pm25) <= 150.4){\r\n                            iconType=redIcon;\r\n                        }else if(parseFloat(dataArry[i].pm25) > 150.4 && parseFloat(dataArry[i].pm25) <= 250.4){\r\n                            iconType=purpleIcon;\r\n                        }else{\r\n                            iconType=darkredIcon;\r\n                        }\r\n                    }*/\r\n\r\n                    if(dataArry[i].lat !== \"\" && dataArry[i].lat !== null && typeof(dataArry[i].lat) !== \"undefined\" && dataArry[i].lon !== \"\" && dataArry[i].lon !== null && typeof(dataArry[i].lon) !== \"undefined\"){\r\n                        marker_basic = L.marker([dataArry[i].lat,dataArry[i].lon], {icon: iconType,title:dataArry[i].id}).addTo(markerlayerGroup);\r\n                    }\r\n\r\n                    /*var mp_co=(dataArry[i].co !== null)?dataArry[i].co:\"0\";\r\n                    var mp_co2=(dataArry[i].co2 !== null)?dataArry[i].co2:\"0\";\r\n                    var mp_no2 =(dataArry[i].no2 !== null)?dataArry[i].no2:\"0\";\r\n                    var mp_o3 =(dataArry[i].o3 !== null)?dataArry[i].o3:\"0\";\r\n                    var mp_hum=(dataArry[i].hum !== null)?dataArry[i].hum:\"0\";\r\n                    var mp_nh3 =(dataArry[i].nh3 !== null)?dataArry[i].nh3:\"0\";\r\n                    var mp_h2s =(dataArry[i].h2s !== null)?dataArry[i].h2s:\"0\";*/\r\n\r\n                    marker_basic.bindPopup(\"<div class='lc-title'>感測器：\" + dataArry[i].device + \"</div>\");\r\n                    \r\n                    marker_basic.on('mouseover',function(ev) {\r\n                        ev.target.openPopup();\r\n                    });\r\n\r\n                    markers_pos.push(marker_basic);\r\n                    markerlayerGroup.addLayer(marker_basic);\r\n\r\n                i++;\r\n\r\n            });\r\n\r\n            //氣象站\r\n            const apiurl_cwbwind=config.geturl(config.API.cwbstation,{});\r\n            axios.get(apiurl_cwbwind).then(response => {\r\n                if(response.data !== \"\" && response.data.length > 0){\r\n\r\n                    var cwbWindData = response.data;\r\n                    $.each(cwbWindData,function(index,cw_item){\r\n                        var wind_d=0;\r\n                        var wind_s = 0;\r\n                        var pos_lat = cw_item.lat;\r\n                        var pos_lon = cw_item.lon;\r\n                        var Micon = L.WindBarb.icon({deg: wind_d, wind_s,pointRadius: 4, strokeLength: 10,fillColor:\"#2b85c7\",strokeWidth:1});\r\n                            var windbab_marker = L.marker([parseFloat(pos_lat),parseFloat(pos_lon)], {icon: Micon});\r\n                            windbab_marker.bindPopup(\"<div class='lc-title'>感測器：\" + cw_item.name + \"</div>\")\r\n                            windbab_marker.on('mouseover',function(ev) {\r\n                                ev.target.openPopup();\r\n                            });\r\n                        windcwblayerGroup.addLayer(windbab_marker);\r\n\r\n                    });\r\n\r\n                }\r\n            })\r\n\r\n        })\r\n\r\n    },\r\n    computed:{\r\n        myDates() {\r\n            //如果dates沒有值或dates長度是0就回傳空字串\r\n            if (!this.dates || this.dates.length === 0) {\r\n            return \"\";\r\n            }\r\n            let str;\r\n            //取得第1個日期的年月日\r\n            const [year1, month1, day1] = this.dates[0].split(\"-\");\r\n            //自訂格式\"年/月/日\"\r\n            str = `${year1}/${month1}/${day1}`;\r\n            //如果有第2個日期就做這個if\r\n            if (this.dates.length > 1) {\r\n            //取得第2個日期的年月日\r\n            const [year2, month2, day2] = this.dates[1].split(\"-\");\r\n            //自訂格式\"年/月/日\"\r\n            let str2 = `${year2}/${month2}/${day2}`;\r\n            //判斷日期1跟日期2的大小來決定字串擺放順序\r\n            if (this.dates[0] > this.dates[1]) {\r\n                str = `${str2} ~ ${str}`;\r\n            } else if (this.dates[1] > this.dates[0]) {\r\n                str += ` ~ ${str2}`;\r\n            }\r\n            }\r\n            //回傳最後的字串\r\n            return str;\r\n        },\r\n    },\r\n    methods:{\r\n        searchTimes(){\r\n            //先清掉所有 layer\r\n            map.removeLayer(markerlayerGroup);\r\n            if(geoJsonLayer != null){\r\n                map.removeLayer(geoJsonLayer);\r\n                geoJsonLayer.clearLayers();\r\n                geoJsonLayer=null;\r\n            } \r\n\r\n            /*if(map != null){\r\n                map.eachLayer(function (layer) {\r\n                    map.removeLayer(layer);\r\n                });\r\n            }*/\r\n            //重播效果\r\n            var self = this;\r\n\r\n            var success=false;\r\n            let ala_msg=\"\";\r\n            if(this.dateRange.startDate != null && this.dateRange.startDate != \"\" && this.dateRange.endDate != null && this.dateRange.endDate != \"\"){\r\n                var date1 = new Date(this.dateRange.startDate);\r\n                var date2 = new Date(this.dateRange.endDate);\r\n                \r\n                if(date1 < date2){\r\n                    var timespan_diff = parseInt(date2 - date1)/1000/60/60; //時間差:小時數\r\n                    if(timespan_diff <= 3){\r\n                        success=true;\r\n                    }\r\n                    else{\r\n                        ala_msg = \"選取時間不能超過 3 小時\";\r\n                    }\r\n                }else{\r\n                    ala_msg = \"結束時間不能小於開始時間\";\r\n                }\r\n            }\r\n\r\n        if(success){\r\n\r\n\r\n            //所有station\r\n            const api_station_url=config.geturl(config.API.infostation,{});\r\n            axios.get(api_station_url).then(response => {\r\n                dataArry = response.data;\r\n            });\r\n\r\n\r\n            var sTime = new Date(this.dateRange.startDate);\r\n            var eTime = new Date(this.dateRange.endDate);\r\n            var s_time = sTime.getFullYear() + '-' + (sTime.getMonth() + 1) + '-' + sTime.getDate() + ' ' + sTime.getHours() + ':' + sTime.getMinutes() + ':00';\r\n            var e_time = eTime.getFullYear() + '-' + (eTime.getMonth() + 1) + '-' + eTime.getDate() + ' ' + eTime.getHours() + ':' + eTime.getMinutes() + ':00';\r\n\r\n            //地圖(重播)\r\n            const apiurl=config.geturl(config.API.env_allsta_records,{stime:s_time,etime:e_time});\r\n            axios.get(apiurl).then(response => {\r\n                var arry=response.data;\r\n                var new_arry=[];\r\n                if(arry !== \"\" && arry.length > 0){\r\n\r\n                    \r\n                    for (var i = 0; i < arry.length; i++) {\r\n                        //先存值\r\n                        var val_arry=[];\r\n                        var station_arry=[];\r\n                        var latlon_arry=[];\r\n\r\n                        let staval = arry[i][\"staval_list\"];\r\n                        for(let a = 0;a < staval.length;a++){\r\n                            for (var idx_Key2 in staval[a]){\r\n                                let val = staval[a][idx_Key2];\r\n                                    if(val != null){\r\n                                        var station_arry=dataArry.filter(item => item.device ==idx_Key2);\r\n                                        if(station_arry.length > 0){\r\n                                            if(station_arry[0].lon != null && station_arry[0].lon != \"\" && typeof(station_arry[0].lon) != \"undefined\" &&station_arry[0].lat != null && station_arry[0].lat != \"\" && typeof(station_arry[0].lat) != \"undefined\"){\r\n                                                if(val != null && val !=\"\" && val > 0){\r\n                                                    latlon_arry.push([parseFloat(station_arry[0].lon),parseFloat(station_arry[0].lat)]);\r\n                                                    let staVal = (val != null && val !=\"\")?val:\"0\";\r\n                                                    val_arry.push(parseFloat(staVal));\r\n                                                }\r\n                                                \r\n                                                \r\n                                            }\r\n                                            \r\n                                            //station_arry.push(idx_Key2);    \r\n                                        }\r\n                                    }\r\n                            }\r\n                        }\r\n                        /*for (var idx_Key in arry[i]) {\r\n                            if(idx_Key != \"date\"){\r\n                                let staval = arry[i][idx_Key];\r\n                                //for(let a = 0;a<staval.length;a++){\r\n                                    for (var idx_Key2 in staval[i]){\r\n                                        var val = staval[i][idx_Key2];\r\n                                        if(val != null){\r\n                                            var station_arry=dataArry.filter(item => item.device ==idx_Key2);\r\n                                            if(station_arry.length > 0){\r\n                                                if(station_arry[0].lon != null && station_arry[0].lon != \"\" && typeof(station_arry[0].lon) != \"undefined\" &&station_arry[0].lat != null && station_arry[0].lat != \"\" && typeof(station_arry[0].lat) != \"undefined\"){\r\n                                                    latlon_arry.push([parseFloat(station_arry[0].lon),parseFloat(station_arry[0].lat)]);\r\n                                                    let staVal = (val != null && val !=\"\")?val:\"0\";\r\n                                                    val_arry.push(parseFloat(staVal));\r\n                                                }\r\n                                                \r\n                                                //station_arry.push(idx_Key2);    \r\n                                            }\r\n                                        }\r\n                                    }\r\n                                //}\r\n                                \r\n                                \r\n                            }\r\n                        }*/\r\n\r\n                        var time=arry[i].date;\r\n                        var getTime = new Date(time).getTime();\r\n\r\n                        new_arry.push({\r\n                                \"type\": \"Feature\",\r\n                                \"properties\": {\r\n                                \"time\": getTime,\r\n                                \"id\": (i+1),\r\n                                \"values\":val_arry\r\n                                },\r\n                                \"geometry\": {\r\n                                \"type\": \"GeometryCollection\",\r\n                                \"geometries\": [{\r\n                                    \"type\": \"MultiPoint\",\r\n                                    \"coordinates\": latlon_arry\r\n                                }, ]\r\n                                }\r\n\r\n                        });\r\n\r\n\r\n                    }\r\n\r\n                    /*var overLatlng;\r\n                    var overRadius=200;*/\r\n                    L.TimeDimension.Layer.GeoJson.GeometryCollection = L.TimeDimension.Layer.GeoJson.extend({\r\n\r\n                        // Do not modify features. Just return the feature if it intersects\r\n                        // the time interval    \r\n                        _getFeatureBetweenDates: function(feature, minTime, maxTime) {\r\n                            var featureStringTimes = this._getFeatureTimes(feature);\r\n                            if (featureStringTimes.length == 0) {\r\n                                return feature;\r\n                            }\r\n                            var featureTimes = [];\r\n                            for (var i = 0, l = featureStringTimes.length; i < l; i++) {\r\n                                var time = featureStringTimes[i]\r\n                                if (typeof time == 'string' || time instanceof String) {\r\n                                    time = Date.parse(time.trim());\r\n                                }\r\n                                featureTimes.push(time);\r\n                            }\r\n\r\n                            if (featureTimes[0] > maxTime || featureTimes[l - 1] < minTime) {\r\n                                return null;\r\n                            }\r\n                            return feature;\r\n                        },\r\n\r\n                    });\r\n\r\n                    L.timeDimension.layer.geoJson.geometryCollection = function(layer, options) {\r\n                        return new L.TimeDimension.Layer.GeoJson.GeometryCollection(layer, options);\r\n                    };\r\n\r\n\r\n                    /*var map = L.map('leafletmap', {\r\n                        zoom: 8,\r\n                        fullscreenControl: true,\r\n                        timeDimensionControl: true,\r\n                        timeDimensionControlOptions: {\r\n                            loopButton: true,\r\n                        },\r\n                        timeDimension: true\r\n                    }).fitWorld();\r\n                    map.on('locationfound', function(e){\r\n                        var radius = e.accuracy;\r\n                        overLatlng = e.latlng;\r\n                        overRadius = radius;\r\n                        default_latlon = overLatlng;\r\n                    });\r\n                    //全螢幕\r\n                    map.addControl(new L.Control.Fullscreen());\r\n                    markerlayerGroup = L.layerGroup().addTo(map);\r\n                    var windcwblayerGroup = L.layerGroup().addTo(map);\r\n                    //圖層\r\n                    var baselayers = {\r\n                    '街景': L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),\r\n                    '地景圖': L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')\r\n                    };\r\n                    //複選圖層\r\n                    var overlays = {\r\n                        '氣象站':windcwblayerGroup,\r\n                        '微型感測器':markerlayerGroup,\r\n                    };\r\n                    L.control.layers(baselayers, overlays).addTo(map);\r\n                    baselayers['街景'].addTo(map);*/\r\n\r\n\r\n                    //var baseLayers = getCommonBaseLayers(map); // see baselayers.js\r\n                    //L.control.layers(baseLayers, {}).addTo(map);\r\n\r\n\r\n                    var geoJsonFeatures = {\r\n                    \"type\": \"FeatureCollection\",\r\n                    \"features\":new_arry\r\n                    };\r\n\r\n                    //console.log(geoJsonFeatures);\r\n                    /*var geoJsonFeatures = {\r\n                    \"type\": \"FeatureCollection\",\r\n                    \"features\": [{\r\n                        \"type\": \"Feature\",\r\n                        \"properties\": {\r\n                        \"time\": 1330391600000,\r\n                        \"id\": 1,\r\n                        \"values\":[13.18,0,0,22]\r\n                        },\r\n                        \"geometry\": {\r\n                        \"type\": \"GeometryCollection\",\r\n                        \"geometries\": [{\r\n                            \"type\": \"MultiPoint\",\r\n                            \"coordinates\": [\r\n                            [1.8003, 38.9580],\r\n                            [1.7968, 38.9498],\r\n                            [1.7648, 38.9737],\r\n                            [1.7681, 38.9814]\r\n                            ]\r\n                        }, ]\r\n                        }\r\n                    }, {\r\n                        \"type\": \"Feature\",\r\n                        \"properties\": {\r\n                        \"time\": 1430393200000,\r\n                        \"id\": 2,\r\n                        \"values\":[88,50,0]\r\n                        },\r\n                        \"geometry\": {\r\n                        \"type\": \"GeometryCollection\",\r\n                        \"geometries\": [{\r\n                            \"type\": \"MultiPoint\",\r\n                            \"coordinates\": [\r\n                            [1.7003, 39.9580],\r\n                            [1.6968, 40.9498],\r\n                            [1.7681, 41.9814]\r\n                            ]\r\n                        }, ]\r\n                        }\r\n                    }\r\n                    , {\r\n                        \"type\": \"Feature\",\r\n                        \"properties\": {\r\n                        \"time\": nowTime,\r\n                        \"id\": 3,\r\n                        \"values\":[88,50,0,0,50,0,0,0]\r\n                        },\r\n                        \"geometry\": {\r\n                        \"type\": \"GeometryCollection\",\r\n                        \"geometries\": [{\r\n                            \"type\": \"MultiPoint\",\r\n                            \"coordinates\": [\r\n                            [1.6003, 38.9580],\r\n                            [1.5968, 38.9498],\r\n                            [1.5648, 38.9737],\r\n                            [1.5681, 38.9814],\r\n                            [1.7003, 38.9580],\r\n                            [1.6968, 38.9498],\r\n                            [1.6648, 38.9737],\r\n                            [1.6681, 38.9814]\r\n                            ]\r\n                        }, ]\r\n                        }\r\n                    }]\r\n                    };*/\r\n\r\n                    /*LeafIcon = L.Icon.extend({\r\n                        options: {\r\n                            iconSize: [30, 30],\r\n                        iconAnchor: [0, 0],\r\n                        popupAnchor: [0, 0]\r\n                        }\r\n                    });*/\r\n/*\r\n                    greenIcon = new LeafIcon({iconUrl: locationIcon});\r\n                        redIcon = new LeafIcon({iconUrl: locationIcon_red});\r\n                        yellowIcon = new LeafIcon({iconUrl: locationIcon_yellow});\r\n                        orangeIcon = new LeafIcon({iconUrl: locationIcon_orange});\r\n                        purpleIcon = new LeafIcon({iconUrl: locationIcon_purple});\r\n                        darkredIcon = new LeafIcon({iconUrl: locationIcon_darkred});\r\n                        grayIcon = new LeafIcon({iconUrl: locationIcon_gray});\r\n                        epaIcon = new LeafIcon({iconUrl: locationIcon_epa});\r\n                        cusepaIcon_orange = new LeafIcon({iconUrl: locationIcon_cusepa_orange});\r\n*/\r\n                    // L.icon = function (options) {\r\n                    //     return new L.Icon(options);\r\n                    // };\r\n\r\n\r\n                    /*var geoJsonLayer = L.geoJSON(geoJsonFeatures);\r\n                    geoJsonLayer.eachLayer(function(layer) {\r\n                        \r\n                        var res_val = layer.feature.properties.values;\r\n                        var all_markers=layer.feature.geometry.geometries[0].coordinates;\r\n                        for(var i=0;i<res_val.length;i++){\r\n                            var val = res_val[i];\r\n                            var iconType=grayIcon;\r\n                            if(val !== \"\" && val !== null && typeof(val) !== \"undefined\"){\r\n                                if(parseFloat(val) <= 15.4){\r\n                                    iconType=greenIcon;\r\n                                }else if(parseFloat(val) > 15.4 && parseFloat(val) <= 35.4){\r\n                                    iconType=yellowIcon;\r\n                                }else if(parseFloat(val) > 35.4 && parseFloat(val) <= 54.4){\r\n                                    iconType=orangeIcon;\r\n                                }else if(parseFloat(val) > 54.4 && parseFloat(val) <= 150.4){\r\n                                    iconType=redIcon;\r\n                                }else if(parseFloat(val) > 150.4 && parseFloat(val) <= 250.4){\r\n                                    iconType=purpleIcon;\r\n                                }else{\r\n                                    iconType=darkredIcon;\r\n                                }\r\n                            }\r\n                            for(var j=0;j<all_markers.length;j++){\r\n                                if(i==j){\r\n                                    var pos_lat=all_markers[i][0];\r\n                                    var pos_lon=all_markers[i][1];\r\n                                    marker_basic = L.marker([pos_lat, pos_lon], {\r\n                                        icon: iconType\r\n                                    });\r\n                                    markerlayerGroup.addLayer(marker_basic);\r\n                                }\r\n                            }\r\n                        }\r\n                        \r\n                        \r\n                    });*/\r\n\r\n\r\n                    console.log(geoJsonFeatures);\r\n                    let layers = L.layerGroup().addTo(map);\r\n                    let coords_ini=0;\r\n                    var ori_id=[];\r\n                    var chkSame=false;\r\n                    geoJsonLayer = L.geoJson(geoJsonFeatures, {\r\n                        pointToLayer: function (feature, latlng) {\r\n\r\n\r\n                            var res_val = feature.properties.values;\r\n                            var res_id = feature.properties.id;\r\n                           \r\n                            var iconType=grayIcon;\r\n                            var coords = feature.geometry.coordinates;\r\n                            \r\n                            var coords_length=coords.length;\r\n\r\n\r\n\r\n                            let count_corini = coords_ini;\r\n                            \r\n                            if(coords_ini < coords_length){\r\n                                //console.log(res_id + \" : \" + coords_length + \" // \" + res_val[coords_ini]);\r\n                                // if(res_id == 23){\r\n                                //     console.log(res_id + \" : \" + coords_length + \" // \" + res_val[coords_ini]);\r\n                                //     console.log(res_id + \" : \" + coords_length);\r\n                                // }\r\n                                //console.log(res_id + \" : \" + coords_length);\r\n\r\n\r\n\r\n                                let val = res_val[coords_ini];\r\n                                    \r\n                                if(val !== \"\" && val !== null && typeof(val) !== \"undefined\"){\r\n                                    if(parseFloat(val) > 0 && parseFloat(val) <= 15.4){\r\n                                        iconType=greenIcon;\r\n                                    }else if(parseFloat(val) > 15.4 && parseFloat(val) <= 35.4){\r\n                                        iconType=yellowIcon;\r\n                                    }else if(parseFloat(val) > 35.4 && parseFloat(val) <= 54.4){\r\n                                        iconType=orangeIcon;\r\n                                    }else if(parseFloat(val) > 54.4 && parseFloat(val) <= 150.4){\r\n                                        iconType=redIcon;\r\n                                    }else if(parseFloat(val) > 150.4 && parseFloat(val) <= 250.4){\r\n                                        iconType=purpleIcon;\r\n                                    }else{\r\n                                        iconType=darkredIcon;\r\n                                    }\r\n                                }\r\n\r\n                                // let eachMarker =  L.marker([coords[coords_ini][1],coords[coords_ini][0]], {icon: iconType});\r\n                                // layers.addLayer(eachMarker);\r\n\r\n\r\n//console.log(res_id + \" : \" + coords_length + \" // \" + coords[coords_ini][0]);\r\n\r\n                                coords_ini++; \r\n                                let chkLast = count_corini+1;\r\n                                if(chkLast == coords_length)coords_ini=0;\r\n                            }else{\r\n                                coords_ini=0;\r\n                                \r\n                            }\r\n                            return L.marker([coords[coords_ini][1],coords[coords_ini][0]], {icon: iconType});\r\n                            //return layers;\r\n                            //return L.marker([coords[coords_ini][0],coords[coords_ini][1]], {icon: iconType});\r\n                           \r\n                        }\r\n                        /*style: function(feature) {    \r\n                            return {\r\n                            \"color\": \"#FF0000\",\r\n                            \"weight\": 2,\r\n                            \"opacity\": 0.4\r\n                            };\r\n                        }*/\r\n                    });\r\n\r\n\r\n\r\n                \r\n                    var geoJsonTimeLayer = L.timeDimension.layer.geoJson.geometryCollection(geoJsonLayer, {\r\n                        updateTimeDimension: true,\r\n                        updateTimeDimensionMode: 'replace',  \r\n                        //duration: 'PT30M',\r\n                        duration: 'PT1S', //持續時間\r\n                    });\r\n\r\n                    geoJsonTimeLayer._setAvailableTimes();\r\n                    geoJsonTimeLayer.addTo(map);\r\n                }\r\n\r\n            });\r\n        }else{\r\n\r\n            alert(ala_msg);\r\n        }\r\n    }\r\n    },\r\n    filters: {\r\n        dateFormat: function (datt_str) {\r\n            return formatDatetime(datt_str);\r\n        }\r\n\r\n    }\r\n}\r\n\r\nfunction getCommonBaseLayers(map){\r\n    var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {\r\n        attribution: '&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors'\r\n    });\r\n    var bathymetryLayer = L.tileLayer.wms(\"http://ows.emodnet-bathymetry.eu/wms\", {\r\n        layers: 'emodnet:mean_atlas_land',\r\n        format: 'image/png',\r\n        transparent: true,\r\n        attribution: \"EMODnet Bathymetry\",\r\n        opacity: 0.8\r\n    });\r\n    var coastlinesLayer = L.tileLayer.wms(\"http://ows.emodnet-bathymetry.eu/wms\", {\r\n        layers: 'coastlines',\r\n        format: 'image/png',\r\n        transparent: true,\r\n        attribution: \"EMODnet Bathymetry\",\r\n        opacity: 0.8\r\n    });\r\n    var bathymetryGroupLayer = L.layerGroup([bathymetryLayer, coastlinesLayer]);    \r\n    bathymetryGroupLayer.addTo(map);\r\n    return {\r\n        \"EMODnet Bathymetry\": bathymetryGroupLayer,\r\n        \"OSM\": osmLayer\r\n    };\r\n}\r\n\r\n</script>"],"sourceRoot":""}