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

news2024/11/23 7:22:08

写在前面：随着市场对数字孪生的需求日益增多，对于前端从业者的能力从对框架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地址加进来。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

回归分析中的异方差性

回归分析中的异方差性

在简单线性回归或多元线性回归中&#xff0c;我们对误差项做了一些基本假设。 简单线性回归&#xff1a; 多元线性回归&#xff1a; 假设条件&#xff1a; 1.误差均值为零 2.误差具有恒定方差 3.误差不相关 4.误差呈正态分布 第2个假设称为同方差性&#xff0c;因此&…
阅读更多...
【开源】JAVA+Vue.js实现大病保险管理系统

【开源】JAVA+Vue.js实现大病保险管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统配置维护2.2 系统参保管理2.3 大病保险管理2.4 大病登记管理2.5 保险审核管理 三、系统详细设计3.1 系统整体配置功能设计3.2 大病人员模块设计3.3 大病保险模块设计3.4 大病登记模块设计3.5 保险审核模块设计 四、…
阅读更多...
使用JDBC操作数据库（IDEA编译器）

使用JDBC操作数据库（IDEA编译器）

目录 JDBC的本质 ​ JDBC好处 JDBC操作MySQL数据库 1.创建工程导入驱动jar包 2.编写测试代码 ​相关问题 JDBC的本质 官方(sun公司) 定义的一套操作所有关系型数据库的规则&#xff0c;即接口各个数据库厂商去实现这套接口&#xff0c;提供数据库驱动jar包我们可以使用这…
阅读更多...
Docker Desktop 4.27.1 Windows 10 安装 教程

Docker Desktop 4.27.1 Windows 10 安装 教程

Docker Desktop 4.27.1 Windows 10 安装 版本要求windows 版本要求wsl 版本要求docker desktop 版本 安装首先确保系统版本符合要求前提下安装wsl安装 Dockers Desktop安装说明 安装问题docker Desktop 无法正常启动&#xff0c;提示wsl 相关信息wsl --install 执行输出帮助日志…
阅读更多...
Stable Diffusion 模型下载：A-Zovya RPG Artist Tools（RPG 大师工具箱）

Stable Diffusion 模型下载：A-Zovya RPG Artist Tools（RPG 大师工具箱）

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 A-Zovya RPG Artist Tools 模型是一个针对 RPG 训练的一个模型&#xff0c;可以生成一些 R…
阅读更多...
【深度学习】微调Qwen1.8B

【深度学习】微调Qwen1.8B

1.前言 使用地址数据微调Qwen1.8B。Qwen提供了预构建的Docker镜像&#xff0c;在使用时获取镜像只需安装驱动、下载模型文件即可启动Demo、部署OpenAI API以及进行微调。 github地址&#xff1a;GitHub - QwenLM/Qwen: The official repo of Qwen (通义千问) chat & pretr…
阅读更多...
Maven的下载安装配置教程

Maven的下载安装配置教程

一、简单了解一下什么是Maven Maven就是一款帮助程序员构建项目的工具&#xff0c;我们只需要告诉Maven需要哪些Jar 包&#xff0c;它会帮助我们下载所有的Jar&#xff0c;极大提升开发效率。 1.Maven翻译为“专家“&#xff0c; ”内行”的意思&#xff0c;是著名Apache公司下…
阅读更多...
通过盲注脚本复习sqllabs第46关order by 注入

通过盲注脚本复习sqllabs第46关order by 注入

在MySQL支持使用ORDER BY语句对查询结果集进行排序处理&#xff0c;使用ORDER BY语句不仅支持对单列数据的排序&#xff0c;还支持对数据表中多列数据的排序。语法格式如下 select * from 表名 order by 列名(或者数字) asc&#xff1b;升序(默认升序) select * from 表名 or…
阅读更多...
将一个 PostgreSQL 数据库复制到另一个数据库中

将一个 PostgreSQL 数据库复制到另一个数据库中

以管理员身份进入cmd窗口&#xff0c;输入如下命令 语法&#xff1a; pg_dump -C -h 本机IP -U 本机postgresql用户名 源数据库名 | psql -h 服务器IP -U 服务器postgresql用户名 目标数据库名 示例&#xff1a; pg_dump -C -h 127.0.0.1 -U postgres test01-dbname | psql…
阅读更多...
顺序表详解（如何实现顺序表）

顺序表详解（如何实现顺序表）

文章目录 前言 在进入顺序表前&#xff0c;我们先要明白&#xff0c;数据结构的基本概念。 一、数据结构的基本概念 1.1什么是数据结构 数据结构是由“数据”和“结构”两词组合而来。所谓数据就是&#xff1f;常见的数值1、2、3、4.....、姓名、性别、年龄&#xff0c;等。…
阅读更多...
高维数据的中介效应【中介分析】《R包：HIMA》

