当前位置: 首页 > ops >正文

绘制线、多边形方法,添加绘制点数字信息和线/面等宽度延伸

解决方案:

获取到polyline的坐标后,根据这些坐标数据,额外添加一个bufferPolygon。方法如下:
let bufferPolygonLayer = null;
// 计算缓冲区多边形,根据polyline坐标以及扩散半径绘制缓冲区


let bufferPolygonLayer = null;
// 计算缓冲区多边形,根据polyline坐标以及扩散半径绘制缓冲区
const drawBufferPolygon = (positions) =>{
let bufferPolygonPos = [];
if(positions.length > 0) {
positions.map(item => {
bufferPolygonPos.push(item[0],item[1],item[2])
})
}
if(bufferPolygonLayer) {
graphicLayer.removeGraphic(bufferPolygonLayer);
}
// 原始折线坐标(经纬度高程)
const polylinePositions = Cesium.Cartesian3.fromDegreesArrayHeights(bufferPolygonPos);
// 计算缓冲区多边形
const bufferPolygon = createBufferPolygon(polylinePositions, 50);
// 添加缓冲区多边形
bufferPolygonLayer = new mars3d.graphic.PolygonEntity({
positions: bufferPolygon.positions,
style: {
color: "#3388ff",
material: Cesium.Color.DEEPSKYBLUE.withAlpha(0.2),
outline: true,
outlineWidth: 2,
outlineColor: Cesium.Color.CORAL,
clampToGround: true
},
})
graphicLayer.addGraphic(bufferPolygonLayer)
}
/**创建折线的缓冲区多边形@chancelai {Cesium.Cartesian3[]} positions 折线坐标数组@chancelai {number} distance 缓冲距离(米)@Returns {Cesium.Cartesian3[]} 缓冲区多边形坐标/function createBufferPolygon(positions, distance) {// 将Cartesian3坐标转换为经纬度数组const cartographics = positions.map(pos =>Cesium.Cartographic.fromCartesian(pos));// 存储左侧和右侧的点const leftPositions = [];const rightPositions = [];// 计算每个线段的缓冲区for (let i = 0; i < positions.length; i++) {let bearing;if (i === 0) {// 第一个点,使用第一个线段的方向bearing = calculateBearing(cartographics[i], cartographics[i + 1]);} else if (i === positions.length - 1) {// 最后一个点,使用最后一个线段的方向bearing = calculateBearing(cartographics[i - 1], cartographics[i]);} else {// 中间点,使用前后两个方向的平均值const bearing1 = calculateBearing(cartographics[i - 1], cartographics[i]);const bearing2 = calculateBearing(cartographics[i], cartographics[i + 1]);// 计算平均方向(处理角度环绕)bearing = Math.atan2((Math.sin(bearing1) + Math.sin(bearing2)) / 2,(Math.cos(bearing1) + Math.cos(bearing2)) / 2);}// 计算左右偏移点const left = calculateDestination(cartographics[i], bearing - Math.PI/2, distance);const right = calculateDestination(cartographics[i], bearing + Math.PI/2, distance);leftPositions.push(left);rightPositions.unshift(right); // 右侧点反向添加以便形成闭合环}// 合并左右点形成多边形环const bufferPositions = [...leftPositions, ...rightPositions];// 将Cartographic坐标转换回Cartesian3return new Cesium.PolygonHierarchy(bufferPositions.map(cartographic =>Cesium.Cartesian3.fromRadians(cartographic.longitude,cartographic.latitude,cartographic.height)));}/*计算两点之间的方位角(弧度)/function calculateBearing(start, end) {const lon1 = start.longitude;const lat1 = start.latitude;const lon2 = end.longitude;const lat2 = end.latitude;const dLon = lon2 - lon1;const y = Math.sin(dLon) * Math.cos(lat2);const x = Math.cos(lat1) * Math.sin(lat2) -Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);return Math.atan2(y, x);}/*计算从起点出发,沿指定方位角前进指定距离后的点*/function calculateDestination(start, bearing, distance) {const radius = 6378137; // 地球半径(米)const angularDistance = distance / radius;const lat1 = start.latitude;const lon1 = start.longitude;const lat2 = Math.asin(Math.sin(lat1) * Math.cos(angularDistance) +Math.cos(lat1) * Math.sin(angularDistance) * Math.cos(bearing));const lon2 = lon1 + Math.atan2(Math.sin(bearing) * Math.sin(angularDistance) * Math.cos(lat1),Math.cos(angularDistance) - Math.sin(lat1) * Math.sin(lat2));return new Cesium.Cartographic(lon2, lat2, start.height);}

效果:

http://www.xdnf.cn/news/8901.html

相关文章:

  • Nginx 限流机制:请求速率与连接数限制深度解析(一)
  • 《三维点如何映射到图像像素?——相机投影模型详解》
  • 保姆式 网站建设wordpress全教程----包含疑难杂症
  • 可视化图解算法45:比较版本号
  • GraphPad Prism数据的基本操作
  • Kafka 客户端连接机制的一个典型陷阱
  • Tomcat 使用与配置全解
  • Python入门手册:循环
  • RabbitMQ 核心原理与Spring Boot整合实战
  • 青少年编程与数学 02-020 C#程序设计基础 05课题、数据类型
  • hadoop异构存储
  • 【前端基础】事件循环 详解
  • 小样本机器学习再发力!2025再登Nature正刊
  • 【Prompt】Prompt介绍与示例
  • Spring AI 智能体代理模式(Agent Agentic Patterns)
  • OceanBase数据库从入门到精通(运维监控篇)
  • 【四种JavaScript 实现页面底部回到顶部功能的实现方式】
  • DeepSeek 赋能教育游戏化:AI 重构学习体验的技术密码
  • Qt C++ GUI编程进阶:多窗口交互与事件机制深度解析
  • 《软件工程》第 6 章 - 软件设计概论
  • 数据结构第3章 线性表 (竟成)
  • 职坐标IT培训:硬件嵌入式与AI芯片开发实战
  • ESP8266+STM32 AT驱动程序,心知天气API 记录时间: 2025年5月26日13:24:11
  • 人工智能是桥梁,不是目标
  • C++之STL入门
  • MySQL数据库零基础入门教程:从安装配置到数据查询全掌握【MySQL系列】
  • 易语言模拟真人鼠标轨迹算法
  • AI时代新词-Transformer架构:开启AI新时代的关键技术
  • 大语言模型 19 - MCP FastAPI-MCP 实现自己的MCP服务 快速接入API
  • [ARM][架构] 01.ARMv7 特权等级与核心寄存器