3D の使用方法を学び始めるには、最初のデモを録画してください
公式サイトアドレス:
Cesium: The Platform for 3D Geospatial https://cesium.com/ Vue3 + Cesium に基づくシンプルな開発テンプレート: vue3-cesium-start https://github.com/syzdev/vue3-cesium-startアカウントを登録し、Token,获取token,
補足情報完全なsrc/common/js/config.js
情報Token
。
- プロジェクト ディレクトリの下の
node_modules
フォルダーでフォルダーを見つけますcesium
。 node_modules/cesium
フォルダーの下でファイルを見つけますpackage.json
。package.json
ファイル内の"exports"
フィールドの下に追加します"./widgets.css": "./Source/Widgets/widgets.css"
。
ビューアの初期化
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",
}),
});
ベクター注釈のレイヤーを追加する
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.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,
},
});
完全なコード
<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>
ページのレンダリング