在vue2中怎么使用cesium,自己手动绘制点线面功能

你可以使用Cesium的Vue组件来集成Cesium到Vue 2中。首先，你需要安装Cesium和VueCesium组件:

1. 安装Cesium: 可以从官网下载或使用npm安装。

npm install cesium --save

2. 安装VueCesium:

npm install vue-cesium --save

3. 在Vue组件中使用Cesium:

a. 引用Cesium和VueCesium：

import * as Cesium from "cesium";
import VueCesium from "vue-cesium";

b. 注册VueCesium：

  Vue.use(VueCesium, {
    // 版本号，对应Cesium.js的版本号
    cesiumPath: '/static/Cesium/Cesium.js',
    // 在启动VueCesium的时候自动注入Cesium对象
    // 如果不注入，需要通过this.$Cesium调用
    // 如果单独在组件中使用
    // this.$Cesium  === Cesium
    // 如果在Vue mixin中使用
    // Vue.prototype.$Cesium === Cesium
    // 如果在常规JavaScript文件或者函数中使用
    // import Cesium from 'cesium/Cesium'
  });

c. 在Vue组件中使用Cesium：

  <template>
    <div>
      <!-- 根据组件的命名规则，直接在组件中使用cesium视图，并增加cesium属性，支持覆盖默认的配置 -->
      <cesium-viewer ref="cesiumViewer" :cesium-prop="cesiumOptions"></cesium-viewer>
    </div>
  </template>

  <script>
  export default {
    name: 'cesium-demo',
    data() {
      return {
        cesiumOptions: {
          ///... One of the cesium viewer options
        }
      };
    },
    mounted() {
      // Accessing cesium viewer instance
      console.log(this.$refs.cesiumViewer.cesium.viewer);
    },

    methods: {
      // 方法可以直接在组件中定义并调用
    }
  };
  </script>

  <style scoped>
  </style>

d. 自己手动绘制点线面功能：

<template>
  <div>
    <cesium-viewer ref="cesiumViewer" @connected="createEntities()" style="height: 100%; width: 100%" :cesium-prop="cesiumOptions"></cesium-viewer>
  </div>
</template>

<script>
import * as Cesium from "cesium";

