From 5bd3c6fc05b2548195ebe78bc4cec04886b51ca2 Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期五, 02 四月 2021 14:22:03 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/views/MapTemplate.vue | 288 +++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 238 insertions(+), 50 deletions(-) diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index 18537fc..5463f63 100644 --- a/src/views/MapTemplate.vue +++ b/src/views/MapTemplate.vue @@ -1,80 +1,268 @@ <template> <div class="full-screen"> - <div id="map" ref="rootmap"></div> - <sgis-layer-controller :preset="'warningPreset'"> - <lc-basemap ref="lcBasemap"></lc-basemap> - </sgis-layer-controller> - <monitor-panel></monitor-panel> + <popup ref="popup" @callPopup="callPopup"></popup> + <div id="map" ref="rootmap"> + </div> + <sgis-layer-controller :preset="'warningPreset'"> + <lc-basemap></lc-basemap> + <!-- <div class="barline"></div>--> + <lc-service-layer class="barline" v-if="lcServiceLayerVisible"></lc-service-layer> + </sgis-layer-controller> + <monitor-panel></monitor-panel> + <!-- <top-enterprise-panel></top-enterprise-panel>--> + <tool-box-panel ref="toolBox"></tool-box-panel> + <!-- <menu-special></menu-special>--> + <legend-panel></legend-panel> + <summary-sheets></summary-sheets> + <enterprise></enterprise> + <!-- <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>--> + <!-- <el-button type="primary" @click="ChangeState" class="solid-waste">鍥哄簾</el-button>--> + <!-- <el-button type="primary" @click="ChangeWaterState" class="Waste-water">搴熸按</el-button>--> + <!-- <el-button type="primary" @click="AddGasHelper" class="flue-gas">搴熸皵</el-button>--> + <PublicBounced ref="PublicBounced"></PublicBounced> </div> </template> <script> import 'leaflet/dist/leaflet.css' import Sgis from '@src/Sgis' -import mapConfig from '@/conf/MapConfig' +// import mapConfig from '@/conf/MapConfig' import SgisLayerController from '@components/LayerController/LayerController' import LcBasemap from '@components/LayerController/modules/LcBaseMap' -import MonitorPanel from '@components/panel/MonitorPanel' -import { mapMutations } from 'vuex' +import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer' +import MonitorPanel from '@components/panel/RightSearchPanel' +// import TopEnterprisePanel from '@components/panel/TopEnterprisePanel' +import summarySheets from '@components/table/summarySheets.vue' +import ToolBoxPanel from '@components/panel/ToolBoxPanel' +import Popup from '@views/popup/Popup' +// import MenuSpecial from '@components/panel/MenuTopic' +import LegendPanel from '@components/panel/LegendPanel' +import Enterprise from '../components/table/enterprise' +// 搴曞浘涓氬姟js閫昏緫 + +import AddWasteWaterHelper from '@components/BaseNav/WasteWater/WasteWater' +import AddGasHelper from '@components/BaseNav/flueGas/flueGas' +// // 鍏叡灞曠ず鏁版嵁 +import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced' +import LayerFactory from '@components/LayerController/service/LayerFactory' export default { name: 'MapTemplate', - components: {SgisLayerController, MonitorPanel, LcBasemap}, - data(){ + components: { + Enterprise, + LegendPanel, + // MenuSpecial, + ToolBoxPanel, + // TopEnterprisePanel, + SgisLayerController, + MonitorPanel, + LcBasemap, + LcServiceLayer, + Popup, + summarySheets, + PublicBounced + }, + data () { return { + map: null, + lcServiceLayerVisible: false, basemapHelper: {}, serviceLayerHelper: {}, - vectorLayerHelper: {} + vectorLayerHelper: {}, + toolBoxVisible: false } }, - beforeMount(){ - this.$nextTick(() => { - this.init() - }) + computed: { + config () { + return this.$store.state.map.config + } }, - methods:{ - ...mapMutations({ - setMapObj: 'setMapObj', - setBasemapHelper: 'setBasemapHelper', - setServiceLayerHelper: 'setServiceLayerHelper', - setVectorLayerHelper: 'setVectorLayerHelper', - }), - init() { - const mapcontainer = this.$refs.rootmap - this.mapObj = Sgis.initMap(mapcontainer) - console.log('01姝ラ锛�', this.mapObj) - - this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧熀纭�搴曞浘鍔╂墜 - this.basemapHelper.initBasemap(mapConfig, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘 - - this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栦笟鍔″簳鍥惧姪鎵� - this.serviceLayerHelper.initServiceLayers(mapConfig) - - this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵� - this.vectorLayerHelper.initVectorLayers(mapConfig) - - console.log('02姝ラ锛�', this.basemapHelper) - this.$refs.lcBasemap.init(this.basemapHelper) - this.setBasemapHelper(this.basemapHelper) - this.setServiceLayerHelper(this.serviceLayerHelper) - this.setVectorLayerHelper(this.vectorLayerHelper) - return this.map + beforeMount () { + this.$nextTick(() => { + this.init() + }) + }, + methods: { + AddGasHelper () { + const data = { + companyId: 3900100145, + id: '', + monType: 2, + userCode: 'wenchun.deng', + monDuration: '', + epName: '', + secdDeptId: '', + contrLevel: '', + dataStatus: '', + dataFlag: '', + runStatus: '', + emissTypeId: '' } + const AddGas = new AddGasHelper({ map: this.map }) + AddGas.requestData(data) + AddGas.SetPlueGasContent(this.config, this.$refs.PublicBounced) + }, + ChangeWaterState () { + const data = { + companyId: 3900100145, + id: '', + monType: 1, + userCode: 'wenchun.deng', + monDuration: '', + epName: '', + secdDeptId: '', + contrLevel: '', + dataStatus: '', + dataFlag: '', + runStatus: '', + emissTypeId: '' + } + const AddWasteWater = new AddWasteWaterHelper({ map: this.map }) + AddWasteWater.requestData(data) + AddWasteWater.SetWasteWaterContent(this.config, this.$refs.PublicBounced) + }, + saveMapStatus () { + window.serviceLayerHelper = this.serviceLayerHelper + this.$store.commit('setMapObj', this.map) + this.$store.commit('setBasemapHelper', this.basemapHelper) + // this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper) + this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper) + + this.lcServiceLayerVisible = true + }, + init () { + const mapcontainer = this.$refs.rootmap + this.map = Sgis.initMap(mapcontainer) + this.$refs.toolBox.map = this.map + + window.popupComp = this.$refs.popup + var layerFactory = new LayerFactory({ + L: window.L, + map: this.map + }) + layerFactory.init() + window.layerFactory = layerFactory + + this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 鍒濆鍖栧熀纭�搴曞浘鍔╂墜 + this.basemapHelper.initBasemap(this.config, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘 + + // this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 鍒濆鍖栦笟鍔″簳鍥惧姪鎵� + // console.log('-------' + this.$refs.popup.$el) + // this.serviceLayerHelper.initServiceLayers(this.config, this.$refs.popup) + + this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵� + this.vectorLayerHelper.initVectorLayers(this.config) + + // this.AddGasHelper() + // this.ChangeWaterState() + + this.saveMapStatus() + // this.setMapObj(this.mapObj) + // this.setBasemapHelper(this.basemapHelper) + // this.setServiceLayerHelper(this.serviceLayerHelper) + // this.setVectorLayerHelper(this.vectorLayerHelper) + this.addMarker() + }, + addMarker () { + const L = this.L + var icon = new L.Icon({ + iconUrl: 'assets/images/map/marker-icon.png', + shadowUrl: 'assets/images/map/marker-shadow.png', + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowSize: [41, 41] + }) + var marker = L.marker([32.2221, 118.7843], { + icon: icon + }).addTo(this.map) + .bindPopup(() => this.$refs.popup.$el, { + className: 's-map-popup', + minWidth: 300, + closeButton: false, + autoClose: false + }) + .bindTooltip('瀛椾綋鍏夋檿鏁堟灉t.', { + // permanent : true, + offset: [0, 0], // 鍋忕Щ + direction: 'right', // 鏀剧疆浣嶇疆 + // sticky:true,//鏄惁鏍囪鍦ㄧ偣涓婇潰 + className: 'anim-tooltip'// CSS鎺у埗 + }) + + marker.on('popupopen', this.onLayerClick) + }, + onLayerClick () { + this.$refs.popup.setShow() + }, + callPopup (val) { + console.log(val) + } } } </script> <style lang="less"> +.flue-gas { + position: fixed; + top: 88px; + left: 180px; + z-index: 500; +} -.full-screen{ - width: 100%; - height: 100%; - margin: 0; - padding: 0; - position: absolute; - #map{ +.solid-waste { + position: absolute; + top: 88px; + left: 88px; + z-index: 999; +} + +.Waste-water { + position: absolute; + top: 88px; + left: 280px; + z-index: 999; +} + +.full-screen { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + position: absolute; + + #map { height: 100%; width: 100%; } + + .barline { + //width: 100%; + //height: 1px; + //background-color: #0661AE; + border-top: 1px solid #0661AE; + } + + #map-btn { + position: fixed; + top: 20px; + left: 100px; + z-index: 9999; + } + + .leaflet-custom-icon { + background: white; + } + + .leaflet-marker-icon { + background: none; + } + + #migic { + width: 48px; + height: 48px; + margin: -18px -20px; + z-index: 999; + } } -</style>> +</style> -- Gitblit v1.8.0