Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
a59415cf by jikai
Options

111111

1 parent a14037c4
Inline Side-by-side
Showing 6 changed files with 411 additions and 0 deletions
1 export default class createDraw {
2 constructor(viewer) {
3 this.viewer = viewer;
4 this.handlerDis = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Distance, 1);
5 this.distance();
6 this.handlerArea = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Area, 0);
7 this.area();
8 this.handlerHeight = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.DVH);
9 this.height();
10 }
11 distance() {
12 this.handlerDis.measureEvt.addEventListener(result => {
13 var dis = Number(result.distance), distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis.toFixed(2) + 'm';
14 this.handlerDis.disLabel.text = '距离:' + distance;
15 });
16 this.handlerDis.activeEvt.addEventListener(this.handle());
17 }
18 area() {
19 this.handlerArea.measureEvt.addEventListener(result => {
20 var mj = Number(result.area), area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj.toFixed(2) + '㎡'
21 this.handlerArea.areaLabel.text = '面积:' + area;
22 });
23 this.handlerArea.activeEvt.addEventListener(this.handle());
24 }
25 height() {
26 this.handlerHeight.measureEvt.addEventListener(result => {
27 var distance = result.distance > 1000 ? (result.distance / 1000).toFixed(2) + 'km' : result.distance + 'm',
28 vHeight = result.verticalHeight > 1000 ? (result.verticalHeight / 1000).toFixed(2) + 'km' : result.verticalHeight + 'm',
29 hDistance = result.horizontalDistance > 1000 ? (result.horizontalDistance / 1000).toFixed(2) + 'km' : result.horizontalDistance + 'm';
30 this.handlerHeight.disLabel.text = '空间距离:' + distance;
31 this.handlerHeight.vLabel.text = '垂直高度:' + vHeight;
32 this.handlerHeight.hLabel.text = '水平距离:' + hDistance;
33 });
34 this.handlerArea.activeEvt.addEventListener(this.handle());
35 }
36 handle() {
37 return a => {
38 let body = $('body').removeClass('measureCur');
39 a && body.addClass('measureCur');
40 (this.viewer.enableCursorStyle = !a) || (this.viewer._element.style.cursor = '');
41 }
42 }
43 }
...\ No newline at end of file ...\ No newline at end of file
1 export default class flood {
2 constructor(viewer) {
3 this.positions2d = [];
4 this.handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon);
5 this.handlerPolygon.drawEvt.addEventListener(polygon => {
6 var array = [].concat(polygon.object.positions), positions = [];
7 for(var i = 0, len = array.length; i < len; i++){
8 var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
9 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
10 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
11 var h=cartographic.height;
12 if(positions.indexOf(longitude)===-1&&positions.indexOf(latitude)===-1){
13 positions.push(longitude);
14 positions.push(latitude);
15 positions.push(h);
16 this.positions2d.push(longitude);
17 this.positions2d.push(latitude);
18 this.positions2d.push(1000.0);
19 }
20 }
21 return positions;
22 });
23 }
24 initHyp() {
25 var hyp = new Cesium.HypsometricSetting();
26 //设置显示模式
27 hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
28 //设置线颜色为红色
29 hyp._lineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
30 //设置最大/最小可见高度
31 hyp.MinVisibleValue = 0;
32 //设置颜色表的最大/最小key值,表示高度
33 hyp.ColorTableMinKey = 1;
34 hyp.ColorTableMaxKey = 9000;
35 //新建颜色表
36 var colorTable = new Cesium.ColorTable();
37 var height = 1;
38 //每隔200m向颜色表插入一个随机色
39 for(var i = 0; i<90; i++){
40 height += 200;
41 colorTable.insert(height, getRandomColor());
42 }
43 //返回随机颜色
44 function getRandomColor(){
45 return new Cesium.Color(Math.random(), Math.random(), Math.random());
46 }
47 hyp.ColorTable = colorTable;
48 hyp.Opacity = 0.8;
49 //等高线间隔为200m
50 hyp.LineInterval = 200.0;
51 return hyp;
52 }
53 floodCal(entities, positions2d, waterHeight, targetHeight) {
54 let entity = entities.add({
55 polygon : {
56 hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(positions2d)),
57 perPositionHeight: true,
58 extrudedHeight: new Cesium.CallbackProperty(function(){
59 waterHeight+=20;
60 if(waterHeight>targetHeight){
61 waterHeight=targetHeight;//给个最大值
62 }
63 return waterHeight
64 }, false),
65 material: new Cesium.ImageMaterialProperty({
66 image: './images/waterNormals.jpg',
67 repeat : new Cesium.Cartesian2(1, 1),
68 transparent: true
69 })
70 }
71 });
72 }
73 floodParse(scene, positions2d, waterHeight, targetHeight) {
74 var River1 = new Cesium.Primitive({
75 geometryInstances : new Cesium.GeometryInstance({
76 geometry :new Cesium.PolygonGeometry({
77 polygonHierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(positions2d)),
78 extrudedHeight: targetHeight,
79 height: waterHeight,
80 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
81 })
82 }),
83 appearance : new Cesium.EllipsoidSurfaceAppearance({
84 aboveGround : true,
85 material: new Cesium.Material({
86 fabric : {
87 type : 'Water',
88 uniforms : {
89 normalMap:'./images/waterNormals.jpg',
90 frequency: 100.0,
91 animationSpeed: 0.01,
92 amplitude: 10.0
93 }
94 }
95 })
96 }),
97 show : true
98 });
99 scene.primitives.add(River1);
100 }
101 }
...\ No newline at end of file ...\ No newline at end of file
1 export default {
2 map: undefined
3 }
...\ No newline at end of file ...\ No newline at end of file
1 import objectManage from './maputils';
2 export default class shadow {
3 constructor() {
4 this.shadowQuery = new Cesium.ShadowQueryPoints(objectManage.viewer.scene);
5 this.setCurrentTime();
6 this.init();
7 }
8 setCurrentTime() {
9 objectManage.viewer.clock.currentTime = Cesium.JulianDate.fromDate(new Date());
10 objectManage.viewer.clock.multiplier = 1;
11 objectManage.viewer.clock.shouldAnimate = true;
12 }
13 init() {
14 this.handlerPolygon = new Cesium.DrawHandler(objectManage.viewer, Cesium.DrawMode.Polygon, 0);
15 this.tooltip = this.createTooltip(document.body);
16 this.points = [];
17 this.handlerPolygon.activeEvt.addEventListener(a => {
18 let body = $('body').removeClass('measureCur');
19 a && body.addClass('measureCur');
20 (objectManage.viewer.enableCursorStyle = !a) || (objectManage.viewer._element.style.cursor = '');
21 });
22 this.handlerPolygon.movingEvt.addEventListener(windowPosition => {
23 this.handlerPolygon.isDrawing && this.tooltip.showAt(windowPosition, '<p>绘制阴影分析区域(右键结束绘制)</p>');
24 });
25 this.handlerPolygon.drawEvt.addEventListener(result => {
26 this.tooltip.setVisible(false);
27 this.points.length = 0;
28 var polygon = result.object;
29 if(!polygon) return;
30 polygon.show = false;
31 this.handlerPolygon.polyline.show = false;
32 var positions = [].concat(polygon.positions);
33 positions = Cesium.arrayRemoveDuplicates(positions, Cesium.Cartesian3.equalsEpsilon);
34 //遍历多边形，取出所有点
35 for(var i = 0, len = positions.length; i < len; i++) {
36 //转化为经纬度，并加入至临时数组
37 var cartographic = Cesium.Cartographic.fromCartesian(polygon.positions[i]);
38 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
39 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
40 this.points.push(longitude);
41 this.points.push(latitude);
42 }
43 //设置分析对象的开始结束时间
44 // var dateValue = $("#selDate").val();
45 var startTime = new Date();
46 startTime.setHours(8);
47 this.shadowQuery.startTime = Cesium.JulianDate.fromDate(startTime);
48
49 var endTime = new Date();
50 endTime.setHours(22);
51 this.shadowQuery.endTime = Cesium.JulianDate.fromDate(endTime);
52
53 this.setCurrentTime();
54 this.shadowQuery.spacing = 10;
55 this.shadowQuery.timeInterval = 60;
56
57 //设置分析区域、底部高程和拉伸高度
58 var bh = 20, eh = 20;
59 this.shadowQuery.qureyRegion({
60 position : this.points,
61 bottom : bh,
62 extend : eh
63 });
64 });
65 }
66 createTooltip(frameDiv) {
67 var Tooltip = function(frameDiv) {
68 var div = document.createElement('DIV');
69 div.className = "twipsy right";
70 var arrow = document.createElement('DIV');
71 arrow.className = "twipsy-arrow";
72 div.appendChild(arrow);
73 var title = document.createElement('DIV');
74 title.className = "twipsy-inner";
75 div.appendChild(title);
76 this._div = div;
77 this._title = title;
78 this.message = '';
79 frameDiv.appendChild(div);
80 var that = this;
81 div.onmousemove = function(evt){
82 that.showAt({
83 x : evt.clientX,
84 y : evt.clientY
85 }, that.message);
86 };
87 };
88 Tooltip.prototype.setVisible = function(visible) {
89 this._div.style.display = visible ? 'block' : 'none';
90 };
91 Tooltip.prototype.showAt = function(position, message) {
92 if(position && message) {
93 this.setVisible(true);
94 this._title.innerHTML = message;
95 this._div.style.left = position.x + 10 + "px";
96 this._div.style.top = (position.y - this._div.clientHeight / 2) + "px";
97 this.message = message;
98 }
99 };
100 return new Tooltip(frameDiv);
101 }
102 shadowAnalysis() {
103 this.handlerPolygon.deactivate();
104 this.handlerPolygon.activate();
105 }
106 sunlight() {
107 var startTime = new Date(), endTime = new Date(), shour = 8, ehour = 22, nTimer = 0.0;
108 if(shour > ehour) return;
109 this.shadowQuery.qureyRegion({
110 position : [0, 0],
111 bottom : 0,
112 extend : 0
113 });
114 var nIntervId = setInterval(function() {
115 if(shour < ehour) {
116 startTime.setHours(shour);
117 startTime.setMinutes(nTimer);
118 objectManage.viewer.clock.currentTime = Cesium.JulianDate.fromDate(startTime);
119 nTimer += 10.0;
120 if(nTimer > 60.0){
121 shour += 1.0;
122 nTimer = 0.0;
123 }
124 }else {
125 clearInterval(nIntervId);
126 this.shadowQuery.qureyRegion({
127 position : points,
128 bottom : 20,
129 extend : 20
130 });
131 }
132 }, 20);
133 }
134 clear() {
135 this.handlerPolygon.deactivate();
136 this.handlerPolygon.polygon.show = false;
137 this.handlerPolygon.polyline.show = false;
138 // $('#shadowRadioBox').css('display', 'none');
139 objectManage.viewer.entities.removeAll();
140 this.shadowQuery.qureyRegion({
141 position : [0, 0],
142 bottom : 0,
143 extend : 0
144 });
145 }
146 }
...\ No newline at end of file ...\ No newline at end of file
1 export default class viewpoint {
2 constructor(viewer) {
3 this.viewer = viewer;
4 this.sightline = new Cesium.Sightline(viewer.scene);
5 this.sightline.couldRemove = false;
6 this.sightline.build();
7 this.handlerPoint = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
8 this.handlerPoint.drawEvt.addEventListener(result => {
9 var point = result.object;
10 point.show = false;
11 var position = result.object.position;
12 //将获取的点的位置转化成经纬度
13 var cartographic = Cesium.Cartographic.fromCartesian(position);
14 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
15 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
16 var height = cartographic.height;
17 if(viewer.scene.viewFlag) {
18 this.sightline.viewPosition = [longitude, latitude, height];
19 viewer.scene.viewFlag = false;
20 this.addPoint();
21 }else {
22 this.sightline.addTargetPoint({
23 position : [longitude, latitude, height],
24 name : "point" + new Date()
25 });
26 this.sightline.couldRemove = true;
27 }
28 });
29 }
30 chooseView() {
31 if(this.handlerPoint.active) return;
32 this.viewer.scene.viewFlag = true;
33 this.viewer.entities.removeAll();
34 this.sightline.removeAllTargetPoint();
35 this.handlerPoint.activate();
36 }
37 addPoint() {
38 this.viewer.scene.viewFlag = false;
39 this.handlerPoint.activate();
40 }
41 }
...\ No newline at end of file ...\ No newline at end of file
1 export default class visual {
2 constructor(viewer) {
3 this.viewer = viewer;
4 viewer.scene.viewFlag = true;
5 this.pointHandler = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
6 this.viewshed3D = new Cesium.ViewShed3D(viewer.scene);
7 this.viewPosition;
8 this.viewModel = {
9 direction: 1.0,
10 pitch: 1.0,
11 distance: 1.0,
12 verticalFov: 1.0,
13 horizontalFov: 1.0,
14 visibleAreaColor: '#ffffffff',
15 invisibleAreaColor: '#ffffffff'
16 };
17 Cesium.knockout.track(this.viewModel);
18 this.init(viewer.scene);
19 }
20 init(scene) {
21 this.handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
22 this.handler.setInputAction(e => {
23 // 若此标记为false，则激活对可视域分析对象的操作
24 if (!scene.viewFlag) {
25 //获取鼠标屏幕坐标,并将其转化成笛卡尔坐标
26 var position = e.endPosition;
27 var last = scene.pickPosition(position);
28 //计算该点与视口位置点坐标的距离
29 var distance = Cesium.Cartesian3.distance(this.viewPosition, last);
30 if (distance > 0) {
31 // 将鼠标当前点坐标转化成经纬度
32 var cartographic = Cesium.Cartographic.fromCartesian(last);
33 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
34 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
35 var height = cartographic.height;
36 // 通过该点设置可视域分析对象的距离及方向
37 this.viewshed3D.setDistDirByPoint([longitude, latitude, height]);
38 }
39 }
40 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
41 this.handler.setInputAction(e => {
42 //鼠标右键事件回调，不再执行鼠标移动事件中对可视域的操作
43 scene.viewFlag = true;
44 Object.assign(this.viewModel, {
45 direction: this.viewshed3D.direction, pitch: this.viewshed3D.pitch, distance: this.viewshed3D.distance,
46 horizontalFov: this.viewshed3D.horizontalFov, verticalFov: this.viewshed3D.verticalFov
47 })
48 }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
49 this.pointHandler.drawEvt.addEventListener(result => {
50 var point = result.object;
51 var position = point.position;
52 viewPosition = position;
53 // 将获取的点的位置转化成经纬度
54 var cartographic = Cesium.Cartographic.fromCartesian(position);
55 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
56 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
57 var height = cartographic.height + 1.8;
58 point.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
59 if (this.viewer.scene.viewFlag) {
60 // 设置视口位置
61 this.viewshed3D.viewPosition = [longitude, latitude, height];
62 this.viewshed3D.build();
63 // 将标记置为false以激活鼠标移动回调里面的设置可视域操作
64 this.viewer.scene.viewFlag = false;
65 }
66 });
67 }
68 chooseView() {
69 if (this.pointHandler.active) return;
70 //先清除之前的可视域分析
71 this.viewer.entities.removeAll();
72 this.viewshed3D.distance = 0.1;
73 this.viewer.scene.viewFlag = true;
74 //激活绘制点类
75 this.pointHandler.activate();
76 }
77 }
...\ No newline at end of file ...\ No newline at end of file