【mars3d】实现线面内插值计算效果

面插值计算效果展示：

（离屏渲染方式）面插值效果展示：

面内插值计算插点效果展示：

线插值效果展示：

（离屏渲染方式）高密度线内插值计算效果展示：

相关代码：

import * as mars3d from "mars3d"

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

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

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

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

export function removeAll() {
  map.graphicLayer.clear()

  clearInterResult()
}

/**
 * 面插值
 *
 * @export
 * @param {number} val 步长
 * @returns {void}
 */
export async function interPolygon(val) {
  const graphic = await map.graphicLayer.startDraw({
    type: "polygon",
    style: {
      color: "#29cf34",
      opacity: 0.3,
      outline: true,
      outlineColor: "#ffffff",
      clampToGround: true
    }
  })
  const positions = graphic.positionsShow
  map.graphicLayer.clear()

  const resultInter = await mars3d.PolyUtil.interPolygon({
    scene: map.scene,
    positions,
    splitNum: val // splitNum插值分割的个数
  })
  showInterPolygonResult(resultInter.list)
}
function showInterPolygonResult(list) {
  clearInterResult() // 分析结果用于测试分析的，不做太多处理，直接清除之前的，只保留一个

  let pt1, pt2, pt3
  const arrData = []
  for (let i = 0, len = list.length; i < len; i++) {
    const item = list[i]

    pt1 = item.point1.pointDM
    pt2 = item.point2.pointDM
    pt3 = item.point3.pointDM

    // 点
    for (const pt of [item.point1, item.point2, item.point3]) {
      const graphic = new mars3d.graphic.PointPrimitive({
        position: pt.pointDM,
        style: {
          pixelSize: 9,
          color: Cesium.Color.fromCssColorString("#ff0000").withAlpha(0.5)
        }
      })
      interGraphicLayer.addGraphic(graphic)

      graphic.bindTooltip("点高度:" + mars3d.MeasureUtil.formatDistance(pt.height))
    }

    // 横截面面积
    item.area = item.area || mars3d.MeasureUtil.getTriangleArea(pt1, pt2, pt3)
    item.index = i

    // 三角网及边线
    arrData.push({
      positions: [pt1, pt2, pt3, pt1],
      style: {
        color: Cesium.Color.fromRandom({ alpha: 0.6 })
      },
      attr: item
    })
  }

  // 三角网面（单击用）
  const primitivePoly = new mars3d.graphic.PolygonCombine({
    instances: arrData,
    highlight: {
      type: mars3d.EventType.click,
      color: Cesium.Color.YELLOW.withAlpha(0.9)
    }
  })
  interGraphicLayer.addGraphic(primitivePoly)

  primitivePoly.bindTooltip(function (event) {
    const item = event.pickedObject?.data?.attr
    if (!item) {
      return
    }

    return "三角面积:" + mars3d.MeasureUtil.formatArea(item.area) + "(第" + item.index + "个)"
  })

  // 三角网边线
  const primitiveLine = new mars3d.graphic.PolylineCombine({
    instances: arrData,
    highlight: {
      type: mars3d.EventType.click,
      color: Cesium.Color.YELLOW.withAlpha(0.9)
    }
  })
  interGraphicLayer.addGraphic(primitiveLine)
}

export async function interPolygonGrid(val) {
  clearInterResult()

  const graphic = await map.graphicLayer.startDraw({
    type: "polygon",
    style: {
      color: "#29cf34",
      opacity: 0.3,
      outline: true,
      outlineColor: "#ffffff"
    }
  })
  const positions = graphic.positionsShow
  map.graphicLayer.clear()

  const result = mars3d.PolyUtil.getGridPointsByPoly(positions, val)
  result.forEach((p, i) => {
    const graphic = new mars3d.graphic.PointPrimitive({
      position: p,
      style: {
        color: "#ff0000",
        pixelSize: 6
      }
    })
    interGraphicLayer.addGraphic(graphic)
  })
}

/**
 * 面插值
 *
 * @export
 * @param {number} val 步长
 * @returns {void}
 */
