Cesium 自定义Primitive - 圆

一、创作思路

        1、创建一个自定义CustomPrimitive

        2、然后根据两个点，生成圆

        3、方便后期绘制圆

二、实现代码

        1、在vue的包中加入turf.

        npm install @turf/turf

        1、创建一个CustomCirclePrimitive类,并加入更新的代码

export default class CustomCirclePrimitive {constructor(options) {this._props = options;/*** 渲染列表* @type {*[]}* @private*/this._primitiveCollection = [];this._dynamicPrimitive = undefined;}updateProperty(options) {this._props = {...this._props,...options,};}/*** 更新* @param frameState*/update(frameState) {this._primitiveCollection.forEach((primitive) => {primitive && !primitive.isDestroyed() && primitive.update(frameState);});if (this._dynamicPrimitive) {this._dynamicPrimitive.update(frameState);}}destroy() {this._primitiveCollection.forEach((primitive) => {primitive && !primitive.isDestroyed() && primitive.destroy();});this._primitiveCollection = undefined;if (this._dynamicPrimitive) {this._dynamicPrimitive.destroy();}this._dynamicPrimitive = undefined;}
}

        2、编写更新代码

updateProperty(options) {this._props = {...this._props,...options,};let positions = this._props.positions;let complete = this._props.complete;if (positions.length > 1) {let dynamicPrimitive = this._dynamicPrimitive;if (dynamicPrimitive) {dynamicPrimitive.destroy();dynamicPrimitive = null;this._dynamicPrimitive = null;}let primitive = this.initCirclePrimitive(positions);if (complete) {this._primitiveCollection.push(primitive);} else {this._dynamicPrimitive = primitive;}}}

        3、编写绘制圆的代码

        设定第一个点为中心点，第二个点为半径上面的点

        半径为第一个点到第二个点的距离

initCirclePrimitive(positions) {let centerP = positions[0];let radiusP = positions[1];let radius = getDistance(centerP, radiusP);let circlePositions = getCircle(centerP, radius);let instance = new GeometryInstance({geometry: new GroundPolylineGeometry({positions: circlePositions,width: 4,}),});return new GroundPolylinePrimitive({geometryInstances: instance,appearance: new PolylineMaterialAppearance({material: new Material({fabric: {type: "Color",uniforms: {color: Color.fromCssColorString("#ff0000"),},},}),}),asynchronous: false,});}

        4、额外的算法代码

        

const ellipsoid = Ellipsoid.WGS84;
/*** 将世界坐标系转换为球面坐标系* @param {Cartesian3} position* @return {{alt: number, lon: number, lat: number}}*/
export const Cartesian3ToWgs84 = (position) => {let cartographic = ellipsoid.cartesianToCartographic(position);let lon = CesiumMath.toDegrees(cartographic.longitude);let lat = CesiumMath.toDegrees(cartographic.latitude);let alt = cartographic.height;return {lon,lat,alt,};
};
/*** 计算分段的距离* @param {Cartesian3} startPoint 起点* @param {Cartesian3} endPoint 终点* @return {number} 平面距离*/
export const getDistance = (startPoint, endPoint) => {let start84 = Cartesian3ToWgs84(startPoint);let end84 = Cartesian3ToWgs84(endPoint);let startPosition = point([start84.lon, start84.lat]);let endPosition = point([end84.lon, end84.lat]);let startToEnd = distance(startPosition, endPosition, options);return startToEnd * 1000;
};
/*** 根据半径和中心点，获取圆形* @param center* @param radius* @return {Cartesian3[]}*/
export const getCircle = (center, radius) => {let center84 = Cartesian3ToWgs84(center);let centerP = [center84.lon, center84.lat];let circleInfo = circle(centerP, radius / 1000.0, options);return circleInfo.geometry.coordinates[0].map((item) => {return Cartesian3.fromDegrees(item[0], item[1]);});
};

        5、测试代码

        

