This commit is contained in:
BianLzhaoMin
parent
974a12ec82
commit
9400e5e138
|
|
@ -698,45 +698,94 @@ export default {
|
|||
console.log(item, 'item')
|
||||
try {
|
||||
// 处理新的LWPOLYLINE数据结构
|
||||
|
||||
if (item.entityType === 'LWPOLYLINE') {
|
||||
console.log('处理LWPOLYLINE:', item)
|
||||
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) {
|
||||
// 提取坐标点和角度信息
|
||||
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),
|
||||
// 根据newPointList 中的type绘制线和半圆
|
||||
newPointList.forEach((item) => {
|
||||
if (item.type === 'line') {
|
||||
const line = new BMapGL.Polyline(
|
||||
[
|
||||
new BMapGL.Point(item.start[0], item.start[1]),
|
||||
new BMapGL.Point(item.end[0], item.end[1]),
|
||||
],
|
||||
{
|
||||
strokeColor: 'red',
|
||||
strokeWeight: 2,
|
||||
strokeOpacity: 0.8,
|
||||
strokeStyle: 'solid',
|
||||
},
|
||||
)
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
this.map.addOverlay(polyline)
|
||||
}
|
||||
// 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 start = geometry.start
|
||||
|
|
@ -945,6 +994,76 @@ export default {
|
|||
const dy = point2.lat - point1.lat
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue