Home.vue
4.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<template>
<div class="home">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
<!-- <el-button @click="testfun" class="testbtn"></el-button> -->
<el-select @change="selectChanged" class="testbtn">
<el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>
</el-select>
</div>
</template>
<script>
import tool from "../assets/js/map/tool";
export default {
components: {},
data() {
return {
viewer: undefined,
entity: undefined,
devTypes: ['point', 'polyline', 'polygon']
}
},
mounted() {
// ***********************************初始化地图********************************************
Cesium.Ion.defaultAccessToken = this.config.mapToken;
this.viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:true,
timeline:false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: 'https://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'
})
});
// ***********************************倾斜摄影加载********************************************
let tileset = new Cesium.Cesium3DTileset({
url : 'http://localhost:9000/model/e44fe150d09b11eaabec1d24e8548b3a/tileset.json',
skipLevelOfDetail : true,
baseScreenSpaceError : 1024,
skipScreenSpaceErrorFactor : 16,
skipLevels : 1,
immediatelyLoadDesiredLevelOfDetail : false,
loadSiblings : false,
cullWithChildrenBounds : true
}), height = -2440;
this.viewer.scene.primitives.add(tileset);
tileset.readyPromise.then(argument => {
var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
this.viewer.zoomTo(tileset);
});
// ***********************************水位********************************************
setTimeout(() => {
var positions = [
101.67468055555556, 36.54803611111111, 101.66768055555556, 36.55503611111111,
101.65068055555556, 36.56403611111111, 101.67468055555556, 36.54803611111111
], waterHeight = 0,
entity = this.viewer.entities.add({
polygon: {
// hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),
hierarchy: [
new Cesium.Cartesian3(-1036931.6607544887,5024383.265188632,3776882.2179509313),
new Cesium.Cartesian3(-1037689.1138430117,5023931.060901769,3777273.070930741),
new Cesium.Cartesian3(-1038031.7922958151,5024211.372681549,3776809.176021656),
new Cesium.Cartesian3(-1037502.0690553376,5024558.056853799,3776495.627250331)
],
material: Cesium.Color.RED.withAlpha(0.5),
extrudedHeight: new Cesium.CallbackProperty(function () {
return waterHeight;
})
}
});
// this.viewer.zoomTo(entity);
this.viewer.clock.onTick.addEventListener(function () {
if (waterHeight > 250){
waterHeight = 0;
}
waterHeight += 0.1;
})
}, 30000);
// ********************************Draw********************************************
this.draw = new tool.attributes.drawPolt({
viewer: this.viewer
})
},
methods: {
selectChanged(e) {
this.draw.type[e] || (this.draw.type[e] = new tool.attributes[e]({viewer: this.viewer}));
this.draw.type[e].startCreate();
console.log(this.draw.type[e]);
},
drawShape() {
}
}
}
</script>
<style scoped>
.testbtn {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 30px;
}
</style>