Drawing and resetting of mars3d point, line and surface

<template>
  <div id="app">
     Map 
    <button @click="drawPoint()"> spot </button>
    <button @click="drawLine()"> Line </button>
    <button @click="drawPolygon()"> Noodles </button>
    <button @click="clearFeatures()"> Reset </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: " Sky map ", type: "tdt", layer: "img_d", show: true }],
      };
      //  Create a 3D Earth scene 
      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>