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,很多人都有过类似的需求吧,但 ...
随机推荐
- Android(五)——dex文件动态调试
代码动态调试: 代码动态调试技术,一般是通过观察程序在运行过程中的状态,如寄存器内容,函数执行结果,内存使用情况等等,分析函数功能,明确代码逻辑,查找可能存在的漏洞 工具:IDA 条件:Android ...
- JavaScript进阶系列1:performace和console.time性能测试
测试性能的时候,三种方法: 1.使用new Date() 返回整数值ms var dtStart=new Date(); for(var i=0;i<15000;i++){ i=i; } var ...
- 可迭代对象 TO 迭代器
可迭代对象并不是迭代器,只是支持迭代.可被for循环遍历的对象,比如list,dict ,tuple ,string都是可迭代对象 那既然支持迭代,那要如何用迭代替换for循环呢? 内置函数 iter ...
- 用oracle自带的ssh脚本配置互信
./sshUserSetup.sh -user 用户名 -hosts "主机名1 主机名2 主机名3 ..." -advanced -noPromptPassphrase 这个 ...
- springboot之jackson的两种配置方式
springboot 针对jackson是自动化配置的,如果需要修改,有两种方式: 方式一:通过application.yml 配置属性说明:## spring.jackson.date-format ...
- 点击button会自动刷新页面
如题 因为button标签按钮会提交表单. 解决方法如下: 1.将<button></button>改为<input type="button"> ...
- nginx反向代理后应用程序如何获取客户端真实IP
每个location中增加配置: proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_se ...
- linux php5.6 安装扩展 memcached
wget http://pecl.php.net/get/igbinary-1.1.1.tgz tar -xzvf igbinary-.tgz cd igbinary- /usr/local/php5 ...
- linux 下mysql多实例安装
1.软件下载 https://dev.mysql.com/downloads/file/?id=479096 免编译二进制包 mysql-5.6.21-linux-glibc2.5-x86_64.ta ...
- JavaWeb+SVN+Maven+Tomcat +jenkins实现自动化部署
网址:https://blog.csdn.net/liyong1028826685/article/details/88289218 在日常开发项目中常见的开发模式是使用代码库来存放我们的项目例如:S ...