迈向三维：vue3+Cesium.js三维WebGIS项目实战--持续更新中

写在前面：随着市场对数字孪生的需求日益增多，对于前端从业者的能力从对框架vue、react的要求，逐步扩展到2D、3D空间的交互，为用户提供更紧密的立体交互。近年来前端对GIS的需求日益增多。本文将记录WebGIS的学习之旅，从实战项目入门，挖掘Cesium.js API，并逐步丰富项目。

 WebGIS简介

WebGIS（Web地理信息系统）是指利用 Web 技术来构建和展示地理信息系统（GIS），使用户可以通过 Web 浏览器访问、查询、分析和可视化地理空间数据。WebGIS 通常结合地图服务、地理信息数据库、前端地图库和相关的数据处理技术，为用户提供交互式的地图浏览和空间数据分析功能。 

CesiumJS简介

**JS一看名称即知道是为前端服务的JS框架，即装即用，学习新的技术最重要的是去原文档，api使用介绍。快去看下Cesium中文文档吧

Viewer - Cesium Documentation

CesiumJS是目前最流行的三维数字地球渲染引擎，不仅可以在网页端高效运行，而且可以借助虚幻引擎在CS端渲染出和游戏一样的高质量效果。

Cesium支持3D、2D、2.5D形式的地图展示，可以自行绘制图形，高亮区域。

 CesiumJS源代码

访问官网

Downloads – Cesium

 项目快速搭建

快速搭建一个下面的Cesium.js官方示例

 使用vite快速搭建vue3+typeScript

使用下面命令创建vue项目

npm create vite@latest
  • 设置项目名称
  • 选择使用vue
  • 选择是否使用typescript+vue 

 安装Cesium插件

npm i cesium vite-plugin-cesium vite -D

配置vite.config.js

vite.config.js中配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
 
 
export default defineConfig({
  plugins: [vue(),cesium()]
});

清空style.css

在App.vue里面进行全局导入

需要id为cesiumContainer的div挂载后再执行Cesium的代码，给html、body加样式屏幕撑满。

注意：viewer实例的创建必须在onMounted之后进行，确保元素已经挂载到页面上，保证地图的顺利渲染

<template>
  <div id="cesiumContainer"></div>
</template>
 
<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer',{
      infoBox: false, // 禁用沙箱，解决控制台报错
    });
});
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
html,body,#cesiumContainer{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>

这段代码中的cesiumContainer是用作Cesium Viewer（查看器）的挂载点。在WebGL渲染中，无论是二维还是三维图像，都需要一个容器来承载渲染的内容。在这里，<div id="cesiumContainer"></div> 元素就是用来承载Cesium Viewer所渲染的内容。

当你创建一个Cesium Viewer实例时，你需要指定一个DOM元素作为其容器，Cesium会将渲染的内容放置在这个DOM元素中。

通过new Cesium.Viewer('cesiumContainer', {...})，将Cesium Viewer挂载到id为cesiumContainer的div元素上，从而实现了Cesium渲染的效果。

其实无论是二维还是三维图像渲染，都需要一个挂载点来显示渲染的内容，而在这里cesiumContainer就充当了这样的作用。原理都是相同的哈~

运行程序

npm run dev

即可得到上面示例的gif效果

 页面涉及的空间如下，所有的空间都可以关闭

    geocoder: 位置查找工具
    baseLayerPicker: 图层选择器（地形影像服务）
    homeButton: 视角返回初始位置
    fullscreenButton: 全屏
    animation: 左下角仪表盘（动画器件）

    timeline: 底部时间线
    sceneModePicker: 选择视角的模式（球体、平铺、斜视平铺）
    navigationHelpButton: 导航帮助按钮
    infoBox: 信息框控件
    navigationInstructionsInitiallyVisible: 导航说明初始可见
    shouldAnimate: 动画
    requestWaterMask: 请求水面罩
    requestVertexNormals: 请求顶点法线

认识Cesium四大类

查看器类Viewer

Viewer是三维数据展示的主要窗口，此外还包含了一些基础控件。在定义Viewer对象的同时需要设定基础部件、图层等的初始化状态。

 用法示例：

接收两个参数，第一个参数指定地图主窗口div的id；第二个参数options是Viewer的可选设置参数。包含图层、地形、时间系统等参数；种类多样。

  const viewer = new Cesium.Viewer('cesiumContainer',{
      infoBox: false, 
    });

 第二个参数接收的对象表示页面可关闭的控件，控件参数解释见上，代码示例

