【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>
标签：vue,console,切割,esri,var,new,图形,null,log 来源： https://blog.csdn.net/ikariku/article/details/120503110