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>

<template>
  <div id="app">
    地图
    <button @click="layerEvents()">点</button>
    <button @click="save()">保存</button>
    <button @click="get()">读取</button>
    <div id="mars3dContainer" class="mars3d-container"></div>
  </div>
</template>
 
<script>
export default {
  name: "App",
  methods: {
    init() {
      var mapOptions = {
        basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
      };

      var map = new mars3d.Map("mars3dContainer", mapOptions);

      this.map = map;
    },

    layerEvents() {
      console.log("asdf");
      // 图层绑定事件
      const graphicLayer = new mars3d.layer.GraphicLayer();
      this.map.addLayer(graphicLayer);
      const graphic = new mars3d.graphic.PointEntity({
        position: [116.244399, 30.920459, 573.6],
        style: {
          color: "#ff0000",
          pixelSize: 10,
          outlineColor: "#ffffff",
          outlineWidth: 2,
          label: {
            text: "我是原始点",
            font_size: 18,
            color: "#ffffff",
            pixelOffsetY: -10,
            distanceDisplayCondition: true,
            distanceDisplayCondition_far: 500000,
            distanceDisplayCondition_near: 0,
          },
        },
      });
      graphicLayer.addGraphic(graphic);
      // graphicLayer.on(mars3d.EventType.click, (e) => {
      //   console.log("我是图层的单击事件，获取的矢量数据", e.graphic)
      // })
    },
    save() {
      const graphic = new mars3d.graphic.PointEntity({
        position: [116.244399, 30.920459, 573.6],
        style: {
          color: "#ff0000",
          pixelSize: 10,
          outlineColor: "#ffffff",
          outlineWidth: 2,
          label: {
            text: "我是原始点",
            font_size: 18,
            color: "#ffffff",
            pixelOffsetY: -10,
            distanceDisplayCondition: true,
            distanceDisplayCondition_far: 500000,
            distanceDisplayCondition_near: 0,
          },
        },
      });
      localStorage.setItem("geojson", JSON.stringify(graphic));
    },
    get() {
      const geojson = JSON.parse(localStorage.getItem("geojson"));
      console.log("geojson", geojson);
      console.log("asdf");
      // 图层绑定事件
      const graphicLayer = new mars3d.layer.GraphicLayer();
      this.map.addLayer(graphicLayer);
      const graphic = new mars3d.graphic.PointEntity(geojson);
      graphicLayer.addGraphic(graphic);
    },
  },
  mounted() {
    this.init();
  },
};
</script>
 
<style>
#mars3dContainer {
  height: 1000px;
}
</style>