| | |
| | | <template> |
| | | <div class="full-screen"> |
| | | <div id="map" ref="rootmap"></div> |
| | | <sgis-layer-controller :preset="'warningPreset'"></sgis-layer-controller> |
| | | <!--<popup ref="popup" @callPopup="callPopup"></popup>--> |
| | | <div id="map" ref="rootmap"> |
| | | </div> |
| | | <sgis-layer-controller></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>--> |
| | | <SummarySheet></SummarySheet> |
| | | <Emergency ref="Emergency"></Emergency> |
| | | <Message></Message> |
| | | <event-handling></event-handling> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import 'leaflet/dist/leaflet.css' |
| | | import Sgis from '@src/Sgis' |
| | | // import mapConfig from '@/conf/MapConfig' |
| | | import SgisLayerController from '@components/LayerController/LayerController' |
| | | import { mapMutations, mapState } from 'vuex' |
| | | import MonitorPanel from '@components/panel/RightSearchPanel' |
| | | // import TopEnterprisePanel from '@components/panel/TopEnterprisePanel' |
| | | // import summarySheets from '@components/table/summarySheets.vue'SummarySheet |
| | | import SummarySheet from '@components/table/summarySheets' |
| | | import ToolBoxPanel from '@components/panel/ToolBoxPanel' |
| | | import LegendPanel from '@components/panel/LegendPanel' |
| | | import LayerFactory from '@components/LayerController/service/LayerFactory' |
| | | import Emergency from '@components/emergency/index' |
| | | import MapManager from '../components/helpers/MapManager' |
| | | import Message from '@components/message/index' |
| | | import EventHandling from '../components/base-page/enterprise-emergency/event-handling/EventHandling' |
| | | |
| | | export default { |
| | | name: 'MapTemplate', |
| | | components: {SgisLayerController, }, |
| | | datas:{ |
| | | ...mapState("/",{}) |
| | | components: { |
| | | EventHandling, |
| | | // Enterprise, |
| | | LegendPanel, |
| | | // MenuSpecial, |
| | | ToolBoxPanel, |
| | | // TopEnterprisePanel, |
| | | SgisLayerController, |
| | | MonitorPanel, |
| | | // summarySheets, |
| | | SummarySheet, |
| | | Emergency, |
| | | Message |
| | | }, |
| | | mounted(){ |
| | | this.$nextTick(() => { |
| | | this.init() |
| | | }) |
| | | data () { |
| | | return { |
| | | map: null, |
| | | lcServiceLayerVisible: false, |
| | | basemapHelper: {}, |
| | | serviceLayerHelper: {}, |
| | | vectorLayerHelper: {}, |
| | | toolBoxVisible: false |
| | | } |
| | | }, |
| | | methods:{ |
| | | ...mapMutations({ |
| | | setMapObj: 'setMapObj', |
| | | setLayerHelper: 'setLayerHelper' |
| | | }), |
| | | init() { |
| | | const mapcontainer = this.$refs.rootmap |
| | | this.mapObj = Sgis.initMap(mapcontainer) |
| | | this.basemapHelper = Sgis.initBasemaps(this.mapObj.map, this.mapObj.L) // 初始化底图 |
| | | this.vectorLayerHelper = Sgis.initLayers(this.mapObj.map, this.mapObj.L, {}, this.$nodeEnv) // 初始化业务图层 |
| | | this.setLayerHelper(this.vectorLayerHelper) |
| | | return this.map |
| | | }, |
| | | setLayerHelper(){ |
| | | computed: { |
| | | config () { |
| | | return this.$store.state.map.config |
| | | } |
| | | }, |
| | | beforeMount () { |
| | | this.$nextTick(() => { |
| | | this.init() |
| | | }) |
| | | }, |
| | | methods: { |
| | | 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 |
| | | |
| | | this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手 |
| | | this.basemapHelper.initBasemap(this.config, false) // 第二个参数,表示是否内网底图 |
| | | this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手 |
| | | this.vectorLayerHelper.initVectorLayers(this.config) |
| | | |
| | | // this.AddGasHelper() |
| | | // this.ChangeWaterState() |
| | | var layerFactory = new LayerFactory({ |
| | | L: window.L, |
| | | map: this.map |
| | | }) |
| | | layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine) |
| | | layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine) |
| | | window.layerFactory = layerFactory |
| | | window.mapManager = new MapManager() |
| | | window.mapManager.mapClickListener() |
| | | this.saveMapStatus() |
| | | // this.setMapObj(this.mapObj) |
| | | // this.setBasemapHelper(this.basemapHelper) |
| | | // this.setServiceLayerHelper(this.serviceLayerHelper) |
| | | // this.setVectorLayerHelper(this.vectorLayerHelper) |
| | | }, |
| | | 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; |
| | | } |
| | | |
| | | .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> |