Viewer类，关闭左下角仪表盘及底部时间线

<script setup lang="ts">
import * as Cesium from 'cesium';
import { onMounted,ref} from 'vue';
const viewer = ref();
onMounted(() => {
   viewer.value = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 禁用沙箱，解决控制台报错
    animation: false,//关闭左下角仪表盘（动画器件）
    timeline:false,//底部时间线
   });

});

 效果展示：红色圈出的部分是隐藏的控件

场景类Scene

在Cesium中Scene是非常重要的类，是所有3D图像对象的容器，是在Viewer内部隐式创建的。用于基础地理环境设置

 代码示例：隐藏地球

<script setup lang="ts">
import * as Cesium from 'cesium';
import { onMounted,ref} from 'vue';
const viewer = ref();
onMounted(() => {
   viewer.value = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 禁用沙箱，解决控制台报错
    animation: false,//关闭左下角仪表盘（动画器件）
    timeline:false,//底部时间线
   });
  viewer.value.scene.globe.show = false;

});

 scene可以对场景进行交互：如鼠标事件、相机事件；可以通过scene控制相机对视口进行切换；

代码示例：

  viewer.value.scene.camera.setView({
    destination:Cesium.Cartesian3.fromDegrees(116.39,39.9,1500)
  })

 此外scene还可以修改地球的图层 样式或地形数据，更可以在图层上绘制几何体，点、线、面

实体类Entity

Entity是由Primitive封装而来，Entity并不属于Scene。

相比较而言，Entity封装程度高，构造简单，使用便捷，使得开发者专注于数据的呈现，而不必担心底层的可视化机制。它还提供了用于构建复杂的、时间动态可视化的结构。

Entity在使用中主要用于加载实体模型，几何图形；对其进行样式设置，动效修改等

 代码示例：

增加一个尺寸为100像素的绿色圆点，先设置当前圆点的位置。fromDegrees内的三个参数分别是经度、维度和高度；给圆点设置大小，pixelSize,在设置颜色；将摄像头设置在圆点处，使得我们可以观测到。

<script setup lang="ts">
import * as Cesium from 'cesium';
import { onMounted,ref} from 'vue';
const viewer = ref();
onMounted(() => {
   viewer.value = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 禁用沙箱，解决控制台报错
    animation: false,//关闭左下角仪表盘（动画器件）
    timeline:false,//底部时间线
   });
  const entity = viewer.value.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400),
    point: {
      pixelSize: 100,
      color: new Cesium.Color(0,1,0,1)
    }
  })
  viewer.value.trackedEntity = entity;
});

</script>

 效果展示

数据源集合类DataSourceCollection

在GIS开发中加载矢量数据是必不可少的功能。在Cesium加载以下几种格式的数据可实现矢量数据的加载和存取。

DataSourceCollection是Cesium中加载矢量数据的主要方式之一；最大特点是支持加载矢量数据集合外部文件的调用。主要有三种调用方法：

CzmlDataSource   加载czml格式

KmlDataSource    加载kml格式

GeoJsonDataSource   加载GeoJSON格式

缺少数据源，暂时用代码表示

  viewer.value.dataSource.add(
    Cesium.GeoJsonDataSource.load("../../**.topojson")
  )

 Cesium的坐标与转换

Cesium是具有真实地理坐标的三维球体，而用户是通过二维屏幕与Cesium进行操作。我们将三维模型绘制在三维球体上就需要地理坐标和屏幕坐标之间做转换。接下来介绍Cesium的五种坐标系，及坐标系直接的相互转换

 WGS84经纬度坐标系-没有实际的对象

 简单点就是下面介绍的，WGS84是一种坐标系统，用于GPS全球定位系统使用。快把你初中高中的地理知识拿出来回忆回忆

 地球质心为坐标原点，Z轴指向BIH（国际时间服务机构1984.0定义的协议地球极方向）。X轴指向BIH1984.0的零子午面和CTP赤道的交点。Y轴与Z轴，X轴垂直构成右手坐标系。

科普一下经纬度：

 在WGS84经纬度坐标系中经度从-180度到正180度，纬度范围从-90度到正90度。

但在Cesium中没有实际的对象来描述WGS84经纬度坐标系。而是以下面介绍的弧度坐标系表示

 WGS84弧度坐标系（Cartographic）

用经纬度和高度表示在地球上的坐标，这才是人类可以理解的坐标点！！！忘记上面那个经纬度坐标系吧。

构建WGS84有两种方法

