修改图层控制

徐旺旺

2021-03-01 a1638dfffa2992ac78d68d9cd955c1263d71b803

修改图层控制

 src/components/helpers/ServiceLayerHelper.js

@@ -17,6 +17,7 @@
    this.geojsonArray = {} // 初始的geojson集
    this.layerConfig = {}
    this.regex = /\{(.+?)\}/g // 匹配{}
    this.popupComp = null
  }

  getTileLayer (code) {
@@ -26,10 +27,11 @@
  /**
     * 根据配置文件初始化业务底图
     */
  initServiceLayers (layerConfig) {
  initServiceLayers (layerConfig, popupComp) {
    this.layerConfig = layerConfig
    this.popupComp = popupComp
    this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
    // this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
    this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
  }

  /**
@@ -116,6 +118,14 @@
          })
      }
    }).bindPopup(function (layer) {
      that.popupComp.setDatas(layer.feature)
      that.popupComp.setShow()
      return that.popupComp.$el
    }, {
      className: 's-map-popup',
      minWidth: 300,
      closeButton: false,
      autoClose: false
    }).addTo(featureGroup).bringToFront()
    return featureGroup
  }

 src/conf/Constants.js

@@ -3,3 +3,29 @@
  LINE: 'line',
  POLYGON: 'polygon'
}

export const props = {
  pipename: '管线名称',
  pipecode: '管线编码',
  subchaname: '支线名称',
  subchacode: '支线编码',
  mediumtype: '输送介质',
  length: '长度(m)',
  startposname: '起点位置名称',
  endposname: '终点位置名称',
  pressureating: '设计压力（MPa）',
  designtranyear: '设计输量（万立/年）',
  earningcapacity: '实际输量（万立/年）',
  buriedtime: '埋设时间',
  coatingmaterial: '防腐状况',
  inservicetime: '投产时间',
  reportname: '填报人姓名',
  reportphone: '填报人联系方式',
  diameter: '管径(mm)',
  meterial: '材质',
  pressuerating: '管道压力(Mpa)',
  embeddingmode: '埋设方式',
  pipetrenchtype: '管沟类型',
  datecollected: '探测时间',
  operationalstatus: '运行状态'
}

 src/views/MapTemplate.vue

@@ -77,7 +77,8 @@
      this.basemapHelper.initBasemap(this.config, false) // 第二个参数，表示是否内网底图

      this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 初始化业务底图助手
      this.serviceLayerHelper.initServiceLayers(this.config)
      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)

 src/views/popup/Popup.vue

@@ -1,40 +1,83 @@
<template>
  <div v-if="isShow" class="s-map-popup-panel" >

    <div>
      {{ data }}
    </div>
    <div>
      {{ data }}
    </div>
    <br>
    <br>
    <div>
      {{ data }}
    </div>
    <br>
    <br>

    <div>
      {{ data }}
    </div>
    <el-button type="primary" @click="onClick">主要按钮</el-button>
  <div id="popup" v-if="isShow" class="s-map-popup-panel">
    <el-tabs v-model="tabsValue" type="card" @edit="handleTabsEdit">
      <el-tab-pane
              :key="item.name"
              v-for="(item) in tabs"
              :label="item.title"
              :name="item.name"
      >
        <el-row v-for="(v,k) in filter" :key="k">
          <el-col :span="12">{{k}}</el-col>
          <el-col :span="12">{{v}}</el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import '@/assets/css/map/map-popup.scss'
import { props } from '../../conf/Constants'

export default {
  name: 'Popup',
  data () {
    return {

      tabsValue: '1',
      tabs: [{
        title: '污雨水',
        name: '1'
      }],
      tabIndex: 2,
      isShow: false,
      data: ''
      properties: {},
      props: props
    }
  },

  computed: {
    filter () {
      var obj = {}
      for (const key in this.properties) {
        if (this.props[key]) {
          obj[this.props[key]] = this.properties[key]
        }
      }
      return obj
    }
  },
  methods: {
    handleTabsEdit (targetName, action) {
      if (action === 'add') {
        const newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        const tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      }
    },
    setDatas (feature) {
      this.properties = feature.properties
    },
    setShow () {
      // this.style.display='auto'
      this.data = 'adsfadfsadfsdafsdfsdfdsafsdafsdafa'
@@ -50,4 +93,10 @@

<style lang="less" >
@import '../../assets/css/map/map-popup.less';
#popup{
  .el-tabs__content{
    max-height: 300px;
    overflow: auto;
  }
}
</style>