Cesium 添加与原生按钮样式相同的按钮

- 原生的按钮
- 自定义一个，仿生按钮

原生的按钮

在这里插入图片描述

自定义一个，仿生按钮

在这里插入图片描述

html

<div id="cesiumContainer"><button class="btn" ref="newBtn" @click="buttonClick()"></button>
</div>

const initViewer = () => {viewer.value = new Cesium.Viewer("cesiumContainer", {animation: true, //是否创建动画小器件，左下角仪表baseLayerPicker: true, //是否显示图层选择器fullscreenButton: true, //是否显示全屏按钮vrButton: false, // 用于切换 VR 模式的单个按钮小部件。geocoder: false, // //是否显示geocoder小器件，右上角查询按钮homeButton: true, //是否显示Home按钮sceneModePicker: true, //是否显示3D/2D选择器selectionIndicator: true, //是否显示选取指示器组件timeline: true, //是否显示时间轴navigationHelpButton: true, //是否显示右上角的帮助按钮infoBox: false, //是否显示信息框});// 去除版权信息viewer.value.cesiumWidget.creditContainer.style.display = "none";// 增加太阳光效果// viewer.value.scene.globe.enableLighting = true;// 控制视角不转到底下viewer.value.scene.globe.depthTestAgainstTerrain = true;// 增加瓦片-海图数据const imageryProvider = new Cesium.UrlTemplateImageryProvider({url: "cesium-api/map/getMap/{x}/{y}/{z}.png",credit: "mapname",tilingScheme: new Cesium.GeographicTilingScheme({ellipsoid: Cesium.Ellipsoid.WGS84,}),maximumLevel: 18,});viewer.value.scene.imageryLayers.addImageryProvider(imageryProvider);viewer.value.navigationHelpButton.container.appendChild(newBtn.value);
};

<style scoped>
#cesiumContainer {width: 100%;height: 671px;
}
.btn {border-radius: 5px;height: 32px;width: 32px;position: absolute;left: -34px;/* bottom: 6px; */background: #303336 url(../../assets//index/搜索.png);border: 1px solid #303336;background-size: cover;z-index: 6;cursor: pointer;
}
.btn:hover {color: #fff;fill: #fff;background-color: #4488bb;/* background: #48b url(../../Img/home/清空.png); */background-size: cover;border-color: #aef;box-shadow: 0 0 8px #fff;
}
</style>