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,很多人都有过类似的需求吧,但 ...
随机推荐
- C#操作MySQL的类
C#操作MySQL的类 public class MySqlService { private static log4net.ILog logger = log4net.LogManager.GetL ...
- redis 持久化文章分析的很到位
https://baijiahao.baidu.com/s?id=1611955931705092609&wfr=spider&for=pc
- CDI Features(EL(SPEL),Decorator,Interceptor,Producer)
一.EL(SPEL) EL 1.概述:EL是JSP内置的表达式语言,用以访问页面的上下文以及不同作用域中的对象 ,取得对象属性的值,或执行简单的运算或判断操作.EL在得到某个数据时,会自动进行数据类型 ...
- Robot Framework--ride使用说明2
RIDE创建项目 1.创建项目 1.1File->New Project 注:选择directory原因是,在directory的项目下可以创建测试套件,如果是tpye为file,则只能创建测试 ...
- VUE + vue-cli + webpack 创建新项目(2)
上一篇其实没写完. 好吧这一篇其实也没啥. 就补充一些上一篇没写完的.(随时害怕笔记本丢失的人) 上一篇写完了登录验证的跳转,这一片首先补充一下接口(?). 在使用axios的过程中,我们家后台表示你 ...
- F7+vue 物理返回键监听使用
以前使用的是纯F7,这个项目加了Vue进去,但碰到了一个问题,就是这样监听不到安卓物理键的返回,它是点击返回,直接推出程序,这个坑有点深,查了不少资料也问了不少人,最后在网上看到了别人的写的,自己也改 ...
- TCP建立连接三次握手和释放连接四次握手
TCP建立连接三次握手和释放连接四次握手 [转载]http://blog.csdn.net/guyuealian/article/details/52535294 在谈及TCP建立连接和释 ...
- C语言操作符
C语言操作符的分类: 算术操作符 逻辑运算符 位操作符 赋值操作符 单目操作符 关系操作符 条件操作符 逗号表达式 数组下标引用 函数调用 结构体成员使用 大体上,C语言的操作符具体就这么些, ...
- MSRHook与SSDTHook
//方式1:MSR Hook #include <ntifs.h> UINT32 oldaddr = ; UINT32 pidtoprotect = ; PCLIENT_ID pid = ...
- JS JQ 深拷贝之坑
之前做留言板的时候,我就被深拷贝坑了一次,这次做API管理系统,没想到又被深拷贝坑了一次. 最后,拷贝对象的时候,如果要用到对象里的prototype,一定要用$.extend(true,{},要拷贝 ...