【vue】资产租赁切割图形

问题描述

资产/产业租赁中需要对原始内容进行分割 包括续租修改和终止删除等操作

解决方案

租赁操作:draw画图描出待分割区域 与原始图形intersect 然后merge剩下的所有空置图斑

续租操作:1.不修改图形:复制一个图形;

                  2.修改图形:上传新的图形,剩余空置merge

修改操作:1.不修改图形:不操作;

                  2.修改图形:修改原图形的geometry

终止/删除:与剩余空置merge

完整代码

<template>
  <div class="asset">
    <div v-if="isShow">
      <Row style="height: 32px">
        <Button type="primary" v-show="!isCut" @click="openShpFile"
          >打开文件</Button
        >
        <Button
          type="primary"
          v-show="!isCut"
          @click="startDraw"
          style="margin-left: 10px"
          >开始绘图</Button
        >
        <Button
          type="primary"
          v-show="!isCut"
          @click="undo"
          style="margin: 0 10px"
          >撤销绘图</Button
        >
        <Button type="primary" @click="selectWhole">{{ cutBtnText }}</Button>
        <Button
          type="primary"
          v-show="!isCut && boolDrawed"
          @click="startEdit"
          style="margin-left: 10px"
          >{{ this.editCon }}</Button
        >
      </Row>
      <div
        id="cutMap"
        style="border: 1px solid; margin-top: 10px; height: 55vh"
      ></div>
      <importgeo
        v-if="openFileFlag"
        ref="importg"
        :cutMap="cutMap"
        @import-event="ImportGeoEvt"
      ></importgeo>
    </div>
  </div>
</template>

<script>
import { loadCss, loadModules } from 'esri-loader'
import { TDTLayers } from '@/arcgis/TDTLayer'

import { TDTZJLayers } from '@/arcgis/TDTZJLayer'
import importgeo from '@/arcgis/importgeo'
import MapApi from '@/api/map'

