静态资源:
<script type="text/javascript" src="../Build/CesiumUnminified/Cesium.js" nomodule></script>
<script type="text/javascript" src="/emc/js/Cesium-1.64/viewerCesiumNavigationMixin.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
viewerCesiumNavigationMixin.js文件资源地址:https://download.csdn.net/download/qq_26579715/12089560
html标签:
<div id="cesiumContainer"></div>
核心code:
var viewer = new Cesium.Viewer('cesiumContainer',{
animation:false,//隐藏动画器件
timeline:false,//隐藏时间轴
homeButton:false,//隐藏视角返回初始位置
geocoder:false,//隐藏查找位置工具
sceneModePicker:false, //隐藏选择视角的模式
baseLayerPicker:false, //隐藏图层选择器
fullscreenButton:false,//隐藏全屏按钮
navigationHelpButton:false //隐藏帮助按钮
});
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
}));
viewer._cesiumWidget._creditContainer.style.display = "none";
var options = {};
// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.
options.defaultResetView = Cesium.Cartographic.fromDegrees(110, 30, 2000000);
// 用于启用或禁用罗盘。true是启用罗盘,false是禁用罗盘。默认值为true。如果将选项设置为false,则罗盘将不会添加到地图中。
options.enableCompass= true;
// 用于启用或禁用缩放控件。true是启用,false是禁用。默认值为true。如果将选项设置为false,则缩放控件 将不会添加到地图中。
options.enableZoomControls= true;
// 用于启用或禁用距离图例。true是启用,false是禁用。默认值为true。如果将选项设置为false,距离图例将不会添加到地图中。
options.enableDistanceLegend= true;
// 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
options.enableCompassOuterRing= true;
viewer.extend(Cesium.viewerCesiumNavigationMixin, options);
//视角定位中国上方
viewer.camera.flyTo({
destination: new Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
duration: 8
});
页面效果如下: