Cesium-Examples/examples/cesiumEx/1.15、罗盘、导航条.html
2025-05-20 14:52:40 +08:00

59 lines
1.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
<script src="./CesiumNavigation.umd.js"></script>
<style>
/*
自定义指南针需要调样式
.compass-gyro,.compass-gyro-background{
display:none;
}
.compass-outer-ring > svg{
left: 0;
position: absolute;
top: 0;
width: 95px;
height: 95px;
}*/
</style>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
<script type="text/javascript">
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjM2EzNGJmNy02N2RmLTQ0MDMtYjI2MS1hZTJiMTIwZGYwMTYiLCJpZCI6MzA0MzEyLCJpYXQiOjE3NDc3MjM3MTV9.ePQNhuoVuDsi_z00lTm5W26wyW1Adcr1AWetGM6WSXI'
const viewer = new Cesium.Viewer('map', {
geocoder: false,
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false,
navigationHelpButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
creditContainer: document.createElement("div")
});
const options = {
enableCompass: true,
enableZoomControls: true,//是否启用缩放控件
};
//自定义指南针图的SVG可以去阿里图库下载
//options.compassOuterRingSvg = ``;
new CesiumNavigation(viewer, options);
</script>
</body>
</html>