构造函数法

直接传入经纬度和高度

new Cesium.Cartographic(longitude,latitude,height)

静态函数法

const cartographic = Cesium.Cartographic.fromDegrees(经度,纬度,高度)
const cartographic = Cesium.Cartographic.fromRedians(经度弧度,纬度弧度,高度)

笛卡尔空间直角坐标系(Cartesian3)

笛卡尔空间直角坐标系，高中知识。以空间中O点位为原点，建立三条两两垂直的数轴。

在Cesium中的用法如下

new Cesium.Cartesian3(x,y,z)

平面坐标系(Cartesian2)

平面坐标系，也叫屏幕坐标系，是一个二维的笛卡尔坐标系

 屏幕左上角为原点，屏幕水平方向为X轴，垂直方向为Y轴，向下为正

代码示例

new Cesium.Cartesian2 ( x , y )

4D笛卡尔坐标系(Cartesian4)-用的较少

不介绍了

坐标系相互转换

WGS84转笛卡尔空间直角坐标系

const cartesian3 = Cesium.Cartesian3.fromDegrees(经度,纬度,高度)
const cartesian3 = Cesium.Cartesian3.fromDegreesArray(不带高度的数组)

 不带高度的数组。eg:[-278.0,66.0,-123.0,55.0]。相应的有带高度的数组

const cartesian3s = Cesium.Cartesian3.fromDegreesArrayHeights(带高度的数组)

 带高度的数组示例：[-278.0,66.0,6000.0,-318,65.0,120000.0]

 笛卡尔空间直角坐标系转WGS84

const cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
const cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3)

数据多个时调用的方法

const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray([笛卡尔对象1,对象2,对象3])

平面坐标系转场景WGS84坐标

const cartesian3 = viewer.scene.pickPosition(Cartesian2)

 场景坐标包含了地形、倾斜、模型的坐标

屏幕坐标转地表坐标

const cartesian3 = viewer.scene.globe.pick(viewer.camera.getPickRay(Cartesian2),viewer.scene);

地表坐标指的转地球表面的WGS84坐标，包含地形、不包括模型、倾斜摄影表面

 屏幕坐标转椭球面坐标

const cartesian3 = viewer.scene.carmera.pickEllipsoid(Cartesian2)

椭球面坐标参考椭球的WGS84坐标，不包含地形、模型、倾斜摄影表面

 重要Cesium相机系统

思考：为什么需要相机系统？

以往我们在二维GIS中移动视角或者漫游，如常用的地图，只需要设置视域中间点的经纬度坐标即可。但是在三维中我们不仅需要缺点视点位置，还要缺点视线方向。例如我们在三维中找到一个物体坐标，但是方向反了，在视野中看不到物体的！在Cesium或者其他的3D建模场景中通常使用carmer相机控制场景中的视域。相机就相当于我们的眼睛，控制好它才能达到更好的展示效果。

 setView方法

setView通过定义相机飞行目的地的三维坐标和视线方向，将视角切换到所设定的视域范围内。

  const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);
  viewer.value.camera.setView({
    destination:position ,//设置目的地
    orientation: {//设置视口方向
      heading: Cesium.Math.toRadians(0),//控制视口方向水平旋转,为0表示正北方向
      pitch: Cesium.Math.toRadians(-90),//视口上下旋转,-90度俯视朝向地面
      roll:0//控制视口的翻转角度
    }
  })
});

 从下面示例可以看出setView方法视角是直接切换，没有空中飞行的过程，适用于快速切换视角。

 flyTo方法

flyTo具有空中飞行逐步切换视域的效果，可以设置飞行时间。flyTo方法能够带来比较好的视觉效果。

  viewer.value.camera.flyTo({
    destination: position,
      orientation: {//设置视口方向
      heading: Cesium.Math.toRadians(0),//控制视口方向水平旋转,为0表示正北方向
      pitch: Cesium.Math.toRadians(-90),//视口上下旋转,-90度俯视朝向地面
      roll:0//控制视口的翻转角度
    },
    duration:5,
 })

 效果如下

 lookAt方法

lookAt方法也是直接将视角跳转到设置的目的地上，但是鼠标任意旋转视角方向，是不会改变其位置的，常用于锁定视角。

  const heading = Cesium.Math.toRadians(50);
  const pitch = Cesium.Math.toRadians(-90);
  const range = 2500;
  viewer.value.camera.lookAt(position, new Cesium.HeadingPitchRange(heading, pitch, range));

 

 viewBoundingSphere方法

