修改图层控制

徐旺旺

2021-02-22 a6da1ff6d9b294f46955da5d5cff30919467fa8b

 src/views/MapTemplate.vue

@@ -1,18 +1,17 @@
<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 :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></tool-box-panel>
    </div>
    <sgis-layer-controller :preset="'warningPreset'">
      <lc-basemap></lc-basemap>
      <!--            <div class="barline"></div>-->
      <lc-service-layer class="barline"></lc-service-layer>
    </sgis-layer-controller>
    <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
    <monitor-panel></monitor-panel>
    <top-enterprise-panel></top-enterprise-panel>
    <tool-box-panel></tool-box-panel>
  </div>
</template>

<script>
@@ -22,11 +21,11 @@
import SgisLayerController from '@components/LayerController/LayerController'
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import MonitorPanel from '@components/panel/RightSearchPanel'
import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'

export default {
  name: 'MapTemplate',
  components: {
@@ -36,21 +35,18 @@
    MonitorPanel,
    LcBasemap,
    LcServiceLayer,
    LcServiceLayerFilter,
    Popup
  },
  data () {
    return {
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
      serviceLayerHelper: {},
      vectorLayerHelper: {}
    }
  },
  computed: {
    showServiceLayerFilter () {
      return this.$store.state.map.showServiceLayerFilter
    },
    mapConfig () {
      return this.$store.state.map.mapConfig
    }
@@ -62,10 +58,13 @@
  },
  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('setServiceLayerHelper', this.serviceLayerHelper)
      this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper)

      this.lcServiceLayerVisible = true
    },
    init () {
      const mapcontainer = this.$refs.rootmap
@@ -100,7 +99,12 @@
      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 })
        .bindPopup(() => this.$refs.popup.$el, {
          className: 's-map-popup',
          minWidth: 300,
          closeButton: false,
          autoClose: false
        })
        .bindTooltip('字体光晕效果t.', {
          // permanent : true,
          offset: [0, 0], // 偏移
@@ -123,23 +127,23 @@

<style lang="less">

.full-screen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
    .full-screen {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        position: absolute;

  #map {
    height: 100%;
    width: 100%;
  }
        #map {
            height: 100%;
            width: 100%;
        }

  .barline {
    //width: 100%;
    //height: 1px;
    //background-color: #0661AE;
    border-top: 1px solid #0661AE;
  }
}
        .barline {
            //width: 100%;
            //height: 1px;
            //background-color: #0661AE;
            border-top: 1px solid #0661AE;
        }
    }
</style>>