vite-plugin

vite-plugin

版本号详细介绍

"vue": "3.2.45"

"vite": "^4.2.1"

"cesium": "^1.104.0"

"vite-plugin-cesium": "^1.2.22"

1. 导进cesium有关包

npm i -D cesium vite-plugin-cesium

2. vue.config配备

导进vite软件

import cesium from 'vite-plugin-cesium';

在软件中应用

export default defineConfig({
  plugins: [
    vue(),
    cesium(),
  ]
  })

3. 根据部件应用cesium

3.1 component下创建cesium部件

<script setup lang="ts">
import * as Cesium from 'cesium';

const viewer = ref();
const handlerCLick = () => {
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas);
  handler.setInputAction(function(event:any) {
    let cartesian = viewer.value.camera.pickEllipsoid(event.position);
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经纬度
    let lat = Cesium.Math.toDegrees(cartographic.latitude); // 层面
    let alt = cartographic.height; // 相对高度，椭圆面height始终相当于0
    let coordinate = {
      longitude: Number(lng.toFixed(6)),
      latitude: Number(lat.toFixed(6)),
      altitude: Number(alt.toFixed(2))
    };
    console.log(coordinate,3333);

    console.log(viewer.value.scene.camera.heading);
    console.log(viewer.value.scene.camera.pitch);
    console.log(viewer.value.scene.camera.roll);
    console.log(viewer.value.scene.camera.position)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

onMounted(() => {

  viewer.value = new Cesium.Viewer('cesiumContainer',{
    animation: false, // 动漫球
    timeline: false, // 时间轴
    infoBox: false,// 出错 Blocked script execution in ‘about:blank‘
    baseLayerPicker: false, // baselayer桌面小组件
    terrainProvider: Cesium.createWorldTerrain({ // 地貌设定
      requestWaterMask: true,
      requestVertexNormals: true,
    })
  });

  handlerCLick()
  viewer.value.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      xxx.426141,
      xx.288993,
      1800),// 经纬度, 层面，相对高度，实际就找个地形图地理坐标，自己写
    orientation:{// 摄像机镜头设定
      heading: .046, // 垂直方向,恰逢为右,负数为左
      pitch: -.563 // 左右方位,恰逢为先,负数给下
    }
  })

})

</script>

<template>
  <div id="cesiumContainer">
  </div>
</template>
<style>
#cesiumContainer{
  width: 100%;
  height: 100%;
}
</style>

3.2 导进应用

这一总不用写了啊，随便找网页页面作为部件导进就可以了

实际效果

本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。 在网站上，大家可以学到最新前端开发技术，掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例，让大家可以快速上手前端工程师的关键技术和程序。 本站还提供了一系列好用的工具软件，帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进，能够帮助你节约时间精力，提高研发效率。 此外，本站还拥有一个有活力的小区，你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信，街道的能量能够帮助你能够更好地进步与成长。 在网站上，大家可以寻找你需要的一切前端工程师网络资源，使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭，一起探索前端工程师的无限潜能!