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>
|