import * as mars3d from "mars3d"

export let map // mars3d.Map三维地图对象

// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
  scene: {
    center: { lat: 31.314417, lng: 118.82149, alt: 78939, heading: 358, pitch: -46 }
  }
}

/**
 * 初始化地图业务，生命周期钩子函数（必须）
 * 框架在地图初始化完成后自动调用该函数
 * @param {mars3d.Map} mapInstance 地图对象
 * @returns {void} 无
 */
export function onMounted(mapInstance) {
  map = mapInstance // 记录map

  map.basemap = 2017

  // 显示边界
  const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    name: "南京市",
    url: "//data.mars3d.cn/file/geojson/areas/320100_full.json",
    symbol: {
      type: "wall",
      styleOptions: {
        diffHeight: 800, // 墙高
        materialType: mars3d.MaterialType.LineFlow,
        speed: 10, // 速度
        image: "img/textures/fence.png", // 图片
        repeatX: 1, // 重复数量
        axisY: true, // 竖直方向
        color: "#00ffff", // 颜色
        opacity: 0.6, // 透明度
        outline: false,
        label: {
          text: "{name}",
          font_size: 18,
          color: "#ffffff",
          distanceDisplayCondition: true,
          distanceDisplayCondition_far: 500000,
          distanceDisplayCondition_near: 0,

          position: "center",
          setHeight: 900
        }
      }
    },
    popup: "{name}"
  })
  map.addLayer(geoJsonLayer)

  // 显示高校点
  mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/apidemo/gaoxiao.json" })
    .then(function (res) {
      addFeature(res)
    })
    .catch(function (error) {
      console.log("加载JSON出错", error)
    })
}

/**
 * 释放当前地图业务的生命周期函数
 * @returns {void} 无
 */
export function onUnmounted() {
  map = null
}

function addFeature(arr) {
  const pointColorArr = ["#f33349", "#f79a2c", "#f2fa19", "#95e40c", "#1ffee6"]

  // 创建DIV数据图层
  const graphicLayer = new mars3d.layer.GraphicLayer()
  map.addLayer(graphicLayer)

  // 在layer上绑定监听事件
  graphicLayer.on(mars3d.EventType.click, function (event) {
    console.log("监听layer，单击了矢量对象", event)

    const item = event.graphic.attr
    globalMsg("单击了：" + item["高校名称"])
  })

  graphicLayer.bindPopup(function (event) {
    const item = event.graphic.attr
    if (!item) {
      return false
    }
    const html =
      "高校名称：" +
      item["高校名称"] +
      "<br />所属地区：" +
      item["地区"] +
      "<br />主管部门：" +
      item["主管部门"] +
      "<br />办学层次：" +
      item["办学层次"] +
      "<br />王牌专业：" +
      item["王牌专业"]
    return html
  })

  for (let i = 0, len = arr.length; i < len; i++) {
    const item = arr[i]
    const postions = item["经纬度"].split(",") // 取到经纬度坐标
    if (postions.length !== 2) {
      continue
    }

    const lng = Number(postions[0])
    const lat = Number(postions[1])
    const pointColor = pointColorArr[i % pointColorArr.length]

    const graphic = new mars3d.graphic.DivLightPoint({
      position: Cesium.Cartesian3.fromDegrees(lng, lat),
      style: {
        color: pointColor,
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000) // 按视距距离显示
      },
      attr: item
    })
    graphicLayer.addGraphic(graphic)
  }
}