| | |
| | | <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 mapConfig from '@/conf/MapConfig' |
| | | import SgisLayerController from '@components/LayerController/LayerController' |
| | | import LcBasemap from '@components/LayerController/modules/LcBaseMap' |
| | |
| | | }, |
| | | 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 () { |
| | | init: function () { |
| | | 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) |
| | | 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) |
| | | } |
| | | } |
| | | } |