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

原生的按钮

自定义一个，仿生按钮

• 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