Cesium添加线，编辑线。

<template>
  <div class="content">
    <div id="cesiumContainer">
      <div class="lis">
        <ul>
          <li v-for="(item, index) in Lists" :key="item.id" @click="btn(index)">
            <p :class="{ active: one === index }">{{ item.itm }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
var Cesium = require("cesium/Cesium");
export default {
  data() {
    return {
      one: -1,
      Lists: [
        {
          id: "1",
          itm: "点",
        },
        {
          id: "2",
          itm: "线",
        },
        {
          id: "3",
          itm: "面",
        },
      ],
      viewer: null,
      handler: null,
      points: [], //点
      allPolygons: [], //面
      polygonEntityId: null,
      isEditing: false, // 添加一个布尔值来记录是否处于编辑状态
      lines: [],
    };
  },
  mounted() {
    this.initCesium();
  },
 methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        infoBox: false,
        timeline: false,
        geocoder: false,
        homeButton: false,
        animation: false,
        fullscreenButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        baseLayerPicker: false,
      });

      // 隐藏cesiumlogo
      this.viewer._cesiumWidget._creditContainer.style.display = "none";

      // 加载影像地图
      this.viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url:
            Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII") +
            "/{z}/{x}/{reverseY}.jpg",
          tilingScheme: new Cesium.GeographicTilingScheme(),
          maximumLevel: 5,
        })
      );

      this.viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
          layer: "tdtVecBasicLayer",
          style: "default",
          format: "image/png",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: false,
        })
      );

      // 如果需要叠加注记地图则添加以下代码
      this.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",
          layer: "tdtAnnoLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
        })
      );

      // 设置视图
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(115.25, 39, 1000000),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0,
        },
        duration: 2,
      });
    },

    btn(index) {
      this.one = index;
      console.log("index", index);
      if (index == 0) {
        this.Dot();//点
      } else if (index == 1) {
        this.Line();//线
      } else if (index == 2) {
        this.Area();//面
      }
    },
//点
 Dot() {}，
  //线
    Line() {
      this.handler = new Cesium.ScreenSpaceEventHandler(
        this.viewer.scene.canvas
      );
      let flag = 1; // 节流阀
      let vertices = []; // 存储所有顶点实体
      let currentPositions = []; // 当前绘制中的位置数据数组
      let drawing = false;
      let line = [];

      // 创建折线实体
      const createPolylineEntity = (list) => {
        console.log("list", list);

        const currentLine = this.viewer.entities.add({
          name: "线",
          polyline: {
            positions: new Cesium.CallbackProperty(
              () => list ?? currentPositions,
              false
            ),
            width: 10, // 线宽度
            material: new Cesium.PolylineGlowMaterialProperty({
              color: Cesium.Color.BLUE,
            }), // 颜色
            depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
              color: new Cesium.Color.fromCssColorString("#ccc"),
            }), // 被地形覆盖的虚线颜色
            clampToGround: true, // 是否贴和地型
          },
        });
        line.push(currentLine); // 将折线实体添加到 line 数组
        return currentLine;
      };

      // 添加顶点实体
      const addVertex = (position) => {
        const vertexEntity = this.viewer.entities.add({
          position: new Cesium.CallbackProperty(() => position, false),
          point: {
            pixelSize: 5, // 添加点的大小
            color: new Cesium.Color("#FFFFFF"), // 点的颜色
            outlineColor: Cesium.Color.YELLOW, // 外圈颜色
            outlineWidth: 2, // 外圈大小
          },
        });
        vertices.push(vertexEntity);
        return vertexEntity;
      };

      // 更新顶点位置并刷新折线实体的位置
      const updatePositions = () => {
        currentPositions = vertices.map((vertex) => vertex.position.getValue());
        console.log("currentPositions", currentPositions);
      };

      //点击开始绘制
      this.handler.setInputAction((movement) => {
        let pickedObject = this.viewer.scene.pick(movement.position);
        if (pickedObject && pickedObject.id instanceof Cesium.Entity) {
          let pickedEntity = pickedObject.id;
          if (pickedEntity.point) {
            // 用户点击了一个点实体
            pickedEntity.point.color = Cesium.Color.RED; // 高亮显示选中的顶点
            // 设置拖拽事件
            this.handler.setInputAction((movement) => {
              let ray = this.viewer.camera.getPickRay(movement.endPosition);
              let cartesian = this.viewer.scene.globe.pick(
                ray,
                this.viewer.scene
              );
              if (cartesian) {
                let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                let lng = Cesium.Math.toDegrees(cartographic.longitude);
                let lat = Cesium.Math.toDegrees(cartographic.latitude);
                let alt = cartographic.height;
                // 更新顶点位置
                pickedEntity.position = new Cesium.CallbackProperty(
                  () => Cesium.Cartesian3.fromDegrees(lng, lat, alt),
                  false
                );
                
                updatePositions(); // 更新顶点位置并刷新折线实体
              }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

            // 取消拖拽事件
            this.handler.setInputAction(() => {
              // 这里需要确保pickedEntity仍然存在并且是有效的
              if (pickedEntity && pickedEntity.point) {
                pickedEntity.point.color = new Cesium.Color("#FFFFFF"); // 恢复原始颜色
              }
              this.handler.removeInputAction(
                Cesium.ScreenSpaceEventType.MOUSE_MOVE
              );
            }, Cesium.ScreenSpaceEventType.LEFT_UP);

            console.log("222222222222");
          }
        } else {
          console.log("111121111111");

          if (!drawing) {
            console.log("!drawing");

            drawing = true;
            createPolylineEntity(); // 创建新的折线实体
          }
          let ray = this.viewer.camera.getPickRay(movement.position);
          let cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
          if (cartesian) {
            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            let lng = Cesium.Math.toDegrees(cartographic.longitude);
            let lat = Cesium.Math.toDegrees(cartographic.latitude);
            let alt = cartographic.height;

            let pointdian = Cesium.Cartesian3.fromDegrees(lng, lat, alt);
            addVertex(pointdian); // 添加顶点实体
            updatePositions(); // 更新顶点位置并刷新折线实体
            if (flag <= 2) {
              flag++;
            }
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 结束当前绘制并开始新的绘制
      const endAndStartNewDrawing = () => {
        if (currentPositions.length > 0) {
          createPolylineEntity(currentPositions);
          drawing = false;
          // 清空当前顶点数组
          vertices = [];
          // 清空当前位置数组
          currentPositions = [];
          console.log("绘制完成");
        }
      };

      this.handler.setInputAction(() => {
        if (drawing) {
          endAndStartNewDrawing();
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },
//面
 Area() {}，

鼠标右击后list的历史编辑，那个大佬弄好咯，给俺也分析一下，嘻嘻