WebGIS 之 vue3+vite+ceisum

1.项目搭建node版本在16以上

1.1创建项目

npm create vite 项目名

1.2选择框架

vue+javaScript在这里插入图片描述

1.3进入项目安装依赖

cd 项目名
npm install

1.4安装cesium依赖

pnpm i cesium vite-plugin-cesium

1.5修改vite.config.js文件

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

1.6在app.vue中引入Cesium并打印

import * as Cesium from ‘cesium’
console.log(Cesium)

1.7运行项目

npm run dev

2.Hello Cesium

在这里插入图片描述

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
onMounted(() => {
 Cesium.Ion.defaultAccessToken = '申请的token'
 new Cesium.Viewer('cesiumContainer')
})
</script>
  
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

3.控件

Cesium内置了一些小控件,可以在new Cesium.Viewer时传入参数进行控制

3.1自定义地图影像

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'token'
   const esri = new Cesium.ArcGisMapServerImageryProvider({
      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      enablePickFeatures: false,
    });
  const viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: esri,   //默认的谷歌地图影像  影像图层 ImageryLayer
    //地形图层TerrainProvider
    terrainProvider: Cesium.createWorldTerrain({
          requestWaterMask: true //水面特效
     }),
  })
  
})

3.2控件显示隐藏默认显示

在这里插入图片描述

// Viewer是一切API的开始
    let viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false,  //是否显示图层选择控件
        animation: false, //是否显示动画控件
        timeline: false,  //是否显示时间轴控件
        fullscreenButton: false, //是否显示全屏按钮
        geocoder: false, //是否显示搜索按钮
        homeButton: false, //是否显示主页按钮
        navigationHelpButton: false,//是否显示帮助提示按钮
        sceneModePicker: false//是否显示投影方式按钮
    })

4.坐标转换

4.1经纬度转笛卡尔

在这里插入图片描述

const Cesium1= Cesium.Cartesian3.fromDegrees(114, 30, 1000)//经度 纬度 高度
console.log(Cesium1)//返回的是一个笛卡尔坐标

4.2笛卡尔转经纬度

Cesium中的地理坐标单位默认是弧度制,用Cartographic变量表示,通过new Cesium.Cartographic()创建构造Cartographic对象

//第一步:笛卡尔转弧度
let cartographic = Cesium.Cartographic.fromCartesian(Cesium1)
console.log(cartographic)

//第二步:弧度坐标转角度坐标
// let lon = 180 / Math.PI * cartographic.longitude
// let lat = 180 / Math.PI * cartographic.latitude
let lon = Cesium.Math.toDegrees(cartographic.longitude)
let lat = Cesium.Math.toDegrees(cartographic.latitude)
console.log(lon)
console.log(lat)
console.log(cartographic.height)

5.相机

在Cesium中,我们确定的视角,需要设置相机的位置和方向。
● destination用于设置相机的位置。
● orientation用于设定相机的方向
orientation是用来控制相机的heading(偏航角) pitch(仰俯角) roll(翻滚角)。最简单的理解就是相机镜头当前浏览器窗口所在的位置
heading 偏航角 -->Y
pitch俯仰角–>x
roll 旋转角–z
在这里插入图片描述

5.1setView

setView通过定义相机飞行目的点的三维坐标和视角,没有飞行过程,直接定位到设定的视域范围,用于快速切换视角

 const position = Cesium.Cartesian3.fromDegrees(110, 30, 20000)
  viewer.camera.setView({
    destination: position,
    orientation: {//默认(0,-90,0)
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(90),
      roll: Cesium.Math.toRadians(0)
    }
  })

5.2 flyTo

flyTo是快速切换视角,带有飞行动画,可以设置飞行时长

const position = Cesium.Cartesian3.fromDegrees(110, 30, 20000)
viewer.camera.flyTo({
      destination: position,
      orientation: {
        heading: Cesium.Math.toRadians(20),  // 默认
        pitch: Cesium.Math.toRadians(-90.0),  // 默认
        roll: 0.0                             // 默认
      },
      duration: 3, 
 })

5.3 lookAt

lookAt将视角固定在所设置的目的点上,可以任意旋转视角,但是不会改变位置

const position = Cesium.Cartesian3.fromDegrees(110, 30)
viewer.camera.lookAt(position, new Cesium.HeadingPitchRange(
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(-90),
    20000,//中心点距离地面的距离
))

6.entity实体

Cesium丰富的空间数据可视化API分为两部分:Primitive API 面向三维图形开发者,更底层一些。Entity API 是数据驱动更高级一些。
Primitive API的主要目的是为了完成(可视化)任务的最少的抽象需求。他要求我们以一个图形开发者的方式去思考,并且使用了一些图形学术语。它是为了最高效最灵活的实现可视化效果,忽略了API的一致性。比如绘制三维模型和创建Billboard不同,和多边形绘制更是彻底不同。每种可视化都有自己鲜明的特色。此外,他们每种都有自己的独特的性能提升方式,也需要遵守不同的优化原则。虽然它很强大又很灵活,但是大多数项目需要比Primitive API更高层次的抽象。
Entity AP的主要目的是定义一组高级对象,它们把可视化和信息存储到统一的数据结果中,这个对象叫Entity。 它让我们更加关注我们的数据展示而不是底层的可视化机制。它提供了很方便的创建复杂的,与静态数据相匹配的随时间变化的可视化效果。Entity API实际内部在使用Primitive API ,它的实现细节,我们无需关心。经过各种数据的测试,Entity API提供灵活的,高层次的可视化,同时暴露一些一致性的、容易去学习和使用的接口
地址

