线样式修改

This commit is contained in:
2025-07-10 15:14:01 +08:00
parent 45f2d6f4eb
commit 11812253e6
5 changed files with 380 additions and 137 deletions

View File

@ -63,6 +63,7 @@ class PolylineObject extends Base {
this.options.dashSize = options.dashSize || 0.03
this.options['length-unit'] = options['length-unit'] || '米'
this.options['fit-length-unit'] = options['fit-length-unit'] || '米'
this.options['words-name'] = options['words-name'] || '空间长度'
this.options['extend-width'] =
options['extend-width'] || options['extend-width'] === 0
? options['extend-width']
@ -120,6 +121,7 @@ class PolylineObject extends Base {
this.options.attributeType = options.attributeType || 'richText'
this.operate = {}
this.nodePoints = []
this.unitNum = 0
this.Dialog = _Dialog
if (!this.options.positions || this.options.positions.length < 2) {
this._error = '线段最少需要两个坐标!'
@ -218,6 +220,8 @@ class PolylineObject extends Base {
set length(v) {
this.options.length = v
//判断数值是否大于1000m
this._elms.length &&
this._elms.length.forEach(item => {
item.value = v
@ -240,21 +244,49 @@ class PolylineObject extends Base {
return this.options['length-unit']
}
set lengthUnit(v) {
this.unitNum++
this.options['length-unit'] = v
this._elms.lengthUnit &&
this._elms.lengthUnit.forEach(item => {
item.value = v
})
if (this.options.lengthByMeter) {
if (this.unitNum > 2) {
switch (v) {
case '米':
this.length = this.noseToTail ? this.options.fitLengthByMeter : this.options.lengthByMeter
break
case '千米':
this.length = this.noseToTail ? (this.options.fitLengthByMeter / 1000).toFixed(5) : (this.options.lengthByMeter / 1000).toFixed(5)
break
default:
this.length = this.noseToTail ? this.options.fitLengthByMeter : this.options.lengthByMeter
}
} else {
let length = this.noseToTail ? this.options.fitLengthByMeter : this.options.lengthByMeter
this.lengthUnit = length > 1000 || length == 1000 ? '千米' : '米'
}
}
}
get wordsName() {
return this.options['words-name']
}
set wordsName(v) {
this.options['words-name'] = v
this._elms.wordsName &&
this._elms.wordsName.forEach(item => {
item.value = v
})
if (this.options.lengthByMeter) {
switch (v) {
case '':
this.length = this.options.lengthByMeter
case '空间长度':
break
case '千米':
this.length = (this.options.lengthByMeter / 1000).toFixed(5)
case '投影长度':
break
case '地表长度':
break
default:
this.length = this.options.lengthByMeter
break
}
}
}
@ -306,69 +338,82 @@ class PolylineObject extends Base {
set lineType(v) {
let lineTypeData = [
{
name: '实线',
name: '<i class="icon line"></i>实线',
value: '实线',
key: 0
key: 0,
icon: 'line'
},
{
name: '虚线',
name: '<i class="icon dash-line"></i>虚线',
value: '虚线',
key: 1
key: 1,
icon: 'dash-line'
},
{
name: '泛光',
name: '<i class="icon light-line"></i>泛光',
value: '泛光',
key: 2
key: 2,
icon: 'light-line'
},
{
name: '尾迹光线',
name: '<i class="icon tail-line"></i>尾迹光线',
value: '尾迹光线',
key: 3
key: 3,
icon: 'tail-line'
},
{
name: '多尾迹光线',
name: '<i class="icon mult-tail-line"></i>多尾迹光线',
value: '多尾迹光线',
key: 4
key: 4,
icon: 'mult-tail-line'
},
{
name: '流动虚线1',
name: '<i class="icon flow-dash-line1"></i>流动虚线1',
value: '流动虚线1',
key: 5
key: 5,
icon: 'flow-dash-line1'
},
{
name: '流动虚线2',
name: '<i class="icon flow-dash-line2"></i>流动虚线2',
value: '流动虚线2',
key: 6
key: 6,
icon: 'flow-dash-line2'
},
{
name: '流动箭头1',
name: '<i class="icon pic-line1"></i>流动箭头1',
value: '流动箭头1',
key: 7
key: 7,
icon: 'pic-line1'
},
{
name: '流动箭头2',
name: '<i class="icon pic-line2"></i>流动箭头2',
value: '流动箭头2',
key: 8
key: 8,
icon: 'pic-line2'
},
{
name: '流动箭头3',
name: '<i class="icon pic-line3"></i>流动箭头3',
value: '流动箭头3',
key: 9
key: 9,
icon: 'pic-line3'
},
{
name: '流动箭头4',
name: '<i class="icon pic-line4"></i>流动箭头4',
value: '流动箭头4',
key: 10
key: 10,
icon: 'pic-line4'
},
{
name: '流动箭头5',
name: '<i class="icon pic-line5"></i>流动箭头5',
value: '流动箭头5',
key: 11
key: 11,
icon: 'pic-line5'
},
{
name: '流动箭头6',
name: '<i class="icon pic-line6"></i>流动箭头6',
value: '流动箭头6',
key: 12
key: 12,
icon: 'pic-line6'
}
]
this.options.type = Number(v)
@ -420,6 +465,20 @@ class PolylineObject extends Base {
)
this.renewPolygon(fromDegreesArray)
}
if (v) {
if (this.options.fitLengthByMeter > 1000 || this.options.fitLengthByMeter == 1000) {
document.getElementsByClassName('input-select-unit')[1].querySelectorAll('dd')[1].click()
} else {
document.getElementsByClassName('input-select-unit')[1].querySelectorAll('dd')[0].click()
}
} else {
if (this.options.lengthByMeter > 1000 || this.options.lengthByMeter == 1000) {
document.getElementsByClassName('input-select-unit')[1].querySelectorAll('dd')[1].click()
} else {
document.getElementsByClassName('input-select-unit')[1].querySelectorAll('dd')[0].click()
}
}
}
get smooth() {
@ -1504,6 +1563,50 @@ class PolylineObject extends Base {
})
}
let nameData = [
{
name: '空间长度',
value: '空间长度'
},
{
name: '投影长度',
value: '投影长度'
},
{
name: '地表长度',
value: '地表长度'
}
]
let nameDataLegpObject = legp(
this._DialogObject._element.content.getElementsByClassName(
'input-select-unit-box'
)[0],
'.input-select-unit'
)
if (nameDataLegpObject) {
nameDataLegpObject.legp_search(nameData)
let nameDataLegpElm = this._DialogObject._element.content
.getElementsByClassName('input-select-unit')[0]
.getElementsByTagName('input')[0]
this._elms.wordsName = [nameDataLegpElm]
nameDataLegpElm.value = this.options['words-name']
for (let i = 0; i < nameData.length; i++) {
if (nameData[i].value === nameDataLegpElm.value) {
nameDataLegpObject.legp_searchActive(nameData[i].value)
break
}
}
nameDataLegpElm.addEventListener('input', () => {
for (let i = 0; i < nameData.length; i++) {
if (nameData[i].value === nameDataLegpElm.value) {
this.wordsName = nameData[i].value
break
}
}
})
}
// 原始长度单位
let unitData = [
{
@ -1520,12 +1623,13 @@ class PolylineObject extends Base {
this._DialogObject._element.content.getElementsByClassName(
'input-select-unit-box'
)[0],
'.input-select-unit'
'.input-select-unit',
1
)
if (unitDataLegpObject) {
unitDataLegpObject.legp_search(unitData)
let unitDataLegpElm = this._DialogObject._element.content
.getElementsByClassName('input-select-unit')[0]
.getElementsByClassName('input-select-unit')[1]
.getElementsByTagName('input')[0]
this._elms.lengthUnit = [unitDataLegpElm]
unitDataLegpElm.value = this.options['length-unit']
@ -1544,113 +1648,128 @@ class PolylineObject extends Base {
}
})
}
//
// 拟合长度单位
let fitUnitData = [
{
name: '米',
value: '米'
},
{
name: '千米',
value: '千米'
}
]
// let fitUnitData = [
// {
// name: '米',
// value: '米'
// },
// {
// name: '千米',
// value: '千米'
// }
// ]
let fitUnitDataLegpObject = legp(
this._DialogObject._element.content.getElementsByClassName(
'input-select-fit-unit-box'
)[0],
'.input-select-fit-unit'
)
if (fitUnitDataLegpObject) {
fitUnitDataLegpObject.legp_search(fitUnitData)
let fitUnitDataLegpElm = this._DialogObject._element.content
.getElementsByClassName('input-select-fit-unit')[0]
.getElementsByTagName('input')[0]
this._elms.fitLengthUnit = [fitUnitDataLegpElm]
fitUnitDataLegpElm.value = this.options['fit-length-unit']
for (let i = 0; i < fitUnitData.length; i++) {
if (fitUnitData[i].value === fitUnitDataLegpElm.value) {
fitUnitDataLegpObject.legp_searchActive(fitUnitData[i].value)
break
}
}
fitUnitDataLegpElm.addEventListener('input', () => {
for (let i = 0; i < fitUnitData.length; i++) {
if (fitUnitData[i].value === fitUnitDataLegpElm.value) {
this.fitLengthUnit = fitUnitData[i].value
break
}
}
})
}
// let fitUnitDataLegpObject = legp(
// this._DialogObject._element.content.getElementsByClassName(
// 'input-select-fit-unit-box'
// )[0],
// '.input-select-fit-unit'
// )
// if (fitUnitDataLegpObject) {
// fitUnitDataLegpObject.legp_search(fitUnitData)
// let fitUnitDataLegpElm = this._DialogObject._element.content
// .getElementsByClassName('input-select-fit-unit')[0]
// .getElementsByTagName('input')[0]
// this._elms.fitLengthUnit = [fitUnitDataLegpElm]
// fitUnitDataLegpElm.value = this.options['fit-length-unit']
// for (let i = 0; i < fitUnitData.length; i++) {
// if (fitUnitData[i].value === fitUnitDataLegpElm.value) {
// fitUnitDataLegpObject.legp_searchActive(fitUnitData[i].value)
// break
// }
// }
// fitUnitDataLegpElm.addEventListener('input', () => {
// for (let i = 0; i < fitUnitData.length; i++) {
// if (fitUnitData[i].value === fitUnitDataLegpElm.value) {
// this.fitLengthUnit = fitUnitData[i].value
// break
// }
// }
// })
// }
let lineTypeData = [
{
name: '实线',
name: '<i class="icon line"></i>实线',
value: '实线',
key: 0
key: 0,
icon: 'line'
},
{
name: '虚线',
name: '<i class="icon dash-line"></i>虚线',
value: '虚线',
key: 1
key: 1,
icon: 'dash-line'
},
{
name: '泛光',
name: '<i class="icon light-line"></i>泛光',
value: '泛光',
key: 2
key: 2,
icon: 'light-line'
},
{
name: '尾迹光线',
name: '<i class="icon tail-line"></i>尾迹光线',
value: '尾迹光线',
key: 3
key: 3,
icon: 'tail-line'
},
{
name: '多尾迹光线',
name: '<i class="icon mult-tail-line"></i>多尾迹光线',
value: '多尾迹光线',
key: 4
key: 4,
icon: 'mult-tail-line'
},
{
name: '流动虚线1',
name: '<i class="icon flow-dash-line1"></i>流动虚线1',
value: '流动虚线1',
key: 5
key: 5,
icon: 'flow-dash-line1'
},
{
name: '流动虚线2',
name: '<i class="icon flow-dash-line2"></i>流动虚线2',
value: '流动虚线2',
key: 6
key: 6,
icon: 'flow-dash-line2'
},
{
name: '流动箭头1',
name: '<i class="icon pic-line1"></i>流动箭头1',
value: '流动箭头1',
key: 7
key: 7,
icon: 'pic-line1'
},
{
name: '流动箭头2',
name: '<i class="icon pic-line2"></i>流动箭头2',
value: '流动箭头2',
key: 8
key: 8,
icon: 'pic-line2'
},
{
name: '流动箭头3',
name: '<i class="icon pic-line3"></i>流动箭头3',
value: '流动箭头3',
key: 9
key: 9,
icon: 'pic-line3'
},
{
name: '流动箭头4',
name: '<i class="icon pic-line4"></i>流动箭头4',
value: '流动箭头4',
key: 10
key: 10,
icon: 'pic-line4'
},
{
name: '流动箭头5',
name: '<i class="icon pic-line5"></i>流动箭头5',
value: '流动箭头5',
key: 11
key: 11,
icon: 'pic-line5'
},
{
name: '流动箭头6',
name: '<i class="icon pic-line6"></i>流动箭头6',
value: '流动箭头6',
key: 12
key: 12,
icon: 'pic-line6'
}
]
let lineTypeDataLegpObject = legp(
@ -1661,6 +1780,11 @@ class PolylineObject extends Base {
)
if (lineTypeDataLegpObject) {
lineTypeDataLegpObject.legp_search(lineTypeData)
let iActiveElm2 = document.createElement('i')
iActiveElm2.className = 'icon icon-active'
this._DialogObject._element.content.getElementsByClassName('input-select-line-type')[0].getElementsByClassName('cy_datalist')[0].appendChild(iActiveElm2)
let lineTypeDataLegpElm = this._DialogObject._element.content
.getElementsByClassName('input-select-line-type')[0]
.getElementsByTagName('input')[0]
@ -1669,6 +1793,7 @@ class PolylineObject extends Base {
if (lineTypeData[i].key === this.options.type) {
lineTypeDataLegpObject.legp_searchActive(lineTypeData[i].value)
lineTypeDataLegpElm.value = lineTypeData[i].value
iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}`
break
}
}
@ -1676,6 +1801,7 @@ class PolylineObject extends Base {
for (let i = 0; i < lineTypeData.length; i++) {
if (lineTypeData[i].value === lineTypeDataLegpElm.value) {
this.lineType = lineTypeData[i].key
iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}`
//控制参数显隐
if (2 < this.lineType && this.lineType < 13) {//贴图参数
@ -1696,6 +1822,11 @@ class PolylineObject extends Base {
})
}
let heightBoxElm = this._DialogObject._element.content.getElementsByClassName('height-box')[0]
let heightElm = heightBoxElm.getElementsByClassName('height')[0]
let heightConfirmElm = this._DialogObject._element.content.getElementsByClassName('height-confirm')[0]