图层控制

徐旺旺

2021-03-31 a3f2a415049e1444110cea2a34ecb51b40c1b1bd

图层控制

 src/components/LayerController/logic/Sample.js

@@ -1,9 +1,45 @@
/**
 * 废气
 */
const AnimalService = require('../service/AnimalService').default
const AjaxUtils = require('../../../utils/AjaxUtils').default

module.exports = function () {
  this.init = (L) => {
    console.log('sample init !!!')
  /**
   * 返回marker对象数组
   * @param L leaflet对象
   */
  this.init = (layer, L) => {
    this.animalService = new AnimalService({ L: L, layer: layer })
    AjaxUtils.get4JsonDataByUrl('http://10.246.162.140:8080/EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', {
      companyId: 3900100145,
      id: '',
      monType: 1,
      userCode: 'wenchun.deng',
      monDuration: '',
      epName: '',
      secdDeptId: '',
      contrLevel: '',
      dataStatus: '',
      dataFlag: '',
      runStatus: '',
      emissTypeId: ''
    }, function (res) {
      const data = res.data.Result.DataInfo
      for (let i = 0; i < data.length; i++) {
        // 经纬度 位置
        const positionX = data[i].Latitude
        const positionY = data[i].Longitude
        layer.addLayer(L.marker([positionX, positionY], { test: '122224' }))
      }
    })
  }

  this.clickListener = (e, data) => {
    console.log('sample clickListener !!!')
  this.bindTooltip = (layer) => {
    return layer.options.test
  }

  this.clickListener = (e) => {
    this.animalService.pulseEffect(e.latlng)
  }
}

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -6,7 +6,7 @@
        <div class="wms-panel">
            <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                            @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)"
                            @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)" v-if="item.childLayer"
                                                                               class="btn-filter">过滤</span>
                </div>
                <div class="layerbox-item">
@@ -14,8 +14,7 @@
                                                                                                      :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                                                                                      :checked="itm.checked"
                                                                                                      :value="itm.code"
                                                                                                      @change="swWmsLayer(itm)"/>{{
                        itm.name }}
                                                                                                      @change="swWmsLayer(itm)"/>{{ itm.name }}
                    </div>
                </div>
            </div>

 src/conf/layers/LayerArea.js

New file
@@ -0,0 +1,36 @@
/**
 * 区域
 */
