<!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>Hello World!</title>
<!-- <script src="./Source/Cesium.js"></script> -->
<script >
</script>
<style>
@import url(./Source/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#buttonFacePlate {
position: fixed;
left: 0;
top: 0;
z-index: 99;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="buttonFacePlate">
<button id="zoomtoEntities">飞行</button>
</div>
<script type="module">
window.CESIUM_BASE_URL = "./Source/";
import * as Cesium from "./Source/Cesium.js"
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OGE4ZmEzYi1mOWVlLTRlNTItOTllMy1hYmI3ZTQ0NDRhOWQiLCJpZCI6ODM0NjUsImlhdCI6MTY0NTYwMzc3OH0.WDJjK-SUpv9zxgKZLgsLsAKZxj8nqVmmOqL2wIC6qZ4';
const viewer = new Cesium.Viewer("cesiumContainer");
document.getElementById('zoomtoEntities').addEventListener('click', () => {
const purplePolygonUsingRhumbLines = viewer.entities.add({
name: "Purple polygon using rhumb lines with outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-120.0, 45.0, -80.0, 45.0, -80.0, 55.0, -120.0, 55.0,
]),
material: new Cesium.ImageMaterialProperty({ image: './img/water.png' })
},
});
console.log(viewer.entities.values);
viewer.zoomTo(viewer.entities.values[0]);
})
</script>
</body>
</html>
cesium源码调用demo
最新推荐文章于 2024-05-11 18:18:35 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)