技术标签: cesium 图形图像 javascript
Cesium是国外一个基于javascript的地图引擎,支持3D、2D、2.5D形式的展示,可以自行绘制图形、高亮区域,并提供良好的触摸支持,并支持大多数的浏览器和移动端。
当前案例基于vue3+vite
构建
npm i cesium vite-plugin-cesium vite -D
# yarn add cesium vite-plugin-cesium vite -D
vite.config.js
配置:
import {
defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
plugins: [cesium()]
});
<template>
<div id="cesiumContainer"></div>
</template>
<script lang="ts" setup>
import {
onMounted } from "vue";
import {
Viewer } from 'cesium';
onMounted(() => {
const viewer = new Viewer('cesiumContainer');
})
</script>
<style lang="scss" scoped></style>
在我们使用Cesium的过程中,如果没有申请ion,同时没有自己的数据源用的cesium提供的数据源,viewer的底部常常会提示一行小的英文字母。大意就是需要申请access token
.
Access Tokens page
页面。Cesium Viewer
的时候,将access token
填为自己的access token即可。Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';
此时底部的小字就消失了!
以上就能畅快的访问Cesium ion提供的各种数据源了。
Cesium应用程序另一个关键元素是Imagery(图层)。瓦片图集合根据不同的投影方式映射到虚拟的三维数字地球表面。依赖于相机指向地表的方向和距离,Cesium会去请求和渲染不同层级的图层详细信息。
多种图层能够被添加、移除、排序和适应到Cesium中。
Cesium提供了一系列方法用于处理图层,比如颜色自适应,图层叠加融合。一些样例代码如下:
Cesium提供了各种 接口 支持各样的图层数据源。
支持的图层格式
注意:不同的数据源需要不同的认证 - 需要确保自己能够有权限访问到这些数据源,自然地需要注册特定的认证才可以
默认地,Cesium使用Bing Maps
作为默认的图层。这个图层被打包进Viewer中用于演示。Cesium需要您自己创建ion account然后生成一个access key用于访问图层数据。
去Cesium ion
页面,将Sentinel-2图层加入到自己的assets中。点击在导航栏中点击“Asset Depot
”
点击 Add to my assets。Sentinel-2将在你个人用户中的asset列表(My Assets)中出现,此时将在个人的app中图层数据源变得可用。
代码修改
我们创建一个IonImageryProvider
,将assetId传给对应的Sentinel-2
图层。然后我们将ImageryProvider
添加到viewer.imageryLayers
。
// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({
assetId : 3954 }));
Sentinel-2:全世界的无云卫星图像,分辨率可降至10米
Cesium支持流式的、可视化的全球高程投影地形地势、水形数据,包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。像图层数据一样,Cesium引擎会从一个服务器上请求流式地形数据,仅请求那些基于当前相机能看到的需要绘制的图层上的数据。
Cesium官方提供了一些地形数据集的例子,以及如何配置这些参数。
支持的地形数据格式:
为了添加地形数据,我们需要创建一个CesiumTerrainProvider
,提供一个url和一些配置项,然后将这个provider赋值给viewer.terrainProvider
。
此处,我们使用Cesium WorldTerrian
图层,该图层由Cesium ion
提供,在“My Assets”中是默认提供的。我们可以用createWorldTerrainhelper
函数创建一个由Cesium ion提供服务的Cesium WorldTerrian。
// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
requestWaterMask : true, // required for water effects
requestVertexNormals : true // required for terrain lighting
});
*requestWaterMask
和requestVertexNormals
是可选的配置项,告诉Cesium是否需要请求额外的水、光数据。这两个选项默认是设为false的。*
最终,既然我们有了地形数据,我们需要更多的线条来使得地形数据背后的objects能够正确地显示,只有最前面、最上面的objects才能是可见的。
// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;
我们现在有地形数据和运动的水。纽约非常平坦,所以可以在上面的地形数据上自由的探索。举一个显而易见的例子,你可以跳转到更加崎岖的区域比如 Grand Canyon 或者 San Francisco。
接下来将添加一些更多的正确的时间和空间设置到Viewer中。涉及到与viewer.scene进行交互,该类控制了viewer中的所有图形元素。
// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;
按照以上配置,我们scene(场景)中的光照将会随着每天时间的变化而变化。如果你zoom out,你就会看到一部分数字地球位于黑暗之中,因为模拟真实的地球,太阳只能照射到地球的一部分。
这些是在场景中定位和定位Cesium objects所必需的基本类型,并且有许多有用的转换方法。请参阅每种类型的文档以了解更多信息。
现在让我们把相机定位在我们数据所在的NYC(纽约)的场景中。
相机是viewer.scene
中的属性,用来控制当前可见的域。我们可以通过直接设置它的位置和方向来控制相机,或者通过使用Cesium提供的API来控制相机,它被设计成指定相机的位置和方向随时间的变化。
一些最常用的方法如下:
Camera.setView(options): 在特定位置和方向立即设置相机。
Camera.zoomIn(amount): 沿着视角矢量移动摄像机。
Camera.zoomOut(amount): 沿视角矢量向后移动摄像机。
Camera.flyTo(options): 创建从当前相机位置到新位置的动画相机飞行。
Camera.lookAt(target, offset) : 定位并定位摄像机以给定偏移量瞄准目标点。
Camera.move(direction, amount) : 朝任何方向移动摄像机。
Camera.rotate(axis, angle) : 绕任意轴旋转相机。
进一步获得API功能,看看这些相机演示:
Camera API Demo
Custom Camera Controls Demo
让我们尝试一种方法将相机跳转到纽约。使用camera.setView()
初始化view,使用Cartesian3和HeadingpitchRoll指定相机的位置和方向:
// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
destination : initialPosition,
orientation : {
heading : initialOrientation.heading,
pitch : initialOrientation.pitch,
roll : initialOrientation.roll
}
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);
相机现在被定位和定向以俯瞰曼哈顿,并且我们的视图参数被保存在一个对象中,我们可以将其传递给其他相机方法。
效果如下:
实际上,我们可以使用这个相同的视角来更新按下home按钮的效果。我们不必让它从远处返回地球的默认视角,我们可以重写按钮,使我们看到曼哈顿的初始视角。我们可以通过添加几个选项来调整动画,然后添加一个取消默认航班的事件侦听器,并调用FlyTo()
我们的Home视角:
// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
e.cancel = true;
viewer.scene.camera.flyTo(homeCameraView);
});
点击Home按钮后,视图会直接跳转到纽约上空
更多关于基本相机控制,请访问我们的Camera Tutorial。
接下来,我们配置viewer的Clock和Timline来控制scene的时间进度。
这里是clock的相关API
当使用特定时间时,Cesium使用JulandDATE类型,它存储了1月1日中午以来的天数-4712(公元前4713年)。为了提高精度,该类将日期和秒的全部部分存储在单独的组件中。为了计算安全和代表跳跃秒,日期总是存储在国际原子时间标准中。
下面是我们如何设置场景时间选项的例子:
// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range
这设置场景动画的速率、开始和停止时间,并告诉时钟在到达停止时间时循环回到开始。它还将时间线控件设置为适当的时间范围。看看这个时钟示例代码来测试时钟设置。
这是我们的初始场景配置!现在,当你运行你的应用程序时,你应该看到以下内容:
效果如下:
实体使用Cesium官网提供的实体:kml下载地址
var options = {
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
screenOverlayContainer: viewer.container,
};
var dataSourcePromise= Cesium.KmlDataSource.load('/cesium/gdpPerCapita2008.kmz', options);
// viewer.dataSources.add(dataSourcePromise); 可以选择一次性加载
dataSourcePromise.then(dataSource => {
viewer.dataSources.add(dataSource);
var geocacheEntities = dataSource.entities.values;
for (var i = 0; i < geocacheEntities.length; i++) {
var entity = geocacheEntities[i];
if (Cesium.defined(entity.billboard)) {
// 这里可以篡改entity的样式
}
}
})
viewer.camera.flyHome(0);
效果如下:
Entity结构如下:
【引用教程】
新手入门中文教程
文章浏览阅读1.8k次。AndroidX 是 Android 开发的一个重要组成部分,它是 Android Jetpack 的一部分。AndroidX 是 Android Support Library(支持库)的继承者,提供了更加模块化、更易于维护和测试的库。它包括一系列用于 Android 应用开发的库和工具,涵盖了 UI 设计、架构、数据绑定、网络通信等多个方面。_androidx
文章浏览阅读3.1k次,点赞4次,收藏17次。摘要:在这个科技突飞猛进发展的时代,计算机网络已经家喻户晓,在日常生活中也起着不可忽视的作用,计算机的发展提高了人们的生活质量,加快了信息的传播,现如今,各个国家都比较重视计算机科学与技术的发展,使计算机科学与技术在全国综合国力竞争的作用逐渐加大。对于这种情况,加快计算机科学与技术的发展,不但有利于人们更快捷地了解如今的发展趋势和历史,且还推动计算机科学与技术的进步,方便人们的生活。本文首先阐述了..._大学计算机专业自设立以来在大时代背景下的变化
文章浏览阅读6.9k次,点赞8次,收藏22次。之前在工作中,有遇到需要程序化截取视频片段的场景,这里使用ffmpeg命令行就可以很容易实现,这里也记录下我们使用过程中遇到的坑,希望对大家也有所帮助。这里的参数-c:v copy指的是复用原始视频的编码格式,如果想切换视频编码也可以直接指定,比如(关于修改视频和音频编码的问题,后续会继续出一篇博客)。这里需要注意的是。_ffmpeg -ss 时间不准
文章浏览阅读1.1w次,点赞12次,收藏58次。源码如下<template> <div class="box"> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal"> <!-- 关闭 --> 内容区域 </._vue点击按钮弹出提示框
文章浏览阅读1.5k次,点赞3次,收藏2次。Ranger启动失败后,重新安装启动rangeradmin遇到MySQL异常 启动rangeradmin时报错: SQLException : SQL state: HY000 java.sql.SQLException: Operation CREATE USER failed for ‘rangeradmin’@’%’ ErrorCode: 1396 SQLException ..._ranger连接mysql8 驱动失败
文章浏览阅读1.1w次,点赞4次,收藏5次。Key length not 128/192/256 bits 一般是使用对称算法加密的时候出现的异常,它的意思是指 key的长度不是 128,192或者256 位,注意!!! 并不是不足,而是不是,这个意思指的是key的长度必须要是128,192或者256 位,知道了这个的话就很好去解决这个问题了 以AES 加密为例: aes.getSecretKey().getEncoded().length 能获取到aes 的 字节长度 (注意是字节)128 位 对应的是 16_key length not 128/192/256 bits.
文章浏览阅读152次。标签:凸包算法是计算几何中的最经典问题之一了。给定一个点集,计算其凸包。凸包是什么就不罗嗦了本文给出了《计算几何——算法与应用》中一书所列凸包算法的Python实现和Matlab实现,并给出了一个Matlab动画演示程序。啊,实现谁都会实现啦╮(╯▽╰)╭,但是演示就不一定那么好做了。算法CONVEXHULL(P)输入:平面点集P输出:由CH(P)的所有顶点沿顺时针方向组成的一个列表1.根据..._凸包算法的jpython实现
文章浏览阅读211次。DockerfileDockerfile简介Dockerfile使用流程Dockerfile基本语法认证流程认证流程认证流程Dockerfile简介dockerFile用来帮助我们构建自己的镜像Dockerfile解析过程:Dockerfile使用流程1.创建Dockerfile文件touch Dockerfile2.拉取centos镜像docker pull centos:centos7Dockerfile基本语法官方说明:https://docs.docker.com/eng_env base_dir是什么意思
文章浏览阅读6.7k次。适用系统:Linux(Redhat , CentOS,Debian,Ubuntu)1.查看数据盘在没有分区和格式化数据盘之前,使用 “df –h”命令,是无法看到数据盘的,可以使用“fdisk -l”命令查看。如下图:2.对数据盘进行分区执行“fdisk -S 56 /dev/sdb”命令,对数据盘进行分区;根据提示,依次输入“n”,“p”“1”,两次回车,“wq”,分区就开始了,很快就会完成。3..._unraid格式化硬盘命令
文章浏览阅读1k次,点赞15次,收藏17次。Vault 是一个基于身份的秘密和加密管理系统。秘密是您想要严格控制访问的任何内容,例如 API 加密密钥、密码和证书。Vault 提供由身份验证和授权方法控制的加密服务。使用 Vault 的 UI、CLI 或 HTTP API,可以安全地存储和管理、严格控制(限制)和审核对机密和其他敏感数据的访问。_vault.cf7-1it4z.workers.dev
文章浏览阅读8.9k次,点赞5次,收藏44次。1. 硬件描述单片机:STM32F407VET6 TFT-LCD控制器:RA8875 SD卡:金士顿4GB2. 第三方模块文件系统:FATFS R0.113. BMP图片基础知识BMP(全称Bitmap)是Windows操作系统中的标准图像文件格式,可以分成两类:设备相关位图(DDB)和设备无关位图(DIB),使用非常广。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,_stm32f103 hal fatfs bmp解码
文章浏览阅读530次,点赞7次,收藏7次。文档已验证, 非垃圾文, 欢迎各位大佬斧正._springboot3.2 jwt