在cesium中显示一个3d地图,根据地图缩放来显示,并可以切换
<template>
<div>
<CesiumSelect @select="handleSelect" :modelValue="value" />
<div id="cesiumContainer"></div>
<el-button type="primary" @click="onShow()">切换</el-button>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
import { useRouter } from "vue-router";
import CesiumSelect from "../../components/cesium-select.vue";
const router = useRouter();
const value = ref('cesium-3DLayers');
const handleSelect = (value) => {
router.push({ name: value });
};
var isShow = true
var viewer = null
var tileset = null
onMounted(() => {
viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
// A normal b3dm tileset containing photogrammetry
tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(40866),
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
const classificationTilesetUrl =
"../SampleData/Cesium3DTiles/Classification/Photogrammetry/tileset.json";
// ''
// A b3dm tileset used to classify the photogrammetry tileset
const classificationTileset = new Cesium.Cesium3DTileset({
url: classificationTilesetUrl,
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
});
classificationTileset.style = new Cesium.Cesium3DTileStyle({
color: "rgba(255, 0, 0, 0.5)",
});
viewer.scene.primitives.add(classificationTileset);
// The same b3dm tileset used for classification, but rendered normally for comparison.
const nonClassificationTileset = new Cesium.Cesium3DTileset({
url: classificationTilesetUrl,
show: false,
});
nonClassificationTileset.style = new Cesium.Cesium3DTileStyle({
color: "rgba(255, 0, 0, 0.5)",
});
viewer.scene.primitives.add(nonClassificationTileset);
// Sandcastle.addToggleButton("Show classification", true, function (
// checked
// ) {
// classificationTileset.show = checked;
// nonClassificationTileset.show = !checked;
// });
});
const onShow = (value) => {
if (isShow) {
viewer.scene.primitives.remove(tileset);
isShow = false
} else {
tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(40866),
});
viewer.scene.primitives.add(tileset);
isShow = true
}
// console.log(viewer.scene.primitives, '===');
};
</script>
<style scoped>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>