export const LayerArea = {
  code: 'sewersArea',
  name: '区域信息',
  checked: true,
  layers: [
    {
      code: 'sewersAreaGs',
      name: '公司',
      sname: '公司', // 表名
      checked: true, // 默认选中状态
      url: '?TYPENAME=管网',
      minZoom: 10, // 在指定级别显示
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
    {
      code: 'sewersAreaMt',
      name: '码头',
      sname: '码头',
      checked: true, // 默认选中状态
      wfs: '?TYPENAME=含油污水',
      minZoom: 10,
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
    {
      code: 'sewersAreaZz',
      name: '装置区',
      sname: '装置区',
      checked: true, // 默认选中状态
      wfs: '?TYPENAME=含盐污水',
      minZoom: 10
    }
  ]
}

 src/conf/layers/LayerFsss.js

New file
@@ -0,0 +1,79 @@
/**
 * 区域
 */
const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs'
export const LayerFsss = {
  code: 'sewersFsss',
  name: '附属设施',
  checked: false, // 默认选中状态
  layers: [
    {
      code: 'fourlink',
      name: '四通',
      sname: '四通',
      checked: true,
      minZoom: 10,
      wfs: WFS_URL + '?TYPENAME=四通',
      icon: 'sewers/四通.png'
    },
    {
      code: 'tee',
      name: '三通',
      sname: '三通',
      checked: false,
      minZoom: 10,
      wfs: WFS_URL + '?TYPENAME=三通',
      icon: 'sewers/三通.png'
    },
    {
      code: 'piperack',
      name: '管架(墩)',
      sname: 'PipeRack',
      minZoom: 10,
      wfs: WFS_URL + '?TYPENAME=管架',
      checked: false
    },
    {
      code: 'pipegallery',
      name: '管廊(带)',
      sname: 'PipeGallery',
      minZoom: 10,
      wfs: WFS_URL + '?TYPENAME=管廊',
      checked: false
    },
    {
      code: 'pipesegment',
      name: '流向',
      sname: 'ywslx',
      wfs: WFS_URL + '?TYPENAME=流向',
      checked: false
    },
    {
      code: 'pipeline',
      name: '管网',
      minZoom: 10,
      sname: 'pipeline',
      wfs: WFS_URL + '?TYPENAME=管网',
      checked: false
    },
    {
      code: 'valve',
      name: '阀门',
      minZoom: 10,
      sname: 'valve',
      checked: false,
      wfs: WFS_URL + '?TYPENAME=阀门',
      icon: 'sewers/阀门.png'
    },
    {
      code: 'elbow',
      name: '弯头',
      sname: 'Elbow',
      minZoom: 10,
      checked: false,
      wfs: WFS_URL + '?TYPENAME=弯头',
      icon: 'sewers/弯头.png'
    }
  ]
}

 src/conf/layers/LayerHbss.js

New file
@@ -0,0 +1,79 @@
/**
 * 区域
 */
const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs'
export const LayerFsss = {
  code: 'sewersFsss',
  name: '环保设施',
  checked: false, // 默认选中状态
  layers: [
    {
      code: 'fourlink',
      name: '四通',
      sname: '四通',
      checked: true,
      minZoom: 10,
      wfs: WFS_URL + '?TYPENAME=四通',
      icon: 'sewers/四通.png'
    },
    {
      code: 'tee',
      name: '三通',
      sname: '三通',
      checked: false,
      minZoom: 10,
      wfs: WFS_URL + '?TYPENAME=三通',
      icon: 'sewers/三通.png'
    },
    {
      code: 'piperack',
      name: '管架(墩)',
      sname: 'PipeRack',
      minZoom: 10,
      wfs: WFS_URL + '?TYPENAME=管架',
      checked: false
    },
    {
      code: 'pipegallery',
      name: '管廊(带)',
      sname: 'PipeGallery',
      minZoom: 10,
      wfs: WFS_URL + '?TYPENAME=管廊',
      checked: false
    },
    {
      code: 'pipesegment',
      name: '流向',
      sname: 'ywslx',
      wfs: WFS_URL + '?TYPENAME=流向',
      checked: false
    },
    {
      code: 'pipeline',
      name: '管网',
      minZoom: 10,
      sname: 'pipeline',
      wfs: WFS_URL + '?TYPENAME=管网',
      checked: false
    },
    {
      code: 'valve',
      name: '阀门',
      minZoom: 10,
      sname: 'valve',
      checked: false,
      wfs: WFS_URL + '?TYPENAME=阀门',
      icon: 'sewers/阀门.png'
    },
    {
      code: 'elbow',
      name: '弯头',
      sname: 'Elbow',
      minZoom: 10,
      checked: false,
      wfs: WFS_URL + '?TYPENAME=弯头',
      icon: 'sewers/弯头.png'
    }
  ]
}

 src/conf/layers/LayerPipeLine.js

New file
@@ -0,0 +1,77 @@
/**
 * 管网
 */
const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs'

export const LayerPipeLine = {
  code: 'sewersPipeLine',
  name: '管线',
  checked: true,
  layers: [
    {
      code: 'rainline',
      name: '雨水线',
      sname: '雨水线',
      checked: true,
      wfs: WFS_URL + '?TYPENAME=管网',
      minZoom: 10 // 在指定级别显示
    },
    {
      code: 'accidentline',
      name: '事故水线',
      sname: '事故水',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=事故水',
      minZoom: 10
    },
    {
      code: 'oilline',
      name: '含油污水线',
      sname: '含油污水',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=含油污水',
      minZoom: 10
    },
    {
      code: 'saltline',
      name: '含盐污水线',
      sname: '含盐污水',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=含盐污水',
      minZoom: 10
    },
    {
      code: 'alkaliline',
      name: '含碱污水线',
      sname: '含碱污水',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=含碱污水',
      minZoom: 10
    },
    {
      code: 'lifeline',
      name: '生活污水',
      sname: '生活污水',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=生活污水',
      minZoom: 10
    },
    {
      code: 'purifyline',
      name: '净化水线',
      sname: '净化水',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=净化水',
      minZoom: 10
    },
    {
      code: 'loopline',
      name: '循环水线',
      sname: '循环水',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=循环水',
      minZoom: 10
    }
  ]
}

 src/conf/layers/LayerPk.js

New file
@@ -0,0 +1,26 @@
/**
 * 排口
 */
export const LayerPk = {
  code: 'sewersPk',
  name: '排口',
  checked: true,
  layers: [
    {
      code: 'sewersNpk',
      name: '内排口',
      sname: '内排口',
      checked: true,
      wfs: '?TYPENAME=管网',
      minZoom: 10 // 在指定级别显示
    },
    {
      code: 'sewersWpk',
      name: '外排口',
      sname: '外排口',
      checked: true, // 默认选中状态
      wfs: '?TYPENAME=事故水',
      minZoom: 10
    }
  ]
}