text: import * as mars3d from "mars3d"
  
  export let map // mars3d.Map三维地图对象
  export let graphicLayer // 矢量数据图层
  
  /**
   * 初始化地图业务，生命周期钩子函数（必须）
   * 框架在地图初始化完成后自动调用该函数
   * @param {mars3d.Map} mapInstance 地图对象
   * @returns {void} 无
   */
  export function onMounted(mapInstance) {
    map = mapInstance // 记录首次创建的map
  
    // 1.在map上绑定监听事件
    /* map.on(mars3d.EventType.clickGraphic, function (event) {
      // clickGraphic
      console.log("监听map，单击了矢量对象", event)
    })
    map.on(mars3d.EventType.mouseMove, function (event) {
      // mouseMove
      console.log("监听map，鼠标移动了", event)
    }) */
  
    // 创建矢量数据图层
    graphicLayer = new mars3d.layer.GraphicLayer()
    map.addLayer(graphicLayer)
  
    // 2.在layer上绑定监听事件
    bindLayerEvent() // 对图层绑定相关事件
    bindLayerPopup() // 在图层上绑定popup,对所有加到这个图层的矢量数据都生效
    bindLayerContextMenu() // 在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
  
    // 加一些演示数据
    addDemoGraphic1(graphicLayer)
    addDemoGraphic2(graphicLayer)
    addDemoGraphic3(graphicLayer)
    addDemoGraphic4(graphicLayer)
    addDemoGraphic5(graphicLayer)
    addDemoGraphic6(graphicLayer)
    addDemoGraphic7(graphicLayer)
    addDemoGraphic8(graphicLayer)
    addDemoGraphic9(graphicLayer)
    addDemoGraphic10(graphicLayer)
    addDemoGraphic11(graphicLayer)
    addDemoGraphic12(graphicLayer)
    addDemoGraphic13(graphicLayer)
    addDemoGraphic14(graphicLayer)
    addDemoGraphic15(graphicLayer)
  }
  
  /**
   * 释放当前地图业务的生命周期函数
   * @returns {void} 无
   */
  export function onUnmounted() {
    map = null
  }
  
  function addDemoGraphic1(graphicLayer) {
    const graphic = new mars3d.graphic.LabelEntity({
      position: new mars3d.LngLatPoint(116.1, 31.0, 1000),
      style: {
        text: "火星科技Mars3D平台",
        font_size: 25,
        font_family: "楷体",
        color: "#003da6",
        outline: true,
        outlineColor: "#bfbfbf",
        outlineWidth: 2,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        visibleDepth: false
      },
      attr: { remark: "示例1" }
    })
    graphicLayer.addGraphic(graphic)
  }
  
  function addDemoGraphic2(graphicLayer) {
    const graphic = new mars3d.graphic.PointEntity({
      position: [116.2, 31.0, 1000],
      style: {
        color: "#ff0000",
        pixelSize: 10,
        outline: true,
        outlineColor: "#ffffff",
        outlineWidth: 2
      },
      attr: { remark: "示例2" }
    })
    graphicLayer.addGraphic(graphic)
  }
  
  function addDemoGraphic3(graphicLayer) {
    const graphic = new mars3d.graphic.BillboardEntity({
      name: "贴地图标",
      position: [116.3, 31.0, 1000],
      style: {
        image: "img/marker/mark2.png",
        scale: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        clampToGround: true
      },
      attr: { remark: "示例3" }
    })
    graphicLayer.addGraphic(graphic)
  }
  
  function addDemoGraphic4(graphicLayer) {
    const graphic = new mars3d.graphic.PlaneEntity({
      position: new mars3d.LngLatPoint(116.4, 31.0, 1000),
      style: {
        plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
        dimensions: new Cesium.Cartesian2(4000.0, 4000.0),
        material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.Image, {
          image: "img/textures/movingRiver.png",
          transparent: true
        })
      },
      attr: { remark: "示例4" }
    })
    graphicLayer.addGraphic(graphic)
  }
  
  function addDemoGraphic5(graphicLayer) {
    const graphic = new mars3d.graphic.BoxEntity({
      position: new mars3d.LngLatPoint(116.5, 31.0, 1000),
      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: "示例5" }
    })
    graphicLayer.addGraphic(graphic)
  }
  
  function addDemoGraphic6(graphicLayer) {
    const graphic = new mars3d.graphic.CircleEntity({
      position: [116.1, 30.9, 1000],
      style: {
        radius: 1800.0,
        color: "#00ff00",
        opacity: 0.3,
        outline: true,
        outlineWidth: 3,
        outlineColor: "#ffffff",
        clampToGround: true
      },
      popup: "直接传参的popup",
      attr: { remark: "示例6" }
    })
    graphicLayer.addGraphic(graphic)
  }
  
  function addDemoGraphic7(graphicLayer) {
    const graphic = new mars3d.graphic.CylinderEntity({
      position: [116.2, 30.9, 1000],
      style: {
        length: 3000.0,
        topRadius: 0.0,
        bottomRadius: 1300.0,
        color: "#00FFFF",
        opacity: 0.7
      },
      popup: "直接传参的popup",
      attr: { remark: "示例7" }
    })
    graphicLayer.addGraphic(graphic)
  }
  
  //
  function addDemoGraphic8(graphicLayer) {
    const graphic = new mars3d.graphic.EllipsoidEntity({
      position: new mars3d.LngLatPoint(116.3, 30.9, 1000),
      style: {
        radii: new Cesium.Cartesian3(1500.0, 1500.0, 1500.0),
        material: Cesium.Color.RED.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.WHITE.withAlpha(0.3)
      },
      attr: { remark: "示例8" }
    })
    graphicLayer.addGraphic(graphic)
  }
  
  function addDemoGraphic9(graphicLayer) {
    const graphic = new mars3d.graphic.ModelEntity({
      name: "消防员",
      position: [116.4, 30.9, 1000],
      style: {
        url: "//data.mars3d.cn/gltf/mars/firedrill/xiaofangyuan-run.gltf",
        scale: 16,
        minimumPixelSize: 100
      },
      attr: { remark: "示例9" }
    })
    graphicLayer.addGraphic(graphic)
  }
  
  function addDemoGraphic10(graphicLayer) {
    const graphic = new mars3d.graphic.PolylineEntity({
      positions: [
        [116.5, 30.9, 1000],
        [116.52, 30.91, 1000],
        [116.53, 30.89, 1000]
      ],
      style: {
        width: 5,
        color: "#3388ff"
      },
      attr: { remark: "示例10" }
    })
    graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
  }
  
  function addDemoGraphic11(graphicLayer) {
    const graphic = new mars3d.graphic.PolylineVolumeEntity({
      positions: [
        [116.1, 30.8, 1000],
        [116.12, 30.81, 1000],
        [116.13, 30.79, 1000]
      ],
      style: {
        shape: "pipeline",
        radius: 80,
        color: "#3388ff",
        opacity: 0.9
      },
      attr: { remark: "示例11" }
    })
    graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
  }
  
  function addDemoGraphic12(graphicLayer) {
    const graphic = new mars3d.graphic.CorridorEntity({
      positions: [
        [116.2, 30.8, 1000],
        [116.22, 30.81, 1000],
        [116.23, 30.79, 1000],
        [116.247328, 30.806077, 610.41]
      ],
      style: {
        width: 500,
        color: "#3388ff"
      },
      attr: { remark: "示例12" }
    })
    graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
  }
  
  function addDemoGraphic13(graphicLayer) {
    const graphic = new mars3d.graphic.WallEntity({
      positions: [
        [116.3, 30.8, 1000],
        [116.31, 30.81, 1000],
        [116.334639, 30.800735, 721.39],
        [116.32, 30.79, 1000]
      ],
      style: {
        closure: true,
        diffHeight: 500,
        // 动画线材质
        material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
          image: "img/textures/fence.png",
          color: "#00ff00",
          speed: 10,
          axisY: true
        })
      },
      attr: { remark: "示例13" }
    })
    graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
  }
  
  function addDemoGraphic14(graphicLayer) {
    const graphic = new mars3d.graphic.RectangleEntity({
      positions: [
        [116.383144, 30.819978, 444.42],
  
        [116.42216, 30.793431, 1048.07]
      ],
      style: {
        color: "#3388ff",
        opacity: 0.5,
        outline: true,
        outlineWidth: 3,
        outlineColor: "#ffffff"
      },
      attr: { remark: "示例14" }
    })
    graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
  }
  
  function addDemoGraphic15(graphicLayer) {
    const graphic = new mars3d.graphic.PolygonEntity({
      positions: [
        [116.510278, 30.834372, 567.29],
        [116.530085, 30.809331, 448.31],
        [116.507367, 30.788551, 98.21],
        [116.472468, 30.823091, 677.39]
      ],
      style: {
        material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.Water, {
          normalMap: "img/textures/waterNormals.jpg", // 水正常扰动的法线图
          frequency: 8000.0, // 控制波数的数字。
          animationSpeed: 0.02, // 控制水的动画速度的数字。
          amplitude: 5.0, // 控制水波振幅的数字。
          specularIntensity: 0.8, // 控制镜面反射强度的数字。
          baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
          blendColor: "#006ab4" // 从水中混合到非水域时使用的rgba颜色对象。
        })
      },
      attr: { remark: "示例15" }
    })
    graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
  }
  
  // 在图层级处理一些事物
  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)
    }) */
  }
  
  // 绑定右键菜单
  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)
        }
      },
      {
        text: "计算长度",
        icon: "fa fa-medium",
        show: function (e) {
          const graphic = e.graphic
          if (!graphic) {
            return false
          }
          return (
            graphic.type === "polyline" ||
            graphic.type === "polylineP" ||
            graphic.type === "curve" ||
            graphic.type === "curveP" ||
            graphic.type === "polylineVolume" ||
            graphic.type === "polylineVolumeP" ||
            graphic.type === "corridor" ||
            graphic.type === "corridorP" ||
            graphic.type === "wall" ||
            graphic.type === "wallP"
          )
        },
        callback: function (e) {
          const graphic = e.graphic
          const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
          globalAlert("该对象的长度为:" + strDis)
        }
      },
      {
        text: "计算周长",
        icon: "fa fa-medium",
        show: function (e) {
          const graphic = e.graphic
          if (!graphic) {
            return false
          }
          return (
            graphic.type === "circle" ||
            graphic.type === "circleP" ||
            graphic.type === "rectangle" ||
            graphic.type === "rectangleP" ||
            graphic.type === "polygon" ||
            graphic.type === "polygonP"
          )
        },
        callback: function (e) {
          const graphic = e.graphic
          const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
          globalAlert("该对象的周长为:" + strDis)
        }
      },
      {
        text: "计算面积",
        icon: "fa fa-reorder",
        show: function (e) {
          const graphic = e.graphic
          if (!graphic) {
            return false
          }
          return (
            graphic.type === "circle" ||
            graphic.type === "circleP" ||
            graphic.type === "rectangle" ||
            graphic.type === "rectangleP" ||
            graphic.type === "polygon" ||
            graphic.type === "polygonP" ||
            graphic.type === "scrollWall" ||
            graphic.type === "water"
          )
        },
        callback: function (e) {
          const graphic = e.graphic
          const strArea = mars3d.MeasureUtil.formatArea(graphic.area)
          globalAlert("该对象的面积为:" + strArea)
        }
      }
    ])
  }
  
  // 在图层绑定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 })
    })
  }
  