Cesium 自定义Primitive - 圆

2024-03-05 20:20
文章标签 自定义 cesium primitive

本文主要是介绍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;}
}

这篇关于Cesium 自定义Primitive - 圆的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/777705

相关文章

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”(Authentication)“授权” (Auth

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3

dubbo3 filter(过滤器)如何自定义过滤器

《dubbo3filter(过滤器)如何自定义过滤器》dubbo3filter(过滤器)类似于javaweb中的filter和springmvc中的intercaptor,用于在请求发送前或到达前进... 目录dubbo3 filter(过滤器)简介dubbo 过滤器运行时机自定义 filter第一种 @A

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06