Cesium3D地球的大致使用方法

文章目录

• • 概要
  • 技术细节
  • 小结

概要

提示：主要讲述了自己在vue3中使用Cesium3D的一些简单步骤

效果图（可以根据鼠标滚动显示不同的数据）

 

技术细节

1.1、第一步我们首先搭建环境

npm i cesium@1.99 vite-plugin-cesium 

1.2  找到vite.confing.ts文件引入我们的cesium

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))
    }
  }
})

2.代码

2.1 代码目录 (index.vue只是引入的map.vue)

2.2 map.vue

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100%; position: relative" />
</template>

<script lang="ts" setup>
import * as Cesium from 'cesium';
import { imageData, useCesium } from '../point';
import { Marker } from '../type';
import { getAllProject } from '@/api/projectManagement';
import { ref } from 'vue';

const pointData = ref<Marker[]>([]);
const emit = defineEmits(['updateData']);
const getAllStationData = async () => {
  const res = await getAllProject();
  pointData.value = res.result.map((item: any) => {
    const { id, address, capacity, location, adminUserId, imageAddr, name } = item;
    return {
      id,
      name,
      address,
      lngLat: location.split(',').map((el: string) => Number(el)),
      installedCapacity: capacity,
      adminUserId,
      imageAddr,
      display: 'none',
      left: 0,
      icon: 'flash-icon',
      iconStyle: {
        width: 20,
        height: 40,
      },
    };
  });
  initViewer();
};

let timer: any = null;
let flag = true;
const viewerMap = [
  ['black', 125, 'icon', { width: 30, height: 55 }],
  ['none', 0, 'flash-icon', { width: 20, height: 40 }],
  ['none', 0, 'spot', { width: 25, height: 25 }],
];
/** 添加高德地图影像*/
const addGaoDeMap = (viewer: Cesium.Viewer) => {
  // 1. 创建高德影像的UrlTemplateImageryProvider
  let imgLayer = new Cesium.UrlTemplateImageryProvider({
    url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    minimumLevel: 4,
    maximumLevel: 18,
  });
  viewer.imageryLayers.addImageryProvider(imgLayer);
  // 2. 创建高德注记（标注&