128 lines
4.3 KiB
HTML
128 lines
4.3 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>Learning Cesium!</title>
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html, body, #cesiumContainer {
|
||
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="cesiumContainer"></div>
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
||
|
||
var viewer = new Cesium.Viewer('cesiumContainer',{
|
||
geocoder:false,//位置查找
|
||
homeButton:false,//视图返回初始位置
|
||
sceneModePicker:false,//视角选择器
|
||
// baseLayerPicker:false,//底图选择器
|
||
navigationHelpButton:false,//导航帮助按钮
|
||
animation:false,//动画控制器
|
||
// creditContainer:"credit",//版权显示
|
||
timeline:false,//时间线
|
||
fullscreenButton:false,//全屏控件
|
||
vrButton:false
|
||
});
|
||
// var viewer = new Cesium.Viewer('cesiumContainer', {
|
||
// terrainProvider: Cesium.createWorldTerrain()
|
||
// });
|
||
|
||
// var tileset = viewer.scene.primitives.add(
|
||
// new Cesium.Cesium3DTileset({
|
||
// url: Cesium.IonResource.fromAssetId(115448),
|
||
// })
|
||
// );
|
||
// viewer.zoomTo(tileset)
|
||
|
||
function addDynamicLabel(data){
|
||
//动态创建标签的DIV，添加CesiumContainer中
|
||
let div = document.createElement("div");
|
||
div.id = data.id;
|
||
div.style.position = "absolute";
|
||
div.style.width = "100px";
|
||
div.style.height = "30px";
|
||
let HTMLTable = `
|
||
<div style="background:rgba(255,122,0,0.4)">${data.name}</div>
|
||
`;
|
||
div.innerHTML = HTMLTable;
|
||
viewer.cesiumWidget.container.appendChild(div);
|
||
|
||
|
||
//将传入的坐标转换为屏幕的坐标，设置top/left值
|
||
let gisPosition = Cesium.Cartesian3.fromDegrees(
|
||
data.getProperty(
|
||
"cesium#longitude"
|
||
),
|
||
data.getProperty(
|
||
"cesium#latitude"
|
||
),
|
||
0
|
||
);
|
||
//实时更新位置
|
||
// viewer.scene.postRender.addEventListener(() => {
|
||
const canvasHeight = viewer.scene.canvas.height;
|
||
const windowPosition = new Cesium.Cartesian2();
|
||
Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||
viewer.scene,
|
||
gisPosition,
|
||
windowPosition
|
||
);
|
||
div.style.bottom = canvasHeight - windowPosition.y + "px";
|
||
const elWidth = div.offsetWidth;
|
||
div.style.left = windowPosition.x - elWidth / 2 + "px";
|
||
|
||
//解决滚动不隐藏问题
|
||
// const camerPosition = viewer.camera.position;
|
||
// let height = viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
|
||
// height += viewer.scene.globe.ellipsoid.maximumRadius;
|
||
// console.log(camerPosition,val.position )
|
||
// if((!(Cesium.Cartesian3.distance(camerPosition,vmPosition ) > height))&&viewer.camera.positionCartographic.height<50000000){
|
||
// div.style.display = "block"
|
||
// }else{
|
||
// div.style.display = "none"
|
||
// }
|
||
// },this)
|
||
}
|
||
|
||
//添加osmbuilding数据
|
||
let osmBuildingsTileset = Cesium.createOsmBuildings();
|
||
viewer.scene.primitives.add(osmBuildingsTileset);
|
||
|
||
//点击交互事件
|
||
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||
// Add left click input to select a building to and extract its coordinates
|
||
handler.setInputAction(function (movement) {
|
||
viewer.selectedEntity = undefined;
|
||
const pickedBuilding = viewer.scene.pick(movement.position);
|
||
if (pickedBuilding) {
|
||
addDynamicLabel(pickedBuilding)
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
|
||
|
||
//定位到海心沙
|
||
viewer.camera.flyTo({
|
||
destination: new Cesium.Cartesian3(-2325771.0288233184,5392181.511762224,2484480.395134067),
|
||
orientation: {
|
||
heading: 6.0399326,
|
||
pitch: -0.30503,
|
||
roll: 6.2825747,
|
||
},
|
||
});
|
||
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|