阅读量:0
面插值计算效果展示：
（离屏渲染方式）面插值效果展示：
面内插值计算插点效果展示：
线插值效果展示：
（离屏渲染方式）高密度线内插值计算效果展示：
相关代码：
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 + "个)" }) } 