高维数据的中介效应【中介分析】《R包：HIMA》

允许基于高级中介筛选和惩罚回归技术来估计和测试高维中介效应 Hima包浏览 高维中介示意图 图1. 在暴露和结果之间有高维中介的情况 本包的作用 在确定独立筛选和极小极大凹惩罚技术的基础上&#xff0c;采用联合显著性检验方法对调解效果进行检验。使用蒙特卡罗模拟研究来展…
阅读更多...
C#知识点-15（匿名函数、使用委托进行窗体传值、反射）

C#知识点-15（匿名函数、使用委托进行窗体传值、反射）

匿名函数 概念&#xff1a;没有名字的函数&#xff0c;一般情况下只调用一次。它的本质就是一个方法&#xff0c;虽然我们没有定义这个方法&#xff0c;但是编译器会把匿名函数编译成一个方法 public delegate void Del1();//无参数无返回值的委托public delegate void Del2(s…
阅读更多...
Java SE 入门到精通—基础语法【Java】

Java SE 入门到精通—基础语法【Java】

敲重点&#xff01; 本篇讲述了比较重要的基础&#xff0c;是必须要掌握的 1.程序入口 在Java中&#xff0c;main方法是程序的入口点&#xff0c;是JVM&#xff08;Java虚拟机&#xff09;执行Java应用程序的起始点。 main方法的方法签名必须遵循下面规范&#xff1a; publ…
阅读更多...
TestNG与ExtentReport单元测试导出报告文档

TestNG与ExtentReport单元测试导出报告文档

TestNG与ExtentReport集成 目录 1 通过实现ITestListener的方法添加Reporter log 1.1 MyTestListener设置 1.2 输出结果 2 TestNG与ExtentReporter集成 2.1 项目结构 2.2 MyExtentReportListener设置 2.3 单多Suite、Test组合测试 2.3.1 单Suite单Test 2.3…
阅读更多...
Java实现实验室耗材管理系统 JAVA+Vue+SpringBoot+MySQL

Java实现实验室耗材管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 耗材档案模块2.2 耗材入库模块2.3 耗材出库模块2.4 耗材申请模块2.5 耗材审核模块 三、系统展示四、核心代码4.1 查询耗材品类4.2 查询资产出库清单4.3 资产出库4.4 查询入库单4.5 资产入库 五、免责说明 一、摘要 1.1…
阅读更多...
WebSocket实现聊天

WebSocket实现聊天

基于webSocket通信的库主要有 socket.io&#xff0c;SockJS&#xff0c;这次用的是 SockJS。 这里我们使用sockjs-client、stomjs这两个模块&#xff0c;要实现webSocket通信&#xff0c;需要后台配合&#xff0c;也使用相应的模块。 WebSocket 1、http&#xff1a;http超文…
阅读更多...
War Robots可以使用5347的卡支付

War Robots可以使用5347的卡支付

很多小伙伴想使用War Robots&#xff0c;但是不知道怎么弄&#xff0c;方法比较可靠&#xff0c;亲测有效~~~ 可以使用Fomepay的5347的卡支付 卡片cvc就是卡密&#xff0c;在首页点击更多时可以查看
阅读更多...
【ubuntu2004安装N卡驱动】

【ubuntu2004安装N卡驱动】

软硬件环境 硬件&#xff1a;联想notebook16&#xff0c;显卡4060laptop 软件&#xff1a; ubuntu20.04 驱动安装成功的版本&#xff1a;NVIDIA-Linux-x86_64-535.146.02.run 使用默认的驱动安装&#xff0c;没用原因如下 让手动安装。 手动安装 环境准备&#xff1a; sudo …
阅读更多...
【shap】使用shap画图时colorbar颜色条不能正常显示

【shap】使用shap画图时colorbar颜色条不能正常显示

下面&#xff0c;我的shap值全是蓝色的&#xff0c;没有红色 &#xff08;注&#xff1a;蓝色是负贡献&#xff0c;红色是正贡献&#xff09; 参考上面的帖子&#xff0c;是matplotlib版本问题&#xff0c;我原来的版本是3.5.0&#xff0c;降级回3.4.3就正常了。
阅读更多...
心律守护 基于机器学习的心脏病预测

心律守护 基于机器学习的心脏病预测

心律守护 基于机器学习的心脏病预测 心律守护 基于机器学习的心脏病预测项目背景与意义项目数据与特征数据分析与预处理机器学习模型建立与评估结语 心律守护 基于机器学习的心脏病预测 在当今数字化时代&#xff0c;机器学习的应用已经渗透到了医疗保健领域的各个层面。其中&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023