![](https://img-blog.csdnimg.cn/20210728153043293.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Cesium
Cesium
静尾
在职的前端开发工程师
展开
-
用node搭建Cesium本地地图服务
Cesium代码:const mapServerUrl = "http://localhost:5500/mapTile/";const layerOptions = new Cesium.TileMapServiceImageryProvider({ url: Cesium.buildModuleUrl(url), // maximumLevel: 11, // 地图切片的最大层级 // minimumLevel: 7, // 地图切片的最小层级 // rectang原创 2022-03-30 12:48:34 · 1067 阅读 · 1 评论 -
Cesium加载czml文件
Cesium加载czml文件<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <script src="https://cesium.com/downloads/cesiumjs/releases/1.58/Build/Cesium/Cesium.js"></script> <link href="https://cesium.原创 2021-07-28 15:27:40 · 1926 阅读 · 4 评论 -
Cesium报错:DeveloperError: right must be greater than left.的解决办法
Cesium报错:DeveloperError: right must be greater than left.的解决办法出错场景:2D场景下:步骤1:viewer.camera.flyHome(0); -步骤2:viewer.scene.trackedEntity = entity;报错:解决办法:在步骤2时加入一个判断,使仅在3D场景下增加视角跳转到实体功能if(viewer.scene.morphTime === 1) { viewer.trackedEntity = it原创 2021-07-21 10:47:16 · 2577 阅读 · 2 评论 -
Cesium——卫星侧摆
Cesium——卫星侧摆/** * 卫星的侧摆 * @param time 当前时间 */ sensorToTarget(currentTime, valueAngle) { const modelMatrix = this.entity.computeModelMatrix(currentTime); // 在指定时间计算实体转换的模型矩阵, -> Matrix4 if (modelMatrix) { c原创 2021-07-05 16:47:18 · 1235 阅读 · 0 评论 -
数字地球、空间计算百科
数字地球、空间计算百科大圆航线:地球上任意两点与地心形成一平面,平面与地球表面相交看到的圆周就是大圆。两点之间的大圆劣弧线是两点在地面上的最短距离。沿着这一段大圆弧线航行时的航线称为大圆航线。恒向线恒向线是地球上两点之间与经线处处保持角度相等的曲线。恒向线航线不是航程最短的航线,但却是操作极为方便的单一航向航行的航线。在低纬度或航向接近南北时,它和大圆航线的航程差别很小。船舶大洋航行有四种航线,即:大圆航线、恒向线航线、等纬圈航线和混合航线鞋带公式用于计算多边形面原创 2021-06-29 18:13:56 · 193 阅读 · 0 评论 -
turf.js字典——查询turf库的所有方法及用途
turf.js字典——查询turf库的所有方法及用途turf.js官方文档:http://turfjs.org/turf.js字典的正确打开方式:根据方法-功能表查询到所需的方法去turf官方文档直接搜索该方法,获取其详细使用说明方法-功能表:方法功能point坐标->坐标点对象polygon多个坐标->多边形along获取线上指定距离的点area计算多边形面积bbox返回折线边界框bboxPolygonbbox转为多原创 2021-06-29 18:10:09 · 2569 阅读 · 0 评论 -
turf.js报错:Uncaught (in promise) Error: Invalid unit的解决办法
turf.js报错:Uncaught (in promise) Error: Invalid unit的解决办法报错代码(npm i turf):import turf from 'turf';var line = turf.lineString([[-83, 30], [-84, 36], [-78, 41]]);var options = {units: 'miles'};var along = turf.along(line, 200, options); // 报错行正确代码(np原创 2021-06-28 14:33:56 · 1200 阅读 · 0 评论 -
Cesium实现雷达扫描效果
Cesium实现雷达扫描效果效果:viewer.entities.add({ name: 'Rotating rectangle with rotating texture coordinate', rectangle: { coordinates: Cesium.Rectangle.fromDegrees(-75.0, 30.0, -70.0, 35.0), material: new Cesium.ImageMaterialProperty({原创 2021-06-16 16:36:30 · 2430 阅读 · 0 评论 -
Cesium实现根据相机与实体之间的距离确定实体是点还是模型
Cesium实现根据相机与实体之间的距离确定实体是点还是模型需求:实体与相机在一定距离内显示为为模型,一定距离外显示为点代码:this.entity = this.viewer.entities.add({ id: id, name: name, position: SampledPosition, model: { uri: modelUrl,原创 2021-06-10 15:18:30 · 1490 阅读 · 0 评论 -
Cesium通过鼠标点击获取该位置的经纬度
Cesium通过鼠标点击获取该位置的经纬度const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);handler.setInputAction((event) => {// 添加点击左键的监听 const cartesian = this.viewer.camera.pickEllipsoid(event.position, this.viewer.scene.globe.ellipsoid); // C原创 2021-06-08 15:47:38 · 1183 阅读 · 0 评论 -
Cesium对相机视角的操作
Cesium对相机视角的操作// 视角转移到实体对象viewer.trackedEntity = `实体对象`;// 通过ID来获取目标对象并设置视角转移viewer.trackedEntity = viewer.entities.getById(ID);// 若想将视角转移到实体对象时相机距离实体远一点,可以设置实体的viewFrom属性来设置相机的初始偏移量this.entity = this.viewer.entities.add({ // ... viewFrom:原创 2021-06-04 09:47:00 · 2251 阅读 · 0 评论 -
Cesium对实体的操作
Cesium对实体的操作// 创建实体this.entity = this.viewer.entities.add({ id: id, name: name, position: SampledPosition, // 与此对象关联的可用性(如果有)。如果未定义可用性,则假定此对象的其他属性将在任何提供的时间内返回有效数据。如果可用性存在,则其他属性的对象将仅在给定间隔内查询时提供有效数据。 avaliability: new Cesium.TimeInterva原创 2021-06-04 09:46:08 · 1390 阅读 · 0 评论 -
Cesium对viewer对象初始化(包括项目初始视角设置以及去除Cesium版权信息等)
Cesium对viewer对象初始化(包括项目初始视角设置以及去除Cesium版权信息等)import * as Cesium from 'cesium';import "cesium/Build/Cesium/Widgets/widgets.css";import store from '@/store/index'// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1OWM2Yj原创 2021-06-04 09:44:21 · 886 阅读 · 0 评论 -
Cesium解决传感器抖动问题
Cesium解决传感器抖动问题解决问题原理:在基本步长的基础上,为每一段轨道再进行细化(使用拉格朗日插值算法进行计算差值)// 传入轨道数据,传出positionProperty对象、开始时间、结束时间import * as Cesium from 'cesium'import store from '@/store/index'export default function handleOrbitalMsg(satelliteOrbit: any) { const positionPr原创 2021-06-04 09:42:40 · 873 阅读 · 0 评论 -
Cesium关于时间轴的功能(加速减速、暂停开始、重置循环等)
Cesium关于时间轴的功能(加速减速、暂停开始、重置循环等)// 加速——速度 * 2:viewer.clockViewModel.multiplier *= 2;// 减速——速度 / 2viewer.clockViewModel.multiplier /= 2;// 开始/暂停viewer.clock.shouldAnimate = true/false;// 重置viewer.clock.currentTime = viewer.clock.startTime;// 循环/原创 2021-06-04 08:54:00 · 8642 阅读 · 5 评论 -
satellite.js介绍、安装以及用法
satellite.js介绍、安装以及用法satellitejs包:https://download.csdn.net/download/qq_41176306/19362223介绍一个使通过TLEs在网络上进行卫星传播成为可能的库。提供SGP4/SDP4计算所需的函数,如可调用的javascript方法。还提供了坐标变换的函数。这个库的内部几乎与Brandon Rhode的sgp4 python库相同。但是,它被封装在标准JS库(自执行函数)中,并仅公开跟踪卫星和传播路径。作者对Brandon原创 2021-06-03 16:43:06 · 6070 阅读 · 5 评论 -
使用TLE(双行)根数计算出轨道数据以供Cesium使用
使用TLE(双行)根数计算出轨道数据以供Cesium使用资源:satellite.js:https://download.csdn.net/download/qq_41176306/19360956核心代码:import indexUmd from '../cesium/satellite.min.js';const { propagate, twoline2satrec, gstime, eciToEcf,} = indexUmd;// 使用cons原创 2021-06-03 14:20:33 · 5430 阅读 · 5 评论 -
Error constructing CesiumWidget.解决办法(Vue + Cesium)
Vue3 + Typescript + Cesium项目换进搭建1 安装vue3脚手架npm i -g @vue/cli2 创建项目并启动vue create myappcd myappyarn myapp3 安装cesiumyarn add cesium4 去node_modules中找到cesium/Biuld/Cesium文件夹,复制到public中5 在index.html中引入本地cesium环境:<link rel=“stylesheet” href="原创 2021-05-25 14:07:08 · 9365 阅读 · 0 评论 -
Cesium实现实体与实体之间按时间段进行连线
Cesium实现实体与实体之间按时间段进行连线import * as Cesium from 'cesium'export default function addline(options) { const { viewer, //viewer startTime, // Cartesian3 stopTime, // Cartesian3 satellite, // Entity Entity.position === new原创 2021-05-10 13:56:56 · 1560 阅读 · 1 评论 -
cesium中实现鼠标拖动实体功能
cesium中实现鼠标拖动实体功能const entityId = '...';// 实体IDconst viewer = '...';// viewerconst entity = '...';// 实体const entityPositionZ = '...';// 实体位置中Cartesian3中的z值viewer.screenSpaceEventHandler.setInputAction(( { position } ) => {// 为viewer绑定MOUSE_DOWN事件监原创 2021-05-07 17:22:29 · 2288 阅读 · 3 评论 -
Cesium设置实体初始偏移量
Cesium设置实体初始偏移量业务场景:点击实体,视角切换到实体,但视角距离实体太近了,所以需设置视角偏移量。修改前(跳转到实体):修改后(跳转到实体):export default function (cesium: any, positionProperty: any, start: any, stop: any) { return cesium.entities.add({ id:'test', avaliability: new Cesium.T原创 2021-04-27 16:22:49 · 1864 阅读 · 1 评论 -
cesium设置相机初始位置为中国上空
cesium设置相机初始位置为中国上空Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);//核心const cesium: any = new Cesium.Viewer(boxId, { // some thing});原创 2021-04-27 15:48:11 · 1976 阅读 · 0 评论 -
Cesium视角在实体与home之间切换
Cesium视角在实体与home之间切换// 视角切换到实体(卫星)perspectiveEntity() { cesium.trackedEntity = cesium.entities.getById('test');},// 视角切换到homeperspectiveHome() { cesium.trackedEntity = undefined; cesium.camera.flyHome(0)},...原创 2021-04-27 15:41:22 · 523 阅读 · 0 评论 -
Cesium中用户输入的rgb或rgba格式转为Cesium.Color()格式
Cesium中用户输入的rgb或rgba格式转为Cesium.Color()格式rgba --> Cesium.ColorhandleColorType(color: string) { color = color.replace(/rgba\(/, '') color = color.replace(/\)/, '') let colorArr = color.split(','); let colorArr2: Array<number> = new A原创 2021-04-27 10:17:18 · 2329 阅读 · 0 评论 -
Cesium中JulianDate时间格式与js的Date时间格式互相转换
Cesium中JulianDate时间格式与js的Date时间格式互相转换// Date --> JulianDatelet t = new Date();console.log(t);// Sun Apr 25 2021 15:11:01 GMT+0800 (中国标准时间)let julian_t = Cesium.JulianDate.fromDate(t);console.log(julian_t);// JulianDate {dayNumber: 2459329, seconds原创 2021-04-25 15:27:56 · 3136 阅读 · 0 评论 -
cesium实现向卫星添加传感器并跟随卫星移动
cesium实现向卫星添加传感器并跟随卫星移动import * as Cesium from 'cesium'import "./CesiumSensors.js";/* eslint-disable */// 添加矩形传感器export default function entityAddSensor(viewer, satellite) {// 场景,卫星实体 viewer.scene.primitives.removeAll();// 删除所有传感器 var rectan原创 2021-04-19 13:37:19 · 2262 阅读 · 2 评论 -
cesium实现卫星传感器
只需一个文件:CesiumSensors.js(资源在审核中,后续会免费发出来)效果图:<!DOCTYPE html><html lang="en"><head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-I原创 2021-04-16 17:50:13 · 3737 阅读 · 5 评论 -
Cesium中绘制矩形,根据四角/对角坐标绘制矩形
Cesium中绘制矩形,根据四角/对角坐标绘制矩形import store from '@/store/index'import * as Cesium from 'cesium'export default function createReactangleArea(cesium: any) { const rectangleCoord: any = store.state.rectangle; return cesium.entities.add({ name:原创 2021-04-15 17:34:36 · 2534 阅读 · 0 评论