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)

相关推荐

  1. WebGL创建 3D 对象

    2024-03-31 23:18:01       7 阅读
  2. 前端vue3

    2024-03-31 23:18:01       16 阅读
  3. vue3 Pinia

    2024-03-31 23:18:01       4 阅读
  4. Vue3defineModel

    2024-03-31 23:18:01       4 阅读
  5. WebGL使用纹理

    2024-03-31 23:18:01       10 阅读

最近更新

  1. leetcode705-Design HashSet

    2024-03-31 23:18:01       8 阅读
  2. Unity发布webgl之后打开streamingAssets中的html文件

    2024-03-31 23:18:01       8 阅读
  3. vue3、vue2中nextTick源码解析

    2024-03-31 23:18:01       8 阅读
  4. 高级IO——React服务器简单实现

    2024-03-31 23:18:01       8 阅读
  5. 将图片数据转换为张量(Go并发处理)

    2024-03-31 23:18:01       7 阅读
  6. go第三方库go.uber.org介绍

    2024-03-31 23:18:01       8 阅读
  7. 前后端AES对称加密 前端TS 后端Go

    2024-03-31 23:18:01       10 阅读

热门阅读

  1. C++中的类型转换

    2024-03-31 23:18:01       4 阅读
  2. C语言刷题(21)

    2024-03-31 23:18:01       5 阅读
  3. 算法刷题day37

    2024-03-31 23:18:01       4 阅读
  4. 优化代码分支

    2024-03-31 23:18:01       4 阅读
  5. c语言:把百分制转化为等级制度(switch语句)

    2024-03-31 23:18:01       6 阅读
  6. 搭建语音打电话机器人需要哪些技术和资源

    2024-03-31 23:18:01       5 阅读
  7. 座次问题(蓝桥杯)

    2024-03-31 23:18:01       4 阅读
  8. css页面搭建案例

    2024-03-31 23:18:01       5 阅读