{"version":3,"sources":["webpack:///./src/pages/Home/components/Map.vue","webpack:///src/pages/Home/components/Map.vue","webpack:///./src/pages/Home/components/Map.vue?3507","webpack:///./src/pages/Home/components/Map.vue?50f8","webpack:///./src/pages/Home/components/Map.vue?7edd"],"names":["render","_vm","this","_c","_self","directives","name","rawName","value","fullscreenLoading","expression","modifiers","staticClass","style","mapSize","attrs","staticRenderFns","L","window","props","mapWidth","type","String","mapHeight","computed","styleObj","width","height","mapnodelists","$store","getters","nodeMapList","watch","mapInit","data","map","loading","mapboxurl","option","zoom","maxZoom","minZoom","renderWorldCopies","attributionControl","id","mounted","getMapNodeList","methods","southWest","latLng","northEast","bounds","latLngBounds","$utils","createMap","zoomControl","maxBounds","createTileLayer","setView","cluster","createMakerCluster","i","length","latlng","lat","latitude","lng","longitude","maker","createMakerByLatlng","addLayer","addToolitps","ip","control","attribution","position","prefix","addTo","addMarker","createMakerByXY","addControl","con","Control","Attribution","dispatch","size","pageSize","page","then","addPopUp","popup","createPopup","maxWidth","minWidth","className","setLatLng","createLatlonByArray","setContent","openOn","marker","toolitps","tpl","bindTooltip","component"],"mappings":"gJAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,WAAW,CAAC,CAACC,KAAK,UAAUC,QAAQ,4BAA4BC,MAAOP,EAAIQ,kBAAmBC,WAAW,oBAAoBC,UAAU,CAAC,YAAa,EAAK,MAAO,KAAQC,YAAY,gBAAgBC,MAAOZ,EAAIa,QAASC,MAAM,CAAC,GAAK,oBAE9SC,EAAkB,GCGtBC,EAAAC,OAAAD,EACe,GACfX,KAAA,UACAa,MAAA,CACAC,SAAA,CACAC,KAAAC,QAEAC,UAAA,CACAF,KAAAC,SAGAE,SAAA,CACAV,QAAA,WACA,IAAAW,EAAA,CACAC,MAAA,KAAAN,SACAO,OAAA,KAAAJ,WAEA,OAAAE,GAEAG,aAAA,WACA,YAAAC,OAAAC,QAAAC,aAAA,KAGAC,MAAA,CACA,wBACA,KAAAvB,mBAAA,EACA,KAAAwB,QAAA,KAAAL,gBAGAM,KAAA,WACA,OACAC,IAAA,KACAC,SAAA,EACA3B,mBAAA,EACA4B,UAAA,0MACAC,OAAA,CACAC,KAAA,EACAC,QAAA,GACAC,QAAA,EACAC,mBAAA,EACAC,oBAAA,EACAC,GAAA,oBAIAC,QAAA,WACA,KAAAC,kBAEAC,QAAA,CACAd,QAAA,SAAAL,GACA,IAAAoB,EAAA/B,EAAAgC,QAAA,SACAC,EAAAjC,EAAAgC,OAAA,QACAE,EAAAlC,EAAAmC,aAAAJ,EAAAE,GACA,KAAAf,IAAA,KAAAkB,OAAAlB,IAAAmB,UAAA,iBACAC,aAAA,EACAC,UAAAL,EACAZ,KAAA,EACAC,QAAA,EACAC,QAAA,IAIA,KAAAY,OAAAlB,IAAAsB,gBAAA,KAAAtB,IAAA,KAAAE,UAAA,KAAAC,QAGA,KAAAH,IAAAuB,QAAA,SAEA,IADA,IAAAC,EAAA,KAAAN,OAAAlB,IAAAyB,qBACAC,EAAA,EAAAA,EAAAjC,EAAAkC,OAAAD,IAAA,CAEA,IAAAE,EAAA,CACAC,IAAApC,EAAAiC,GAAAI,SACAC,IAAAtC,EAAAiC,GAAAM,WAEAC,EAAA,KAAAf,OAAAlB,IAAAkC,oBAAAN,GACAJ,EAAAW,SAAAF,GACA,KAAAG,YAAA3C,EAAAiC,GAAAW,GAAAJ,GAEA,KAAAjC,IAAAmC,SAAAX,GAEA1C,EAAAwD,QAAAC,YAAA,CAAAC,SAAA,aAAAC,OAAA,gCAAAC,MAAA,KAAA1C,KACA,KAAA1B,mBAAA,GAEAqE,UAAA,WACA,KAAAzB,OAAAlB,IAAA4C,gBAAA,KAAA5C,IAAA,iBAEA6C,WAAA,WACA,IAAAC,EAAAhE,EAAAiE,QAAAC,YACA,OAAAF,GAEAnC,eAAA,WACA,KAAArC,mBAAA,EACA,KAAAoB,OAAAuD,SAAA,kBAAAC,KAAA,KAAAC,SAAAC,KAAA,IAAAC,QAEAC,SAAA,WACA,IAAAC,EAAA,KAAArC,OAAAlB,IAAAwD,YAAA,KAAAxD,IAAA,CACAyD,SAAA,IACAC,SAAA,IACAC,UAAA,iBAGAJ,EACAK,UAAA,KAAA1C,OAAAlB,IAAA6D,oBAAA,gBACAC,WAAA,uKAGAC,OAAA,KAAA/D,MAEAoC,YAAA,SAAAC,EAAA2B,GAKA,IAAAC,EAAA,WACA,IAAAC,EAAA,MAAA7B,EAAA,OACA,OAAA6B,GAGAF,EAAAG,YAAAF,EAAA,CAAAN,UAAA,uBC1H0W,I,wBCQtWS,EAAY,eACd,EACAvG,EACAgB,GACA,EACA,KACA,KACA,MAIa,aAAAuF,E,2CCnBf","file":"static/js/chunk-014304d4.ba2d535e.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{directives:[{name:\"loading\",rawName:\"v-loading.fullscreen.lock\",value:(_vm.fullscreenLoading),expression:\"fullscreenLoading\",modifiers:{\"fullscreen\":true,\"lock\":true}}],staticClass:\"map-container\",style:(_vm.mapSize),attrs:{\"id\":\"map-container\"}})\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div v-loading.fullscreen.lock=\"fullscreenLoading\" class=\"map-container\" id=\"map-container\" :style=\"mapSize\"></div>\n</template>\n\n<script>\nconst L = window.L\nexport default {\n  name: \"mapView\",\n  props: {\n    mapWidth: {\n      type: String\n    },\n    mapHeight: {\n      type: String\n    }\n  },\n  computed: {\n    mapSize () {\n      let styleObj = {\n        width: this.mapWidth,\n        height: this.mapHeight\n      }\n      return styleObj\n    },\n    mapnodelists() {\n        return this.$store.getters.nodeMapList || {};\n    },\n  },\n  watch:{\n      \"mapnodelists\":function() {\n          this.fullscreenLoading =false\n          this.mapInit(this.mapnodelists)\n      }\n  },\n  data() {\n    return {\n      map: null,\n      loading:true,\n      fullscreenLoading: false,\n      mapboxurl: 'https://api.mapbox.com/styles/v1/tony1duan/cjyqy7w2s02lh1cqoqoppsx5g/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoidG9ueTFkdWFuIiwiYSI6ImNqeW82NDd4czExY3czYnF1eGhxZ29hMnEifQ.hzvWApDHuwy26QZFZArSkQ',\n      option:{\n        zoom: 3,\n        maxZoom:18,\n        minZoom:1,\n        renderWorldCopies:true,\n        attributionControl:true,\n        id: 'mapbox.streets'\n      }\n    };\n  },\n  mounted() {\n    this.getMapNodeList()\n  },\n  methods: {\n    mapInit(mapnodelists){\n        var southWest = L.latLng(-90, -180),\n            northEast = L.latLng(90, 180),\n            bounds = L.latLngBounds(southWest, northEast);\n        this.map = this.$utils.map.createMap(\"map-container\",{\n            zoomControl: true,\n            maxBounds: bounds,\n            zoom: 3,\n            maxZoom: 7,\n            minZoom: 3\n        });\n        \n        // 加载 open street map 图层服务\n        this.$utils.map.createTileLayer(this.map, this.mapboxurl, this.option);\n\n        // 设施地图视图 中心位置\n        this.map.setView([0, 0], 3);\n        let cluster = this.$utils.map.createMakerCluster();\n        for (let i = 0; i < mapnodelists.length; i++) {\n            /* let latlng = this.$utils.map.getRandomLatLng(this.map); */\n            let latlng = {\n                lat : mapnodelists[i].latitude,\n                lng : mapnodelists[i].longitude\n            }\n            let maker = this.$utils.map.createMakerByLatlng(latlng);\n            cluster.addLayer(maker);\n            this.addToolitps(mapnodelists[i].ip,maker)\n        }\n        this.map.addLayer(cluster);\n        \n        L.control.attribution({ position: 'bottomleft', prefix: 'Synchronous Nodes Displayed' }).addTo(this.map);\n        this.fullscreenLoading =false\n    },\n    addMarker() {\n        this.$utils.map.createMakerByXY(this.map, [31.505, 44.09]);\n    },\n    addControl(){\n        let con = L.Control.Attribution\n        return con\n    },\n    getMapNodeList(){\n        this.fullscreenLoading =true\n        this.$store.dispatch(\"getNodeMapList\", { size: this.pageSize, page: 1 }).then();\n    },\n    addPopUp() {\n        let popup = this.$utils.map.createPopup(this.map, {\n            maxWidth: 200,\n            minWidth: 100,\n            className: \"sample-popup\"\n        });\n\n        popup\n            .setLatLng(this.$utils.map.createLatlonByArray([51.505, -0.09]))\n            .setContent(\n            `<h1>popup demo</h1><p>This is the content of the popup demo. The length of the content might be so very that maybe beyond the maxWidth that we set on the popup</p>`\n        )\n            .openOn(this.map);\n    },\n    addToolitps(ip,marker) {\n        // let pngJpgIcon = this.$utils.map.createIcon({\n        //     /* iconUrl: require(\"./../assets/images/tree.png\"), */\n        //     iconSize: [52, 42]\n        // });\n        let toolitps = () => {\n            let tpl = `<p>`+ ip +`</p>`;\n            return tpl;\n        };\n        // 为 tooltips 指定 class 类名\n        marker.bindTooltip(toolitps,{className: \"sample-tooltips\"});\n    }\n  }\n};\n</script>\n<style >\n.map-container {\n  position: relative;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 480px;\n}\n.marker-cluster-large{\n  background-color: #48a3ff;\n}\n.marker-cluster-large div{\n  background-color: #48a3ff;\n}\n.marker-cluster-medium{\n  background-color: #48a3ff;\n}\n.marker-cluster-medium div{\n  background-color: #48a3ff;\n}\n.marker-cluster-small{\n  background-color: #48a3ff;\n}\n.marker-cluster-small div{\n  background-color: #48a3ff;\n}\n.leaflet-control-zoom-in{\n  color:#000;\n}\n</style>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Map.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Map.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Map.vue?vue&type=template&id=17966efa\"\nimport script from \"./Map.vue?vue&type=script&lang=js\"\nexport * from \"./Map.vue?vue&type=script&lang=js\"\nimport style0 from \"./Map.vue?vue&type=style&index=0&id=17966efa&prod&lang=css\"\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","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Map.vue?vue&type=style&index=0&id=17966efa&prod&lang=css\""],"sourceRoot":""}