6.1 entity实体点

//实体中都是笛卡尔坐标
// entity是基于primitive封装的点
// 写法一
const point1 = new Cesium.Entity({
    id: 'point1',
    position: Cesium.Cartesian3.fromDegrees(120, 30),//笛卡尔坐标
    point: {
        color: Cesium.Color.BLUE,
        pixelSize: 20
    }
})
viewer.entities.add(point1)

// 写法二(推荐)
const point2 = viewer.entities.add({
    id: 'point2',
    position: Cesium.Cartesian3.fromDegrees(121, 30),//笛卡尔坐标
    point: {
        color: Cesium.Color.BLUE,
        pixelSize: 20
    }
})
viewer.zoomTo(point2)

6.2标注

在这里插入图片描述

const billboard = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(116,40,10),billboard: {
image: '/src/assets/position.png'.
scale: 0.3,
color: Cesium.Color.YELLOW
viewer.zoomTo(billboard)

在这里插入图片描述

const label = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(122, 30),
  label: {
    text: '新中地',
    fillColor: Cesium.Color.YELLOWGREEN,//变量
    showBackground: true,
    backgroundColor: new Cesium.Color(255, 255, 0,)//实例化
  }
})
viewer.zoomTo(label)

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

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

相关文章

【Docker笔记05】【网络模式】

一、前言 本系列是根据 B 站 尚硅谷 Docker 视频 学习记录笔记。因为没有视频课件&#xff0c;部分内容摘自 https://www.yuque.com/tmfl/cloud/dketq0。 本系列仅为自身学习笔记记录使用&#xff0c;记录存在偏差&#xff0c;推荐阅读原视频内容或本文参考笔记。 二、简单介…

0.5米多光谱卫星影像在农业中进行地物非粮化、非农化监测

一、引言 随着科技的发展&#xff0c;卫星遥感技术已经成为了农业领域中重要的数据来源。其中&#xff0c;多光谱卫星影像以其独特的优势&#xff0c;在农业应用中发挥着越来越重要的作用。本文将重点探讨0.5米加2米多光谱卫星影像在农业中的应用。 二、多光谱卫星影像概述 多…

金融汽车科技LLM

汇丰银行 众安保险 1. AIGC重塑保险价值链 小额高频 2.构建智能应用的技术方案演进 增加微服务 长记忆&#xff1a;向量库短记忆&#xff1a;对话历史&#xff0c;思考路径&#xff0c;执行历史 中台架构设计 蔚来汽车在大模型的应用实践 公司介绍 应用架构 应用实践 4.大…

【洛谷 P8700】[蓝桥杯 2019 国 B] 解谜游戏 题解(字符串+映射+周期性)

[蓝桥杯 2019 国 B] 解谜游戏 题目背景 题目描述 小明正在玩一款解谜游戏。谜题由 24 24 24 根塑料棒组成&#xff0c;其中黄色塑料棒 4 4 4 根&#xff0c;红色 8 8 8 根&#xff0c;绿色 12 12 12 根 (后面用 Y 表示黄色、R 表示红色、G 表示绿色)。初始时这些塑料棒排…

学习率对精度和损失的影响研究

1 问题 在学习深度学习的过程中&#xff0c;欲探究优化器的学习率对精度和损失的影响。 2 方法 测试不同学习率下网络的性能。 控制其余变量&#xff1a; Beach_size256optimizer torch.optim.SGD网络为三层全连接网络&#xff08;784->512->10&#xff09;训练周期100 …

MySQL MHA高可用数据库

文章目录 MySQL MHA高可用数据库搭建MySQL MHA模拟故障故障修复&#xff1a; MySQL MHA高可用数据库 MHA&#xff08;MySQL High Availability&#xff09;是一个开源的高可用解决方案&#xff0c;用于实现MySQL主从复制集群的故障自动切换。MHA的主要目的是确保MySQL数据库集…

规划控制如何兼顾安全与舒适性

规划控制如何兼顾安全与舒适性 附赠自动驾驶学习资料和量产经验&#xff1a;链接 **导读&#xff1a;**自动驾驶技术研发对于“安全第一”的追求是毋庸置疑的&#xff0c;但是这中间可能就忽视了舒适性。 因此&#xff0c;今天我想给大家分享的是&#xff0c;自动驾驶研发如何…

微信小程序(黑马优购:登录)