export default {
  name: "cesium-demo",
  data() {
    return {
      cesiumOptions: {
        terrainProviderViewModels: [],
        terrainProvider: new Cesium.EllipsoidTerrainProvider(),
        mapProjection: new Cesium.WebMercatorProjection(),
        baseLayerPicker: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
      },
      viewer: null,
      clickHandler: null,
      drawingHandler: null,
      measurementLabel: "",
      measurementEntity: null,
      drawingPolyline: null,
      drawingPolygon: null,
    };
  },
  methods: {
    createEntities() {
      this.viewer = this.$refs.cesiumViewer.cesium.viewer;
      this.clickHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
      this.createDrawingHandler();
    },
    createDrawingHandler() {
      this.drawingHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);

      let positions = [];
      let drawingMode = null;
      let label = null;

      const finishDrawing = function () {
        let entity = null;
        if (drawingMode === "POLYLINE") {
          entity = this.viewer.entities.add({
            polyline: {
              positions: positions,
              width: 3,
              material: Cesium.Color.BLUE,
            },
          });
        } else if (drawingMode === "POLYGON") {
          entity = this.viewer.entities.add({
            polygon: {
              hierarchy: positions,
              height: 0,
              material: Cesium.Color.BLUE.withAlpha(0.5),
              outline: true,
              outlineColor: Cesium.Color.BLACK,
            },
          });
        }

        if (entity) {
          entity.description =
            '<div class="cesium-info-box"><p>' + this.measurementLabel + "</p></div>";

          if (this.measurementEntity) {
            this.viewer.entities.remove(this.measurementEntity);
          }
          this.measurementEntity = entity;
        }

        this.clearDrawing();
      }.bind(this);

      const clearDrawing = function () {
        drawingMode = null;

        if (this.measurementEntity) {
          this.viewer.entities.remove(this.measurementEntity);
          this.measurementEntity = null;
        }

        if (label) {
          label.show = false;
          label = null;
          this.measurementLabel = "";
        }

        if (this.drawingPolyline) {
          this.viewer.entities.remove(this.drawingPolyline);
          this.drawingPolyline = null;
        }

        if (this.drawingPolygon) {
          this.viewer.entities.remove(this.drawingPolygon);
          this.drawingPolygon = null;
        }

        positions = [];
      }.bind(this);

      this.clickHandler.setInputAction((click) => {
        const position = this.viewer.scene.pickPosition(click.position);
        if (Cesium.defined(position) && drawingMode) {
          positions.push(position);

          if (drawingMode === "POLYLINE") {
            if (this.drawingPolyline) {
              this.viewer.entities.remove(this.drawingPolyline);
            }
            this.drawingPolyline = this.viewer.entities.add({
              polyline: {
                positions: positions,
                width: 3,
                material: Cesium.Color.BLUE,
              },
            });
          }

          if (drawingMode === "POLYGON") {
            if (positions.length === 2) {
              if (this.drawingPolygon) {
                this.viewer.entities.remove(this.drawingPolygon);
              }
              this.drawingPolygon = this.viewer.entities.add({
                polygon: {
                  hierarchy: new Cesium.CallbackProperty(() => {
                    if (this.viewer.scene.mode !== Cesium.SceneMode.MORPHING) {
                      return new Cesium.PolygonHierarchy(positions);
                    }
                  }, false),
                  material: Cesium.Color.BLUE.withAlpha(0.5),
                  height: 0,
                  outline: true,
                  outlineColor: Cesium.Color.WHITE,
                },
              });
            } else if (positions.length > 2) {
              this.viewer.entities.remove(this.drawingPolygon);
              this.drawingPolygon = this.viewer.entities.add({
                polygon: {
                  hierarchy: new Cesium.CallbackProperty(() => {
                    if (this.viewer.scene.mode !== Cesium.SceneMode.MORPHING) {
                      return new Cesium.PolygonHierarchy(positions);
                    }
                  }, false),
                  material: Cesium.Color.BLUE.withAlpha(0.5),
                  height: 0,
                  outline: true,
                  outlineColor: Cesium.Color.WHITE,
                },
              });
            }
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      this.clickHandler.setInputAction(() => {
        this.viewer.scene.screenSpaceCameraController.enableLook = false;
      }, Cesium.ScreenSpaceEventType.RIGHT_DOWN);

      this.clickHandler.setInputAction(() => {
        this.viewer.scene.screenSpaceCameraController.enableLook = true;
      }, Cesium.ScreenSpaceEventType.RIGHT_UP);

      this.drawingHandler.setInputAction(() => {
        finishDrawing();
      }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

      document.onkeyup = (arg) => {
        if (arg.keyCode == 27) {
          clearDrawing();
          this.drawingHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
          this.drawingHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        }
      };

      // Set up drawing toolbar
      const drawingToolbar = document.getElementById("drawingToolbar");

      document.getElementById("polylineButton").addEventListener(
        "click",
        function () {
          clearDrawing();
          drawingMode = "POLYLINE";
          this.measurementLabel = "Distance";
          this.addToolbarLabel("Click to start drawing a line.");
        }.bind(this)
      );

      document.getElementById("polygonButton").addEventListener(
        "click",
        function () {
          clearDrawing();
          drawingMode = "POLYGON";
          this.measurementLabel = "Area";
          this.addToolbarLabel("Click to start drawing a polygon.");
        }.bind(this)
      );

      document.getElementById("clearButton").addEventListener(
        "click",
        function () {
          clearDrawing();
          this.drawingHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
          this.drawingHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        }.bind(this)
      );
    },
    addToolbarLabel: function (text) {
      const toolbarLabel = document.getElementById("drawingToolbarLabel");
      toolbarLabel.innerHTML = text;

      if (label) {
        label.show = false;
        label = null;
      }

      label = this.viewer.entities.add({
        position: Cesium.Cartesian3.fromArray(positions),
        label: {
          text: text,
          font: "16px sans-serif",
          pixelOffset: new Cesium.Cartesian2(0.0, 20),
          showBackground: true,
          backgroundColor: new Cesium.Color.fromCssColorString("#333333").withAlpha(0.7),
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
      });
    },
  },
  beforeDestroy() {
    this.viewer = this.$refs.cesiumViewer.cesium.viewer;
    this.clickHandler.destroy();
    this.drawingHandler.destroy();
  },
};
</script>

<style scoped>
  #drawingToolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    height: 50px;
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid gray;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #clearButton {
    margin-left: auto;
  }

  .cesium-info-box p {
    margin: 0;
    color: white;
  }
</style>

以上代码提供了简单的使用Cesium在Vue 2中手动绘制点线面功能。