博客

本文基于vite创建

cesium

-vue3版本的脚手架。软件版本如下：

Cesium：1.103.0

vue

：3.3.4

UI库view-ui-plus：1.3.14

1.新建vue3项目

// npm版本为7+
npm create vite@latest cesium3-vue3-iview -- --template vue  //安装vite工具
cd cesium3-vue3-iview
npm install
npm run dev

2.安装cesium和view-ui-plus

npm install cesium@1.103.0 vite-plugin-cesium --save
npm install view-ui-plus --save

3.配置vite.config.js文件，引入cesium

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()],
})

4.配置main.js文件，全局引入view-ui-plus

import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import './style.css'
import App from './App.vue'
import 'view-ui-plus/dist/styles/viewuiplus.css'

createApp(App).use(ViewUIPlus).mount('#app')

5.新建组件CesiumMap.vue，初始化viewer

//第五行处需要引入自己的Cesium.Ion.defaultAccessToken
<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'xxxxxx' //你的token
  const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: true,  //时间轴动画控件 
    baseLayerPicker: true,
    fullscreenButton: true,
    geocoder: true,  // 搜索功能
    homeButton: false, // home键值，返回初始地图
    infoBox: true,
    navigationHelpButton: false,    //是否显示右上角的帮助按钮 
    navigationInstructionsInitiallyVisible: true,  // 导航说明显示
    requestRenderMode: true,
    // maximumRenderTimeChange : 200,
    sceneModePicker: false,         //是否显示3D/2D选择器 
    sceneMode: Cesium.SceneMode.SCENE3D, //显示三维地图
    shouldAnimate: true, // 动画效果展示
    shadows: true, //光照后的阴影效果
    terrainProvider: Cesium.createWorldTerrain({
      requestVertexNormals: true,
      requestWaterMask: true, // 动态水流
    }),
    // terrainProvider: Cesium.createWorldTerrain(),
    timeline: true,                 //时间轴控件 
    vrButton: false,
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
    }),

  });
  var scene = viewer.scene;
  // scene.setTerrainExaggeration(2.0); // 地形夸张
  var tileset = Cesium.createOsmBuildings({
    style: new Cesium.Cesium3DTileStyle({
      color: {
        conditions: [
          ["${feature['building']} === 'hospital'", "color('purple', 0.9)"],
          ["${feature['building']} === 'school'", "color('red', 0.9)"],
          ["${feature['building']} === 'apartments'", "color('CHARTREUSE', 0.9)"],
          ["${feature['building']} === 'residential'", "color('cyan', 0.9)"],
          ["${feature['building']} === 'office'", "color('MEDIUMSLATEBLUE', 0.9)"],
          ["${feature['building']} === 'commercial'", "color('yellow', 0.9)"],
          [true, "color('#orange')"]
          // ['${Height} >= 100', 'color("purple", 0.5)'],
          // ['${Height} >= 50', 'color("red")'],
          // ['true', 'color("blue")']
        ]
      },
    })
  }); // 建筑osm
  scene.primitives.add(tileset);
  // scene.globe.enableLighting = true;
  scene.fxaa = false;
  scene.globe.maximumScreenSpaceError = 4 / 3;
  scene.globe.depthTestAgainstTerrain = true;
  // scene.fog.enabled = false
  scene.screenSpaceCameraController.maximumZoomDistance = 40000000;  //最大缩放级别
  scene.screenSpaceCameraController.minimumZoomDistance = 1;  //最小缩放级别
  viewer.cesiumWidget.creditContainer.style.display = "none"; //去cesium logo水印
  // this.$store.commit("setViewer", this.viewer)
});

</script>

<template>
  <div id="cesiumContainer"></div>
  <div id="s1">
    <Space wrap>
      <Button>功能1</Button>
      <Button type="primary">功能2</Button>
      <Button type="dashed">功能3</Button>
      <Button type="info">功能4</Button>
      <Button type="success">功能5</Button>
      <Button type="warning">功能6</Button>
      <Button type="error">功能7</Button>
    </Space>
  </div>
</template>

<style scoped>
#cesiumContainer {
  width: calc(100vw);
  height: calc(100vh);
  margin: 0;
  overflow: hidden;
  position: absolute;
}
#s1 {
  position: absolute;
  margin-top: 20px;
  margin-left: 20px;
}
</style>

6.App.vue引入viewer组件

<script setup>
import CesiumMap from './components/CesiumMap.vue';
</script>

<template>
  <CesiumMap />
</template>

<style scoped>

</style>

7.效果展示