Cesium增加自定义工具栏，在工具栏中添加图标按钮实现点击图标按钮后弹出菜单，在弹出的菜单中实现地图测距功能

要实现这个功能，你需要先使用Cesium的Toolbar插件来添加自定义工具栏和图标按钮。具体步骤如下：

1. 引入Cesium和Toolbar插件的JS文件。

<script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script>
<script src="https://unpkg.com/cesium-toolbar/Build/CesiumToolbar.js"></script>

2. 创建一个Cesium Viewer实例，并且加载地图。

var viewer = new Cesium.Viewer("cesiumContainer");

3. 创建一个Toolbar实例，并添加自定义工具栏和图标按钮。

var toolbar = new Cesium.Toolbar(viewer.container);
var measureButton = toolbar.addButton({
  tooltip: "测距",
  toolbar: "toolbar",
  iconUrl: "measure.png",
  onselect: function () {
    // 在这里添加弹出菜单的代码
  },
});

4. 在图标按钮的onselect事件中，创建一个弹出菜单，并添加测距功能。

var menu = new Cesium.Menu({
  container: document.body,
  title: "测距",
});

var measureHandler = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Distance);
measureHandler.measureEvt.addEventListener(function (result) {
  var distance = result.distance / 1000; // 距离单位为米，需要转换为千米
  var label = new Cesium.LabelGraphics({
    text: "距离: " + distance.toFixed(2) + "千米",
    font: "16px sans-serif",
    pixelOffset: new Cesium.Cartesian2(0, -30),
    fillColor: Cesium.Color.WHITE,
    outlineColor: Cesium.Color.BLACK,
    outlineWidth: 2,
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    disableDepthTestDistance: Number.POSITIVE_INFINITY,
  });
  viewer.entities.add({
    position: result.position,
    label: label,
  });
});

menu.addMenuItem({
  text: "开始测距",
  onselect: function () {
    measureHandler.activate();
  },
});
menu.addMenuItem({
  text: "清除测距结果",
  onselect: function () {
    viewer.entities.removeAll();
  },
});

完成以上步骤后，你就可以在Cesium地图上看到自定义工具栏和图标按钮了。当你点击图标按钮时，会弹出一个菜单，菜单中包含开始测距和清除测距结果两个选项。选择开始测距后，你可以在地图上拖动鼠标，测量两点之间的距离，并在地图上显示距离结果。选择清除测距结果后，所有测距结果都会被清除。