它的视角切换效果也是和setView方法一样，没有飞行过渡效果，直接切换视口到指定目的地。优点是可以指定玩目标点后，可以从多个角度更好的观测

 这里开始引入一个大飞机了，仔细看大飞机模型数据从哪获取的

Cesium提供了一个示例数据集，其中包含了一些常用的示例模型、影像和地形数据，可以用于展示Cesium的功能和效果。

你可以通过以下步骤下载Cesium的示例数据集中的模型文件：

  1. 访问Cesium的示例数据集页面：Cesium示例数据集
  2. 在该页面中，你可以找到各种示例模型的文件夹，包括 CesiumAir 这个示例模型。
  3. 进入 CesiumAir 文件夹，你可以找到 Cesium_Air.glb 这个模型文件。

 从git上下载示例文件，并将SampleData一整个拷到我们的项目里

 代码添加如下：

  const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 1500);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90, 0, 0));
  //添加飞机模型
  viewer.value.entities.add({
    position: position,
    orientation: orientation,
    model: {
      uri: "../src/SampleData/models/CesiumAir/Cesium_Air.glb",
      minimumPixelSize: 100,
      maximumScale: 10000,
      show:true
    }
  })
  viewer.value.camera.viewBoundingSphere(new Cesium.BoundingSphere(position, 20), new Cesium.HeadingPitchRange(0, 0, 0));

 

 无论如何移动相机的视角都是绑定在飞机模型上的，由此发现，当我们需要对一个物体进行多角度观测时，或者建筑物进行定点漫游时，我们就需要viewBoundingSphere方法

 Cesium地图和地形加载

使用新地图，需要注册ion账号，拿到个人token后将所需要的地图数据加入到自己的账户中，可以用github账户直接登陆

注册Cesium Ion

这步是必须的，否则后面的地图地形建筑体数据都加载不了。cesium Ion提供瓦片图和3D地理空间数据的平台，支持将数据添加到自己的应用中。

    首先去注册一个免费的cesium ION账户。
    打开https://cesium.com/ion/
    打开“Access Token”,跳转到Access Token Page页面。
    选择default默认的asscessToke拷贝到contents中。

注： 在创建Cesium Viewer的时候，将access Token填为自己的access token即可。

Cesium.Ion.defaultAccessToken = window.CesiumAccessToken; //window.CesiumAccessToken:自己的access token.

加载公路地图数据

比如这里选中了公路地图 Bing Maps Road

 然后到我的资产中查看，选中刚才加入的地图，在右下角有使用方式，复制即可，注意看添加的地图在你个人资产的位置，不要无脑复用我的代码

  viewer.value = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 禁用沙箱，解决控制台报错
  });
  viewer.value.imageryLayers.addImageryProvider(
  await Cesium.IonImageryProvider.fromAssetId(4),

 token怎么添加的截图给你搂一眼哈，加油加油

 

看下新地图的效果（其实加了层皮肤，这就很像道路地图了）

 加载地形数据

Terrain 地形的意思。这玩意就是在学英语。选择Cesium World Terrain做示例

  viewer.value.scene.setTerrain(
    new Cesium.Terrain(
      Cesium.CesiumTerrainProvider.fromIonAssetId(1),
    ),
  );

 通过之前介绍的scene类加入地形。效果如下

 添加建筑体

在实际的应用中光有地图和地形肯定是不够的，还需要加载城市中的建筑模型信息。使用Asset Depot提供的建筑体模型。默认是放在My Assets中。同样拷贝示例代码

 

 

  viewer.value.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(96188),
  );
  //改变视口，将位置定位在陆家嘴
  viewer.value.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(121.49, 31.23, 2000),
    orientation: {
      heading: 20,
      pitch: -20,
      roll:0
    }
  })

viewer中的scene是Cesium虚拟场景中所有3D图形对象和状态的容器。其primitives用于获取大量的基元集合。add方法用于添加数据。Cesium3DTileset用于传输海量异构3D地理空间数据集。

 示例如下：

智慧城市的感觉一下就出现了

 先更到这，明天继续，需要源码的关注这个博客，后续我将git地址加进来。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/401412.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Vue3-组合式Api(重点)

Vue3-组合式Api(重点)

阅读文章你可以收获的知识 1.知道setup语法糖的使用和如何实现的 2.知道在vue3中如何定义响应式数据 3.知道在vue3中如何定义一个计算属性&#xff08;computed&#xff09; 4.知道如何在vue3中使用watch来监听数据 5.知道在vue3如何实现父子通信 6.知道vue3如何使用ref函…
阅读更多...
前端架构: 脚手架之Chalk和Chalk-CLI使用教程