export async function interPolygonByDepth(val) {
  const graphic = await map.graphicLayer.startDraw({
    type: "polygon",
    style: {
      color: "#29cf34",
      opacity: 0.3,
      outline: true,
      outlineColor: "#ffffff",
      clampToGround: true
    }
  })
  const positions = graphic.positionsShow
  map.graphicLayer.clear()

  updateAllGraphicShow(map, false)
  const resultInter = await mars3d.PolyUtil.interPolygonByDepth({
    scene: map.scene,
    positions,
    splitNum: val // splitNum插值分割的个数
  })
  updateAllGraphicShow(map, true)
  showInterPolygonByDepthResult(resultInter)
}
function showInterPolygonByDepthResult(resultInter) {
  clearInterResult() // 分析结果用于测试分析的，不做太多处理，直接清除之前的，只保留一个

  const arrData = []
  for (let i = 0, len = resultInter.count; i < len; i++) {
    const position = resultInter.positions[i]

    // const graphic = new mars3d.graphic.PointPrimitive({
    //   position: position,
    //   style: {
    //     pixelSize: 9,
    //     color: Cesium.Color.fromCssColorString("#ff0000").withAlpha(0.5)
    //   }
    // })
    // interGraphicLayer.addGraphic(graphic)
    // graphic.bindTooltip("点高度:" + mars3d.MeasureUtil.formatDistance(position.height))

    arrData.push({
      positions: position.getOutline(),
      style: {
        color: Cesium.Color.fromRandom({ alpha: 0.4 })
      },
      attr: { height: position.height, index: i }
    })
  }

  const primitivePoly = new mars3d.graphic.PolygonCombine({
    instances: arrData,
    highlight: {
      type: mars3d.EventType.click,
      color: Cesium.Color.YELLOW.withAlpha(0.9)
    }
  })
  interGraphicLayer.addGraphic(primitivePoly)

  primitivePoly.bindTooltip(function (event) {
    const item = event.pickedObject?.data?.attr
    if (!item) {
      return
    }

    return "点高度:" + mars3d.MeasureUtil.formatDistance(item.height) + "(第" + item.index + "个)"
  })
}

// 线插值
export async function interPolyline(val) {
  const graphic = await map.graphicLayer.startDraw({
    type: "polyline",
    style: {
      color: "#55ff33",
      width: 3,
      clampToGround: true
    }
  })
  const positions = graphic.positionsShow
  map.graphicLayer.clear()

  const arrLine = mars3d.PolyUtil.interPolyline({
    scene: map.scene,
    positions,
    splitNum: val // 插值分割的个数
  })

  showInterLineResult(arrLine)
}

// 高度等分
export async function interLine(val) {
  const graphic = await map.graphicLayer.startDraw({
    type: "polyline",
    style: {
      color: "#55ff33",
      width: 3
    }
  })
  const positions = graphic.positionsShow
  map.graphicLayer.clear()

  const arrLine = mars3d.PolyUtil.interLine(positions, {
    splitNum: val // 插值分割的个数
  })

  showInterLineResult(arrLine)
}

export async function interLineByDepth(val) {
  const graphic = await map.graphicLayer.startDraw({
    type: "polyline",
    style: {
      color: "#55ff33",
      width: 3
    }
  })
  const positions = graphic.positionsShow
  map.graphicLayer.clear()

  updateAllGraphicShow(map, false)

  const resultInter = await mars3d.PolyUtil.interPolylineByDepth({
    scene: map.scene,
    positions,
    splitNum: val // 插值分割的个数
  })
  updateAllGraphicShow(map, true)
  showInterLineResult(resultInter.positions)
}

// 显示影藏矢量数据
function updateAllGraphicShow(map, show) {
  map.eachLayer((layer) => {
    if (layer.type === "graphic") {
      layer.show = show
    }
  })
}

// 显示mars3d.polygon.interPolygon处理后的面内插值分析结果，主要用于测试对比
// 显示面的插值计算结果，方便比较分析
let interGraphicLayer
function clearInterResult() {
  if (!interGraphicLayer) {
    interGraphicLayer = new mars3d.layer.GraphicLayer()
    map.addLayer(interGraphicLayer)
  }

  interGraphicLayer.clear()
}

//
function showInterLineResult(list) {
  clearInterResult() // 分析结果用于测试分析的，不做太多处理，直接清除之前的，只保留最后一个

  const colorList = [Cesium.Color.fromCssColorString("#ffff00"), Cesium.Color.fromCssColorString("#00ffff")]

  const arrData = []
  for (let i = 1, len = list.length; i < len; i++) {
    const pt1 = list[i - 1]
    const pt2 = list[i]

    const color = colorList[i % 2]

    arrData.push({
      positions: [pt1, pt2],
      style: {
        width: 3,
        color,
        depthFailColor: color
      },
      attr: {
        distance: Cesium.Cartesian3.distance(pt1, pt2),
        index: i
      }
    })
  }

  const primitiveLine = new mars3d.graphic.PolylineCombine({
    instances: arrData,
    highlight: {
      type: mars3d.EventType.click,
      color: Cesium.Color.RED
    }
  })
  interGraphicLayer.addGraphic(primitiveLine)

  primitiveLine.bindTooltip(function (event) {
    const item = event.pickedObject?.data?.attr
    if (!item) {
      return
    }
    return "长度:" + mars3d.MeasureUtil.formatDistance(item.distance) + "(第" + item.index + "个)"
  })
}