text: import * as mars3d from "mars3d"
  
  export let map // mars3d.Map三维地图对象
  export let graphicLayer // 矢量图层对象
  
  export const eventTarget = new mars3d.BaseClass()
  
  /**
   * 初始化地图业务，生命周期钩子函数（必须）
   * 框架在地图初始化完成后自动调用该函数
   * @param {mars3d.Map} mapInstance 地图对象
   * @returns {void} 无
   */
  export function onMounted(mapInstance) {
    map = mapInstance // 记录map
  
    // 创建矢量数据图层
    graphicLayer = new mars3d.layer.GraphicLayer()
    map.addLayer(graphicLayer)
  
    bindLayerEvent() // 对图层绑定相关事件
    bindLayerPopup() // 在图层上绑定popup,对所有加到这个图层的矢量数据都生效
    bindLayerContextMenu() // 在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
  
    // 加一些演示数据
    addDemoGraphic1(graphicLayer)
    addDemoGraphic2(graphicLayer)
    addDemoGraphic3(graphicLayer)
    addDemoGraphic4(graphicLayer)
  }
  
  /**
   * 释放当前地图业务的生命周期函数
   * @returns {void} 无
   */
  export function onUnmounted() {
    map = null
  
    graphicLayer.remove()
    graphicLayer = null
  }
  
  //
  function addDemoGraphic1(graphicLayer) {
    const graphic = new mars3d.graphic.BoxEntity({
      position: [116.282587, 30.859197, 544.31],
      style: {
        dimensions: new Cesium.Cartesian3(1000.0, 1000.0, 1000.0),
        fill: true,
        color: "#00ff00",
        opacity: 0.4,
  
        label: { text: "鼠标移入会高亮", pixelOffsetY: -30 },
        // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
        highlight: {
          opacity: 0.8
        }
      },
      attr: { remark: "示例1" }
    })
    graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
  
    // 演示个性化处理graphic
    initGraphicManager(graphic)
  }
  
  //
  function addDemoGraphic2(graphicLayer) {
    const graphic = new mars3d.graphic.BoxEntity({
      position: new mars3d.LngLatPoint(116.329199, 30.881595, 390.3),
      style: {
        dimensions: new Cesium.Cartesian3(900.0, 600.0, 900.0),
        fill: false,
        outline: true,
        outlineColor: "#ffff00"
      },
      attr: { remark: "示例2" }
    })
    graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
  }
  
  //
  function addDemoGraphic3(graphicLayer) {
    const graphic = new mars3d.graphic.BoxEntity({
      position: new mars3d.LngLatPoint(116.392526, 30.903729, 933.55),
      style: {
        dimensions: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
        fill: true,
        color: "#00ffff",
        opacity: 0.9,
        heading: 45,
        roll: 45,
        pitch: 0
      },
      attr: { remark: "示例3" }
    })
    graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
  }
  
  //
  function addDemoGraphic4(graphicLayer) {
    const graphic = new mars3d.graphic.BoxEntity({
      position: [116.244399, 30.920459, 573.6],
      style: {
        dimensions: new Cesium.Cartesian3(800.0, 600.0, 1000.0),
        color: "#ff0000",
        opacity: 0.6,
        outline: true,
        outlineColor: "#000000",
        label: {
          text: "我是原始的",
          font_size: 18,
          color: "#ffffff",
          pixelOffsetY: -10,
          distanceDisplayCondition: true,
          distanceDisplayCondition_far: 500000,
          distanceDisplayCondition_near: 0
        }
      },
      attr: { remark: "示例4" }
    })
    graphicLayer.addGraphic(graphic)
  
    // graphic转geojson
    const geojson = graphic.toGeoJSON()
    console.log("转换后的geojson", geojson)
    addGeoJson(geojson, graphicLayer)
  }
  
  // 添加单个geojson为graphic，多个直接用graphicLayer.loadGeoJSON
  function addGeoJson(geojson, graphicLayer) {
    const graphicCopy = mars3d.Util.geoJsonToGraphics(geojson)[0]
    delete graphicCopy.attr
    // 新的坐标
    graphicCopy.position = [116.301991, 30.933872, 624.03]
    graphicCopy.style.label = graphicCopy.style.label || {}
    graphicCopy.style.label.text = "我是转换后生成的"
    graphicLayer.addGraphic(graphicCopy)
  }
  
  // 在图层级处理一些事物
  function bindLayerEvent() {
    // 在layer上绑定监听事件
    graphicLayer.on(mars3d.EventType.click, function (event) {
      console.log("监听layer，单击了矢量对象", event)
    })
    /* graphicLayer.on(mars3d.EventType.mouseOver, function (event) {
      console.log("监听layer，鼠标移入了矢量对象", event)
    })
    graphicLayer.on(mars3d.EventType.mouseOut, function (event) {
      console.log("监听layer，鼠标移出了矢量对象", event)
    }) */
  
    // 数据编辑相关事件， 用于属性弹窗的交互
    graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
      eventTarget.fire("graphicEditor-start", e)
    })
    graphicLayer.on(
      [mars3d.EventType.editStart, mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint],
      function (e) {
        eventTarget.fire("graphicEditor-update", e)
      }
    )
    graphicLayer.on([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], function (e) {
      eventTarget.fire("graphicEditor-stop", e)
    })
  }
  
  
  // 在图层绑定Popup弹窗
  export function bindLayerPopup() {
    graphicLayer.bindPopup(function (event) {
      const attr = event.graphic.attr || {}
      attr["类型"] = event.graphic.type
      attr["来源"] = "我是layer上绑定的Popup"
      attr["备注"] = "我支持鼠标交互"
  
      return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
    })
  }
  
  
  
  // 绑定右键菜单
  export function bindLayerContextMenu() {
    graphicLayer.bindContextMenu([
      {
        text: "开始编辑对象",
        icon: "fa fa-edit",
        show: function (e) {
          const graphic = e.graphic
          if (!graphic || !graphic.startEditing) {
            return false
          }
          return !graphic.isEditing
        },
        callback: function (e) {
          const graphic = e.graphic
          if (!graphic) {
            return false
          }
          if (graphic) {
            graphicLayer.startEditing(graphic)
          }
        }
      },
      {
        text: "停止编辑对象",
        icon: "fa fa-edit",
        show: function (e) {
          const graphic = e.graphic
          if (!graphic) {
            return false
          }
          return graphic.isEditing
        },
        callback: function (e) {
          const graphic = e.graphic
          if (!graphic) {
            return false
          }
          if (graphic) {
            graphicLayer.stopEditing(graphic)
          }
        }
      },
      {
        text: "删除对象",
        icon: "fa fa-trash-o",
        show: (event) => {
          const graphic = event.graphic
          if (!graphic || graphic.isDestroy) {
            return false
          } else {
            return true
          }
        },
        callback: function (e) {
          const graphic = e.graphic
          if (!graphic) {
            return
          }
          graphicLayer.removeGraphic(graphic)
        }
      }
    ])
  }
  
  export function updateLayerHasEdit(val) {
    graphicLayer.hasEdit = val
  }
  
  // 按钮事件
  export function startDrawGraphic() {
    // 开始绘制
    graphicLayer.startDraw({
      type: "box",
      style: {
        color: "#00ff00",
        opacity: 0.6,
        dimensions_x: 1000.0,
        dimensions_y: 1000.0,
        dimensions_z: 1000.0
      }
    })
  }
  
  
  
  // 也可以在单个Graphic上做个性化管理及绑定操作
  function initGraphicManager(graphic) {
    // 3.在graphic上绑定监听事件
    /* graphic.on(mars3d.EventType.click, function (event) {
      console.log("监听graphic，单击了矢量对象", event)
    })
    graphic.on(mars3d.EventType.mouseOver, function (event) {
      console.log("监听graphic，鼠标移入了矢量对象", event)
    })
    graphic.on(mars3d.EventType.mouseOut, function (event) {
      console.log("监听graphic，鼠标移出了矢量对象", event)
    }) */
  
    // 绑定Tooltip
    // graphic.bindTooltip('我是graphic上绑定的Tooltip') //.openTooltip()
  
    // 绑定Popup
    const inthtml = `<table style="width: auto;">
              <tr>
                <th scope="col" colspan="2" style="text-align:center;font-size:15px;">我是graphic上绑定的Popup </th>
              </tr>
              <tr>
                <td>提示：</td>
                <td>这只是测试信息，可以任意html</td>
              </tr>
            </table>`
    graphic.bindPopup(inthtml).openPopup()
  
    // 绑定右键菜单
    graphic.bindContextMenu([
      {
        text: "删除对象[graphic绑定的]",
        icon: "fa fa-trash-o",
        callback: function (e) {
          const graphic = e.graphic
          if (graphic) {
            graphic.remove()
          }
        }
      }
    ])
  
    // 测试 颜色闪烁
    if (graphic.startFlicker) {
      graphic.startFlicker({
        time: 20, // 闪烁时长（秒）
        maxAlpha: 0.5,
        color: Cesium.Color.YELLOW,
        onEnd: function () {
          // 结束后回调
        }
      })
    }
  }
  