|
|
@@ -1,102 +1,29 @@
|
|
|
<template>
|
|
|
- <div class="hello">
|
|
|
- <div id="cesiumContainer"></div>
|
|
|
+ <div class="ThreeJSCity">
|
|
|
+ <model-obj
|
|
|
+ class="ThreeDShow"
|
|
|
+ :src="`/Model/obj/Block/Block.obj`"
|
|
|
+ ></model-obj>
|
|
|
+ <!-- <img src="@/assets/models/test.png" /> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
-import * as Cesium from "cesium";
|
|
|
+import { ModelObj } from "vue-3d-model";
|
|
|
export default {
|
|
|
name: "Test",
|
|
|
- components: {},
|
|
|
- mounted() {
|
|
|
- // let viewer = new Cesium.Viewer("cesiumContainer");
|
|
|
- // viewer._cesiumWidget._creditContainer.style.display = "none";
|
|
|
-
|
|
|
- var viewer = new Cesium.Viewer("cesiumContainer", {
|
|
|
- //需要进行可视化的数据源的集合
|
|
|
- animation: false, //是否显示动画控件
|
|
|
- shouldAnimate: true,
|
|
|
- homeButton: false, //是否显示Home按钮
|
|
|
- fullscreenButton: false, //是否显示全屏按钮
|
|
|
- baseLayerPicker: false, //是否显示图层选择控件
|
|
|
- geocoder: false, //是否显示地名查找控件
|
|
|
- timeline: false, //是否显示时间线控件
|
|
|
- sceneModePicker: true, //是否显示投影方式控件
|
|
|
- navigationHelpButton: false, //是否显示帮助信息控件
|
|
|
- infoBox: false, //是否显示点击要素之后显示的信息
|
|
|
- requestRenderMode: true, //启用请求渲染模式
|
|
|
- scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
|
|
|
- sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
|
|
|
- fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
|
|
|
- //加载天地图影像地图，WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口
|
|
|
- // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
|
|
- // url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=ebf64362215c081f8317203220f133eb",
|
|
|
- // layer: "img",
|
|
|
- // style: "default",
|
|
|
- // tileMatrixSetID: "w",
|
|
|
- // format: "tiles",
|
|
|
- // maximumLevel: 18,
|
|
|
- // }),
|
|
|
- });
|
|
|
- // 如果需要叠加路网与注记矢量则添加以下代码
|
|
|
- // viewer.imageryLayers.addImageryProvider(
|
|
|
- // new Cesium.WebMapTileServiceImageryProvider({
|
|
|
- // url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=ebf64362215c081f8317203220f133eb",
|
|
|
- // layer: "cia",
|
|
|
- // style: "default",
|
|
|
- // tileMatrixSetID: "w",
|
|
|
- // format: "tiles",
|
|
|
- // maximumLevel: 18,
|
|
|
- // })
|
|
|
- // );
|
|
|
- //加载倾斜示范数据
|
|
|
- var palaceTileset = new Cesium.Cesium3DTileset({
|
|
|
- url: "/Model/3dtitles/tileset.json",
|
|
|
- //控制切片视角显示的数量，可调整性能
|
|
|
- maximumScreenSpaceError: 2,
|
|
|
- maximumNumberOfLoadedTiles: 100000,
|
|
|
- });
|
|
|
- //添加到场景
|
|
|
- // viewer.scene.primitives.add(palaceTileset);
|
|
|
- // 控制模型的位置
|
|
|
- palaceTileset.readyPromise.then(function (palaceTileset) {
|
|
|
- viewer.scene.primitives.add(palaceTileset);
|
|
|
- var heightOffset = 0.0; //可以改变3Dtiles的高度
|
|
|
- var boundingSphere = palaceTileset.boundingSphere;
|
|
|
- var cartographic = Cesium.Cartographic.fromCartesian(
|
|
|
- boundingSphere.center
|
|
|
- );
|
|
|
- var surface = Cesium.Cartesian3.fromRadians(
|
|
|
- cartographic.longitude,
|
|
|
- cartographic.latitude,
|
|
|
- 0.0
|
|
|
- );
|
|
|
- var offset = Cesium.Cartesian3.fromRadians(
|
|
|
- cartographic.longitude,
|
|
|
- cartographic.latitude,
|
|
|
- heightOffset
|
|
|
- );
|
|
|
- var translation = Cesium.Cartesian3.subtract(
|
|
|
- offset,
|
|
|
- surface,
|
|
|
- new Cesium.Cartesian3()
|
|
|
- );
|
|
|
- palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
|
|
|
- viewer.zoomTo(
|
|
|
- palaceTileset,
|
|
|
- new Cesium.HeadingPitchRange(
|
|
|
- 0.5,
|
|
|
- -0.2,
|
|
|
- palaceTileset.boundingSphere.radius * 1.0
|
|
|
- )
|
|
|
- );
|
|
|
- });
|
|
|
- //定位到三维模型
|
|
|
- viewer.zoomTo(palaceTileset);
|
|
|
- },
|
|
|
+ components: { ModelObj },
|
|
|
+ mounted() {},
|
|
|
methods: {},
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style scoped lang="less">
|
|
|
-</style>
|
|
|
+.ThreeJSCity {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .ThreeDShow {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liuxing