前端架构: 脚手架之Chalk和Chalk-CLI使用教程

Chalk Chalk 是粉笔的意思, 它想表达的是&#xff0c;给我们的命令行中的文本添加颜色类似彩色粉笔的功能 在官方文档当中&#xff0c;它的 Highlights 核心特性 Expressive API Highly performant No dependencies Ability to nest styles 256/Truecolor color support Auto-…
阅读更多...
dell r740服务器黄灯闪烁维修现场解决

dell r740服务器黄灯闪烁维修现场解决

1&#xff1a;首先看一下这款DELL非常主力的PowerEdge R740服务器长啥样&#xff0c;不得不说就外观来说自从IBM抛弃System X系列服务器后&#xff0c;也就戴尔这个外观看的比较顺眼。 图一&#xff1a;是DELL R740前视图&#xff08;这款是8盘机型&#xff09; 图二&#xff…
阅读更多...
【算法与数据结构】1020、130、LeetCode飞地的数量 被围绕的区域

【算法与数据结构】1020、130、LeetCode飞地的数量 被围绕的区域

文章目录 一、1020、飞地的数量二、130、被围绕的区域三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、1020、飞地的数量 思路分析&#xff1a;博主认为题目很抽象&#xff0c;非常难理解。想了好久&#xff0c;要理解…
阅读更多...
(っ•̀ω•́)っ 如何在PPT中为文本框添加滚动条

(っ•̀ω•́)っ 如何在PPT中为文本框添加滚动条

本人在写技术分享的PPT时&#xff0c;遇到问题&#xff1a;有一大篇的代码&#xff0c;如何在一张PPT页面上显示&#xff1f;急需带有滚动条的文本框&#xff01;百度了不少&#xff0c;自己也来总结一篇&#xff0c;如下&#xff1a; 1、找到【文件】-【选项】 2、【自定义功…
阅读更多...
基于 QUIC 协议的 HTTP/3 正式发布！

基于 QUIC 协议的 HTTP/3 正式发布！

近期&#xff0c;超文本传输协议新版本 HTTP/3 RFC 文档&#xff0c;已由互联网工程任务组&#xff08;IETF&#xff09;对外发布。HTTP/3 全称为 HTTP-over-QUIC&#xff0c;指在 QUIC&#xff08;Quick UDP Internet Connections, 快速 UDP 互联网连接&#xff09;上映射 HTT…
阅读更多...
3个精美的wordpress企业网站模板

3个精美的wordpress企业网站模板

WordPress企业网站模板 https://www.zhanyes.com/qiye/6305.html WordPress企业官网模板 https://www.zhanyes.com/qiye/6309.html WordPress律师模板 https://www.zhanyes.com/qiye/23.html
阅读更多...
深入浅出JVM（四）之类文件结构

深入浅出JVM（四）之类文件结构

深入浅出JVM&#xff08;四&#xff09;之类文件结构 Java文件编译成字节码文件后&#xff0c;通过类加载机制到Java虚拟机中&#xff0c;Java虚拟机能够执行所有符合要求的字节码&#xff0c;因此无论什么语言&#xff0c;只要能够编译成符合要求的字节码文件就能够被Java虚拟…
阅读更多...
webpack配置杂记

webpack配置杂记

