Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
40e47cbe by jikai
Options

111111

1 parent de8344c0
Expand all
Inline Side-by-side
Showing 6 changed files with 97 additions and 64 deletions
...@@ -6,9 +6,19 @@ ...@@ -6,9 +6,19 @@
6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 7 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 <title><%= htmlWebpackPlugin.options.title %></title> 8 <title><%= htmlWebpackPlugin.options.title %></title>
9 <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script> 9 <!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
10 <link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" 10 <link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
11 rel="stylesheet"> 11 <link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet">
12 <!-- <link href="./css/bootstrap.min.css" rel="stylesheet"> -->
13 <link href="./css/pretty.css" rel="stylesheet">
14 <script type="text/javascript" src="./Build/Cesium/Cesium.js" data-main="js/main"></script>
15 <script type="text/javascript" src="./Build//Cesium/Widgets/CesiumNavigation/viewerCesiumNavigationMixin.js"></script>
16 <script type="text/javascript" src="./Build/Cesium/Workers/zlib.min.js" data-main="js/main"></script>
17 <script type="text/javascript" src="./js/jquery.min.js" data-main="js/main"></script>
18 <!-- <script src="./js/bootstrap.min.js"></script> -->
19 <script src="./js/spectrum.js"></script>
20 <script type="text/javascript" src="./js/supermap/SuperMap.Include.js"></script>
21 <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
12 </head> 22 </head>
13 <body> 23 <body>
14 <noscript> 24 <noscript>
......
1 export default 1 export default
2 class Roller { 2 class Roller {
3 constructor(obj) { 3 constructor(viewer) {
4 this.imageryLayers = obj.imageryLayers; 4 let body = $('body');
5 this.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ 5 this.initRollerShutter(viewer, {
6 url: obj.url, 6 splitDirection: new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE), // 初始时屏蔽左侧
7 layer: "tdtBasicLayer", 7 verticalSplitPosition: body.width() / 2,
8 style: "default", 8 horizontalSplitPosition: body.height() / 2,
9 format: "image/jpeg", 9 imageryLayers: [viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
10 tileMatrixSetID: "GoogleMapsCompatible", 10 key : 'AqYgyS1gIIDGsxmOlncqrgA83cHnhClLwZmIJXbYXX36pfxKYtUGk12Q3splaf4Y',
11 show: false 11 url : '//dev.virtualearth.net'
12 })).splitDirection = Cesium.ImagerySplitDirection.LEFT; 12 }))], // 参与卷帘的影像图层数组
13 latestSplitDirection: null // 用于在禁用卷帘后恢复之前的卷帘方向
14 });
13 } 15 }
14 screen(opt) { 16 initRollerShutter(a, b) {
15 var slider = opt.slider, handler = new Cesium.ScreenSpaceEventHandler(slider), moveActive = false; 17 this.setRollerShutterSplit(a, b);
16 function move(movement) { 18 this.bindSliderEvt(a, b);
17 if (!moveActive) return; 19 }
18 var relativeOffset = movement.endPosition.x; 20 setRollerShutterSplit(viewer, rollerShutterConfig) {
19 var splitPosition = 21 let splitPosition = null, imageryLayer, body = $("body");
20 (slider.offsetLeft + relativeOffset) / 22 if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
21 slider.parentElement.offsetWidth; 23 splitPosition = rollerShutterConfig.verticalSplitPosition;
22 slider.style.left = 100.0 * splitPosition + "%"; 24 } else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
23 opt.viewer.scene.imagerySplitPosition = splitPosition; 25 splitPosition = rollerShutterConfig.horizontalSplitPosition;
26 }
27 for (imageryLayer of rollerShutterConfig.imageryLayers) {
28 imageryLayer.splitDirection = rollerShutterConfig.splitDirection;
29 }
30 if (splitPosition) { // 如果禁用卷帘就没有必要设置分割位置
31 if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
32 viewer.scene.imagerySplitPosition.x = splitPosition / body.width();
33 } else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP)) ||
34 rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
35 viewer.scene.imagerySplitPosition.y = splitPosition / body.height();
36 }
37 }
38 }
39 bindSliderEvt(viewer, rollerShutterConfig) {
40 let verticalSlider = document.getElementById('vertical-slider'); // 垂直分割条
41 let horizontalSlider = document.getElementById('horizontal-slider'); // 水平分割条
42 verticalSlider.addEventListener('mousedown', mouseDown, false);
43 horizontalSlider.addEventListener('mousedown', mouseDown, false);
44 let windowHeight = $('body').height();
45 let sliderMove = e => { // 鼠标拖拽时执行
46 // 解决拖拽鼠标粘滞的问题
47 if (e.preventDefault) {
48 e.preventDefault();
49 } else {
50 e.returnValue = false;
51 }
52 if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
53 verticalSlider.style.left = e.clientX + 'px';
54 rollerShutterConfig.verticalSplitPosition = e.clientX;
55 } else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
56 let clientY = e.clientY;
57 if (clientY < 0) {
58 clientY = 0;
59 } else if (clientY > windowHeight) {
60 clientY = windowHeight - $('#horizontal-slider').height();
61 }
62 horizontalSlider.style.top = clientY + 'px';
63 rollerShutterConfig.horizontalSplitPosition = windowHeight - clientY;
64 }
65 this.setRollerShutterSplit(viewer, rollerShutterConfig);
66 }
67 document.addEventListener('mouseup', mouseUp, false);
68 function mouseUp(e) {
69 document.removeEventListener('mousemove', sliderMove, false);
70 }
71 function mouseDown(e) {
72 document.addEventListener('mousemove', sliderMove, false);
24 } 73 }
25
26 handler.setInputAction(function () {
27 moveActive = true;
28 }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
29 handler.setInputAction(function () {
30 moveActive = true;
31 }, Cesium.ScreenSpaceEventType.PINCH_START);
32
33 handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
34 handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
35
36 handler.setInputAction(function () {
37 moveActive = false;
38 }, Cesium.ScreenSpaceEventType.LEFT_UP);
39 handler.setInputAction(function () {
40 moveActive = false;
41 }, Cesium.ScreenSpaceEventType.PINCH_END);
42 } 74 }
43 } 75 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
55 }, 55 },
56 startAnalysis() { 56 startAnalysis() {
57 // this.isAnalysis = true; 57 // this.isAnalysis = true;
58 this.$parent.viewpoint.chooseView();
58 }, 59 },
59 stopAnalysis() { 60 stopAnalysis() {
60 // this.isAnalysis = false; 61 // this.isAnalysis = false;
......
...@@ -74,8 +74,6 @@ ...@@ -74,8 +74,6 @@
74 sdgc: '', // 水底高程 74 sdgc: '', // 水底高程
75 swsd: '', // 水位深度 75 swsd: '', // 水位深度
76 ymsd: '', // 淹没速度 76 ymsd: '', // 淹没速度
77
78
79 isXmbj: true, 77 isXmbj: true,
80 // isAnalysis: true 78 // isAnalysis: true
81 } 79 }
...@@ -90,12 +88,19 @@ ...@@ -90,12 +88,19 @@
90 }, 88 },
91 startAnalysis() { 89 startAnalysis() {
92 // this.isAnalysis = true; 90 // this.isAnalysis = true;
91 let viewer = this.$parent.viewer;
92 this.$parent.flood.floodParse(viewer.scene, this.$parent.flood.positions2d, 0, 50);
93 this.$parent.flood.handlerPolygon.clear();
93 }, 94 },
94 stopAnalysis() { 95 stopAnalysis() {
95 // this.isAnalysis = false; 96 // this.isAnalysis = false;
97 this.$parent.viewer.entities.removeAll();
98 // this.$parent.flood.handlerPolygon.clear();
96 }, 99 },
97 handleIsXmbj(flag) { 100 handleIsXmbj(flag) {
98 this.isXmbj = flag; 101 this.isXmbj = flag;
102 this.$parent.flood.handlerPolygon.deactivate();
103 !flag && this.$parent.flood.handlerPolygon.activate();
99 } 104 }
100 } 105 }
101 } 106 }
......
...@@ -16,25 +16,7 @@ ...@@ -16,25 +16,7 @@
16 <el-date-picker v-model="anslysisTime" type="date" style="margin-left: 12px; width: 245px;" 16 <el-date-picker v-model="anslysisTime" type="date" style="margin-left: 12px; width: 245px;"
17 placeholder="选择分析日期"> 17 placeholder="选择分析日期">
18 </el-date-picker> 18 </el-date-picker>
19 </div> 19 </div>
20
21 <div class="func-input">
22 <div class="btn-wrapper2" :class="[isCF?'add-bg2': '']" @click="handleIsXmbj('isCF')">
23 <span class="center">春分</span>
24 </div>
25 <div class="btn-wrapper2" :class="[isXZ?'add-bg2': '']" @click="handleIsXmbj('isXZ')">
26 <span class="center">夏至</span>
27 </div>
28 <div class="btn-wrapper2" :class="[isQF?'add-bg2': '']" @click="handleIsXmbj('isQF')">
29 <span class="center">秋分</span>
30 </div>
31 <div class="btn-wrapper2" :class="[isLD?'add-bg2': '']" @click="handleIsXmbj('isLD')">
32 <span class="center">立冬</span>
33 </div>
34 <div class="btn-wrapper2" :class="[isDZ?'add-bg2': '']" @click="handleIsXmbj('isDZ')">
35 <span class="center">冬至</span>
36 </div>
37 </div>
38 20
39 <div class="func-input"> 21 <div class="func-input">
40 <span>时间间隔 </span> 22 <span>时间间隔 </span>
...@@ -63,6 +45,7 @@ ...@@ -63,6 +45,7 @@
63 </template> 45 </template>
64 46
65 <script> 47 <script>
48 import shadow from "../assets/js/map/shadow";
66 let maxW = 24 * 60 * 60 * 1000 - 1 * 60 * 1000 49 let maxW = 24 * 60 * 60 * 1000 - 1 * 60 * 1000
67 export default { 50 export default {
68 name: 'yyAnslysis', 51 name: 'yyAnslysis',
...@@ -92,13 +75,15 @@ ...@@ -92,13 +75,15 @@
92 } 75 }
93 } 76 }
94 }, 77 },
95 mounted() {}, 78 mounted() {
79 this.shadow instanceof shadow || (this.shadow = new shadow());
80 },
96 methods: { 81 methods: {
97 closePop() { 82 closePop() {
98 this.$emit('closePop', 'yyAnslysis') 83 this.$emit('closePop', 'yyAnslysis')
99 }, 84 },
100 startAnalysis() { 85 startAnalysis() {
101 86 console.log(this.shadow);
102 }, 87 },
103 stopAnalysis() { 88 stopAnalysis() {
104 89
......