mars3d点线面的绘制和重置

<template>
  <div id="app">
    地图
    <button @click="drawPoint()">点</button>
    <button @click="drawLine()">线</button>
    <button @click="drawPolygon()">面</button>
    <button @click="clearFeatures()">重置</button>

    <div id="mars3dContainer" class="mars3d-container"></div>
  </div>
</template>
 
<script>
import * as mars3d from "mars3d";
export default {
  name: "App",
  methods: {
    init() {
      var mapOptions = {
        basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
      };
      // 创建三维地球场景
      const map = new mars3d.Map("mars3dContainer", mapOptions);
      this.map = map;
      return map;
    },
    drawPolygon(clampToGround) {
      this.map.graphicLayer.startDraw({
        type: "polygon",
        style: {
          color: clampToGround ? "#ffff00" : "#3388ff",
          opacity: 0.5,
          outline: true,
          outlineColor: "#ffffff",
          outlineWidth: 2.0,
          clampToGround: clampToGround,
        },
      });
    },
    drawPoint(clampToGround) {
      this.map.graphicLayer.startDraw({
        type: "point",
        style: {
          color: clampToGround ? "#ffff00" : "#3388ff",
          opacity: 0.5,
          outline: true,
          outlineColor: "#ffffff",
          outlineWidth: 2.0,
          clampToGround: clampToGround,
        },
      });
    },
    drawLine(clampToGround) {
      this.map.graphicLayer.startDraw({
        type: "polyline",
        style: {
          color: clampToGround ? "#ffff00" : "#3388ff",
          opacity: 0.5,
          outline: true,
          outlineColor: "#ffffff",
          outlineWidth: 2.0,
          clampToGround: clampToGround,
        },
      });
    },
    clearFeatures() {
      this.map.graphicLayer.clear();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
#mars3dContainer {
  height: 800px;
}
</style>