vue3 Cesium entry project demo

To start learning to use 3D, record the first demo

Official website address:

Cesium: The Platform for 3D Geospatial https://cesium.com/ Simple development template based on Vue3 + Cesium: vue3-cesium-start https://github.com/syzdev/vue3-cesium-start Register an account and createToken，获取token，supplementary Fullsrc/common/js/config.jsinformationToken.

Register Tiantu Token Tutorial | syzdev https://syzdev.cn/2021/08/11/%E6%B3%A8%E5%86%8C%E5%A4%A9%E5%9C%B0%E5%9B% BEToken%E6%95%99%E7%A8%8B/ Complete information:

node_modulesFind the folder in the folder under the project directory cesium;
Find the file under node_modules/cesiumthe folder package.json;
Add under fields in package.jsonthe file ."exports""./widgets.css": "./Source/Widgets/widgets.css"

Initialize Viewer


  new Cesium.Viewer("cesiumContainer", {
    animation: false, //动画控件
    baseLayerPicker: false, //影像图层选择器
    fullscreenButton: false, //全屏按钮
    geocoder: false, //查找位置
    homeButton: false, //返回视角到初始位置
    navigationHelpButton: false, //帮助按钮
    timeline: false, //时间轴
    vrButton: true, //VR按钮
    sceneModePicker: false, // 隐藏视角模式的选择
   infobox: false, //禁用infobox
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      //天地图影像
      url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你的token`,
      layer: "tdtBasicLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
    }),
  });

Add a layer of vector annotation

  viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你的token",
      layer: "tdtAnnoLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
      show: false,
    })
  );

set location

 viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.435314, 39.960521, 15000.0), // 设置位置，北京的坐标
    orientation: {
      heading: Cesium.Math.toRadians(20.0),
      pitch: Cesium.Math.toRadians(-90.0),
      roll: 0,
    },
  });

full code

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import { CesiumIonDefaultAccessToken } from "@/common/js/config";
// 没有CesiumIonDefaultAccessToken则使用官方示例中的Token
Cesium.Ion.defaultAccessToken =
  CesiumIonDefaultAccessToken ||
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YmRiNjM4MC1kMDZkLTQ2NDQtYjQ3My0xZDI4MDU0MGJhZDciLCJpZCI6MzIxMzAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTY1MjM4NzZ9.A3FBZ6HjKkTsOGnjwWWeO9L10HQ9c-wcF4c3dtTc4gQ";

let viewer = null;

const initCesium = () =>
  new Cesium.Viewer("cesiumContainer", {
    animation: false, //动画控件
    baseLayerPicker: false, //影像图层选择器
    fullscreenButton: false, //全屏按钮
    geocoder: false, //查找位置
    homeButton: false, //返回视角到初始位置
    navigationHelpButton: false, //帮助按钮
    timeline: false, //时间轴
    vrButton: true, //VR按钮
    sceneModePicker: false, // 隐藏视角模式的选择
   infobox: false, //禁用infobox
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      //天地图影像
      url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你的token`,
      layer: "tdtBasicLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
    }),
  });

const init = () => {
  viewer = initCesium();
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.435314, 39.960521, 15000.0), // 设置位置，北京的坐标
    orientation: {
      heading: Cesium.Math.toRadians(20.0),
      pitch: Cesium.Math.toRadians(-90.0),
      roll: 0,
    },
  });
  // /天地图加一层矢量注记
  viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你的token",
      layer: "tdtAnnoLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
      show: false,
    })
  );
  viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏版权信息
  viewer.scene.skyBox.show = true; // 显示 星空  默认显示
  viewer.scene.skyAtmosphere.show = true; // 大气层  默认显示
};
onMounted(() => {
  init();
});
</script>

<style scoped>
@import "cesium/widgets.css";
#cesiumContainer {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

Page rendering

vue3 Cesium entry project demo

Guess you like