export default {
  components: {
    importgeo
  },
  props: {
    dkguid: String,
    type: String,
    mapCutFlag: Boolean,
    mapCutParam: Object
  },
  data () {
    return {
      isShow: this.mapCutFlag,
      cutMap: null,
      linkageMapExt: this.WGmapConfig.linkageMapExtent,
      openFileFlag: Boolean,
      featureUrl: this.WGmapConfig[this.type]['fUrl'],
      featureHUrl: this.WGmapConfig[this.type + '_H']['fUrl'],
      featureLayer: null,
      featureLayer_old: null,
      isUpdate: false, // 是否修改图形
      importGeo: null,
      polygonSymbol: null,
      polygonSymbolH: null,
      originalFeaturelayer: null,
      isSelected: false,
      clicks: 0,
      cutter: null,
      originalGraphic: null, // 原始资源gra
      originalAttr: null, // 原始资源attr
      selectedGraphic: null, // 选中的gra
      disableDraw: false,
      initClick: null,
      displayLabels: null,
      labelFont: null,
      originalGraphicSelection: null,
      selectionSym: null,
      cutterSym: null,
      orchardSym: null,
      mapClickHandler: null,
      mapMouseMoveHandler: null,
      mapDblClickHandler: null,
      isCut: false, // 是否分割
      targetGraphic: null, // 需保存的gra
      selectedArea: 0, // 面积
      mconstructor: null,
      rentGraphic: null, // 原租赁gra
      draw2: null,
      boolDraw: false,
      boolDrawed: false, // 是否绘画完成图形
      drawedGeo: [], // 当前地图上已经绘画好的geo
      todrawGraphic: null, // 待绘图gra
      editCon: '开始编辑',
      edit: null,
      editFeaLyr: null,
      boolDel: false,
      boolEdit: false,
      cutBtnText: '选择全图',
      tempDGra: null,
      symp1: null,
      syml1: null,
      symf1: null,
      symf2: null,
      syme1: null
    }
  },
  watch: {
    mapCutFlag (newValue, oldValue) {
      this.isShow = this.mapCutFlag
      if (this.mapCutFlag === true) {
        this.removeMapHandler()
        this.disableDraw = false
        this.originalGraphic = null
        this.originalAttr = null
        this.targetGraphic = null
        this.rentGraphic = null
        this.todrawGraphic = null
        this.isCut = false
        this.isUpdate = false
        this.selectedArea = 0
        this.selectedGraphic = null
        this.rentGraphic = null
        this.selections2 = []
        this.draw2 = null
        this.boolDraw = false
        this.boolDrawed = false
        this.drawedGeo = []
        this.todrawGraphic = null
        this.editCon = '开始编辑'
        this.edit = null
        this.editFeaLyr = null
        this.mconstructor = null
        this.tempDGra = null
        this.initMapCut()
      }
    },
    isCut () {
      if (this.isCut === true) {
        this.isUpdate = true// 全图
      } else {
        this.isUpdate = false
      }
    }
  },
  methods: {
    ImportGeoEvt (data) {
      // this.mconstructor.getImportGeo(data)
      this.boolDraw = true
      this.targetGraphic = null
      const options = {
        url:
          this.WGmapConfig.mapOptions.url // 本地js资源
      }
      loadCss(
        this.WGmapConfig.mapOptions.css
      )
      loadModules(
        [
          'esri/graphic'
        ],
        options
      ).then(
        ([
          Graphic
        ]) => {
          esri.config.defaults.io.proxyUrl =
            this.WGmapConfig.mapOptions.proxyUrl
          esriConfig.defaults.io.alwaysUseProxy = false
          var _this = this
          var sobj = {
            constructor () {
              if (data.geo !== null) {
                _this.importGeo = data.geo
                _this.mconstructor.setSym()
                var graphic = new Graphic(data.geo, _this.symf2, null)
                // 在地图上显示
                console.log('graphic', graphic)
                _this.mconstructor.addToMap(graphic)
                _this.cutMap.setExtent(data.geo.getExtent().expand(2))
                _this.mconstructor.intersectShp(data.geo)
              } else {
                _this.$Message.info('上传图形不符合规范!')
              }
            }
          }
          sobj.constructor()
        })
    },
    startDraw () {
      this.boolDraw = true
      this.targetGraphic = null
      const options = {
        url:
          this.WGmapConfig.mapOptions.url // 本地js资源
      }
      loadCss(
        this.WGmapConfig.mapOptions.css
      )
      loadModules(
        [
          'esri/toolbars/draw',
          'esri/graphic'
        ],
        options
      ).then(
        ([
          Draw,
          Graphic
        ]) => {
          esri.config.defaults.io.proxyUrl =
            this.WGmapConfig.mapOptions.proxyUrl
          esriConfig.defaults.io.alwaysUseProxy = false
          var _this = this
          var sobj = {
            constructor () {
              if (_this.draw2 !== null) {
                _this.draw2.deactivate()
                _this.cutMap.disableDoubleClickZoom()// 禁用双击放大地图
              }
              _this.draw2.activate(Draw.POLYGON)
              _this.cutMap.setMapCursor('pointer')
              // this.setSym()
              _this.mconstructor.setSym()
              _this.draw2.on('draw-end', (evt) => {
                // this.addToMap(evt)
                _this.mconstructor.addToMap(evt)
                _this.draw2.deactivate()
                _this.boolDraw = false
              })
            }
          }
          sobj.constructor()
        })
    },
    initMapCut () { // 初始化
      const options = {
        url:
          this.WGmapConfig.mapOptions.url // 本地js资源
      }
      loadCss(
        this.WGmapConfig.mapOptions.css
      )

      loadModules(
        [
          'esri/graphic',
          'esri/geometry/geometryEngine',
          'esri/symbols/SimpleMarkerSymbol',
          'esri/symbols/SimpleLineSymbol',
          'esri/symbols/SimpleFillSymbol',
          'esri/Color'
        ],
        options
      ).then(
        ([
          Graphic,
          geometryEngine,
          SimpleMarkerSymbol,
          SimpleLineSymbol,
          SimpleFillSymbol,
          Color
        ]) => {
          esri.config.defaults.io.proxyUrl =
            this.WGmapConfig.mapOptions.proxyUrl
          esriConfig.defaults.io.alwaysUseProxy = false
          var _this = this
          this.mconstructor = {
            init: function () { },
            mergeGeoms: function (geometrys) {
              return geometryEngine.union([geometrys[0], geometrys[1]])
            },
            activateMerge: function (list) {
              console.log('list', list)
              let selections = []

              if (list.length === 1) {
                selections[0] = list[0]
              } else if (list.length > 1) {
                list.forEach(el => {
                  selections.push(el)
                  if (selections.length === 2) {
                    let _geo = _this.mconstructor.mergeGeoms(selections)
                    selections = [_geo]
                  }
                })
              } else {
                _this.sendMsgByCut('error')
              }

              console.log('activateMerge_selections', selections)
              return selections
            },
            setSym () {
              _this.symp1 = new SimpleMarkerSymbol(
                SimpleMarkerSymbol.STYLE_CIRCLE,
                9,
                new SimpleLineSymbol(
                  SimpleLineSymbol.STYLE_SOLID,
                  new Color([255, 0, 0]),
                  1
                ),
                new Color([255, 255, 255])
              )

              _this.syml1 = new SimpleLineSymbol(
                SimpleLineSymbol.STYLE_SOLID,
                new Color([255, 0, 0, 0.8]),
                2
              )
              _this.symf1 = new SimpleFillSymbol(
                SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(
                  SimpleLineSymbol.STYLE_SOLID,
                  new Color([255, 0, 0, 0.5]),
                  2
                ),
                new Color([255, 0, 0, 0.2])
              )
              // 相交后样式
              _this.symf2 = new SimpleFillSymbol(
                SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(
                  SimpleLineSymbol.STYLE_SOLID,
                  new Color([0, 245, 255]),
                  2
                ),
                new Color([0, 25, 25, 0.5])
              )
              _this.syme1 = new SimpleFillSymbol(
                SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(
                  SimpleLineSymbol.STYLE_SOLID,
                  new Color([255, 0, 0]),
                  2
                ),
                new Color([0, 15, 45, 0.3])
              )
            },
            addToMap (evt) {
              var geometry = evt.geometry // 绘制图形的geometry
              var symbol
              switch (geometry.type) {
                case 'point':
                  symbol = _this.symp1
                  break
                case 'poyline':
                  symbol = _this.syml1
                  break
                case 'polygon':
                  symbol = _this.symf1
                  break
                case 'extent':
                  symbol = _this.syme1
                  break
              }
              _this.tempDGra = null
              _this.tempDGra = new Graphic(geometry, symbol)
              // _this.cutMap.graphics.add(this.tempDGra)
              _this.editFeaLyr.add(_this.tempDGra)
              // this.intersectShp(geometry)
              this.intersectShp(geometry)
            },
            intersectShp: function (dGeo) { // 计算相交的部分
              // var oG = _this.originalGraphic
              var oG = _this.todrawGraphic
              var ogeo
              if (Array.isArray(oG) && oG.length > 0) {
                ogeo = oG.map(g => g.geometry)
              } else {
                ogeo = oG.geometry
              }
              var geos = geometryEngine.intersect(dGeo, ogeo)
              this.differenceShp(ogeo, dGeo)
              if (geos === null) {
                _this.isUpdate = false
                _this.$Message.info('图形不在范围内!')
                return
              }
              _this.boolDrawed = true
              _this.isUpdate = true
              if (Array.isArray(geos)) {
                // _this.isUpdate = true
                var tgeos = geos.map(geo => {
                  // _this.cutMap.graphics.add(new Graphic(geo, this.symf2))
                  _this.editFeaLyr.clear()
                  _this.editFeaLyr.add(_this.tempDGra)
                  _this.editFeaLyr.add(new Graphic(geo, _this.symf2))
                  if (geo.type !== 'polygon') {
                    return false
                  } else {
                    return geo
                  }
                })
                _this.drawedGeo = _this.drawedGeo.concat(tgeos)
                var tgeos2 = geometryEngine.union(_this.drawedGeo)
                _this.targetGraphic = new Graphic(tgeos2, _this.symf1)
              } else {
                // _this.cutMap.graphics.add(new Graphic(geos, this.symf2))
                _this.editFeaLyr.clear()
                _this.editFeaLyr.add(_this.tempDGra)
                _this.editFeaLyr.add(new Graphic(geos, _this.symf2))
                _this.targetGraphic = new Graphic(geos, _this.symf1)
              }
            },
            differenceShp: function (ogeo, geo) {
              var diffGeo = geometryEngine.difference(ogeo, geo)
              var diffGeo2 = geometryEngine.union(diffGeo)
              if (diffGeo2 !== null) {
                _this.selections2 = []
                _this.selections2.push(diffGeo2)
              }
            }       

          }
          // 加载地图
          let validType = ['renewal', 'update', 'add', 'levy']
          if (validType.includes(_this.mapCutParam.type)) {
            this.initMapLayer()
          }
        }
      )
    },
    initMapLayer () { // 加载图层
      const options = {
        url:
          this.WGmapConfig.mapOptions.url // 本地js资源
      }
      loadCss(
        this.WGmapConfig.mapOptions.css
      )
      // 天地图
      TDTLayers()
      TDTZJLayers()
      loadModules(
        [
          'esri/geometry/Extent',
          'esri/toolbars/draw',
          'esri/map',
          'esri/layers/FeatureLayer',
          'esri/geometry/Polygon',
          'esri/graphic',
          'esri/symbols/SimpleFillSymbol',
          'esri/symbols/SimpleLineSymbol',
          'esri/Color',
          'esri/tasks/query',
          'esri/tasks/FeatureSet',
          'esri/renderers/SimpleRenderer'
        ],
        options
      ).then(
        ([
          Extent,
          Draw,
          Map,
          FeatureLayer,
          Polygon,
          Graphic,
          SimpleFillSymbol,
          SimpleLineSymbol,
          Color,
          Query,
          FeatureSet,
          SimpleRenderer
        ]) => {
          esri.config.defaults.io.proxyUrl =
            this.WGmapConfig.mapOptions.proxyUrl
          esriConfig.defaults.io.alwaysUseProxy = false

          var _this = this

          let tdtyx = new TDTLayer('img_c', 'tdt') // 影像
          let cia = new TDTLayer('cia_c', 'tdtzjcia') // 平面
          var mapExtent = new Extent({
            xmin: this.linkageMapExt.xmin,
            ymin: this.linkageMapExt.ymin,
            xmax: this.linkageMapExt.xmax,
            ymax: this.linkageMapExt.ymax,
            spatialReference: { wkid: 4326 }
          })

          this.cutMap = new Map('cutMap', {
            id: 'cutMap',
            logo: false,
            extent: mapExtent,
            spatialReference: { wkid: 4326 }
          })

          this.draw2 = new Draw(this.cutMap)
          this.featureLayer = new FeatureLayer(this.featureUrl + '/0', {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ['*']
          })

          this.featureLayer_old = new FeatureLayer(this.featureHUrl + '/0', {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ['*']
          })

          // this.selectionLayer = new GraphicsLayer()

          // Layer symbology
          this.orchardSym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([175, 255, 155]), 2), new Color([175, 255, 155, 0.3]))
          this.selectionSym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color('black'), 3), new Color([255, 255, 255, 0.25]))
          this.cutterSym = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color('white'), 2)

          this.polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0]), 3), new Color([255, 255, 0, 0]))

          let qGeo = null
          let rentMergeGeo = []
          let rentGeoList = []

          console.log('_this.mapCutParam', _this.mapCutParam)

          let queryKZ = new Query()
          queryKZ.outFields = ['*']
          queryKZ.returnGeometry = true
          queryKZ.where = "TDGUID = '" + this.dkguid + "' AND SYZT = '空置'"// 空置

          let query = new Query()
          query.outFields = ['*']
          query.returnGeometry = true
          query.where = "XZGUID = '" + _this.mapCutParam.XZGUID + "' "// 同xzguid的租赁

          this.featureLayer.queryFeatures(queryKZ, function (resKZ) {
            var featuresKZ = resKZ.features
            console.log('featuresKZ', featuresKZ)

            _this.featureLayer.queryFeatures(query, function (res) {
              var features = res.features
              console.log('features ', features)
              if (Array.isArray(featuresKZ) && featuresKZ.length > 0) {
                if (featuresKZ.length === 1) {
                  _this.originalAttr = featuresKZ[0].attributes
                  _this.originalGraphic = featuresKZ[0]

                  if (features.length > 0) {
                    features.forEach(ele => {
                      rentGeoList.push(ele.geometry)
                      if (ele.attributes.GUID === _this.mapCutParam.oldGUID) { // 原/征收租赁gra
                        _this.rentGraphic = ele
                      } else {
                        _this.sendMsgByCut('error')
                      }
                    })
                    console.log('rentGeoList', rentGeoList)

                    if (rentGeoList.length > 1) {
                      rentMergeGeo = _this.mconstructor.activateMerge(rentGeoList) // 同xzguid的merge
                    } else if (rentGeoList.length === 1) {
                      rentMergeGeo[0] = rentGeoList[0]
                    }
                    let mergeRes = []
                    if (rentMergeGeo !== [] && _this.originalGraphic !== null) {
                      mergeRes = _this.mconstructor.activateMerge([rentMergeGeo[0], _this.originalGraphic.geometry]) // 同xzguid的merge后和空置merge
                    }

                    console.log('mergeRes[0]', mergeRes[0])
                    let geo = new Polygon({
                      'rings': mergeRes[0].rings,
                      'spatialReference': { wkid: 4326 }
                    })
                    qGeo = geo// merge后的
                  } else { // 新建租赁
                    console.log('featuresKZ[0]', featuresKZ[0])
                    let geo = new Polygon({
                      'rings': featuresKZ[0].geometry.rings,
                      'spatialReference': { wkid: 4326 }
                    })
                    console.log('geo', geo)
                    qGeo = geo
                  }
                } else {
                  _this.sendMsgByCut('error')
                }
              } else { // 无空置
                if (features.length > 0) {
                  features.forEach(ele => {
                    rentGeoList.push(ele.geometry)
                  })
                  console.log('rentGeoList', rentGeoList)

                  if (rentGeoList.length > 1) {
                    rentMergeGeo = _this.mconstructor.activateMerge(rentGeoList) // 同xzguid的merge
                  } else if (rentGeoList.length === 1) {
                    rentMergeGeo[0] = rentGeoList[0]
                  }

                  console.log('rentMergeGeo[0]', rentMergeGeo[0])
                  let zgeo = new Polygon({
                    'rings': rentMergeGeo[0].rings,
                    'spatialReference': { wkid: 4326 }
                  })
                  qGeo = zgeo
                  var graphic = new Graphic(zgeo, _this.polygonSymbol, null, null)
                  _this.originalGraphic = graphic
                  _this.targetGraphic = graphic
                  _this.originalAttr = features[0].attributes
                }
              }
              console.log('qGeo', qGeo)
              if (qGeo !== null) {
                // todrawGra
                var todrawgra = new Graphic(qGeo, _this.polygonSymbol, null, null)
                _this.todrawGraphic = todrawgra
                // 构建featurelayer
                var featureObj = {
                  // 数据的基本属性
                  'displayFieldName': '',
                  'fieldAliases': {
                    'OBJECTID': 'OBJECTID',
                    'GUID': 'GUID',
                    'TDGUID': 'TDGUID',
                    'SYZT': 'SYZT',
                    'SYMJ': 'SYMJ'
                  },
                  'geometryType': 'esriGeometryPolygon',
                  'spatialReference': {
                    'wkid': 4326,
                    'latestWkid': 4326
                  },
                  // 所含有的字段信息
                  'fields': [
                    {
                      'name': 'OBJECTID',
                      'type': 'esriFieldTypeOID',
                      'alias': 'OBJECTID'
                    },
                    {
                      'name': 'GUID',
                      'type': 'esriFieldTypeInteger',
                      'alias': 'GUID'
                    },
                    {
                      'name': 'TDGUID',
                      'type': 'esriFieldTypeString',
                      'alias': 'TDGUID',
                      'length': 50
                    },
                    {
                      'name': 'SYZT',
                      'type': 'esriFieldTypeString',
                      'alias': 'SYZT',
                      'length': 50
                    },
                    {
                      'name': 'SYMJ',
                      'type': 'esriFieldTypeDouble',
                      'alias': 'SYMJ',
                      'length': 20
                    }
                  ],
                  // 所含有的集合要素集
                  'features': [
                    {
                      'attributes': {
                        'OBJECTID': _this.originalAttr['OBJECTID'],
                        'GUID': _this.originalAttr['GUID'],
                        'TDGUID': _this.originalAttr['TDGUID'],
                        'SYZT': _this.originalAttr['SYZT'],
                        'SYMJ': _this.originalAttr['SYMJ']
                      },
                      'geometry': qGeo
                    }
                  ]
                }
                var layerDefinition = {
                  'geometryType': 'esriGeometryPolygon',
                  'fields': [
                    {
                      'name': 'OBJECTID',
                      'type': 'esriFieldTypeOID',
                      'alias': 'OBJECTID'
                    },
                    {
                      'name': 'GUID',
                      'type': 'esriFieldTypeInteger',
                      'alias': 'GUID'
                    },
                    {
                      'name': 'TDGUID',
                      'type': 'esriFieldTypeString',
                      'alias': 'TDGUID',
                      'length': 50
                    },
                    {
                      'name': 'SYZT',
                      'type': 'esriFieldTypeString',
                      'alias': 'SYZT',
                      'length': 50
                    },
                    {
                      'name': 'SYMJ',
                      'type': 'esriFieldTypeDouble',
                      'alias': 'SYMJ',
                      'length': 20
                    }
                  ]
                }
                var featureSet = new FeatureSet(featureObj)
                var featureCollection = {
                  layerDefinition: layerDefinition,
                  featureSet: featureSet
                }
                var renderer = new SimpleRenderer(_this.polygonSymbol)
                _this.originalFeaturelayer = new FeatureLayer(featureCollection)
                _this.originalFeaturelayer.setRenderer(renderer)

                // 构建editeaturelayer
                var featureObjE = {
                  // 数据的基本属性
                  'displayFieldName': '',
                  'fieldAliases': {
                    'OBJECTID': 'OBJECTID',
                    'GUID': 'GUID',
                    'TDGUID': 'TDGUID',
                    'SYZT': 'SYZT',
                    'SYMJ': 'SYMJ'
                  },
                  'geometryType': 'esriGeometryPolygon',
                  'spatialReference': {
                    'wkid': 4326,
                    'latestWkid': 4326
                  },
                  // 所含有的字段信息
                  'fields': [
                    {
                      'name': 'OBJECTID',
                      'type': 'esriFieldTypeOID',
                      'alias': 'OBJECTID'
                    },
                    {
                      'name': 'GUID',
                      'type': 'esriFieldTypeInteger',
                      'alias': 'GUID'
                    },
                    {
                      'name': 'TDGUID',
                      'type': 'esriFieldTypeString',
                      'alias': 'TDGUID',
                      'length': 50
                    },
                    {
                      'name': 'SYZT',
                      'type': 'esriFieldTypeString',
                      'alias': 'SYZT',
                      'length': 50
                    },
                    {
                      'name': 'SYMJ',
                      'type': 'esriFieldTypeDouble',
                      'alias': 'SYMJ',
                      'length': 20
                    }
                  ],
                  // 所含有的集合要素集
                  'features': []
                }
                var layerDefinitionE = {
                  'geometryType': 'esriGeometryPolygon',
                  'fields': [
                    {
                      'name': 'OBJECTID',
                      'type': 'esriFieldTypeOID',
                      'alias': 'OBJECTID'
                    },
                    {
                      'name': 'GUID',
                      'type': 'esriFieldTypeInteger',
                      'alias': 'GUID'
                    },
                    {
                      'name': 'TDGUID',
                      'type': 'esriFieldTypeString',
                      'alias': 'TDGUID',
                      'length': 50
                    },
                    {
                      'name': 'SYZT',
                      'type': 'esriFieldTypeString',
                      'alias': 'SYZT',
                      'length': 50
                    },
                    {
                      'name': 'SYMJ',
                      'type': 'esriFieldTypeDouble',
                      'alias': 'SYMJ',
                      'length': 20
                    }
                  ]
                }
                var featureSetE = new FeatureSet(featureObjE)
                var featureCollectionE = {
                  layerDefinition: layerDefinitionE,
                  featureSet: featureSetE
                }
                _this.editFeaLyr = new FeatureLayer(featureCollectionE, {
                  id: 'editFeaLyr'
                })

                _this.cutMap.addLayers([tdtyx, cia, _this.originalFeaturelayer, _this.selectionLayer, _this.editFeaLyr])
                _this.cutMap.setExtent(qGeo.getExtent().expand(2))

                // 显示原租赁图形
                if (_this.rentGraphic !== null) {
                  let oldrent = new Graphic(_this.rentGraphic.geometry, _this.orchardSym, null, null)
                  _this.originalFeaturelayer.add(oldrent)
                }
              } else {
                console.log('qqqqgeo')
                _this.$Message.info('当前无空置!')
                _this.sendMsgByCut('error')
              }
            }, function (err) {
              console.log(err)
              _this.$Message.info('查看位置失败!')
              _this.sendMsgByCut('error')
            })
          }, function (err) {
            console.log(err)
            _this.$Message.info('查看位置失败!')
            _this.sendMsgByCut('error')
          })

          // 绑定地图事件
          // this.mconstructor.attachHandler()
          this.cutMap.setMapCursor('default')
        }
      )
    },
    removeMapHandler () {
      if (this.mapClickHandler !== null) {
        this.mapClickHandler.remove()
      }
      if (this.mapMouseMoveHandler !== null) {
        this.mapMouseMoveHandler.remove()
      }

      if (this.mapDblClickHandler !== null) {
        this.mapDblClickHandler.remove()
      }
    },
    openShpFile () {
      this.openFileFlag = true
      // 打开文件
      this.$refs.importg.$refs.importfile.dispatchEvent(
        new MouseEvent('click'))
    },
    undo () { // 撤销
      this.editFeaLyr.clear()
      if (this.boolDrawed) {
        this.originalFeaturelayer.clear()
        this.originalFeaturelayer.add(this.todrawGraphic)
      }

      this.cutter = null
      this.targetGraphic = null
      this.isSelected = false
      this.clicks = 0

      this.cutMap.graphics.clear()

      this.removeMapHandler()
      // this.mconstructor.attachHandler()
      this.cutMap.setMapCursor('default')

      this.boolDrawed = false
      this.boolDraw = false
      this.drawedGeo = []
      this.draw2.deactivate()
    },
    async saveCutRes () {
      loadModules(
        [
          'esri/graphic',
          'esri/geometry/geometryEngine',
          'esri/tasks/QueryTask',
          'esri/tasks/query']
      ).then(
        ([
          Graphic,
          geometryEngine,
          QueryTask,
          Query
        ]) => {
          esri.config.defaults.io.proxyUrl =
            this.WGmapConfig.mapOptions.proxyUrl
          esriConfig.defaults.io.alwaysUseProxy = false

          // 面积
          this.selectedArea = 0
          try {
            this.selectedArea = geometryEngine.geodesicArea(this.targetGraphic.geometry, 'square-meters').toFixed(2)
            console.log('this.ttargetGraphic', this.targetGraphic, this.selectedArea)
          } catch (err) {
            console.log('this.selectedAreaErr', err)
          }

          MapApi.getWorkerName().then(mres => {
            if (this.targetGraphic !== null) {
              // 先上传目标
              // attributes对象增加属性
              this.$set(this.mapCutParam, 'CZRY', mres.CZRY)
              this.$set(this.mapCutParam, 'CZSJ', mres.CZSJ)
              this.$set(this.mapCutParam, 'SYMJ', this.selectedArea)
              // this.$set(evt.graphic.attributes, 'SYZT', syzt)使用状态从前台传

              // var attributesnew = this.mapCutParam// 此时不需要OBJECTID

              // 改1
              let otherGeoList = []
              let allGeoList = []
              let allrent = []
              let otherrent = []

              var _this = this
              var query = new Query()
              // query.where = "GUID = '" + this.mapCutParam.oldGUID + "'"// 原租赁
              query.where = "XZGUID = '" + _this.mapCutParam.XZGUID + "'"
              query.returnGeometry = true
              this.featureLayer.queryFeatures(query, function (res) {
                var feas = res.features
                if (Array.isArray(feas) && feas.length > 0) {
                  let f = null
                  allGeoList = feas.map(g => g.geometry)
                  feas.forEach(ele => {
                    if (ele.attributes.GUID === _this.mapCutParam.oldGUID) { // 原租赁
                      f = ele
                    } else {
                      otherGeoList.push(ele.geometry)// 同xzguid其他的租赁
                    }
                  })
                  console.log('fff', f)

                  if (otherGeoList.length > 0) {
                    otherrent = _this.mconstructor.activateMerge(otherGeoList) // 同xzguid的其他租赁merge
                  }

                  allrent = _this.mconstructor.activateMerge(allGeoList)// 同xzguid的租赁
                  if (f !== null) {
                    // 原租赁写入历史图层
                    _this.featureLayer_old.applyEdits([f], null, null, function (res) {
                      console.log(res)
                    }, function (err) {
                      console.log(err)
                      _this.$Message.info('写入历史图层失败!')
                      _this.sendMsgByCut('error')
                    })

                    var tG = feas[0].setGeometry(_this.targetGraphic.geometry)// 待保存的租赁
                    let obj = {}
                    for (let k in f.attributes) {
                      if (k === 'CZRY' || k === 'CZSJ' || k === 'SYMJ' || k === 'GUID') {
                        obj[k] = _this.mapCutParam[k]
                      } else {
                        obj[k] = f.attributes[k]
                      }
                    }

                    if (_this.mapCutParam.type === 'renewal') { // 续租
                      let granew = new Graphic(_this.targetGraphic.geometry, null, obj)
                      allrent.push(_this.targetGraphic.geometry)// 加入allrent

                      _this.featureLayer.applyEdits([granew], null, null, function (res) {
                        console.log(res)
                      }, function (err) {
                        console.log(err)
                        _this.$Message.error('写入失败!')
                        _this.sendMsgByCut('error')
                      })
                    } else if (_this.mapCutParam.type === 'update') { // 修改
                      let tA = tG.setAttributes(obj)
                      _this.featureLayer.applyEdits(null, [tA], null, function (res) {
                        console.log(res)
                      }, function (err) {
                        console.log(err)
                        _this.$Message.info('修改图层失败!')
                        _this.sendMsgByCut('error')
                      })
                    } else {
                      _this.sendMsgByCut('error')
                    }
                  } else {
                    _this.sendMsgByCut('error')
                  }
                } else { // 新增租赁
                  let obj = {}
                  for (let k in _this.mapCutParam) {
                    obj[k] = _this.mapCutParam[k]
                  }
                  if (obj['SYZT'] === '空置' || obj['SYZT'] === null || obj['SYZT'] === '' || obj['SYZT'] === undefined) {
                    obj['SYZT'] = '租赁'
                  }
                  console.log('新增租赁_this.mapCutParam', _this.mapCutParam)
                  allrent[0] = _this.targetGraphic.geometry

                  let granew = new Graphic(_this.targetGraphic.geometry, null, obj)
                  _this.featureLayer.applyEdits([granew], null, null, function (res) {
                    console.log(res)
                  }, function (err) {
                    console.log(err)
                    _this.$Message.error('写入失败!')
                    _this.sendMsgByCut('error')
                  })
                  // 写入历史图层
                  _this.featureLayer_old.applyEdits([granew], null, null, function (res) {
                    console.log(res)
                  }, function (err) {
                    console.log(err)
                    _this.$Message.error('写入历史图层失败!')
                    _this.sendMsgByCut('error')
                  })
                }

                // 切剩下的attr
                // 切剩下的gra
                let otherCut = _this.selections2[0]
                let mergeRes = null

                if (otherCut !== null && otherCut !== undefined) {
                  // 面积
                  // var otherArea = 0
                  // try {
                  //   otherArea = geometryEngine.geodesicArea(otherCut, 'square-meters').toFixed(2)
                  //   console.log('otherArea', otherArea)
                  // } catch (err) {
                  //   console.log('otherAreaErr', err)
                  // }

                  var query2 = new Query()
                  query2.returnGeometry = true
                  query2.where = "OBJECTID='" + _this.originalAttr['OBJECTID'] + "' and SYZT='空置' "// 修改空置
                  _this.featureLayer.queryFeatures(query2, function (res) {
                    var feas = res.features
                    let difference = null

                    console.log('otherGeoList', otherGeoList)
                    mergeRes = _this.mconstructor.activateMerge([allrent[0], otherCut])

                    if (Array.isArray(otherGeoList) && otherGeoList.length > 0) {
                      difference = geometryEngine.difference(mergeRes[0], otherrent[0])// 全部的减去同xzguid其他的租赁merge
                    } else {
                      difference = geometryEngine.difference(mergeRes[0], allrent[0])// 全部的减去同xzguid所有的租赁merge
                    }

                    if (difference !== null) {
                      if (Array.isArray(feas) && feas.length > 0) {
                        console.log('difference', difference)
                        // 改写空置
                        let tG = feas[0].setGeometry(difference)

                        _this.featureLayer.applyEdits(null, [tG], null, function (res) {
                          console.log(res)
                          _this.sendMsgByCut('success')
                        }, function (err) {
                          console.log(err)
                          _this.$Message.info('空置写入失败!')
                          _this.sendMsgByCut('error')
                        })
                      } else { // 无空置不改动
                        _this.sendMsgByCut('success')
                      }
                    } else {
                      _this.sendMsgByCut('error')
                    }
                  }, function (err) {
                    console.log(err)
                    _this.sendMsgByCut('error')
                  })
                } else {
                  _this.$Message.info('写入剩下的失败!')
                  _this.sendMsgByCut('error')
                }
              }, function (err) {
                _this.sendMsgByCut('error')
                console.log(err)
              })
            }
          })
        }
      )
    },
    async saveWholeRes () { // 整图
      loadModules(
        [
          'esri/graphic',
          'esri/geometry/geometryEngine'
        ]
      ).then(
        ([
          Graphic,
          geometryEngine
        ]) => {
          esri.config.defaults.io.proxyUrl =
            this.WGmapConfig.mapOptions.proxyUrl
          esriConfig.defaults.io.alwaysUseProxy = false

          var _this = this
          // 面积
          this.selectedArea = 0
          try {
            console.log('this.originalGraphic', this.originalGraphic)
            this.selectedArea = geometryEngine.geodesicArea(this.originalGraphic.geometry, 'square-meters').toFixed(2)
          } catch (err) {
            console.log('this.selectedAreaErr', err)
          }

          MapApi.getWorkerName().then(res => {
            if (this.originalGraphic !== null) {
              // 修改目标属性
              // attributes对象增加属性
              this.$set(this.mapCutParam, 'CZRY', res.CZRY)
              this.$set(this.mapCutParam, 'CZSJ', res.CZSJ)
              this.$set(this.mapCutParam, 'SYMJ', this.selectedArea)
              // this.$set(evt.graphic.attributes, 'SYZT', syzt)使用状态从前台传
              this.$set(this.mapCutParam, 'OBJECTID', this.originalAttr['OBJECTID'])// update要素必须有一个有效的OBJECTID
              var attributes = this.mapCutParam

              var granew = new Graphic(this.originalGraphic.geometry, null, attributes)

              this.featureLayer.applyEdits(null, [granew], null, function (res) {
                console.log(res)
              }, function (err) {
                console.log(err)
                _this.$Message.error('写入失败!')
                _this.sendMsgByCut('error')
              })

              // 再写入历史图层
              this.featureLayer_old.applyEdits([granew], null, null, function (res) {
                console.log(res)
                _this.sendMsgByCut('success')
              }, function (err) {
                console.log(err)
                _this.$Message.info('写入历史图层失败!')
                _this.sendMsgByCut('error')
              })
            }
          })
        }
      )
    },
    async saveResolveRes () { // 终止/删除
      console.log('saveResolveRes')
      loadModules(
        [
          'esri/layers/FeatureLayer',
          'esri/tasks/QueryTask',
          'esri/tasks/query',
          'esri/graphic',
          'esri/geometry/geometryEngine'
        ]
      ).then(
        ([
          FeatureLayer,
          QueryTask,
          Query,
          Graphic,
          geometryEngine

        ]) => {
          esri.config.defaults.io.proxyUrl =
            this.WGmapConfig.mapOptions.proxyUrl
          esriConfig.defaults.io.alwaysUseProxy = false

          // 初始化
          this.initMapCut()

          var featureLayer = new FeatureLayer(this.featureUrl + '/0', {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ['*']
          })

          var featureLayer_old = new FeatureLayer(this.featureHUrl + '/0', {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ['*']
          })

          MapApi.getWorkerName().then(mres => {
            var _this = this

            let otherGeoList = []
            let otherrent = []

            var queryParam = new Query()
            queryParam.returnGeometry = true
            queryParam.outFields = ['*']
            // queryParam.where = "GUID = '" + _this.mapCutParam.oldGUID + "'"
            queryParam.where = "XZGUID = '" + _this.mapCutParam.XZGUID + "'"

            var queryParam2 = new Query()
            queryParam2.outFields = ['*']
            queryParam2.where = "TDGUID = '" + _this.dkguid + "' AND SYZT='空置'"

            console.log(queryParam.where)

            featureLayer.queryFeatures(queryParam2, function (res2) {
              var feas2 = res2.features
              console.log('feas2feas2', feas2)

              featureLayer.queryFeatures(queryParam, function (res) {
                var feas = res.features
                if (Array.isArray(feas) && feas.length > 0) {
                  let f = null

                  let allGeoList = feas.map(g => g.geometry)

                  feas.forEach(ele => {
                    if (ele.attributes.GUID === _this.mapCutParam.oldGUID) { // 待操作的租赁
                      f = ele
                    } else {
                      otherGeoList.push(ele.geometry)// 同xzguid其他的租赁
                    }
                  })

                  console.log('otherGeoList', otherGeoList)

                  if (otherGeoList.length > 1) {
                    otherrent = _this.mconstructor.activateMerge(otherGeoList) // 同xzguid其他的租赁merge
                  } else if (otherGeoList.length === 1) {
                    otherrent[0] = otherGeoList[0]
                  }

                  console.log('allGeoList', allGeoList)
                  let allrent = _this.mconstructor.activateMerge(allGeoList)

                  let difference = null
                  let mergeRes = null

                  if (Array.isArray(feas2) && feas2.length === 1) {
                    // console.log('allrent[0], feas2[0].geometry', allrent[0], feas2[0].geometry)
                    mergeRes = _this.mconstructor.activateMerge([allrent[0], feas2[0].geometry])
                    if (Array.isArray(otherGeoList) && otherGeoList.length > 0) {
                      difference = geometryEngine.difference(mergeRes[0], otherrent[0])// 全部的减去同xzguid其他的租赁merge
                    } else {
                      difference = mergeRes[0]
                    }

                    // 写入空置
                    if (difference !== null) {
                      let tG = feas2[0].setGeometry(difference)

                      featureLayer.applyEdits(null, [tG], null, function (res) {
                        console.log(res)
                      }, function (err) {
                        console.log(err)
                        _this.$Message.info('空置写入失败!')
                        _this.sendMsgByCut('error')
                      })
                    } else {
                      _this.sendMsgByCut('error')
                    }
                  } else { // 无空置
                    mergeRes = allrent
                    debugger
                    console.log('otherGeoList', otherGeoList)
                    if (Array.isArray(otherGeoList) && otherGeoList.length > 0) {
                      difference = geometryEngine.difference(mergeRes[0], otherrent[0])// 全部的减去同xzguid其他的租赁merge
                    } else {
                      difference = mergeRes[0]
                    }

                    // 写入新空置
                    let attrzk = {
                      TDGUID: _this.dkguid,
                      SYZT: '空置',
                      CZRY: mres.CZRY,
                      CZSJ: mres.CZSJ
                    }
                    let grakz = new Graphic(difference, null, attrzk)
                    featureLayer.applyEdits([grakz], null, null, function (res) {
                      console.log(res)
                    }, function (err) {
                      console.log(err)
                      _this.$Message.info('空置写入失败!')
                      _this.sendMsgByCut('error')
                    })
                  }

                  console.log('fff', f)
                  if (f !== null) {
                    // 终止or删除写入历史图层
                    let attrold = {
                      GUID: f.attributes.GUID,
                      TDGUID: f.attributes.TDGUID,
                      XZGUID: f.attributes.XZGUID,
                      SYMJ: f.attributes.SYMJ,
                      SYZT: _this.mapCutParam.SYZT, // 终止or删除
                      CZRY: mres.CZRY,
                      CZSJ: mres.CZSJ
                    }
                    let graold = new Graphic(f.geometry, null, attrold)

                    featureLayer_old.applyEdits([graold], null, null, function (res) {
                      console.log(res)
                    }, function (err) {
                      console.log(err)
                      _this.$Message.info('写入历史图层失败!')
                      _this.sendMsgByCut('error')
                    })
                    // 删除原租赁
                    featureLayer.applyEdits(null, null, [f], function (res) {
                      console.log(res)
                      _this.sendMsgByCut('success')
                    }, function (err) {
                      console.log(err)
                      _this.$Message.info('删除失败!')
                      _this.sendMsgByCut('error')
                    })
                  } else {
                    _this.sendMsgByCut('error')
                  }
                } else { // 无图形
                  _this.sendMsgByCut('success')
                }
              }, function (err) {
                console.log(err)
                _this.sendMsgByCut('error')
              })
            }, function (err) {
              console.log(err)
              _this.sendMsgByCut('error')
            }
            )
          })
        })
    },
    async saveOriginlRes () { // 续租不改图
      console.log('saveOriginlRes')
      loadModules(
        [
          'esri/layers/FeatureLayer',
          'esri/tasks/QueryTask',
          'esri/tasks/query',
          'esri/graphic',
          'esri/geometry/geometryEngine'
        ]
      ).then(
        ([
          FeatureLayer,
          QueryTask,
          Query,
          Graphic,
          geometryEngine

        ]) => {
          esri.config.defaults.io.proxyUrl =
            this.WGmapConfig.mapOptions.proxyUrl
          esriConfig.defaults.io.alwaysUseProxy = false

          // 初始化
          this.initMapCut()

          var featureLayer = new FeatureLayer(this.featureUrl + '/0', {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ['*']
          })

          var featureLayer_old = new FeatureLayer(this.featureHUrl + '/0', {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ['*']
          })

          MapApi.getWorkerName().then(mres => {
            var _this = this

            var queryParam = new Query()
            queryParam.returnGeometry = true
            queryParam.outFields = ['*']
            queryParam.where = "GUID = '" + _this.mapCutParam.oldGUID + "'"// 当前租赁

            console.log(queryParam.where)

            featureLayer.queryFeatures(queryParam, function (res) {
              var feas = res.features
              if (Array.isArray(feas) && feas.length === 1) {
                let f = feas[0]

                console.log('fff', f)
                if (f !== null) {
                  // 终止or删除写入历史图层
                  let attr = {
                    GUID: _this.mapCutParam.GUID, // newdkgid

                    TDGUID: f.attributes.TDGUID,
                    XZGUID: f.attributes.XZGUID,
                    SYMJ: f.attributes.SYMJ,
                    SYZT: f.attributes.SYZT,
                    CZRY: mres.CZRY,
                    CZSJ: mres.CZSJ
                  }
                  let gra = new Graphic(f.geometry, null, attr)

                  featureLayer.applyEdits([gra], null, null, function (res) {
                    console.log(res)
                  }, function (err) {
                    console.log(err)
                    _this.$Message.info('写入图层失败!')
                    _this.sendMsgByCut('error')
                  })

                  featureLayer_old.applyEdits([gra], null, null, function (res) {
                    console.log(res)
                    _this.sendMsgByCut('success')
                  }, function (err) {
                    console.log(err)
                    _this.$Message.info('写入历史图层失败!')
                    _this.sendMsgByCut('error')
                  })
                } else {
                  _this.sendMsgByCut('error')
                }
              } else { // 无图形
                _this.$Message.info('写入图层失败!')
                _this.sendMsgByCut('error')
              }
            }, function (err) {
              console.log(err)
              _this.sendMsgByCut('error')
            })
          })
        })
    },
    sendMsgByCut (st) { // 传递状态
      this.$emit('mapcut-event', st)
    },
    startEdit () { // 编辑节点
      this.setBool('edit')
      const options = {
        url:
          this.WGmapConfig.mapOptions.url // 本地js资源
      }
      loadCss(
        this.WGmapConfig.mapOptions.css
      )
      loadModules(
        [
          'esri/toolbars/edit',
          'esri/toolbars/draw'
        ],
        options
      ).then(
        ([
          Edit,
          Draw
        ]) => {
          esri.config.defaults.io.proxyUrl =
            this.WGmapConfig.mapOptions.proxyUrl
          esriConfig.defaults.io.alwaysUseProxy = false
          var _this = this
          var obj = {
            constructor () {
              _this.draw2 = new Draw(_this.cutMap)
              _this.edit = new Edit(_this.cutMap)

              if (_this.edit !== null) {
                _this.edit.deactivate()
              }

              _this.draw2 = new Draw(_this.cutMap)
              _this.edit = new Edit(_this.cutMap)

              if (Array.isArray(_this.editFeaLyr.graphics) && _this.editFeaLyr.graphics.length === 0) {
                _this.$Message.warning('没有要编辑的图形')
              } else {
                this.setEdit()
              }
            },
            setEdit () {
              if (_this.editCon === '开始编辑') { // 开始编辑
                _this.$Message.warning('请双击选择要编辑的图形')
                _this.editFeaLyr.on('dbl-click', function (evt) {
                  if (_this.boolEdit) {
                    var options = {
                      allowAddVertices: true,
                      allowDeleteVertices: true,
                      uniformScaling: true
                    }
                    _this.edit.activate(Edit.EDIT_VERTICES | Edit.MOVE | Edit.ROTATE, evt.graphic, options)
                    _this.editCon = '停止编辑'
                  }
                })
              } else {
                _this.editCon = '开始编辑'
                _this.edit.on('deactivate', function (evt) {
                })
                // console.log('_this.editFeaLyr.graphics', _this.editFeaLyr.graphics)
                _this.mconstructor.intersectShp(_this.editFeaLyr.graphics[1].geometry)// 编辑后相交图形
              }
            }
          }
          obj.constructor()
        })
    },
    setBool (btnType) {
      if (this.edit !== null) {
        this.edit.deactivate()
      }
      if (this.draw2 != null) {
        this.draw2.deactivate()
      }

      switch (btnType) {
        case 'edit':
          this.boolDel = false
          this.boolEdit = true
          this.boolDraw = false
          break
        case 'del':
          this.boolDel = true
          this.boolEdit = false
          this.editCon = '开始编辑'
          this.boolDraw = false
          break
        case 'draw':
          this.boolDel = false
          this.boolEdit = false
          this.editCon = '开始编辑'
          this.boolDraw = true
      }
    },
    selectWhole () {
      this.undo()
      this.isCut = !this.isCut
      if (this.isCut) {
        this.cutBtnText = '取消全图'
      } else {
        this.cutBtnText = '选择全图'
      }
    }

  }
}
</script>

<style lang="scss" scoped>
/deep/.ivu-tooltip-rel {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

上一篇:注意地理数据库中保留关键字


下一篇:MFC头文件