1.点击结算进行条件判断 user.js //数据 state: () >({ // address: {} address: JSON.parse(uni.getStorageSync(address) || {}), token: }), my-settle.vue computed: { ...mapGetters(m_cart,[checkedCount,total,checkedGoodsAmount]), …

@JsonProperty和@JSONField注解的区别

JSON&#xff08;JavaScript Object Notation&#xff09; json是一种常见的数据交换的轻量级数据格式。HTTP协议传输数据可以有多种数据格式&#xff0c;比如下面几种常见数据传输格式&#xff0c;除此之外还有其他的数据交换格式。 数据传输类型编码类型示例表单格式applic…

Qt使用opencv,进行视频录制,功能打开、关闭摄像头,开始、结束录制视频,暂停、继续录制,并保存视频文件

1.效果图 2 代码实现 2.1 .h文件 #ifndef VIDEORECORDWIDGET_H #define VIDEORECORDWIDGET_H#include <QWidget>#include<QFileDialog>#include <QImage> #include <QLabel> #include <QTimer> #include <opencv2/opencv.hpp>using name…

金三银四面试题(九):JVM常见面试题(3)

今天我们继续探讨常见的JVM面试题。这些问题不比之前的问题庞大&#xff0c;多用于面试中JVM部分的热身运动&#xff0c;开胃菜&#xff0c;但是大家已经要认真准备。 你能保证GC 执行吗&#xff1f; 不能&#xff0c;虽然你可以调用System.gc() 或者Runtime.gc()&#xff0c…

JVM剖析

0.前言 Java 是当今世界使用最广泛的技术平台之一。使用 Java 或 JVM 的一些技术包括&#xff1a; Apache spark用于大数据处理&#xff0c;数据分析在JVM上运行;用于数据流的Apache NiFi在内部使用的也是 JVM;现代 Web 和移动应用程序开发中使用的React native使用 的也包含…

nginx的缓存和gzip

nginx的缓存 缓存的基本思想是利用客户端访问的时间局限性&#xff0c;将客户端访问过的内容做一个副本&#xff0c;在一定时间内存放到本地&#xff0c;当改数据下次被访问时&#xff0c;不必连接到后端服务器反复去查询数据&#xff0c;而是由本地保存的副本响应数据。 保存…

node:ReferenceError: XMLHttpRequest is not defined

node&#xff1a;ReferenceError: XMLHttpRequest is not defined 1 前言 node执行如下代码&#xff1a; new XMLHttpRequest()报错提示&#xff1a;ReferenceError: XMLHttpRequest is not defined 2 解决 2.1 可能原因是没有安装xmlhttprequest npm install xmlhttpreq…

空格隔开的多个数据,可以用多个scanf()读取,也可以用一个scanf()读取

概要&#xff1a; 如果输入数据有多个&#xff0c;且用空格隔开 读取的时候&#xff0c;可以用多个scanf()读取 也可以用一个scanf()读取&#xff0c;在这个scanf()内部使用空格即可 一、用多个scanf()读取 1、代码 #include<stdio.h> int main() {int line[3];int…

window配置RUST开发环境详解

1.先安装VS2022: 下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux (microsoft.com) 2.下载Rustup-init.exe Other Installation Methods - Rust Forge 3.运行rustup-init.exe开始安装rust开发环境: 安装成功出现下图所示 %USERPROFILE%\.cargo\bin 添加cargo安装路…

内网穿透时报错【Bad Request This combination of host and port requires TLS.】的原因

目录 前言&#xff1a;介绍一下内网穿透 1.内网直接https访问&#xff08;可以正常访问&#xff09; 程序配置的证书 2.内网穿透后,通过外网访问 3.原因 4.内网非https的Web应用&#xff0c;使用https后&#xff0c;也变成了https访问 5.题外话 感觉自己的web应用配置了…

155 Linux C++ 通讯架构实战10,工具telent 和 wireshark的使用

telnet工具使用介绍 windows 上开启telnet linux 上开始telnet 使用telnet //是一款命令行方式运行的客户端TCP通讯工具&#xff0c;可以连接到服务器端&#xff0c;往服务器端发送数据&#xff0c;也可以接收从服务器端发送过来的信息&#xff1b; //类似nginx5_1_1_clie…

3D检测:从pointnet,voxelnet,pointpillar到centerpoint

记录centerpoint学习笔记。目前被引用1275次&#xff0c;非常高。 地址&#xff1a;Center-Based 3D Object Detection and Tracking (thecvf.com) GitHub - tianweiy/CenterPoint CenterPoint&#xff1a;三维点云目标检测算法梳理及最新进展&#xff08;CVPR2021&#xff…

为 Linux 中的 Docker 配置阿里云和网易云国内镜像加速下载中心

由于默认情况下&#xff0c;Docker 的镜像下载中心默认为国外的镜像中心&#xff0c;使用该镜像中心拉去镜像会十分缓慢&#xff0c;所以我们需要配置国内的 Docker 镜像下载中心&#xff0c;加速 Docker 镜像的拉取。Docker 的国内镜像下载中心常用的有&#xff1a;阿里云、网…