This commit is contained in:
BianLzhaoMin
parent
974a12ec82
commit
9400e5e138
|
|
@ -698,45 +698,94 @@ export default {
|
||||||
console.log(item, 'item')
|
console.log(item, 'item')
|
||||||
try {
|
try {
|
||||||
// 处理新的LWPOLYLINE数据结构
|
// 处理新的LWPOLYLINE数据结构
|
||||||
|
|
||||||
if (item.entityType === 'LWPOLYLINE') {
|
if (item.entityType === 'LWPOLYLINE') {
|
||||||
console.log('处理LWPOLYLINE:', item)
|
console.log('处理LWPOLYLINE:', item)
|
||||||
const pointList = JSON.parse(item.geometry)
|
const pointList = JSON.parse(item.geometry)
|
||||||
|
console.log(pointList, 'pointList')
|
||||||
|
const newPointList = pointList?.segments
|
||||||
|
console.log(newPointList, 'newPointList')
|
||||||
|
|
||||||
if (pointList.points && pointList.points.length > 0) {
|
// 根据newPointList 中的type绘制线和半圆
|
||||||
// 提取坐标点和角度信息
|
newPointList.forEach((item) => {
|
||||||
const pointsWithAngles = pointList.points.map((point) => {
|
if (item.type === 'line') {
|
||||||
const [lng, lat, , , angle] = point // 提取经度、纬度和角度
|
const line = new BMapGL.Polyline(
|
||||||
return {
|
[
|
||||||
point: new BMapGL.Point(lng, lat),
|
new BMapGL.Point(item.start[0], item.start[1]),
|
||||||
angle: angle || 40, // 角度信息
|
new BMapGL.Point(item.end[0], item.end[1]),
|
||||||
|
],
|
||||||
|
{
|
||||||
|
strokeColor: 'red',
|
||||||
|
strokeWeight: 2,
|
||||||
|
strokeOpacity: 0.8,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
this.map.addOverlay(line)
|
||||||
|
} else if (item.type === 'arc') {
|
||||||
|
console.log('画半圆', item)
|
||||||
|
// 绘制半圆弧线
|
||||||
|
if (item.start_point && item.end_point && item.center && item.radius) {
|
||||||
|
const arcPoints = this.generateArcPoints(
|
||||||
|
item.center,
|
||||||
|
item.radius,
|
||||||
|
item.start_point,
|
||||||
|
item.end_point,
|
||||||
|
)
|
||||||
|
const arcPolyline = new BMapGL.Polyline(arcPoints, {
|
||||||
|
strokeColor: 'red',
|
||||||
|
strokeWeight: 2,
|
||||||
|
strokeOpacity: 0.8,
|
||||||
|
})
|
||||||
|
this.map.addOverlay(arcPolyline)
|
||||||
|
} else {
|
||||||
|
// 如果没有起点和终点，则绘制完整圆（备用方案）
|
||||||
|
const circle = new BMapGL.Circle(
|
||||||
|
new BMapGL.Point(item.center[0], item.center[1]),
|
||||||
|
item.radius,
|
||||||
|
{
|
||||||
|
strokeColor: 'red',
|
||||||
|
strokeWeight: 2,
|
||||||
|
fillColor: 'rgba(0,0,255,0.3)',
|
||||||
|
},
|
||||||
|
)
|
||||||
|
this.map.addOverlay(circle)
|
||||||
}
|
}
|
||||||
})
|
|
||||||
|
|
||||||
console.log(pointsWithAngles, 'pointsWithAngles')
|
|
||||||
|
|
||||||
// 根据颜色设置线条样式
|
|
||||||
const getColorByIndex = (colorIndex) => {
|
|
||||||
const colors = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta', 'white', 'gray']
|
|
||||||
return colors[colorIndex] || 'red'
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// 生成一个0-7的随机整数作为颜色索引
|
// if (pointList.points && pointList.points.length > 0) {
|
||||||
const colorIndex = Math.floor(Math.random() * 7)
|
// // 提取坐标点和角度信息
|
||||||
|
// 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 curvedLinePoints = this.createCurvedLine(pointsWithAngles)
|
|
||||||
|
|
||||||
// 创建多段线（带弧度）
|
// // 根据颜色设置线条样式
|
||||||
const polyline = new BMapGL.Polyline(curvedLinePoints, {
|
// const getColorByIndex = (colorIndex) => {
|
||||||
strokeColor: getColorByIndex(colorIndex),
|
// const colors = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta', 'white', 'gray']
|
||||||
strokeWeight: 2,
|
// return colors[colorIndex] || 'red'
|
||||||
strokeOpacity: 0.8,
|
// }
|
||||||
strokeStyle: 'solid',
|
|
||||||
})
|
|
||||||
|
|
||||||
this.map.addOverlay(polyline)
|
// // 生成一个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') {
|
} 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
|
||||||
|
|
@ -945,6 +994,76 @@ export default {
|
||||||
const dy = point2.lat - point1.lat
|
const dy = point2.lat - point1.lat
|
||||||
return Math.sqrt(dx * dx + dy * dy)
|
return Math.sqrt(dx * dx + dy * dy)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 生成圆弧点序列（用于绘制半圆弧线）
|
||||||
|
generateArcPoints(center, radius, startPoint, endPoint) {
|
||||||
|
// 将坐标转换为 BMapGL.Point 格式（如果还不是）
|
||||||
|
const centerPoint = Array.isArray(center) ? new BMapGL.Point(center[0], center[1]) : center
|
||||||
|
const start = Array.isArray(startPoint) ? new BMapGL.Point(startPoint[0], startPoint[1]) : startPoint
|
||||||
|
const end = Array.isArray(endPoint) ? new BMapGL.Point(endPoint[0], endPoint[1]) : endPoint
|
||||||
|
|
||||||
|
// 计算起点和终点相对于圆心的角度（弧度）
|
||||||
|
const startAngle = Math.atan2(start.lat - centerPoint.lat, start.lng - centerPoint.lng)
|
||||||
|
const endAngle = Math.atan2(end.lat - centerPoint.lat, end.lng - centerPoint.lng)
|
||||||
|
|
||||||
|
// 计算圆心角（弧度）
|
||||||
|
let angleDiff = endAngle - startAngle
|
||||||
|
|
||||||
|
// 标准化角度差到 [-π, π] 范围
|
||||||
|
if (angleDiff > Math.PI) {
|
||||||
|
angleDiff -= 2 * Math.PI
|
||||||
|
} else if (angleDiff < -Math.PI) {
|
||||||
|
angleDiff += 2 * Math.PI
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确定绘制方向：默认按较小角度差的方向绘制
|
||||||
|
// 如果角度差大于 π（180度），则反向绘制
|
||||||
|
if (Math.abs(angleDiff) > Math.PI) {
|
||||||
|
angleDiff = angleDiff > 0 ? angleDiff - 2 * Math.PI : angleDiff + 2 * Math.PI
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算实际半径（度单位）
|
||||||
|
// 如果半径单位是米，需要转换为度
|
||||||
|
// 1度纬度约等于111公里，1度经度在当前位置约等于111*cos(lat)公里
|
||||||
|
const latRad = (centerPoint.lat * Math.PI) / 180
|
||||||
|
const metersPerDegreeLat = 111000 // 每度纬度约111公里
|
||||||
|
|
||||||
|
// 判断半径单位：如果半径值很大（>1），可能是米；如果很小（<0.1），可能是度
|
||||||
|
// 这里假设如果半径大于1，则是米单位，需要转换
|
||||||
|
let radiusInDegrees = radius
|
||||||
|
if (radius > 1) {
|
||||||
|
// 假设是米单位，转换为度
|
||||||
|
radiusInDegrees = radius / metersPerDegreeLat
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成圆弧上的点
|
||||||
|
const arcPoints = []
|
||||||
|
// 根据角度动态调整点的数量，确保圆弧平滑
|
||||||
|
const segments = Math.max(30, Math.abs(angleDiff) * 30)
|
||||||
|
|
||||||
|
// 添加起点
|
||||||
|
arcPoints.push(start)
|
||||||
|
|
||||||
|
// 生成圆弧中间的点
|
||||||
|
for (let i = 1; i < segments; i++) {
|
||||||
|
const t = i / segments // 插值参数 (0-1)
|
||||||
|
const angle = startAngle + angleDiff * t
|
||||||
|
|
||||||
|
// 计算圆弧上的点坐标
|
||||||
|
// 考虑经纬度的差异，使用正确的转换
|
||||||
|
const deltaLng = (radiusInDegrees * Math.cos(angle)) / Math.cos(latRad)
|
||||||
|
const deltaLat = radiusInDegrees * Math.sin(angle)
|
||||||
|
const x = centerPoint.lng + deltaLng
|
||||||
|
const y = centerPoint.lat + deltaLat
|
||||||
|
|
||||||
|
arcPoints.push(new BMapGL.Point(x, y))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加终点
|
||||||
|
arcPoints.push(end)
|
||||||
|
|
||||||
|
return arcPoints
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue