cesium

Cesium学习笔记4——几何体绘制

引用:Sandcastle-header.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta ......
几何体 几何 笔记 Cesium

Cesium中的QuadtreeTile.js类

/** * A single tile in a {@link QuadtreePrimitive}. * * @alias QuadtreeTile * @constructor * @private * * @param {Number} options.level The level of t ......
QuadtreeTile Cesium js

Cesium中获取地形三角网并进行土方计算

参考:https://www.liaomz.top/2022/11/30/cesium-zhong-huo-qu-di-xing-san-jiao-wang-bing-jin-xing-tu-fang-ji-suan/ 1. 三角网获取 Cesium渲染地形时,以 QuadtreePrimitive ......
三角网 土方 地形 Cesium

Cesium学习笔记3——加载地图服务

申请成为天地图开发者,创建应用 编写代码: <!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8" /> <!-- Tell IE to use the lat ......
地图 笔记 Cesium

Cesium学习笔记3——加载倾斜摄影模型

本地的3dtiles模型采用ContextCapture 19生成. 利用Cesium实验室V3.08对OSGB格式转换到3dtiles,得到的结果加载时老是报 TypeError: Cannot read properties of undefined (reading 'updateTransf ......
模型 笔记 Cesium

Cesium最简单的视效升级方案,不改代码即可实现

Cesium依靠其开源免费的特点基本上完全垄断了GIS这一块,并且其中99%的用户都是使用的CesiumJS,然而,对于一些使用Cesium的项目来说,要想升级视效可能需要进行繁琐的代码修改,增加了开发者的工作量和时间成本。 那么是否有一种工具,能够避免giser们为了实现Cesium for un ......
升级方案 代码 方案 Cesium

cesium模型位置调整

使用经纬度坐标创建entity let circle01 = viewer.entities.add({ // position: new Cesium.Cartesian3(-2458283.9120733286, 4760603.561249552, 3448793.686233579), po ......
模型 位置 cesium

Cesium学习笔记2——第一个Cesium程序

源码 新建文件夹Exp01,新建一个Demo01.html源码,拷贝build文件夹到Exp01文件夹。 编写网页源码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!-- Use correct character set. --> 5 < ......
Cesium 笔记 程序

cesium 改背景图

var viewer = new Cesium.Viewer('cesiumContainer', { orderIndependentTranslucency: false, contextOptions: { webgl: { alpha: true, } }, }); viewer.scene ......
背景 cesium

cesium三维模型加文字标签

给三维模型加文字标签,可以在找不到模型的时候双击标签,直接定位模型,但是模型是放在地球平面上的,它的中心点是底部中心点,label也显示在这个底部的中心点,想把这个label调整到合适的位置,可以使用 eyeOffset 属性,设置文字的三维偏移,靠近还是远离眼睛,用的是z轴,负数表示靠近,正数表示 ......
模型 文字 标签 cesium

cesium学习笔记1

node.js安装 Node.js下载安装及环境配置教程【超详细】_nodejs下载_WHF__的博客-CSDN博客 进入官网地址下载安装包 https://nodejs.org/zh-cn/download/ 选择对应你系统的Node.js版本,这里我选择的是Windows系统、64位 cesiu ......
笔记 cesium

vue2+cesium加载3dtile导致卡顿内存溢出

# 问题 vue2中在cesium上做倾斜摄影模型加载后页面会非常卡顿,排查模型加载代码后发现都没有问题。 但是在vue3框架搭建的项目中就没有问题。 具体表现为 CPU和内存爆满,内存持续不断大幅度上涨。页面表现为卡顿异常 vue2开发的运行情况(异常情况): ![资源情况异常](https:// ......
内存 cesium 3dtile dtile vue2

GIS融合之路(四)如何用CesiumJS做出Cesium For Unreal的效果

同样在这篇文章开始前重申一下,山海鲸并没有使用ThreeJS引擎。但由于ThreeJS引擎使用广泛,下文中直接用ThreeJS同CesiumJS的整合方案代替山海鲸中3D引擎和CesiumJS整合。 系列传送门: 山海鲸可视化:GIS融合之路(一)技术选型CesiumJS/loaders.gl/iT ......
CesiumJS 效果 Cesium Unreal GIS

Cesium风场:GPU Powered Wind Visualization With Cesium

This is a guest post by Rayman Ng about his open source wind map built on top of CesiumJS. 这是Rayman Ng关于他在CesiumJS之上构建的开源风图的客座帖子。 Wind is an important ......
Cesium Visualization Powered Wind With

Cesium开发案例整理

>weigis近几年越来越被人们所关注,但是二三维开发难度也比普通web要高出许多,不管我们是在在开发或者是学习过程中,往往需要耗费大量的时间去查阅资料,和研究官方案例, >而大多二三维的包(openlayersjs,cesiumjs、threejs)都是外国的,如果英语水平好还行,否则读起来正是连 ......
案例 Cesium

Cesium加载影像图层(ArcGIS、Bing、Mapbox、高德地图、腾讯地图、天地图等各类影像图)

在Cesium中,加载影像图层主要通过ImageryLayer、ImageryProvider和ImageryLayerCollection三个类来实现;首先我们先来认识下这三个类 # 一、ImageryLayer类 在Cesium中,使用`ImageryLayer`对象来表示一个影像图层。`Ima ......
影像 地图 天地 Cesium ArcGIS

Cesium加载geojson数据

**GeoJSON格式** GeoJSON是一种常用的基于JavaScript对象表示法(JSON)的地理数据交换格式。GeoJSON支持诸如点、线、面和多边形等地理要素的表示,并且可以和矢量数据结构相互转换。 在Cesium中,使用`Cesium.GeoJsonDataSource.load()` ......
geojson 数据 Cesium

Cesium将相机定位到指定的位置

使用`Cesium的viewer.camera.flyTo`方法将相机定位到指定的位置,并设置相机的方向和倾斜角。 ```js viewer.camera.flyTo({ //摄像机在 WGS84(世界)中的最终位置坐标或从自上而下的视图中可以看到的矩形 destination: Cesium.Ca ......
位置 相机 Cesium

Cesium 更改默认的鼠标操作

```js // 将原来鼠标中键倾斜视图修改为鼠标右键触发 viewer.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG, ]; // 将原来鼠标右键放大缩放修改为鼠标滚轮滚 ......
鼠标 Cesium

Cesium结合GIS天地图 加载倾斜摄影3dtile + vue3

## 实现思路 将倾斜摄影OSGB数据转换为3dtile(转换方式很多,可以利用第三方工具cesiumlab) 利用Cesium加载GIS地图,我这里使用的是天地图,可以加载其他地图都行 加载3dtile数据到地图中展示 ## 安装插件 ``` npm install cesium ``` ## 加 ......
天地 Cesium 3dtile dtile vue3

Vue项目初次加载cesium | 配置

1. 首先配置`CESIUM_BASE_URL`全局变量 ``` window.CESIUM_BASE_URL = import.meta.env.BASE_URL + "Cesium/"; ``` 2. 把`node_modules\cesium\Build\Cesium`这个文件夹复制到`pub ......
项目 cesium Vue

Cesium:四种拾取pick

##三种坐标拾取 ###viewer.scene.camera.pickEllipsoid() 拾取椭球面坐标 handler.setInputAction(function (event) { let position = viewer.scene.camera.pickEllipsoid(eve ......
Cesium pick

Cesium:坐标系

Cesium中有两种坐标系,WGS84地理坐标系和笛卡尔空间坐标系。 WGS84地理坐标系包括:WGS84经纬度坐标系(没有实际的对象)和 WGS84弧度坐标系(Cartographic); 笛卡尔空间坐标系包括 笛卡尔空间直角坐标系(Cartesian3)、平面坐标系(Cartesian2),4D ......
坐标系 坐标 Cesium

Cesium:设置加载时的初始视角

先选好位置,并调整好视角,然后按 F12 打开控制台分别输入: viewer.camera.position viewer.camera.heading viewer.camera.pitch viewer.camera.roll 来分别获取你选好的位置的坐标,视角等信息,然后利用 viewer.c ......
视角 Cesium

Cesium 点在当前视角下可见

const viewer = new Cesium.Viewer("cesiumContainer"); //1.计算屏幕坐标 let position = Cesium.Cartesian3.fromDegrees(-60, 30, 0); let chanedc = Cesium.SceneTr ......
视角 Cesium

Cesium将经纬度转为屏幕坐标系并判断是否在当前视角可见

//1.计算屏幕坐标 let position = Cesium.Cartesiian3.fromDegrees(jd, wd, 0); let chanedc = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, posit ......
经纬度 坐标系 经纬 坐标 视角

Cesium中的QuadtreePrimitive.js类

QuadtreePrimitive顾名思义就是四叉树Primitive的意思。已知的是它在Globe的_surface属性中有了使用。 首先来看构造函数: function QuadtreePrimitive(options) { //>>includeStart('debug', pragmas. ......
QuadtreePrimitive Cesium js

Cesium中的Globe.js

Globe顾名思义就是地球的意思吧。 先看构造函数: function Globe(ellipsoid) { ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84); var terrainProvider = new EllipsoidTerrai ......
Cesium Globe js

Cesium 卷帘分析

仓库里更新了卷帘功能,简单记录一下。 卷帘功能如下图所示,将地球分为左右两块,通过中间的卷帘进行滑动,可以有效地进行左右对比,针对序列数据有良好的展示效果。 如下接口,Cesium 本身就支持我们针对地球左右两侧显示不同的图层。 故我们只需要对加载的图层设置 SplitDirection 属性就可以 ......
卷帘 Cesium

cesium-4-属性变换和事件操作

1、属性变换 使用Cesium.CallbackProperty类,构造函数中需要两个参数 一个为调用函数, 一个为boolean,判断前面这个函数是否需要不断的调用(false即属性不固定),还是只是只调用一次(true即属性固定) 代码: ...这个extrudedHeight是创建entity ......
属性 事件 cesium