派生自 wuyushui/SewerAndRainNetwork
src/views/MapTemplate.vue
@@ -1,21 +1,27 @@ <template> <div class="full-screen"> <popup ref="popup" @callPopup="callPopup"></popup> <div id="map" ref="rootmap"> <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> <!-- <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>--> <ReportIncident></ReportIncident> <Emergency ref="Emergency"></Emergency> <Message></Message> <EventsReported></EventsReported> </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 v-show="isShowbtn"></summary-sheets> <el-button id="mapbtn" type="primary" icon="el-icon-c-scale-to-original" circle @click="isshowhidden"></el-button> </div> </template> <script> @@ -23,38 +29,49 @@ import Sgis from '@src/Sgis' // import mapConfig from '@/conf/MapConfig' import SgisLayerController from '@components/LayerController/LayerController' import LcBasemap from '@components/LayerController/modules/LcBaseMap' 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 summarySheets from '@components/table/summarySheets.vue'SummarySheet import SummarySheet from '@components/table/summarySheets' import ToolBoxPanel from '@components/panel/ToolBoxPanel' import Popup from '@views/popup/Popup' import MenuSpecial from '@components/panel/MenuTopic' // import MenuSpecial from '@components/panel/MenuTopic' import LegendPanel from '@components/panel/LegendPanel' // import Enterprise from '../components/table/enterprise' // // 公共展示数据 // import PublicBounced from '@components/base-page/PublicBounced/PublicBounced' import LayerFactory from '@components/LayerController/service/LayerFactory' import ReportIncident from '../components/base-page/enterprise-emergency/ReportIncident' import Emergency from '@components/emergency/index' import MapManager from '../components/helpers/MapManager' import Message from '@components/message/index' import EventsReported from '../components/base-page/enterprise-emergency/events-reported/EventsReported' export default { name: 'MapTemplate', components: { // Enterprise, LegendPanel, MenuSpecial, // MenuSpecial, ToolBoxPanel, // TopEnterprisePanel, SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, Popup, summarySheets // summarySheets, SummarySheet, // PublicBounced, Emergency, Message, ReportIncident, EventsReported }, data () { return { isShowbtn: false, map: null, lcServiceLayerVisible: false, basemapHelper: {}, serviceLayerHelper: {}, vectorLayerHelper: {} vectorLayerHelper: {}, toolBoxVisible: false } }, computed: { @@ -68,9 +85,6 @@ }) }, methods: { isshowhidden () { this.isShowbtn = !this.isShowbtn }, saveMapStatus () { window.serviceLayerHelper = this.serviceLayerHelper this.$store.commit('setMapObj', this.map) @@ -85,54 +99,29 @@ 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.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() 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) 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) @@ -142,24 +131,59 @@ </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; .solid-waste { position: absolute; top: 88px; left: 88px; z-index: 999; } #map { height: 100%; width: 100%; } .full-screen { width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; .barline { //width: 100%; //height: 1px; //background-color: #0661AE; border-top: 1px solid #0661AE; } } #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>
