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 · 1179 阅读 · 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 · 2095 阅读 · 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 · 3068 阅读 · 2 评论 -
Cesium——卫星侧摆
Cesium——卫星侧摆/** * 卫星的侧摆 * @param time 当前时间 */ sensorToTarget(currentTime, valueAngle) { const modelMatrix = this.entity.computeModelMatrix(currentTime); // 在指定时间计算实体转换的模型矩阵, -> Matrix4 if (modelMatrix) { c原创 2021-07-05 16:47:18 · 1324 阅读 · 0 评论 -
数字地球、空间计算百科
数字地球、空间计算百科大圆航线：地球上任意两点与地心形成一平面，平面与地球表面相交看到的圆周就是大圆。两点之间的大圆劣弧线是两点在地面上的最短距离。沿着这一段大圆弧线航行时的航线称为大圆航线。恒向线恒向线是地球上两点之间与经线处处保持角度相等的曲线。恒向线航线不是航程最短的航线，但却是操作极为方便的单一航向航行的航线。在低纬度或航向接近南北时，它和大圆航线的航程差别很小。船舶大洋航行有四种航线，即:大圆航线、恒向线航线、等纬圈航线和混合航线鞋带公式用于计算多边形面原创 2021-06-29 18:13:56 · 241 阅读 · 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 · 2867 阅读 · 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 · 1331 阅读 · 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 · 2744 阅读 · 0 评论 -
Cesium实现根据相机与实体之间的距离确定实体是点还是模型
Cesium实现根据相机与实体之间的距离确定实体是点还是模型需求：实体与相机在一定距离内显示为为模型，一定距离外显示为点代码：this.entity = this.viewer.entities.add({ id: id, name: name, position: SampledPosition, model: { uri: modelUrl,原创 2021-06-10 15:18:30 · 1570 阅读 · 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 · 1237 阅读 · 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 · 2370 阅读 · 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 · 1480 阅读 · 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 · 1046 阅读 · 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 · 953 阅读 · 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 · 9614 阅读 · 5 评论 -
satellite.js介绍、安装以及用法
satellite.js介绍、安装以及用法satellitejs包：https://download.youkuaiyun.com/download/qq_41176306/19362223介绍一个使通过TLEs在网络上进行卫星传播成为可能的库。提供SGP4/SDP4计算所需的函数，如可调用的javascript方法。还提供了坐标变换的函数。这个库的内部几乎与Brandon Rhode的sgp4 python库相同。但是，它被封装在标准JS库(自执行函数)中，并仅公开跟踪卫星和传播路径。作者对Brandon原创 2021-06-03 16:43:06 · 6957 阅读 · 5 评论 -
使用TLE（双行）根数计算出轨道数据以供Cesium使用
使用TLE（双行）根数计算出轨道数据以供Cesium使用资源：satellite.js：https://download.youkuaiyun.com/download/qq_41176306/19360956核心代码：import indexUmd from '../cesium/satellite.min.js';const { propagate, twoline2satrec, gstime, eciToEcf,} = indexUmd;// 使用cons原创 2021-06-03 14:20:33 · 5838 阅读 · 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 · 10284 阅读 · 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 · 1719 阅读 · 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 · 2519 阅读 · 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 · 2018 阅读 · 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 · 2131 阅读 · 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 · 577 阅读 · 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 · 2565 阅读 · 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 · 3472 阅读 · 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 · 2512 阅读 · 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 · 4174 阅读 · 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 · 2699 阅读 · 0 评论