import * as mars3d from "mars3d"

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

const pointStyle = {
  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  scale: 1,
  scaleByDistance: true,
  scaleByDistance_far: 20000,
  scaleByDistance_farValue: 0.7,
  scaleByDistance_near: 1000,
  scaleByDistance_nearValue: 1,
  clampToGround: true
}

export const mapOptions = {
  scene: {
    center: { lat: 31.967015, lng: 117.316406, alt: 9150, heading: 206, pitch: -42 },
    fxaa: true
  }
}

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

  pointLayer = new mars3d.layer.GeoJsonLayer({
    name: "体育设施点",
    url: "//data.mars3d.cn/file/geojson/hfty-point.json",
    symbol: {
      styleOptions: {
        ...pointStyle,
        image: "img/marker/mark3.png"
      }
    },
    popup: "{项目名称}",
    zIndex: 10
  })
  map.addLayer(pointLayer)

  // 创建矢量数据图层
  graphicLayer = new mars3d.layer.GraphicLayer({
    zIndex: 20
  })
  map.addLayer(graphicLayer)

  // 地球点击事件
  map.on(mars3d.EventType.click, (e) => {
    clickPoint(e.cartesian)
  })
}

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

function clickPoint(position) {
  if (pointLayer.length === 0) {
    globalMsg("正在加载数据,请稍等......")
    return
  }

  graphicLayer.clear()

  // 生成查询点
  const queryPoint = new mars3d.graphic.BillboardEntity({
    position: position,
    style: {
      ...pointStyle,
      image: "img/marker/start.png"
    },
    popup: "查询点"
  })
  graphicLayer.addGraphic(queryPoint)

  // turf分析
  const targetPoint = queryPoint.toGeoJSON()
  const points = pointLayer.toGeoJSON()
  const nearest = turf.nearestPoint(targetPoint, points)
  if (!nearest) {
    return
  }

  const nearestPoint = mars3d.Util.geoJsonToGraphics(nearest)[0]

  // 连线
  const polyline = new mars3d.graphic.PolylineEntity({
    positions: [position, nearestPoint.position],
    style: {
      width: 5,
      clampToGround: true,
      material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
        color: "rgba(89,249,255,0.8)",
        image: "img/textures/line-tarans.png",
        speed: 8
      })
    }
  })
  graphicLayer.addGraphic(polyline)

  // 终点
  const endPoint = new mars3d.graphic.CircleEntity({
    position: nearestPoint.position,
    style: {
      radius: polyline.distance / 10,
      height: 40,
      material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.CircleWave, {
        color: "#00ffff",
        count: 2,
        speed: 20
      })
    },
    popup: "最近的体育场所是:<br />" + nearestPoint.attr["项目名称"]
  })
  graphicLayer.addGraphic(endPoint)
  endPoint.openPopup()
}

export function clearAll() {
  graphicLayer.clear()
}