<template>
|
<div class="full-screen">
|
<!--<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 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: {
|
EventHandling,
|
// Enterprise,
|
LegendPanel,
|
// MenuSpecial,
|
ToolBoxPanel,
|
// TopEnterprisePanel,
|
SgisLayerController,
|
MonitorPanel,
|
// summarySheets,
|
SummarySheet,
|
Emergency,
|
Message
|
},
|
data () {
|
return {
|
map: null,
|
lcServiceLayerVisible: false,
|
basemapHelper: {},
|
serviceLayerHelper: {},
|
vectorLayerHelper: {},
|
toolBoxVisible: false
|
}
|
},
|
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;
|
}
|
|
.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>
|
