reat + cesium。 实现 初始化时自动定位,鼠标移动实时展示坐标及视角高度, 淹没分析
只贴实现淹没分析这块的代码。
import styles from './cesium.less';
import React from 'react';
import Cesium from 'cesium/Cesium'; Cesium.BingMapsApi.defaultKey = '必应地图Key.具体请自己申请'; require('cesium/Widgets/widgets.css'); export default class CesiumPage extends React.Component { state = {
log_String: '',
lat_String: '',
alti_String: '',
adapCoordi: [],
maxHeight: 0,
} componentDidMount() {
this.initCesium();
} initCesium = () => {
const url = 'https://dev.virtualearth.net';
let viewer = new Cesium.Viewer('cesiumContainer', {
scene3DOnly: true,
selectionIndicator: false,
//geocoder: false, //是否显示地名查找控件
//homeButton: true,
baseLayerPicker:false, //是否显示图层选择控件
// navigationHelpButton:false,
//animation: false, // 是否创建动画小器件,左下角仪表
//timeline: false, //是否显示时间线控件
//vrButton: false, //是否展示VR按钮
//fullscreenButton: true, //右下角全屏按钮
});
viewer.cesiumWidget.creditContainer.style.display = 'none';
//使用必应地图作为底图
viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url: url,
mapStyle: Cesium.BingMapsStyle.AERIAL
}))
//增加地形、
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
url: "http://data.marsgis.cn/terrain",//中国地形
//url: Cesium.IonResource.fromAssetId(1), //世界地形
requestWaterMask: false, // 增加水文
requestVertexNormals: false, //增加光线
})
//启用深度测试以使地形后的物体被挡住
viewer.scene.globe.depthTestAgainstTerrain = false;
//绑定鼠标移动时,实时显示坐标及高度
this.coordinateShow(viewer);
/* let initialPosition = new Cesium.Cartesian3.fromDegrees(107.5116,29.4605, 4120);
let homeCameraView = {destination : initialPosition,};
viewer.scene.camera.setView(homeCameraView); */
//设置镜头到具体位置及角度
this.setPointAdress(viewer); this.viewer = viewer;
} //鼠标移动实时显示坐标及视角高度函数
coordinateShow = (viewer) => {
let _this = this,
canvas= viewer.scene.canvas;
//具体事件的实现
let ellipsoid=viewer.scene.globe.ellipsoid;
let handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(function(movement){
//捕获椭球体,将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标,返回球体表面的点
let cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
if(cartesian){
//将笛卡尔三维坐标转为地图坐标(弧度)
let cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
//将地图坐标(弧度)转为十进制的度数
let lat_String=Cesium.Math.toDegrees(cartographic.latitude).toFixed(4),
log_String=Cesium.Math.toDegrees(cartographic.longitude).toFixed(4),
alti_String=(viewer.camera.positionCartographic.height/1000).toFixed(2);
_this.setState({
log_String,
lat_String,
alti_String
})
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
//设置视角位置及角度
setPointAdress = (viewer) => {
const centerPoint = [107.52, 29.422];
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(...centerPoint, 1500), // 设置位置
orientation: {
heading : Cesium.Math.toRadians(-10.0), // 方向
pitch : Cesium.Math.toRadians(-5.0),// 倾斜角度
roll : 0, //Cesium.Math.toRadians(-38.0)
},
duration:5, // 设置飞行持续时间,默认会根据距离来计算
complete: function () {
// 到达位置后执行的回调函数
console.log('到达目的地');
},
cancle: function () {
// 如果取消飞行则会调用此函数
console.log('飞行取消')
},
pitchAdjustHeight: -90, // 如果摄像机飞越高于该值,则调整俯仰俯仰的俯仰角度,并将地球保持在视口中。
maximumHeight:5000, // 相机最大飞行高度
flyOverLongitude: 100, // 如果到达目的地有2种方式,设置具体值后会强制选择方向飞过这个经度
});
} setIf = () => {
let _this = this;
_this.drawPolygon((positions) => {
let wgs84_positions = [],
areaAdapCoordi = [],
maxHeight = 0;
for(var i=0; i<positions.length; i++){
var wgs84_point = _this.Cartesian3_to_WGS84({
x: positions[i].x,
y: positions[i].y,
z: positions[i].z
});
wgs84_positions.push(wgs84_point);
}
//获取鼠标点击的位置高度貌似有问题,为了呈现水的高度,所以手动调增*300米。
maxHeight = Math.max(...wgs84_positions.map(item => item.alt * 300));
wgs84_positions.map(item => [item.lng, item.lat, item.alt]).map(item => item.forEach(e => areaAdapCoordi.push(e)));
this.setState({
adapCoordi: areaAdapCoordi,//设置选取位置的坐标
maxHeight: maxHeight // 设置最高高度,即水漫到多高
})
});
} //画面
drawPolygon = (callback) => {
var _this = this;
var PolygonPrimitive = (function () {
function _(positions) {
this.options = {
id:'drawPolygonforwater',
name: '多边形',
polygon: {
hierarchy: [],
perPositionHeight: true,
material: Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 4,
}
};
this.hierarchy = positions;
this._init();
} _.prototype._init = function () {
var _self = this;
var _update = function () {
return _self.hierarchy;
};
//实时更新polygon.hierarchy
this.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false);
_this.viewer.entities.add(this.options);
};
return _;
})(); var handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
var positions = [];
var poly = undefined; //鼠标单击画点
handler.setInputAction(function (movement) {
let cartesian=_this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
if (positions.length === 0) {
positions.push(cartesian.clone());
}
positions.push(cartesian);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠标移动
handler.setInputAction(function (movement) {
var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.endPosition, _this.viewer.scene.globe.ellipsoid);
if (positions.length >= 2) {
if (!Cesium.defined(poly)) {
poly = new PolygonPrimitive(positions);
} else {
if(cartesian !== undefined){
positions.pop();
cartesian.y += (1 + Math.random());
positions.push(cartesian);
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//鼠标右键单击结束绘制
handler.setInputAction(function (movement) {
handler.destroy();
callback(positions);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
} //笛卡尔坐标系转WGS84坐标系
Cartesian3_to_WGS84 = (point) => {
let cartesian33 = new Cesium.Cartesian3(point.x, point.y, point.z),
cartographic = Cesium.Cartographic.fromCartesian(cartesian33),
lat = Cesium.Math.toDegrees(cartographic.latitude),
lng = Cesium.Math.toDegrees(cartographic.longitude),
alt = cartographic.height;
return {lat: lat, lng: lng, alt: alt};
} _drawWater = () => {
const { maxHeight } = this.state;
const targetHeight = maxHeight;
let _this = this;
//移除选取的多边形
_this.viewer.entities.removeById('drawPolygonforwater');
//将全局的 地形设置改为地形遮挡,这样山体可将水漫立方体挡住
_this.viewer.scene.globe.depthTestAgainstTerrain = !0;
const { adapCoordi } = this.state;
this.viewer.entities.removeById('polygonforwaterYanmo');
let WaterPolygonPrimitive = (function () {
function _(height) {
this.options = {
id:'polygonforwaterYanmo',
name: '水文立方体',
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(adapCoordi),
material: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.8),
perPositionHeight: true,
extrudedHeight: 0,
}
};
this.extrudedHeight = height;
this._init();
} _.prototype._init = function () {
var _self = this;
var _update = function () {
return _self.extrudedHeight;
};
//实时更新polygon.extrudedHeight
this.options.polygon.extrudedHeight = new Cesium.CallbackProperty(_update, false);
_this.viewer.entities.add(this.options);
};
return _;
})();
let height = 0,
warterEn = new WaterPolygonPrimitive(height),
waterHeight = 0;
this.timer = setInterval(() => {
if (waterHeight < targetHeight) {
waterHeight += 2
if (waterHeight > targetHeight) {
waterHeight = targetHeight
}
warterEn.extrudedHeight = waterHeight;
}
}, 100);
} render() {
const { log_String, lat_String, alti_String } = this.state;
return (<div className={styles.cesium}>
<button onClick={() => this.setIf()}>绘制区域</button>
<button style={{marginLeft: 8}} onClick={() => this._drawWater()}>开始分析</button>
<div id="cesiumContainer" className={styles.cesiumContainer}>
<div className={styles.latlng_show}>
<div className={styles.latlng_show_log}>
<font size="3" color="white">经度:<span>{log_String}</span></font>
</div>
<div className={styles.latlng_show_lat}>
<font size="3" color="white">纬度:<span>{lat_String}</span></font>
</div>
<div className={styles.latlng_show_alt}>
<font size="3" color="white">视角高:<span>{alti_String}</span>km</font>
</div>
</div>
</div>
</div>);
}
}
reat + cesium。 实现 初始化时自动定位,鼠标移动实时展示坐标及视角高度, 淹没分析的更多相关文章
- layui table表格字段过长,展示不完整时,鼠标放到上面展示完整信息
亲测可以直接用 1.首先每个列都有一个title,里面放入完整信息,然后写一个如下的function, function tdTitle(){ $('th').each(function(index, ...
- 鼠标划过用户名时在鼠标右下角显示div展示用户资料
最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
- EasyUI Accordion下的Panel面板初始化时全部折叠
EasyUI Accordion下的Panel面板有一个属性:selected,默认值为:false.初始化时,若设置'selected:true',则面板默认打开,效果如下: <div tit ...
- iOS UIimage初始化时的两种方法
第一种方式:UIImage *image = [UIImage imageNamed:@"image"]; 使用这种方式,第一次读取的时候,先把这个图片存到缓存里,下次再使用时直接 ...
- html---textarea初始化时就有个table空格以及tab键操作无效
1 初始化时就有一个tab空格 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRnJlZUFwZQ==/font/5a6L5L2T/fontsize/400 ...
- UIView(包括子类)的几个初始化时执行动作的时机
转载自:http://www.tqcto.com/article/mobile/56963.html 根据你需要执行的动作, 这里有几个方法: -(id)initWithFrame:(CGRect)f ...
- vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...
- Android在初始化时弹出popwindow的方法
http://blog.csdn.net/sxsboat/article/details/7340759 Android中在onCreate()时弹出popwindow,很多人都有过类似的需求吧,但 ...
随机推荐
- 上海高校程序设计联赛 D-CSL的字符串 栈模拟
题目链接:https://ac.nowcoder.com/acm/contest/551/D ASCII码表示的字符转换成整数实测不超过200(具体多少懒得查了) 分析:要求总的字典序最小,那就让最小 ...
- C#流程控制语句--迭代语句(while,do....while, for , foreach)
迭代语句:有的时候,可能需要多次执行同一块代码.函数中的第一个语句先执行,接着是第二个语句,依此类推. 迭代语句:while(先检查后执行) while(条件表达式 bool类型) { 代码语句 } ...
- MS17-010漏洞复现
攻击机:192.168.148.132 kali linux2018.2 x64 靶机:192.168.1.129 win7 x64 首先用msfconsole的smb模块扫描,看看是 ...
- 一条shell命令让多台Linux服务器执行
1.环境 局域网环境有3台Linux服务器,配置host文件 [root@master1 ~]# vim /etc/hosts 192.168.8.201 master1 192.168.8.202 ...
- 微信 + weui 框架记录
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一: 包含button.cell.dialog. progress. to ...
- springboot redis key乱码
原写法: @Autowired private RedisTemplate redisTemplate; 写入redis后,查看key值 127.0.0.1:6379> keys * 1) &q ...
- 这里我们介绍的是 40+ 个非常有用的 Oracle 查询语句,主要涵盖了日期操作,获取服务器信息,获取执行状态,计算数据库大小等等方面的查询。这些是所有 Oracle 开发者都必备的技能,所以快快收藏吧!
日期/时间 相关查询 获取当前月份的第一天 运行这个命令能快速返回当前月份的第一天.你可以用任何的日期值替换 “SYSDATE”来指定查询的日期. SELECT TRUNC (SYSDATE, 'MO ...
- java AQS 一:
最近加班太多,很久没有更新博客了,周末看了下阿里大神并发的书籍,把知识点做个记录. 一:线程安全的定义 当多个线程并发访问某个类时,如果不用考虑运营环境下的调度和交替运行,且不需要额外的辅助,这里认为 ...
- luogu1706全排列
#include<bits/stdc++.h> using namespace std; +]; +]; int search(int k); int print(); int n,num ...
- 记录linux配置
只写成功过程:1.配置sshd: 首先开启安全组端口,选择合适端口(tcp),shell输入vi /etc/services ->ssh修改(21变更为合适端口) 接着shell输入vi /et ...