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

汪洪墩2024-08-03 8:54

面插值计算效果展示：

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

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

线插值效果展示：

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

相关代码：

复制代码 
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 + "个)"
  })
}
相关推荐
hongkid8 分钟前
React Native 如何打包正式apk
javascript·react native·react.js
李少兄11 分钟前
简单讲讲 SVG：前端开发中的矢量图形
前端·svg
前端小万12 分钟前
告别 CJS 库加载兼容坑
前端·前端工程化
恋猫de小郭12 分钟前
Flutter 3.38.1 之后，因为某些框架低级错误导致提交 Store 被拒
android·前端·flutter
JarvanMo16 分钟前
Flutter 需要 Hooks 吗？
前端
光影少年26 分钟前
前端如何虚拟列表优化？
前端·react native·react.js
Moment28 分钟前
一杯茶时间带你基于 Yjs 和 reactflow 构建协同流程图编辑器 😍😍😍
前端·后端·面试
菩提祖师_42 分钟前
量子机器学习在时间序列预测中的应用
开发语言·javascript·爬虫·flutter
invicinble1 小时前
对于前端数据的生命周期的认识
前端
PieroPc1 小时前
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
前端·html·fastapi
热门推荐
01GitHub 镜像站点02手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04jdk21下载、安装（Windows、Linux、macOS）05Linux下V2Ray安装配置指南062025 最新教程：注册并切换到美区 Apple ID07Claude Code Skills 实用使用手册08UV安装并设置国内源09Labelme从安装到标注：零基础完整指南10GitLab 零基础入门指南：从安装到项目管理全流程