let primitive = new CustomCirclePrimitive();viewer.scene.primitives.add(primitive);let lon = 106;let count = 0;let lat = 26;let centerP = Cartesian3.fromDegrees(lon, lat);let interval = setInterval(() => {let lonTemp = lon + count * 0.00001;let nextP = Cartesian3.fromDegrees(lonTemp, lat);primitive.updateProperty({positions: [centerP, nextP],complete: count === 11,});if (count > 10) {clearInterval(interval);}count++;}, 1000);

三、实现效果

四、代码

import {Cartesian3,Color,GeometryInstance,GroundPolylineGeometry,GroundPolylinePrimitive,Material,PolylineMaterialAppearance,
} from "cesium";
import {getCircle,getDistance,
} from "@/components/MilitaryPlot/utils/PlotUtils";export default class CustomCirclePrimitive {constructor(options) {this._props = options;/*** 渲染列表* @type {*[]}* @private*/this._primitiveCollection = [];this._dynamicPrimitive = undefined;}updateProperty(options) {this._props = {...this._props,...options,};let positions = this._props.positions;let complete = this._props.complete;if (positions.length > 1) {let dynamicPrimitive = this._dynamicPrimitive;if (dynamicPrimitive) {dynamicPrimitive.destroy();dynamicPrimitive = null;this._dynamicPrimitive = null;}let primitive = this.initCirclePrimitive(positions);if (complete) {this._primitiveCollection.push(primitive);} else {this._dynamicPrimitive = primitive;}}}initCirclePrimitive(positions) {let centerP = positions[0];let radiusP = positions[1];let radius = getDistance(centerP, radiusP);let circlePositions = getCircle(centerP, radius);let instance = new GeometryInstance({geometry: new GroundPolylineGeometry({positions: circlePositions,width: 4,}),});return new GroundPolylinePrimitive({geometryInstances: instance,appearance: new PolylineMaterialAppearance({material: new Material({fabric: {type: "Color",uniforms: {color: Color.fromCssColorString("#ff0000"),},},}),}),asynchronous: false,});}/*** 更新* @param frameState*/update(frameState) {this._primitiveCollection.forEach((primitive) => {primitive && !primitive.isDestroyed() && primitive.update(frameState);});if (this._dynamicPrimitive) {this._dynamicPrimitive.update(frameState);}}destroy() {this._primitiveCollection.forEach((primitive) => {primitive && !primitive.isDestroyed() && primitive.destroy();});this._primitiveCollection = undefined;if (this._dynamicPrimitive) {this._dynamicPrimitive.destroy();}this._dynamicPrimitive = undefined;}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/512603.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2024年软考重大改革

2024年软考重大改革

中国计算机技术职业资格网 考试日期 考试级别 考试资格名称 5月25日至28日 高级 系统分析师 系统架构设计师 信息系统项目管理师 中级 软件设计师 网络工程师 软件评测师 电子商务设计师 嵌入式系统设计师 数据库系统工程师 信息系统管理工程师 初级 程序员 …
阅读更多...
lightGBM的学习整理

lightGBM的学习整理

执行步骤 1、初始化，选择一个初始模型，通常是一个常数，比如分类问题中内的类别概率的先验值，回归问题中的目标变量的平均值。 2、训练决策树，对于每一轮迭代，计算当前模型的梯度（损失函数的负…
阅读更多...
鸿蒙应用组件

鸿蒙应用组件

基础组件 索引组件—AlphabetIndexer&#xff08;相当于安卓的seedbar&#xff09; 使用&#xff1a;AlphabetIndexer(value: {arrayValue: Array<string>, selected: number})空白填充组件—Blank&#xff08;占位使用&#xff0c;当父组件为Row/Column/Flex时生效&am…
阅读更多...
chrome插件extensions获取所有窗口tab页和windows页

chrome插件extensions获取所有窗口tab页和windows页

获取windows页&#xff1a;https://developer.chrome.com/docs/extensions/reference/api/windows?hlzh-cn 获取所有tabs页&#xff1a;https://developer.chrome.com/docs/extensions/reference/api/tabs?hlzh-cnchrome.tabshttps://developer.chrome.com/docs/extensions/…
阅读更多...
4G/5G执法记录仪、智能安全帽走国标GB28181接入海康、宇视等大平台，也可走平台与平台对接，以下级平台级联到上级大平台

4G/5G执法记录仪、智能安全帽走国标GB28181接入海康、宇视等大平台，也可走平台与平台对接，以下级平台级联到上级大平台

AIoT万物智联&#xff0c;智能安全帽生产厂家&#xff0c;执法记录仪生产厂家&#xff0c;智能安全帽、智能头盔、头盔记录仪、执法记录仪、智能视频分析/边缘计算AI盒子、车载DVR/NVR、布控球、智能眼镜、智能手电、无人机4G补传系统等统一接入大型融合通信可视指挥调度平台VM…
阅读更多...
GO GMP

GO GMP

GMP 为了解决 Go 早期多线程 M 对应多协程 G 调度器的全局锁、中心化状态带来的锁竞争导致的性能下降等问题&#xff0c;Go 开发者引入了处理器 P 结构&#xff0c;形成了当前经典的 GMP 调度模型。 GMP 模型是 Go 语言调度器采用的并发编程模型它包含三个重要的组件&#xf…
阅读更多...
独立站营销攻略：塑造品牌，掌控数据，应对挑战

独立站营销攻略：塑造品牌，掌控数据，应对挑战

随着出海热的加剧&#xff0c;独立站已成为品牌拓展海外市场的重要组成部分。独立站不仅能够帮助企业建立品牌形象&#xff0c;扩大市场份额&#xff0c;还能够提高用户忠诚度和品牌认知度。然而&#xff0c;独立站在推广营销方面也有着诸多挑战&#xff0c;如流量获取、用户粘…
阅读更多...
测试需求平台10-DBUtils 优化数据连接与 SQL Limit 实现分页

测试需求平台10-DBUtils 优化数据连接与 SQL Limit 实现分页

✍此系列为整理分享已完结入门搭建《TPM提测平台》系列的迭代版&#xff0c;拥抱Vue3.0将前端框架替换成字节最新开源的arco.design&#xff0c;其中约60%重构和20%新增内容&#xff0c;定位为从 0-1手把手实现简单的测试平台开发教程&#xff0c;内容将囊括基础、扩展和实战&a…
阅读更多...
2191. 数字梯形问题（网络流，费用流，最大权不相交路径）

2191. 数字梯形问题（网络流，费用流，最大权不相交路径）

活动 - AcWing 给定一个由 n 行数字组成的数字梯形如下图所示。 梯形的第一行有 m 个数字。 从梯形的顶部的 m 个数字开始&#xff0c;在每个数字处可以沿左下或右下方向移动&#xff0c;形成一条从梯形的顶至底的路径。 规则 1&#xff1a;从梯形的顶至底的 m 条路径互不相…
阅读更多...
隧道技术和代理技术(一)

隧道技术和代理技术(一)

目录 基础知识 单机-防火墙-限制协议出入站 域控-防火墙-组策略对象同步 域控-防火墙-组策略不出网上线 基础知识 -隧道技术&#xff1a;解决不出网协议上线的问题&#xff08;利用出网协议进行封装出网&#xff09; -代理技术&#xff1a;解决网络通讯不通的问题&#xf…
阅读更多...
职场卷王：我用可视化大屏模板做工作汇报，惊艳了同事和领导。

职场卷王：我用可视化大屏模板做工作汇报，惊艳了同事和领导。

2023结束了&#xff0c;我和我的小伙伴们纷纷开始忙碌的年终总结和汇报。 正忙着汇总Excel数据、写word讲稿、找PPT模板时&#xff0c;我发现隔壁组的老王独自在大会议室偷偷调试起了那台汇报用的电视机。 不会吧不会吧&#xff0c;年终汇报还有一周呢&#xff0c;这家伙PPT都…
阅读更多...
web组态--新一代全流程低代码物联网平台

web组态--新一代全流程低代码物联网平台

先上图&#xff0c;实际完成效果&#xff1a; 1.添加应用图纸 登录by组态后台&#xff1a;http://www.byzt.net:90 ​ 点击组态管理-画面管理&#xff0c;先新建一个组态画面&#xff0c;填写画面名称&#xff0c;保存&#xff0c;进入组态画面。 ​ 选择画面管理&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023