Cesium adds a button with the same style as the native button

native button

Customize one, bionic button

• html

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

• js

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);
};

• css

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