<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<title>移动</title>
<style>
html,body{
margin: 0;
height: 100%;
}
#cesiumContainer{
height: 100%;
}
.btns{
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
.btns botton{
cursor: pointer;
}
</style>
</head>
<body>
<div class="btns">
<button data-type="start">向前 start</button>
<button data-type="end">向后 end</button>
<button data-type="left">向左 left</button>
<button data-type="right">向右 right</button>
</div>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = 'key';
var viewer = new Cesium.Viewer('cesiumContainer',{
geocoder: false, //是否显示地名查找控件
sceneModePicker: false, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
baseLayerPicker: false, //是否显示图层选择控件
homeButton: false, //是否显示Home按钮
fullscreenButton: false, //是否显示全屏按钮
timeline:false, //时间轴控件
animation:false, //动画控件
});
viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印 或 css
// var entity = viewer.entities.add({
// name: "点",
// position: Cesium.Cartesian3.fromDegrees(117.27071588556542, 31.844798269730724, 100),
// billboard: {
// image: "./marker/acting.png",
// scale: 1,
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
// }
// })
// var entity = viewer.entities.add({
// name: "点",
// position: Cesium.Cartesian3.fromDegrees( 117.27071588557013, 31.844973466548804, 100),
// billboard: {
// image: "./marker/acting.png",
// scale: 1,
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
// }
// })
var entity = viewer.entities.add({
name: "点",
position: Cesium.Cartesian3.fromDegrees(117.270739, 31.84308, 100),
billboard: {
image: "./marker/acting.png",
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
})
// viewer.flyTo(entity)
var btns = document.querySelector(".btns")
btns.addEventListener("click",function(e){
var target = e.target
if(target.nodeName == 'BUTTON'){
var type = target.dataset.type
console.log("type",type)
moveCamera(type)
}
})
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(117.270739,31.84308, 100) })
// 获取当前屏幕中心坐标
function getCenter(){
var rectangle = viewer.camera.computeViewRectangle();
var west = rectangle.west / Math.PI * 180;
var north = rectangle.north / Math.PI * 180;
var east = rectangle.east / Math.PI * 180;
var south = rectangle.south / Math.PI * 180;
var x = (west+east)/2;
var y = (north+south)/2;
return {x,y}
}
// 获取当前相机姿态
function getCameraPose(){
var direction = viewer.camera._direction;
var position = viewer.camera.position;
var x = Cesium.Math.toDegrees(direction.x);
var y = Cesium.Math.toDegrees(direction.y);
var z = Cesium.Math.toDegrees(direction.z);
return {x,y,z,direction,position}
}
function moveCamera(type){
var top = 0,left = 0,move = 10;
switch(type){
case "start":top = -1*move/2;break;
case "end": top = 1*move/2;break;
case "left": left = -1*move;break;
case "right": left = 1*move;break;
}
var heading = viewer.camera.heading
var pitch = viewer.camera.pitch
var roll = viewer.camera.roll
// viewer.camera.positionCartographic.height 相机高度
var _directionWC = viewer.camera._directionWC
// 获取下一个点的经纬度
var end = disTancelanglat(getCenter(),top,left)
// console.log("end:",end,top,left)
var pos = Cesium.Cartesian3.fromDegrees(end.x, end.y, 100)
viewer.entities.add({
name: "点",
position: pos,
billboard: {
image: "./marker/acting.png",
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
})
viewer.camera.flyTo({
destination: pos,
// orientation: _directionWC,
// {
// heading: heading,
// pitch: pitch,
// maximumHeight:
// roll: roll
// },
duration: 3,
});
// 31.84308 + 0.00001 -》 移动 1.1088406719547217m
}
// disTancelanglat({x:117.270739, y:31.84308},100,0)
// 根据一个点的经纬度 和 距离 获取另一个点的 经纬度
function disTancelanglat(start,top,left){
// 100m 计算偏差 lng 100-93.52195235574119 lat 100-99.71429336887138
let ARC = 6371.393*1000
let lat = start.x
let lng = start.y
var x = lat + left / (ARC * Math.PI / 180)
var y = lng + top / (ARC * Math.cos(lat) * Math.PI / 180)
console.log(disTance(start,{x,y}));
return {x,y}
// 计算 纬度
// ARC = 6371.393*1000
// latitude = 31.84308
// lath = 100
// var lat = latitude + lath / (ARC * Math.PI / 180)
// 31.843979266134
// 计算纬度
// ARC = 6371.393*1000
// longitude = 117.270739
// latitude = 31.84308
// longw = 100
// var lng = longitude + longw / (ARC * Math.cos(latitude) * Math.PI / 180)
// 117.27172704308663
}
// 获取2点之间的距离
function disTance(start,end){
start = start || {x:117.270739, y:31.84308}
end = end || {x:117.270739, y:31.843979266134}
var satrt = Cesium.Cartographic.fromDegrees(start.x,start.y)
var end = Cesium.Cartographic.fromDegrees(end.x,end.y)
var geodesic = new Cesium.EllipsoidGeodesic();
console.log(satrt, end)
geodesic.setEndPoints(satrt, end);
var distance = geodesic.surfaceDistance
return {distance,geodesic}
}
</script>
</body>
</html>
cesium 移动视角
最新推荐文章于 2024-05-20 11:01:35 发布
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
