376 lines
12 KiB
HTML
376 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- Use correct character set. -->
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<!-- Tell IE to use the latest, best version. -->
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|||
|
|
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
|||
|
|
<meta
|
|||
|
|
name="viewport"
|
|||
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
|||
|
|
/>
|
|||
|
|
<title>全景漫游</title>
|
|||
|
|
<link
|
|||
|
|
href="https://cdn.jsdelivr.net/npm/cesium@1.85.0/Build/Cesium/Widgets/widgets.css"
|
|||
|
|
rel="stylesheet"
|
|||
|
|
/>
|
|||
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/cesium@1.85.0/Build/Cesium/Cesium.js"></script> -->
|
|||
|
|
<script src="./Build168/Cesium/Cesium.js"></script>
|
|||
|
|
<!-- 添加天地图的cesium的扩展插件，目前支持cesuim1.52、1.58、1.63.1。 -->
|
|||
|
|
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script>
|
|||
|
|
<style>
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
#cesiumContainer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
#infobox {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
left: 30px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
z-index: 99;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background-color: white;
|
|||
|
|
border: 1px solid #cccccc;
|
|||
|
|
}
|
|||
|
|
.toolbox {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 49%;
|
|||
|
|
left: 30px;
|
|||
|
|
z-index: 99;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
.tool-item {
|
|||
|
|
background-color: #303336;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.playbox {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 30px;
|
|||
|
|
left: 49%;
|
|||
|
|
z-index: 99;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="toolbox">
|
|||
|
|
<button id="zoomIn" class="tool-item">
|
|||
|
|
<img class="tool-image" src="../SampleData/zoomIn.png" alt="" />
|
|||
|
|
</button>
|
|||
|
|
<button id="zoomOut" class="tool-item">
|
|||
|
|
<img class="tool-image" src="../SampleData/zoomOut.png" alt="" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="infobox"></div>
|
|||
|
|
<div class="playbox">
|
|||
|
|
<button id="start">播放</button>
|
|||
|
|
<button id="quit">停止</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
var token = "bf156eb3c72350d62b008dc8a4ae1016";
|
|||
|
|
// 服务域名
|
|||
|
|
var tdtUrl = "https://t{s}.tianditu.gov.cn/";
|
|||
|
|
// 服务负载子域,天地图地图服务二级域名包括t0-t7，可以随机选择使用，如http://t2.tianditu.gov.cn/vec_c/wmts?tk=您的密钥
|
|||
|
|
var subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
|
|||
|
|
|
|||
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|||
|
|
shouldAnimate: true,
|
|||
|
|
timeline: true,
|
|||
|
|
animation: false,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 叠加影像服务
|
|||
|
|
var imgMap = new Cesium.UrlTemplateImageryProvider({
|
|||
|
|
url: tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
|
|||
|
|
subdomains: subdomains,
|
|||
|
|
tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
|||
|
|
maximumLevel: 18,
|
|||
|
|
});
|
|||
|
|
viewer.imageryLayers.addImageryProvider(imgMap);
|
|||
|
|
|
|||
|
|
viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
|
|||
|
|
viewer.scene.globe.show = true;
|
|||
|
|
viewer.scene.debugShowFramesPerSecond = true;
|
|||
|
|
|
|||
|
|
// var tilesets = new Cesium.Cesium3DTileset({
|
|||
|
|
// url: './SampleData/Cesium3DTiles/Tilesets/Tileset/tileset.json',
|
|||
|
|
// skipLevelOfDetail: true,
|
|||
|
|
// maximumMemoryUsage: 1500,
|
|||
|
|
// maximumScreenSpaceError: 16,
|
|||
|
|
// // cullRequestsWhileMovingMultiplier: 100,
|
|||
|
|
// dynamicScreenSpaceError: false,
|
|||
|
|
// preferLeaves: true,
|
|||
|
|
// debugShowContentBoundingVolume: false,
|
|||
|
|
// debugShowViewerRequestVolume: false,
|
|||
|
|
// debugShowBoundingVolume: false,
|
|||
|
|
// });
|
|||
|
|
// tilesets.readyPromise
|
|||
|
|
// .then(function (tileset) {
|
|||
|
|
// viewer.scene.primitives.add(tileset);
|
|||
|
|
// viewer.flyTo(tileset);
|
|||
|
|
// })
|
|||
|
|
// .otherwise(function (error) {
|
|||
|
|
// console.log(error);
|
|||
|
|
// });
|
|||
|
|
var myPositions = [
|
|||
|
|
[109.05832893717263, 37.441496598851096],
|
|||
|
|
[109.05855416786699, 37.44130123438769],
|
|||
|
|
[109.05870506545179, 37.44117238850958],
|
|||
|
|
[109.05846290755761, 37.441001906200626],
|
|||
|
|
[109.05874862898264, 37.440730473795476],
|
|||
|
|
[109.0591362027828, 37.4403901883947],
|
|||
|
|
[109.05955264270231, 37.4400282830198],
|
|||
|
|
[109.05976466627452, 37.43986533373868],
|
|||
|
|
[109.06019447304337, 37.43953151809137],
|
|||
|
|
[109.06050060518912, 37.439282109667204],
|
|||
|
|
[109.06073920090172, 37.43909640541291],
|
|||
|
|
[109.06102095626935, 37.43887990938909],
|
|||
|
|
[109.06126114614219, 37.43905268010351],
|
|||
|
|
[109.0615923854886, 37.43932891714282],
|
|||
|
|
[109.06114978051788, 37.43970657237644],
|
|||
|
|
[109.06078572833964, 37.44000168113979],
|
|||
|
|
[109.06027780474928, 37.44042583498669],
|
|||
|
|
[109.0598968978716, 37.440729305287476],
|
|||
|
|
[109.05936770987917, 37.441168572826626],
|
|||
|
|
[109.05904603542216, 37.44142781800953],
|
|||
|
|
[109.0587449465546, 37.44119249116668],
|
|||
|
|
[109.05845600554856, 37.441396645980845],
|
|||
|
|
];
|
|||
|
|
// var point = viewer.entities.add({
|
|||
|
|
// position: Cesium.Cartesian3.fromDegrees(
|
|||
|
|
// 109.05845600554856,
|
|||
|
|
// 37.441396645980845,
|
|||
|
|
// 100
|
|||
|
|
// ),
|
|||
|
|
// point: {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
viewer.camera.flyTo({
|
|||
|
|
destination: Cesium.Cartesian3.fromDegrees(
|
|||
|
|
109.05845600554856,
|
|||
|
|
37.441396645980845,
|
|||
|
|
400.0
|
|||
|
|
),
|
|||
|
|
});
|
|||
|
|
console.log(viewer.animation);
|
|||
|
|
function trackView() {
|
|||
|
|
//Set bounds of our simulation time
|
|||
|
|
var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
|
|||
|
|
var stop = Cesium.JulianDate.addSeconds(
|
|||
|
|
start,
|
|||
|
|
myPositions.length - 1,
|
|||
|
|
new Cesium.JulianDate()
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
//Make sure viewer is at the desired time.
|
|||
|
|
viewer.clock.startTime = start.clone();
|
|||
|
|
viewer.clock.stopTime = stop.clone();
|
|||
|
|
viewer.clock.currentTime = start.clone();
|
|||
|
|
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
|
|||
|
|
viewer.clock.multiplier = 0.3;
|
|||
|
|
|
|||
|
|
//Set timeline to simulation bounds
|
|||
|
|
viewer.timeline.zoomTo(start, stop);
|
|||
|
|
|
|||
|
|
//Generate a random circular pattern with varying heights.
|
|||
|
|
function computeCirclularFlight() {
|
|||
|
|
var property = new Cesium.SampledPositionProperty();
|
|||
|
|
//设置插入选项
|
|||
|
|
property.setInterpolationOptions({
|
|||
|
|
// interpolationDegree: 1,
|
|||
|
|
// interpolationAlgorithm: Cesium.LinearApproximation,
|
|||
|
|
|
|||
|
|
// interpolationDegree: 5,
|
|||
|
|
// interpolationAlgorithm:
|
|||
|
|
// Cesium.LagrangePolynomialApproximation,
|
|||
|
|
|
|||
|
|
interpolationDegree: 2,
|
|||
|
|
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
|
|||
|
|
});
|
|||
|
|
for (var i = 0; i < myPositions.length; i++) {
|
|||
|
|
var time = Cesium.JulianDate.addSeconds(
|
|||
|
|
start,
|
|||
|
|
i,
|
|||
|
|
new Cesium.JulianDate()
|
|||
|
|
);
|
|||
|
|
var position = Cesium.Cartesian3.fromDegrees(
|
|||
|
|
myPositions[i][0],
|
|||
|
|
myPositions[i][1],
|
|||
|
|
5
|
|||
|
|
);
|
|||
|
|
property.addSample(time, position);
|
|||
|
|
}
|
|||
|
|
return property;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var position = computeCirclularFlight();
|
|||
|
|
|
|||
|
|
//Actually create the entity
|
|||
|
|
var entity = viewer.entities.add({
|
|||
|
|
//Set the entity availability to the same interval as the simulation time.
|
|||
|
|
availability: new Cesium.TimeIntervalCollection([
|
|||
|
|
new Cesium.TimeInterval({
|
|||
|
|
start: start,
|
|||
|
|
stop: stop,
|
|||
|
|
}),
|
|||
|
|
]),
|
|||
|
|
//Use our computed positions
|
|||
|
|
position: position,
|
|||
|
|
//Automatically compute orientation based on position movement.
|
|||
|
|
orientation: new Cesium.VelocityOrientationProperty(position),
|
|||
|
|
|
|||
|
|
model: {
|
|||
|
|
uri: "../SampleData/models/CesiumAir/Cesium_Air.glb",
|
|||
|
|
minimumPixelSize: 64,
|
|||
|
|
},
|
|||
|
|
//Show the path as a pink line sampled in 1 second increments.
|
|||
|
|
path: {
|
|||
|
|
resolution: 1,
|
|||
|
|
material: new Cesium.PolylineGlowMaterialProperty({
|
|||
|
|
glowPower: 0.1,
|
|||
|
|
color: Cesium.Color.GREEN,
|
|||
|
|
}),
|
|||
|
|
width: 16,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
viewer.trackedEntity = entity;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//视角变换
|
|||
|
|
var matrix3Scratch = new Cesium.Matrix3();
|
|||
|
|
function getModelMatrix(entity, time, result) {
|
|||
|
|
var position = Cesium.Property.getValueOrUndefined(
|
|||
|
|
entity.position,
|
|||
|
|
time,
|
|||
|
|
new Cesium.Cartesian3()
|
|||
|
|
);
|
|||
|
|
if (!Cesium.defined(position)) {
|
|||
|
|
return undefined;
|
|||
|
|
}
|
|||
|
|
var orientation = Cesium.Property.getValueOrUndefined(
|
|||
|
|
entity.orientation,
|
|||
|
|
time,
|
|||
|
|
new Cesium.Quaternion()
|
|||
|
|
);
|
|||
|
|
if (!Cesium.defined(orientation)) {
|
|||
|
|
result = Cesium.Transforms.eastNorthUpToFixedFrame(
|
|||
|
|
position,
|
|||
|
|
undefined,
|
|||
|
|
result
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
result = Cesium.Matrix4.fromRotationTranslation(
|
|||
|
|
Cesium.Matrix3.fromQuaternion(orientation, matrix3Scratch),
|
|||
|
|
position,
|
|||
|
|
result
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
var scratch = new Cesium.Matrix4();
|
|||
|
|
var renderListener = function (e) {
|
|||
|
|
//viewer.camera.positionCartographic.height = 2000 + $this.limitCamera(f_property);
|
|||
|
|
if (viewer.trackedEntity) {
|
|||
|
|
getModelMatrix(viewer.trackedEntity, viewer.clock.currentTime, scratch);
|
|||
|
|
|
|||
|
|
var transformX = 90; //距离运动点的距离（后方）
|
|||
|
|
var transformZ = 55; //距离运动点的高度（上方）
|
|||
|
|
var transformY = 0; //距离运动点的高度（侧方）
|
|||
|
|
viewer.scene.camera.lookAtTransform(
|
|||
|
|
scratch,
|
|||
|
|
new Cesium.Cartesian3(-transformX, transformY, transformZ)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
viewer.scene.preRender.addEventListener(renderListener);
|
|||
|
|
|
|||
|
|
document.getElementById("start").onclick = function () {
|
|||
|
|
viewer.clock.shouldAnimate = true;
|
|||
|
|
trackView();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.getElementById("quit").onclick = function () {
|
|||
|
|
viewer.trackedEntity = undefined;
|
|||
|
|
viewer.clock.shouldAnimate = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 放大缩小
|
|||
|
|
document.getElementById("zoomIn").onclick = function () {
|
|||
|
|
// 获取当前镜头位置的笛卡尔坐标
|
|||
|
|
let cameraPos = viewer.camera.position;
|
|||
|
|
// 获取当前坐标系标准
|
|||
|
|
let ellipsoid = viewer.scene.globe.ellipsoid;
|
|||
|
|
|
|||
|
|
// 根据坐标系标准，将笛卡尔坐标转换为地理坐标
|
|||
|
|
let cartographic = ellipsoid.cartesianToCartographic(cameraPos);
|
|||
|
|
// 获取镜头的高度
|
|||
|
|
let height = cartographic.height;
|
|||
|
|
// if (height < 40) {
|
|||
|
|
// return
|
|||
|
|
// }
|
|||
|
|
// 镜头拉近
|
|||
|
|
viewer.camera.zoomIn(height / 3);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.getElementById("zoomOut").onclick = function () {
|
|||
|
|
// 获取当前镜头位置的笛卡尔坐标
|
|||
|
|
let cameraPos = viewer.camera.position;
|
|||
|
|
// 获取当前坐标系标准
|
|||
|
|
let ellipsoid = viewer.scene.globe.ellipsoid;
|
|||
|
|
|
|||
|
|
// 根据坐标系标准，将笛卡尔坐标转换为地理坐标
|
|||
|
|
let cartographic = ellipsoid.cartesianToCartographic(cameraPos);
|
|||
|
|
// 获取镜头的高度
|
|||
|
|
let height = cartographic.height;
|
|||
|
|
// if (height < 40) {
|
|||
|
|
// return
|
|||
|
|
// }
|
|||
|
|
// 镜头拉近
|
|||
|
|
viewer.camera.zoomOut(height * 1.2);
|
|||
|
|
};
|
|||
|
|
//经纬度显示
|
|||
|
|
viewer.screenSpaceEventHandler.setInputAction(function (event) {
|
|||
|
|
var earthPosition = viewer.camera.pickEllipsoid(
|
|||
|
|
event.position,
|
|||
|
|
viewer.scene.globe.ellipsoid
|
|||
|
|
);
|
|||
|
|
var cartographic = Cesium.Cartographic.fromCartesian(
|
|||
|
|
earthPosition,
|
|||
|
|
viewer.scene.globe.ellipsoid,
|
|||
|
|
new Cesium.Cartographic()
|
|||
|
|
);
|
|||
|
|
var lat = Cesium.Math.toDegrees(cartographic.latitude);
|
|||
|
|
var lng = Cesium.Math.toDegrees(cartographic.longitude);
|
|||
|
|
var height = viewer.camera.positionCartographic.height;
|
|||
|
|
document.getElementById("infobox").innerHTML =
|
|||
|
|
"<span>经度：" +
|
|||
|
|
lng.toFixed(3) +
|
|||
|
|
"</span>" +
|
|||
|
|
"<span> 纬度：" +
|
|||
|
|
lat.toFixed(3) +
|
|||
|
|
"</span>" +
|
|||
|
|
"<span> 相机高度：" +
|
|||
|
|
height +
|
|||
|
|
"</span>";
|
|||
|
|
console.log(lat, lng, height);
|
|||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|||
|
|
</script>
|
|||
|
|
</html>
|