This commit is contained in:
parent
9fe54cd44c
commit
13fe0cbb99
|
|
@ -317,6 +317,8 @@ export default {
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
this.modelPreviewInfoList = res.data
|
this.modelPreviewInfoList = res.data
|
||||||
this.modelPreviewVisible = true
|
this.modelPreviewVisible = true
|
||||||
|
|
||||||
|
console.log('res', res.data)
|
||||||
this.initMap()
|
this.initMap()
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
|
|
@ -693,8 +695,49 @@ export default {
|
||||||
this.map.clearOverlays()
|
this.map.clearOverlays()
|
||||||
|
|
||||||
for (const item of modelInfoList) {
|
for (const item of modelInfoList) {
|
||||||
|
console.log(item, 'item')
|
||||||
try {
|
try {
|
||||||
if (item.entityType === 'LINE') {
|
// 处理新的LWPOLYLINE数据结构
|
||||||
|
|
||||||
|
if (item.entityType === 'LWPOLYLINE') {
|
||||||
|
console.log('处理LWPOLYLINE:', item)
|
||||||
|
const pointList = JSON.parse(item.geometry)
|
||||||
|
|
||||||
|
if (pointList.points && pointList.points.length > 0) {
|
||||||
|
// 提取坐标点和角度信息
|
||||||
|
const pointsWithAngles = pointList.points.map((point) => {
|
||||||
|
const [lng, lat, , , angle] = point // 提取经度、纬度和角度
|
||||||
|
return {
|
||||||
|
point: new BMapGL.Point(lng, lat),
|
||||||
|
angle: angle || 40, // 角度信息
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log(pointsWithAngles, 'pointsWithAngles')
|
||||||
|
|
||||||
|
// 根据颜色设置线条样式
|
||||||
|
const getColorByIndex = (colorIndex) => {
|
||||||
|
const colors = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta', 'white', 'gray']
|
||||||
|
return colors[colorIndex] || 'red'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成一个0-7的随机整数作为颜色索引
|
||||||
|
const colorIndex = Math.floor(Math.random() * 7)
|
||||||
|
|
||||||
|
// 创建带弧度的多段线
|
||||||
|
const curvedLinePoints = this.createCurvedLine(pointsWithAngles)
|
||||||
|
|
||||||
|
// 创建多段线(带弧度)
|
||||||
|
const polyline = new BMapGL.Polyline(curvedLinePoints, {
|
||||||
|
strokeColor: getColorByIndex(colorIndex),
|
||||||
|
strokeWeight: 2,
|
||||||
|
strokeOpacity: 0.8,
|
||||||
|
strokeStyle: 'solid',
|
||||||
|
})
|
||||||
|
|
||||||
|
this.map.addOverlay(polyline)
|
||||||
|
}
|
||||||
|
} else if (item.entityType === 'LINE') {
|
||||||
const geometry = JSON.parse(item.geometry)
|
const geometry = JSON.parse(item.geometry)
|
||||||
const start = geometry.start
|
const start = geometry.start
|
||||||
const end = geometry.end
|
const end = geometry.end
|
||||||
|
|
@ -725,6 +768,8 @@ export default {
|
||||||
// 处理多边形或其他图形
|
// 处理多边形或其他图形
|
||||||
const pointList = JSON.parse(item.geometry)
|
const pointList = JSON.parse(item.geometry)
|
||||||
|
|
||||||
|
console.log(pointList, 'pointList')
|
||||||
|
|
||||||
if (pointList.points.length > 0) {
|
if (pointList.points.length > 0) {
|
||||||
// 解析点坐标和角度(假设格式为 [x, y, ..., angle])
|
// 解析点坐标和角度(假设格式为 [x, y, ..., angle])
|
||||||
const path = pointList.points.map((p) => {
|
const path = pointList.points.map((p) => {
|
||||||
|
|
@ -829,6 +874,77 @@ export default {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 创建带弧度的线条
|
||||||
|
createCurvedLine(pointsWithAngles) {
|
||||||
|
if (pointsWithAngles.length < 2) {
|
||||||
|
return pointsWithAngles.map((p) => p.point)
|
||||||
|
}
|
||||||
|
|
||||||
|
const curvedPoints = []
|
||||||
|
|
||||||
|
for (let i = 0; i < pointsWithAngles.length - 1; i++) {
|
||||||
|
const currentPoint = pointsWithAngles[i]
|
||||||
|
const nextPoint = pointsWithAngles[i + 1]
|
||||||
|
|
||||||
|
// 添加当前点
|
||||||
|
curvedPoints.push(currentPoint.point)
|
||||||
|
|
||||||
|
// 如果当前点有角度信息,创建弧度
|
||||||
|
if (currentPoint.angle !== 0) {
|
||||||
|
const controlPoints = this.generateCurveControlPoints(
|
||||||
|
currentPoint.point,
|
||||||
|
nextPoint.point,
|
||||||
|
currentPoint.angle,
|
||||||
|
)
|
||||||
|
curvedPoints.push(...controlPoints)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加最后一个点
|
||||||
|
curvedPoints.push(pointsWithAngles[pointsWithAngles.length - 1].point)
|
||||||
|
|
||||||
|
return curvedPoints
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生成曲线控制点(基于角度)
|
||||||
|
generateCurveControlPoints(startPoint, endPoint, angle) {
|
||||||
|
const controlPoints = []
|
||||||
|
const segments = 5 // 在两点之间插入5个控制点来创建平滑曲线
|
||||||
|
|
||||||
|
// 计算起点和终点之间的距离
|
||||||
|
const distance = this.calculateDistance(startPoint, endPoint)
|
||||||
|
|
||||||
|
// 根据角度计算弧度半径
|
||||||
|
const radius = Math.abs(distance * 0.3) // 弧度半径为基础距离的30%
|
||||||
|
|
||||||
|
for (let i = 1; i < segments; i++) {
|
||||||
|
const t = i / segments // 插值参数 (0-1)
|
||||||
|
|
||||||
|
// 线性插值得到基础点
|
||||||
|
const baseLng = startPoint.lng + (endPoint.lng - startPoint.lng) * t
|
||||||
|
const baseLat = startPoint.lat + (endPoint.lat - startPoint.lat) * t
|
||||||
|
|
||||||
|
// 根据角度计算偏移
|
||||||
|
const offsetDistance = radius * Math.sin(t * Math.PI) // 使用正弦函数创建平滑弧度
|
||||||
|
const offsetLng = offsetDistance * Math.cos(angle) * 0.0001 // 经度偏移
|
||||||
|
const offsetLat = offsetDistance * Math.sin(angle) * 0.0001 // 纬度偏移
|
||||||
|
|
||||||
|
// 创建控制点
|
||||||
|
const controlPoint = new BMapGL.Point(baseLng + offsetLng, baseLat + offsetLat)
|
||||||
|
|
||||||
|
controlPoints.push(controlPoint)
|
||||||
|
}
|
||||||
|
|
||||||
|
return controlPoints
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算两点之间的距离(简化版本)
|
||||||
|
calculateDistance(point1, point2) {
|
||||||
|
const dx = point2.lng - point1.lng
|
||||||
|
const dy = point2.lat - point1.lat
|
||||||
|
return Math.sqrt(dx * dx + dy * dy)
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue