viewer_spatialquery.vue
4.38 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!--
* 1、地图分屏效果
* @Author: jiangbotao
* @Date: 2019-12-03 22:52:56
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 22:23:44
* @FilePath: \superglobevue\src\components\viewer.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div id="toolbar" class="param-container tool-bar">
<div>
<button id="search" >查询</button>
</div>
</div>
</div>
</template>
<script>
import URL_CONFIG from "./../config/urlConfig.vue";
const Cesium = window.Cesium;
export default {
data: function() {
return {
styleObject: {
width: "100%",
position: "absolute",
top: "0px",
bottom: "0px",
left: "0px",
backgroundColor: "#000000"
},
smviewer: {}
};
},
mounted: function() {
var __this = this;
__this.viewer = new Cesium.Viewer('cesiumContainer', { animation: true });
var scene = __this.viewer.scene;
var widget = __this.viewer.cesiumWidget;
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility = "hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
// 添加OSM地图
let osm = Cesium.createOpenStreetMapImageryProvider({
url: "https://tile-a.openstreetmap.fr/hot",
fileExtension:"png"
});
__this.viewer.imageryLayers.addImageryProvider(osm);
try {
var groundPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
name: 'ground'
});
var buildPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
name: 'build'
});
Cesium.when([groundPromise, buildPromise], function(layers) {
scene.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(116.4566, 39.9149, 5323.445971240632),
orientation : {
heading : 3.1612,
pitch : -1.5188,
roll : 6.283185307179563
}
});
var positions = null;
// 绘制面
var handlerPolygon = new Cesium.DrawHandler(__this.viewer, Cesium.DrawMode.Polygon, 0);
handlerPolygon.drawEvt.addEventListener(function(polygon){
console.log(polygon.object.positions);
return polygon.object.positions;
});
$("#search").on("click", function(){
handlerPolygon.activeEvt.addEventListener(function(isActive){
if(isActive === true){
__this.viewer.enableCursorStyle = false;
__this.viewer._element.style.cursor = '';
$('body').removeClass('drawCur').addClass('drawCur');
}else{
__this.viewer.enableCursorStyle = true;
$('body').removeClass('drawCur');
}
});
handlerPolygon && handlerPolygon.deactivate();
handlerPolygon && handlerPolygon.activate();
});
}, function() {
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
widget.showErrorPanel(title, undefined, e);
});
} catch (e) {
if (widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
}
$("#loadingbar").remove();
}
};
</script>
<style>
.sm-compass {
pointer-events: auto;
position: absolute;
right: 10px;
top: 10px;
width: 128px;
height: 128px;
overflow: hidden;
}
.sm-zoom {
top: 130px;
}
.drawCur{
cursor: url(/images/cur/draw.cur), auto;
}
</style>