Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
7cb0b2a7 by jikai
Options

111111

1 parent 562b792a
Inline Side-by-side
Showing 1 changed file with 257 additions and 97 deletions
...@@ -29,16 +29,17 @@ ...@@ -29,16 +29,17 @@
29 <div class="bottomNav"> 29 <div class="bottomNav">
30 <bottomNav></bottomNav> 30 <bottomNav></bottomNav>
31 </div> 31 </div>
32 <div id="cesiumContainer" style="width:100%;height:100%;"></div> 32 <div id="cesiumContainer">
33 <!-- <el-button @click="testfun" class="testbtn"></el-button> --> 33 <div class="" ref="slider"></div>
34 <!-- <el-select @change="selectChanged" class="testbtn"> 34 </div>
35 <el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>
36 </el-select> -->
37 </div> 35 </div>
38 </template> 36 </template>
39 <script> 37 <script>
40 38
41 import tool from "../assets/js/map/tool"; 39 import measureTools from "../assets/js/map/MeasureTools";
40 import drawTool from "../assets/js/map/drawTool";
41 import roller from "../assets/js/map/roller";
42 import addCompany from '../assets/js/map/addCompany';
42 43
43 import TopTitle from '../components/topTitle'; 44 import TopTitle from '../components/topTitle';
44 import rightTopFunc from '../components/rightTopFunc'; 45 import rightTopFunc from '../components/rightTopFunc';
...@@ -56,21 +57,32 @@ ...@@ -56,21 +57,32 @@
56 return { 57 return {
57 viewer: undefined, 58 viewer: undefined,
58 entity: undefined, 59 entity: undefined,
59 devTypes: ['point', 'polyline', 'polygon'] 60 devTypes: ['point', 'polyline', 'polygon'],
61 roll: {r: undefined, b: false}
60 } 62 }
61 }, 63 },
62 mounted() { 64 mounted() {
63 // ***********************************初始化地图******************************************** 65 // ***********************************初始化地图********************************************
64 Cesium.Ion.defaultAccessToken = this.config.mapToken; 66 Cesium.Ion.defaultAccessToken = this.config.mapToken;
65 this.viewer = new Cesium.Viewer('cesiumContainer', { 67 this.viewer = new Cesium.Viewer('cesiumContainer', {
66 geocoder:true, 68 geocoder: false,
67 timeline:false, 69 homeButton: false,
70 sceneModePicker: false,
71 fullscreenButton: false,
72 vrButton: false,
73 baseLayerPicker: true,
74 infoBox: false,
75 selectionIndicator: false,
76 animation: false,
77 timeline: false,
78 shouldAnimate: true,
79 navigationHelpButton: false,
80 navigationInstructionsInitiallyVisible: false,
68 imageryProvider: new Cesium.UrlTemplateImageryProvider({ 81 imageryProvider: new Cesium.UrlTemplateImageryProvider({
69 url: 'https://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali' 82 url: 'https://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'
70 }) 83 })
71 }); 84 });
72 85
73
74 // ***********************************倾斜摄影加载******************************************** 86 // ***********************************倾斜摄影加载********************************************
75 let tileset = new Cesium.Cesium3DTileset({ 87 let tileset = new Cesium.Cesium3DTileset({
76 url : 'http://localhost:9000/model/e44fe150d09b11eaabec1d24e8548b3a/tileset.json', 88 url : 'http://localhost:9000/model/e44fe150d09b11eaabec1d24e8548b3a/tileset.json',
...@@ -82,81 +94,24 @@ ...@@ -82,81 +94,24 @@
82 loadSiblings : false, 94 loadSiblings : false,
83 cullWithChildrenBounds : true 95 cullWithChildrenBounds : true
84 }), height = -2440; 96 }), height = -2440;
85 this.viewer.scene.primitives.add(tileset);
86 97
98 this.viewer.scene.primitives.add(tileset);
87 tileset.readyPromise.then(argument => { 99 tileset.readyPromise.then(argument => {
88 var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center); 100 var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
89 var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height); 101 var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
90 var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + height); 102 var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + height);
91 var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); 103 var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
92 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); 104 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
93 this.viewer.zoomTo(tileset); 105 setTimeout(() => { this.viewer.flyTo(tileset) }, 2000);
94 });
95
96
97 // ***********************************水位********************************************
98 setTimeout(() => {
99 var positions = [
100 101.67468055555556, 36.54803611111111, 101.66768055555556, 36.55503611111111,
101 101.65068055555556, 36.56403611111111, 101.67468055555556, 36.54803611111111
102 ], waterHeight = 0,
103 entity = this.viewer.entities.add({
104 polygon: {
105 // hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),
106 hierarchy: [
107 new Cesium.Cartesian3(-1036931.6607544887,5024383.265188632,3776882.2179509313),
108 new Cesium.Cartesian3(-1037689.1138430117,5023931.060901769,3777273.070930741),
109 new Cesium.Cartesian3(-1038031.7922958151,5024211.372681549,3776809.176021656),
110 new Cesium.Cartesian3(-1037502.0690553376,5024558.056853799,3776495.627250331)
111 ],
112 material: Cesium.Color.RED.withAlpha(0.5),
113 extrudedHeight: new Cesium.CallbackProperty(function () {
114 return waterHeight;
115 })
116 }
117 }); 106 });
118 // this.viewer.zoomTo(entity);
119 this.viewer.clock.onTick.addEventListener(function () {
120 if (waterHeight > 250){
121 waterHeight = 0;
122 }
123 waterHeight += 0.1;
124 })
125
126 }, 30000);
127
128 107
129 // ********************************Draw******************************************** 108 // ********************************Draw********************************************
130 this.draw = new tool.attributes.drawPolt({ 109 this.draw = new drawTool.drawTool({
131 viewer: this.viewer 110 viewer: this.viewer,
111 hasEdit: true,
132 }) 112 })
133 }, 113 },
134 methods: { 114 methods: {
135 selectChanged(e) {
136 this.draw.type[e] || (this.draw.type[e] = new tool.attributes[e]({viewer: this.viewer}));
137 this.draw.type[e].startCreate();
138 console.log(this.draw.type[e]);
139 },
140 drawShape() {
141
142 },
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158 // ly
159 // rightTopFunc
160 searchRoat(val) { 115 searchRoat(val) {
161 /** 116 /**
162 * @param {*} val '为地名地址道路的输入值' 117 * @param {*} val '为地名地址道路的输入值'
...@@ -192,53 +147,177 @@ ...@@ -192,53 +147,177 @@
192 // 复位 147 // 复位
193 ,isReturn(val) {} 148 ,isReturn(val) {}
194 // 放大 149 // 放大
195 ,enlarge(val) {} 150 ,enlarge() {
151 this.viewer.camera.zoomIn(300);
152 }
196 // 缩小 153 // 缩小
197 ,narrow(val) {} 154 ,narrow() {
155 this.viewer.camera.zoomOut(300);
156 }
198 // 坐标 157 // 坐标
199 ,coordinate(val) {} 158 ,coordinate() {
200 // 距离
201 ,distance(val) {}
202 159
160 }
161 // 距离
162 ,distance(val) {
163 new measureTools.measureTools(this.viewer).measurePolyLine();
164 }
203 // 面积 165 // 面积
204 ,area(val) {} 166 ,area(val) {
167 new measureTools.measureTools(this.viewer).measurePolygon();
168 }
205 // 标记 169 // 标记
206 ,marker(val) {} 170 ,marker(val) {
171 // this.draw.type.point || (this.draw.type.point = new tool.attributes.point({viewer: this.viewer}));
172 // this.draw.create('point');
173 this.draw.startDraw({
174 type: "polyline",
175 style: {
176 material: Cesium.Color.YELLOW,
177 clampToGround: true
178 }
179 });
180 }
207 // 卷帘 181 // 卷帘
208 ,rollerShutter(val) {} 182 ,rollerShutter() {
183 this.roll.r || (this.roll.r = new roller({
184 imageryLayers: this.viewer.imageryLayers,
185 url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb'
186 })).screen({
187 slider: this.$refs.slider,
188 viewer: this.viewer
189 })
190 this.$refs.slider.className = (this.roll.b = !this.roll.b) ? 'slider' : '';
191 this.viewer.scene.imagerySplitPosition = this.roll.b && this.$refs.slider.offsetLeft / this.$refs.slider.parentElement.offsetWidth
192 }
209 // 分屏 193 // 分屏
210 ,splitScreen(val) {} 194 ,splitScreen() {}
211 // 指北 195 // 指北
212 ,toNorth(val) {} 196 ,toNorth() {}
213
214 // 顶视 197 // 顶视
215 ,topSee(val) {} 198 ,topSee() {}
216 // 环视 199 // 环视
217 ,roundSee(val) {} 200 ,roundSee() {
201 var parentEntity = this.viewer.entities.add(new Cesium.Entity()), positions = [], cartesian, polyline;
202 this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
203 this.handler.setInputAction(evt => {
204
205 cartesian = this.viewer.scene.pickPosition(evt.position);
206 // cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
207 positions.push(cartesian.clone());
208 // addCompany.createPoint.call(this, {position: cartesian})
209
210 if(positions.length === 1) {
211 this.handler.setInputAction(moveEvent => {
212 positions[1] = this.viewer.scene.pickPosition(moveEvent.endPosition);
213 // positions[1] = this.draw.getCatesian3FromPX(moveEvent.endPosition, this.viewer, []);
214 !polyline && (polyline = addCompany.createPolyline.call(this, positions));
215 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
216 return;
217 }
218
219
220 this.handler.destroy();
221 // console.log(Cesium.Cartesian3.distance(positions[0], positions[1]));
222 // var cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
223 var viewPointEntity = this.viewer.entities.add({
224 parent: parentEntity,
225 position: positions[0],
226 ellipsoid: {
227 radii: new Cesium.Cartesian3(5, 5, 5),
228 material: Cesium.Color.GREEN
229 }
230 });
231 // // 世界坐标转换为投影坐标
232 var webMercatorProjection = new Cesium.WebMercatorProjection(this.viewer.scene.globe.ellipsoid);
233 var viewPointWebMercator = webMercatorProjection.project(Cesium.Cartographic.fromCartesian(positions[0]));
234 // // 排除碰撞监测的对象
235 var objectsToExclude = [viewPointEntity];
236
237 // 目标点集合
238 var destPoints = [];
239 // 视域点和目标点的距离
240 var radius = Cesium.Cartesian3.distance(positions[0], positions[1]); // 视距1000米
241 // 计算一圈
242 for (var i = 0; i <= 30; i++) {
243 // 度数转弧度
244 var radians = Cesium.Math.toRadians(i);
245 // 计算目标点
246 var toPoint = new Cesium.Cartesian3(viewPointWebMercator.x + radius * Math.cos(radians), viewPointWebMercator.y + radius * Math.sin(radians), 10);
247 // 投影坐标转世界坐标
248 toPoint = webMercatorProjection.unproject(toPoint);
249 destPoints.push(Cesium.Cartographic.toCartesian(toPoint.clone()));
250 }
251 let viewer = this.viewer;
252 // 绘制线
253 function drawLine(leftPoint, secPoint, color) {
254 viewer.entities.add({
255 polyline: {
256 positions: [leftPoint, secPoint],
257 arcType: Cesium.ArcType.NONE,
258 width: 5,
259 material: color,
260 depthFailMaterial: color
261 }
262 })
263 }
264 pickFromRay.call(this);
265 function pickFromRay() {
266 for (var i = 0; i < destPoints.length; i++) {
267 // 计算射线的方向，目标点left 视域点right
268 var direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(destPoints[i], positions[0], new Cesium.Cartesian3()), new Cesium.Cartesian3());
269 console.log(direction);
270 // 建立射线
271 var ray = new Cesium.Ray(positions[0], direction);
272 var result = viewer.scene.pickFromRay(ray, objectsToExclude); // 计算交互点，返回第一个
273 showIntersection(result, destPoints[i], positions[0]);
274 }
275 }
276 // 处理交互点
277 function showIntersection(result, destPoint, cartesian) {
278 // 如果是场景模型的交互点，排除交互点是地球表面
279 if (Cesium.defined(result) && Cesium.defined(result.object)) {
280 drawLine(result.position, cartesian, Cesium.Color.GREEN); // 可视区域
281 drawLine(result.position, destPoint, Cesium.Color.RED); // 不可视区域
282 } else {
283 drawLine(cartesian, destPoint, Cesium.Color.GREEN);
284 }
285 }
286 this.handler.destroy();
287 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
288 }
218 // 视域 289 // 视域
219 ,horizon(val) {} 290 ,horizon() {
291
292 }
220 // 通视 293 // 通视
221 ,allSee(val) {} 294 ,allSee() {}
222 295
223 } 296 }
224 } 297 }
225 </script> 298 </script>
226 299
227 <style scoped> 300 <style>
301 html, body, #cesiumContainer {
302 height: 100%;
303 padding: 0;
304 margin: 0;
305 }
228 306
229 .testbtn { 307 .slider {
230 position: absolute; 308 position: absolute;
231 top: 100px; 309 left: 50%;
232 left: 100px; 310 top: 0px;
233 width: 100px; 311 background-color: #d3d3d3;
234 height: 30px; 312 width: 5px;
313 height: 100%;
314 z-index: 9999;
235 } 315 }
236 316
237 </style> 317 .slider:hover {
238 318 cursor: ew-resize;
239 319 }
240 320
241 <style scoped>
242 .home { 321 .home {
243 position: relative; 322 position: relative;
244 width: 100%; 323 width: 100%;
...@@ -269,4 +348,85 @@ ...@@ -269,4 +348,85 @@
269 z-index: 1000; 348 z-index: 1000;
270 bottom: 40px; 349 bottom: 40px;
271 } 350 }
351
352
353 /*leaflet风格气泡窗口样式模板*/
354 .cesium-popup {
355 position: absolute;
356 text-align: center;
357 }
358
359 .cesium-popup-close-button {
360 position: absolute;
361 top: 0;
362 right: 0;
363 padding: 4px 4px 0 0;
364 text-align: center;
365 width: 18px;
366 height: 14px;
367 font: 16px/14px Tahoma, Verdana, sans-serif;
368 color: #c3c3c3;
369 text-decoration: none;
370 font-weight: bold;
371 background: transparent;
372 }
373
374 .cesium-popup-content-wrapper {
375 text-align: center;
376 max-height: 200px;
377 overflow-y: auto;
378 background: rgba(63, 72, 84, 0.7);
379 box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
380 padding: 1px;
381 text-align: left;
382 border-radius: 4px;
383 padding: 8px;
384 }
385
386 .cesium-prompt-content-wrapper {
387 text-align: center;
388 max-height: 200px;
389 overflow-y: auto;
390 box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
391 padding: 1px;
392 text-align: left;
393 }
394
395 .cesium-popup-content {
396 line-height: 1.4;
397 }
398
399 .cesium-popup-tip-container {
400 margin: 0 auto;
401 width: 40px;
402 height: 20px;
403 position: relative;
404 overflow: hidden;
405 }
406
407 .cesium-popup-tip {
408 background: rgba(63, 72, 84, 0.7);
409 box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
410 width: 17px;
411 height: 17px;
412 padding: 1px;
413 margin: -10px auto 0;
414 -webkit-transform: rotate(45deg);
415 -moz-transform: rotate(45deg);
416 -ms-transform: rotate(45deg);
417 -o-transform: rotate(45deg);
418 transform: rotate(45deg);
419 }
420
421 .popupContent{
422 color: white;
423 }
424 .promptDiv{
425 background: rgba(0, 0, 0, 0.4);
426 font-size: 10px;
427 }
428
429 .promptContent{
430 color:white;
431 }
272 </style> 432 </style>
...\ No newline at end of file ...\ No newline at end of file
......