diff --git a/src/views/basic/model-manage/index.vue b/src/views/basic/model-manage/index.vue index 464032e..2808a40 100644 --- a/src/views/basic/model-manage/index.vue +++ b/src/views/basic/model-manage/index.vue @@ -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, // 角度信息 + // 根据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, + }, + ) + 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的随机整数作为颜色索引 - const colorIndex = Math.floor(Math.random() * 7) + // 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, // 角度信息 + // } + // }) - // 创建带弧度的多段线 - const curvedLinePoints = this.createCurvedLine(pointsWithAngles) + // console.log(pointsWithAngles, 'pointsWithAngles') - // 创建多段线（带弧度） - const polyline = new BMapGL.Polyline(curvedLinePoints, { - strokeColor: getColorByIndex(colorIndex), - strokeWeight: 2, - strokeOpacity: 0.8, - strokeStyle: 'solid', - }) + // // 根据颜色设置线条样式 + // const getColorByIndex = (colorIndex) => { + // const colors = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta', 'white', 'gray'] + // return colors[colorIndex] || 'red' + // } - 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') { 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 + }, }, }