<style scoped>
|
.mask {
|
position: absolute;
|
top: 0;
|
z-index: 999;
|
right: 0;
|
left: 0;
|
bottom: 0;
|
padding: 65px 20px 20px;
|
overflow: hidden;
|
box-sizing: border-box;
|
transition: all .5s;
|
pointer-events: none;
|
box-shadow: 40px 40px 200px 40px #272B31 inset;
|
}
|
</style>
|
|
|
<template>
|
<div :id="uuid" style="width: 100%;height:100%;background: #abcdef;font-size: 40px">
|
<div class="mask"></div>
|
</div>
|
</template>
|
|
<script>
|
|
|
export default {
|
name: "cpt-cesium-map",
|
props: {
|
width: Number,
|
height: Number,
|
option: Object
|
},
|
watch: {
|
'option.attribute': {
|
handler(newObj) {
|
this.reloadOption(newObj);
|
},
|
deep: true//深度监听
|
},
|
width() {
|
},
|
height() {
|
}
|
},
|
data() {
|
return {
|
uuid: '',
|
camera: null,
|
scene: null,
|
renderer: null,
|
model: null,
|
controls: null,
|
clock: null,
|
mixer: null,
|
animate: null
|
};
|
},
|
created() {
|
this.uuid = require('uuid').v1();
|
},
|
mounted() {
|
this.initScene();
|
},
|
methods: {
|
reloadOption(attribute) {//配置项加载
|
console.log(">> reloadOption:", attribute);
|
/* this.renderer.setClearColor(new THREE.Color( attribute.bgColor ), attribute.bgAlpha);
|
this.camera.position.set( attribute.cameraX, attribute.cameraY, attribute.cameraZ );
|
//环境光
|
const pmremGenerator = new THREE.PMREMGenerator( this.renderer );
|
this.scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.02 ).texture;
|
|
//控件对象
|
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
this.controls.target.set( 0, 0.5, 0 );
|
this.controls.enablePan = true;
|
this.controls.enableDamping = true;
|
this.controls.maxDistance = 10;
|
this.controls.minDistance = 1;*/
|
},
|
initScene() {//初始化
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2Y2M5YTBjZS1lNGM3LTQ4MzAtYjY5Yy1hYWEyN2Y5ZTI0NTQiLCJpZCI6MzgxNiwiaWF0IjoxNjc5NTAzNzgyfQ.9HS29dNWEX7xwTap2AADoZIw-G395O49yxxOLh23y7I'
|
console.log('Cesium.VERSION:', Cesium.VERSION)
|
let subVersion = parseFloat(Cesium.VERSION.substr(2))
|
//指北针 viewer.extend(Cesium.viewerCesiumNavigationMixin, {})
|
/* let imageryProvider1 = new Cesium.TileMapServiceImageryProvider({
|
// url: process.env.VUE_APP_BASE_GIS + "/daqing/dom-sea",
|
url: 'http://192.168.1.2:9999' + "/daqing/dom-sea",
|
});
|
*/
|
//
|
|
// 'http://10.67.24.54:8999/daqing/dom-sea', 192.168.1.2:9999
|
// http://112.98.106.22:8999/daqing/dom-sea/tilemapresource.xml
|
const domSea = Cesium.ImageryLayer.fromProviderAsync(
|
Cesium.TileMapServiceImageryProvider.fromUrl(
|
Cesium.buildModuleUrl(
|
'https://10.67.24.54:8999/daqing/dom-sea',
|
),
|
{
|
fileExtension: "png",
|
maximumLevel: 19,
|
rectangle: new Cesium.Rectangle(
|
Cesium.Math.toRadians(-180.0),
|
Cesium.Math.toRadians(-90.0),
|
Cesium.Math.toRadians(180.0),
|
Cesium.Math.toRadians(90.0)
|
),
|
}
|
)
|
);
|
|
//
|
|
|
let options = {
|
selectionIndicator: false,
|
infoBox: false,
|
fullscreenButton: false,
|
homeButton: false,
|
animation: false,
|
shouldAnimate: true,
|
timeline: false,
|
geocoder: false,
|
scene3DOnly: true,
|
sceneModePicker: false,
|
baseLayerPicker: false,
|
navigationHelpButton: false,
|
navigationInstructionsInitiallyVisible: false,
|
sceneMode: Cesium.SceneMode.MORPHING,
|
baseLayer: domSea
|
}
|
/* if (!this.terrainUrl) {//没指定地形,则给出默认
|
if (subVersion < 104) {
|
options.terrainProvider = Cesium.createWorldTerrain()
|
} else {
|
options.terrain = Cesium.Terrain.fromWorldTerrain()
|
}
|
}
|
*/
|
let viewer = new Cesium.Viewer(this.uuid, options)
|
window[this.uuid] = viewer;
|
|
|
let camera = [125.2, 46.5, 100000, 0, -90, 0];//// [125.2, 46.5, 100000, 0, -90, 0];// [86.9,27.5, 50000, 0, -45, 0];
|
let destination = Cesium.Cartesian3.fromDegrees(Number(camera[0]), Number(camera[1]), Number(camera[2]))
|
|
/* let tdtToken = '1172c7cbbbc56f3d2479e5af2854fb23'
|
// 服务域名
|
let tdtUrl = 'https://t{s}.tianditu.gov.cn/'
|
// 服务负载子域
|
let subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
|
let layerAddingProvider = new Cesium.UrlTemplateImageryProvider({
|
url: tdtUrl + 'DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + tdtToken,
|
subdomains: subdomains,
|
tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
maximumLevel: 22
|
})
|
viewer.imageryLayers.addImageryProvider(layerAddingProvider)// 添加注记图层
|
*/
|
viewer.camera.flyTo(
|
{
|
destination: destination,
|
orientation: {
|
// 指向
|
heading: Cesium.Math.toRadians(Number(camera[3])),
|
// 视角
|
pitch: Cesium.Math.toRadians(Number(camera[4])),
|
roll: Cesium.Math.toRadians(Number(camera[5]))
|
},
|
duration: 3,
|
pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
|
maximumHeight: 30000 // 相机最大飞行高度
|
// flyOverLongitude: 100, // 如果到达目的地有2种方式，设置具体值后会强制选择方向飞过这个经度(这个，很好用)
|
}
|
)
|
|
},
|
|
},
|
destroyViewer() {
|
let viewer = this.getViewer()
|
if (viewer) {
|
viewer.entities.removeAll()
|
viewer.scene.primitives.removeAll()
|
viewer.destroy()
|
viewer = null
|
}
|
},
|
getViewer() {
|
return window[this.uuid];
|
},
|
beforeDestroy() {
|
|
}
|
}
|
</script>
|