1、热更新 安装webpack-dev-server : npm i webpack-dev-server -D webpack.config.js配置 module.exports {// 其他配置...,// 热更新配置devServer: {host: "localhost",port: 3000,}, } 2、入口entry&#xff1a;使用相对路径们也就是webpack程序运行的路径&am…
阅读更多...
Qt应用软件【协议篇】MQTT官方源码编译安装

Qt应用软件【协议篇】MQTT官方源码编译安装

文章目录 QT官方代码选择对应的版本Qt Creator编译代码代码下载与编译安装mqtt命令行方式编译与安装代码示例QT官方代码 https://github.com/qt/qtmqtt/tree/5.15.2 选择对应的版本 我们可以在github上切换分支，切换到我们需要的版本上 Qt Creator编译代码 代码下载与编译…
阅读更多...
win10编译openjdk源码

win10编译openjdk源码

上篇文章作者在ubuntu系统上实践完成openjdk源码的编译&#xff0c;但是平常使用更多的是window系统&#xff0c;ubuntu上编译出来JDK无法再windows上使用。所以作者又花费了很长时间在windows系统上完成openjdk源码的编译&#xff0c;陆续花费一个月的时间终于完成了编译。 本…
阅读更多...
2024牛客寒假算法基础集训营5 -- EF soyorin的数组操作

2024牛客寒假算法基础集训营5 -- EF soyorin的数组操作

题目大意&#xff1a; 思路解析&#xff1a; 我们可以发现偶数情况下&#xff0c;我们可以无限做 k n的操作&#xff0c;这样一定会让数组变为非降序数组。 但是奇数情况下&#xff0c;最后一个数没有办法发生变化&#xff0c;所以我们只能统计怎样在保证i--n为非降序情况下最…
阅读更多...
解决IntelliJ IDEA 2023版本创建Spring项目时Java只能选择17或21的问题

解决IntelliJ IDEA 2023版本创建Spring项目时Java只能选择17或21的问题

问题描述&#xff1a; 当使用IntelliJ IDEA2023版本中Spring Initializr新建Spring项目时&#xff0c;即使JDK配置项为1.8&#xff0c;Java配置项仍然只能选17或21. 在JDK为1.8版本情况下&#xff0c;Java选择17或21&#xff0c;点击NEXT按钮&#xff0c;则会弹窗提示SDK不支持…
阅读更多...
ChatGPT丨“成像光谱遥感技术中的AI革命：ChatGPT应用指南“

ChatGPT丨“成像光谱遥感技术中的AI革命：ChatGPT应用指南“

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。本文重点介绍ChatGPT在遥感中的应用&#xff0c;人工智能…
阅读更多...
ClickHouse--11--ClickHouse API操作

ClickHouse--11--ClickHouse API操作

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.Java 读写 ClickHouse API1.1 首先需要加入 maven 依赖1.2 Java 读取 ClickHouse 集群表数据JDBC--01--简介 ClickHouse java代码 1.3 Java 向 ClickHouse 表中写…
阅读更多...
高校学科竞赛平台|基于springboot高校学科竞赛平台设计与实现(源码+数据库+文档)

高校学科竞赛平台|基于springboot高校学科竞赛平台设计与实现(源码+数据库+文档)

高校学科竞赛平台目录 目录 基于springboot高校学科竞赛平台设计与实现 一、前言 二、系统功能设计 三、系统实现 1、竞赛题库管理 2、竞赛信息管理 3、晋级名单管理 4、往年成绩管理 5、参赛申请管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最…
阅读更多...
typescript 索引签名类型

typescript 索引签名类型

ts索引类型简介 在TypeScript中&#xff0c;索引签名类型&#xff08;Index Signature Type&#xff09;是一种特殊的类型&#xff0c;它定义了对象中键的类型以及相应的值的类型。通过使用索引签名类型&#xff0c;我们可以表示一个对象&#xff0c;该对象的键可以是任意类型…
阅读更多...
Android全新UI框架之常用ComposeUI组件

Android全新UI框架之常用ComposeUI组件

在Compose中&#xff0c;每个组件都是一个带有Composable注解的函数&#xff0c;被称为Composable。Compose已经预置了很多基于MD设计规范的Composable组件。 在布局方面&#xff0c;Compose提供了Column、Row、Box三种布局组件(感觉跟flutter差不多)&#xff0c;类似于传统视图…
阅读更多...
《Python 语音转换简易速速上手小册》第5章 音频数据处理（2024 最新版）

《Python 语音转换简易速速上手小册》第5章 音频数据处理（2024 最新版）

文章目录 5.1 音频数据的基本处理5.1.1 基础知识5.1.2 主要案例&#xff1a;音频剪辑工具案例介绍案例 Demo案例分析 5.1.3 扩展案例 1&#xff1a;自动音量调节器案例介绍案例 Demo案例分析 5.1.4 扩展案例 2&#xff1a;语音识别预处理案例介绍案例 Demo案例分析 5.2 使用 Py…
阅读更多...
LLM 模型融合实践指南：低成本构建高性能语言模型

LLM 模型融合实践指南：低成本构建高性能语言模型

编者按&#xff1a;随着大语言模型技术的快速发展&#xff0c;模型融合成为一种低成本但高性能的模型构建新途径。本文作者 Maxime Labonne 利用 mergekit 库探索了四种模型融合方法&#xff1a;SLERP、TIES、DARE和passthrough。通过配置示例和案例分析&#xff0c;作者详细阐…
阅读更多...
最新文章

Copyright @ 2022~2023