| | |
| | | <template> |
| | | <div class="full-screen"> |
| | | <popup ref="popup" @callPopup="callPopup"></popup> |
| | | <popup-gas ref="popupGas" @popupgas="popupgas"></popup-gas> |
| | | <div id="map" ref="rootmap"> |
| | | </div> |
| | | <sgis-layer-controller :preset="'warningPreset'"> |
| | |
| | | <lc-service-layer class="barline" v-if="lcServiceLayerVisible"></lc-service-layer> |
| | | </sgis-layer-controller> |
| | | <monitor-panel></monitor-panel> |
| | | <!-- <top-enterprise-panel></top-enterprise-panel>--> |
| | | <!-- <top-enterprise-panel></top-enterprise-panel>--> |
| | | <tool-box-panel ref="toolBox"></tool-box-panel> |
| | | <!-- <menu-special></menu-special>--> |
| | | <legend-panel></legend-panel> |
| | |
| | | <script> |
| | | import 'leaflet/dist/leaflet.css' |
| | | import Sgis from '@src/Sgis' |
| | | // import Vue from 'vue' |
| | | import creatPopup from './creatPopup.js' |
| | | // import mapConfig from '@/conf/MapConfig' |
| | | import SgisLayerController from '@components/LayerController/LayerController' |
| | | import LcBasemap from '@components/LayerController/modules/LcBaseMap' |
| | |
| | | // import MenuSpecial from '@components/panel/MenuTopic' |
| | | import LegendPanel from '@components/panel/LegendPanel' |
| | | import Enterprise from '../components/table/enterprise' |
| | | import PopupGas from '@/components/flueGas/popup-gas' |
| | | |
| | | export default { |
| | | name: 'MapTemplate', |
| | |
| | | LcBasemap, |
| | | LcServiceLayer, |
| | | Popup, |
| | | summarySheets, |
| | | PopupGas |
| | | summarySheets |
| | | }, |
| | | data () { |
| | | return { |
| | | // isShowBtn: false, |
| | | map: null, |
| | | lcServiceLayerVisible: false, |
| | | basemapHelper: {}, |
| | |
| | | } |
| | | }, |
| | | beforeMount () { |
| | | // import('@/assets/airQuality.json').then(res => { |
| | | // console.log(res.features) |
| | | // }) |
| | | this.$nextTick(() => { |
| | | this.init() |
| | | }) |
| | | }, |
| | | methods: { |
| | | isShowHidden () { |
| | | this.isShowBtn = !this.isShowBtn |
| | | }, |
| | | saveMapStatus () { |
| | | window.serviceLayerHelper = this.serviceLayerHelper |
| | | this.$store.commit('setMapObj', this.map) |
| | |
| | | |
| | | this.lcServiceLayerVisible = true |
| | | }, |
| | | init: function () { |
| | | init () { |
| | | const mapcontainer = this.$refs.rootmap |
| | | this.map = Sgis.initMap(mapcontainer) |
| | | this.$refs.toolBox.map = this.map |
| | |
| | | // this.setBasemapHelper(this.basemapHelper) |
| | | // this.setServiceLayerHelper(this.serviceLayerHelper) |
| | | // this.setVectorLayerHelper(this.vectorLayerHelper) |
| | | import('@/assets/airQuality.json').then(res => { |
| | | // this.addMarker() |
| | | this.addMarker(res.features) |
| | | }) |
| | | // console.log(this.L) |
| | | this.addMarker() |
| | | }, |
| | | addMarker (arr) { |
| | | addMarker () { |
| | | const L = this.L |
| | | var icon = new L.Icon({ |
| | | iconUrl: 'assets/images/map/marker-icon.png', |
| | |
| | | popupAnchor: [1, -34], |
| | | shadowSize: [41, 41] |
| | | }) |
| | | // 00000000000000000000 |
| | | var marker = L.marker([32.222, 118.7843], { |
| | | var marker = L.marker([32.2221, 118.7843], { |
| | | icon: icon |
| | | }).addTo(this.map) |
| | | .bindPopup(() => this.$refs.popup.$el, { |
| | |
| | | // sticky:true,//是否标记在点上面 |
| | | className: 'anim-tooltip'// CSS控制 |
| | | }) |
| | | |
| | | marker.on('popupopen', this.onLayerClick) |
| | | // 000000000000000000 |
| | | // 废气 |
| | | // const MagicMarker = new L.marker.magic([32.226, 118.7848], { |
| | | // iconUrl: 'assets/images/map/marker-icon.png', |
| | | // magic: 'vanishIn' |
| | | // }).addTo(this.map) |
| | | arr.forEach(item => { |
| | | const { geometry: { coordinates } } = item |
| | | const coordinate = coordinates.map(item => parseFloat(item)) |
| | | const data = creatPopup({ isShow: true, tirm: '666' }) |
| | | console.log(item.properties.name) |
| | | // console.log(coordinate) |
| | | L.marker(coordinate, { icon: icon }).addTo(this.map).bindPopup(() => data, { |
| | | className: 's-map-popup', |
| | | minWidth: 300, |
| | | closeButton: false, |
| | | autoClose: false |
| | | }).bindTooltip(item.properties.name, { |
| | | // permanent : true, |
| | | offset: [0, 0], // 偏移 |
| | | direction: 'right', // 放置位置 |
| | | // sticky:true,//是否标记在点上面 |
| | | className: 'anim-tooltip'// CSS控制 |
| | | }) |
| | | }) |
| | | // marker.on('popupopen', this.onClickgaspoppup) |
| | | // console.log(this.$refs) |
| | | // L.marker([38.8332098722457, 117.447918949615], { |
| | | // icon: icon |
| | | // }).addTo(this.map) |
| | | // var marker = L.marker([32.222, 118.7843], { |
| | | // icon: icon |
| | | // }).addTo(this.map) |
| | | // .bindPopup(() => data, { |
| | | // 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控制 |
| | | // }) |
| | | // |
| | | // L.marker([32.229, 118.7843], { |
| | | // icon: icon |
| | | // }).addTo(this.map) |
| | | // .bindPopup(() => data1, { |
| | | // 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) |
| | | }, |
| | | popupgas () { |
| | | console.log(1) |
| | | } |
| | | } |
| | | } |