139 lines
4.3 KiB
Vue
139 lines
4.3 KiB
Vue
<template>
|
|
<div class="plant-gs-warp">
|
|
<div ref="viewwarp" class="plant-gs-content" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg1.png') + ')' }">
|
|
<vc-config-provider :cesium-path="vcConfig.cesiumPath" :access-token="vcConfig.accessToken">
|
|
<vc-viewer ref="viewerRef" @ready="onViewerReady">
|
|
<vc-layer-imagery :minimum-level="12" :maximum-level="18" :contrast="1.8" :saturation="1" :alpha="1">
|
|
<vc-imagery-provider-amap :key="'c843a50db7157faf295c6fa37c48719f'"></vc-imagery-provider-amap>
|
|
</vc-layer-imagery>
|
|
|
|
<!-- 蒙版层 -->
|
|
<vc-entity>
|
|
<vc-graphics-polygon
|
|
ref="polygon4"
|
|
:hierarchy="hierarchy4"
|
|
:material="[110, 161, 153, 150]"
|
|
:height="0"
|
|
:outline="false"
|
|
></vc-graphics-polygon>
|
|
</vc-entity>
|
|
</vc-viewer>
|
|
</vc-config-provider>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { ref, reactive, onMounted, computed, nextTick, getCurrentInstance } from 'vue';
|
|
import {
|
|
VcViewer,
|
|
VcConfigProvider,
|
|
VcImageryProviderAmap,
|
|
VcLayerImagery,
|
|
VcGraphicsPlane,
|
|
VcEntity,
|
|
VcGraphicsPolygon,
|
|
VcGraphicsRectangle,
|
|
} from 'vue-cesium';
|
|
import 'vue-cesium/dist/index.css';
|
|
|
|
const vcConfig = reactive({
|
|
cesiumPath: 'https://cdn.bootcdn.net/ajax/libs/cesium/1.80.0/Cesium.js',
|
|
accessToken:
|
|
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNjJjZTUxYi1lOTQ3LTQ3YjctOGI3ZS02ZGUzY2E4YWFkNDkiLCJpZCI6Mjg4MjAxLCJpYXQiOjE3NDMwNTY0MzN9.rjHQiqf7Y8bccaqsapqveULVAUH6M1QkeFp-AKG-frA',
|
|
});
|
|
const viewerRef = ref(null);
|
|
const viewwarp = ref(null);
|
|
let polygon4 = ref(null);
|
|
|
|
onMounted(() => {
|
|
console.info('onMounted', viewerRef);
|
|
Promise.all([polygon4.value.creatingPromise]).then((instances) => {
|
|
console.info('instances');
|
|
// instances[0].viewer.zoomTo(instances[0].viewer.entities);
|
|
});
|
|
});
|
|
|
|
const hierarchy4 = reactive({
|
|
positions: [
|
|
[99.406653, 23.534142], // 左下角
|
|
[99.706653, 23.534142], // 右下角
|
|
[99.706653, 23.834142], // 右上角
|
|
[99.406653, 23.834142], // 左上角
|
|
],
|
|
holes: [
|
|
{
|
|
positions: [
|
|
[99.506653, 23.634142], // 耿马镇边界点 1
|
|
[99.606653, 23.634142], // 耿马镇边界点 2
|
|
[99.606653, 23.734142], // 耿马镇边界点 3
|
|
[99.506653, 23.734142], // 耿马镇边界点 4
|
|
],
|
|
},
|
|
],
|
|
});
|
|
|
|
const onViewerReady = (readyObj) => {
|
|
console.info('readyObj', readyObj.Cesium); // Cesium namespace object
|
|
console.log(readyObj.viewer); // instanceof Cesium.Viewer
|
|
|
|
const { Cesium, viewer } = readyObj;
|
|
|
|
// 将耿马县和耿马镇的所有边界点合并
|
|
const allPositions = [...hierarchy4.positions, ...hierarchy4.holes[0].positions].map((coord) => Cesium.Cartesian3.fromDegrees(coord[0], coord[1]));
|
|
|
|
// 计算所有边界点的包围球
|
|
const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);
|
|
|
|
// 设置相机视角
|
|
viewer.camera.setView({
|
|
destination: boundingSphere.center, // 目标中心点
|
|
orientation: {
|
|
// heading: Cesium.Math.toRadians(-10), // 方向角
|
|
// pitch: Cesium.Math.toRadians(-90), // 俯仰角
|
|
// roll: 0, // 滚动角
|
|
heading: Cesium.Math.toRadians(6), //
|
|
pitch: Cesium.Math.toRadians(-25), //
|
|
roll: Cesium.Math.toRadians(6), //
|
|
},
|
|
});
|
|
|
|
// 动态调整相机高度，确保整个区域可见
|
|
const radius = boundingSphere.radius; // 包围球半径
|
|
const cameraHeight = radius * 1; // 根据经验公式调整高度
|
|
viewer.camera.moveBackward(cameraHeight); // 向后移动相机
|
|
|
|
// viewer.camera.changed.addEventListener(() => {
|
|
// console.log('Camera changed:', viewer.camera);
|
|
// });
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.plant-gs-warp {
|
|
height: 100%;
|
|
padding: 10px 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
.plant-gs-content {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
::v-deep() {
|
|
.vc-viewer {
|
|
height: calc(100% - 30px) !important;
|
|
width: calc(100% - 20px) !important;
|
|
margin: 20px 10px 10px 10px !important;
|
|
}
|
|
canvas {
|
|
border-radius: 10px !important;
|
|
}
|
|
.cesium-viewer-bottom {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|