在vue3中使用Cesium保姆篇

1.首先新建一个vue项目

Vue.js - 渐进式 JavaScript 框架 | Vue.js

可以直接到管网中查看命令通过npm来创建一个vue3的项目

然后通过命令下载1.99的版本的cesium和plugin

npm i cesium@1.99 vite-plugin-cesium

下载完了以后

2.引入cesium

首先找到vue的vite.config.js 文件

在里面引入刚才下载的插件并使用,代码如下

javascript 复制代码
import { fileURLToPath, URL } from 'node:url'

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()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3.在组件中使用cesium

import * as Cesium from 'cesium' *as代表所有

当然,这个是写在组件加载后的,自然还要引入onMounted

下面直接上组件的代码

javascript 复制代码
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium'
console.log(Cesium, 'CesiumCesium');
onMounted(() => {
  Cesium.Ion.defaultAccessToken = '你的cesiumtoken'
  //自定义图层
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
    enablePickFeatures: false
  })
  //返回的是笛卡尔坐标   经纬度转笛卡尔坐标
  //经度 纬度 高度
  //响水县坐标
  const Cartesian = Cesium.Cartesian3.fromDegrees(119.56985, 34.20513, 10000)
  console.log(Cartesian, 'Cartesian');
  //viewer是所有Api的开始
  const viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, //是否显示动画控件
    baseLayerPicker: false, //是否显示图层选择控件
    geocoder: false, //是否显示地名查找控件
    timeline: false, //是否显示时间线控件
    sceneModePicker: false, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    fullscreenButton: false, //是否显示全屏按钮
    // infoBox: false, //是否显示点击要素之后显示的信息
    homeButton: false, //是否显示Home按钮
    // imageryProvider:esri,//自定义图层
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true,//水面特效
      // requestVertexNormals: true
    }),//地形图层也就是三维地图
  })


  //相机
  viewer.camera.setView({
    destination: Cartesian,//初始位置
    orientation: {//初始方向
      heading: Cesium.Math.toRadians(-50), //初始方向
      pitch: Cesium.Math.toRadians(-50), //初始方向
      roll: Cesium.Math.toRadians(0),
    }
  })

})
</script>

效果如下

4.获取cesium的token

代码中用到了cesium的token,如果不知道token在哪取的话可以看这篇文章如何获得cesium的token-CSDN博客

当然我们如果在项目中使用三位地图的话肯定不要左下角的的logo的,由于cesium的api没办法关闭,所以就只能用css样式来控制了,

代码如下

html 复制代码
<style scoped>
:: v-deep .cesium-viewer-bottom{
  display: none !important;
}

#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

这样可以让logo隐藏掉但是,由于是在vue3中, v-deep已经废弃了,

会报以下警告

解决方法如下

vue3中使用::v-deep报错 ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>)-CSDN博客

这样就可以实现一个简单的三维地图了

5.坐标转换

在cesium中用到的坐标是笛卡尔坐标,所以我们的经纬度需要进行转换后才能使用

当然不光有经纬度转笛卡尔坐标,还

javascript 复制代码
 const Cartesian = Cesium.Cartesian3.fromDegrees(119.56985, 34.20513, 10000)//经度 纬度 高度

  console.log(Cartesian, 'Cartesian');//转换后的笛卡尔坐标

有笛卡尔坐标转经纬度

javascript 复制代码
 //笛卡尔转弧度坐标
  //返回的是弧度坐标
  const Cartographic = Cesium.Cartographic.fromCartesian(Cartesian)
//经纬度是角度坐标,再通过弧度坐标转换为角度坐标,自己也可以将这段封装成为一个方法
  let lon = Cesium.Math.toDegrees(Cartographic.longitude)
  let lat = Cesium.Math.toDegrees(Cartographic.latitude)
  console.log(lon, 'lon');
  console.log(lat, 'lat');

这样就获得了我们平时用到的经纬度了

暂时更到这里,后续还会更新

相关推荐
别拿曾经看以后~11 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死14 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人25 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人26 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR31 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香33 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969336 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai41 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