功能的使用非常直接。地图加载完成后，用户只需点击地图选择起点，再次点击选择终点，系统就会自动生成两点之间的连线。这条连线不仅是地理位置的连接，更是后续地形剖面分析的计算依据。在分析过程中，系统会对起点和终点之间的路径进行高精度采样，获取沿线每个位置的海拔数据。通过这些数据，我们可以准确绘制出该路径的地形切线，直观反映沿途的坡度、起伏和高度差。技术上，该功能依托精确的地理数据和高效的空间计算算法，实现了毫秒级的数据处理和渲染。即使在大范围高密度采样的情况下，也能保持流畅的用户体验，让分析过程几乎无等待感。交互式点选系统 async function activatePickLine() { const pickHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); const picked = []; // 鼠标移动时更新提示标签 pickHandler.setInputAction((movement) => { tooltip.style.display = 'block'; tooltip.style.left = (movement.endPosition.x + 15) + 'px'; tooltip.style.top = (movement.endPosition.y - 10) + 'px'; if (picked.length === 0) { tooltip.textContent = '请左键单击地图选择起点'; } else if (picked.length === 1) { tooltip.textContent = '请左键单击地图选择终点'; } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 左键点击选择点 pickHandler.setInputAction(async (movement) => { const ray = viewer.camera.getPickRay(movement.position); const cart = viewer.scene.globe.pick(ray, viewer.scene); // ... 处理选点逻辑 }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } 地形高度获取 function getTerrainHeight(longitude, latitude) { return new Promise((reslove) => { Cesium.sampleTerrain(viewer.terrainProvider, 11, [Cesium.Cartographic.fromDegrees(longitude, latitude)]) .then(function (updatedPositions) { const height = updatedPositions[0].height; reslove(Cesium.Cartesian3.fromDegrees(longitude, latitude, height)) }); }) } 路径插值 function interpolatePoints(start, end) { // 计算两点之间的距离 const distance = Cesium.Cartesian3.distance(start, end); const result = [start]; // 结果数组，包含起点 // 如果距离大于100米，则进行插值 if (distance > 100) { const steps = Math.floor(distance / 100); // 计算需要插入的点数 // 在起点和终点之间插入点 for (let i = 1; i <= steps; i++) { const fraction = (i * 100) / distance; // 线性插值计算新点 const newPoint = Cesium.Cartesian3.lerp(start, end, fraction, new Cesium.Cartesian3()); result.push(newPoint); } } result.push(end); // 添加终点 return result; } 地形剖面数据生成 async function getPathWithTerrainHeights(start, end, viewer) { // 1. 首先进行插值计算路径点 const interpolatedPoints = interpolatePoints(start, end); // 2. 将笛卡尔坐标转换为经纬度用于查询地形高度 const cartographics = interpolatedPoints.map(point => Cesium.Cartographic.fromCartesian(point) ); // 3. 批量获取地形高度 const updatedPositions = await Cesium.sampleTerrain( viewer.terrainProvider, 11, // 最大细节层级 cartographics ); return updatedPositions; } ECarts图表可视化 function initCharts(arr3) { var myChart = echarts.init(document.getElementById('table')); let name = [] let data = [] // 提取高度数据 arr3.forEach((k, i) => { data.push(k.height) name.push(i) }) var option = { xAxis: { type: 'category', boundaryGap: false, data: name }, yAxis: { type: 'value' }, series: [{ data: data, type: 'line', areaStyle: {} }] }; myChart.setOption(option); } 实体可视化 // 添加起点标记 viewer.entities. add({ name: '起点', position: start, point: { pixelSize: 12, color: Cesium.Color.CYAN, outlineColor: Cesium.Color.WHITE, outlineWidth: 3, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND }, label: { text: '起点', font: '16pt "Microsoft YaHei"' } }); // 添加连接线 viewer.entities. add({ polyline: { positions: [start, end], width: 4, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.2, color: Cesium.Color.YELLOW }), clampToGround: true } });

地形剖面：Cesium一键生成高程剖面图

vip168

功能的使用非常直接。地图加载完成后，用户只需点击地图选择起点，再次点击选择终点，系统就会自动生成两点之间的连线。这条连线不仅是地理位置的连接，更是后续地形剖面分析的计算依据。

在分析过程中，系统会对起点和终点之间的路径进行高精度采样，获取沿线每个位置的海拔数据。通过这些数据，我们可以准确绘制出该路径的地形切线，直观反映沿途的坡度、起伏和高度差。

技术上，该功能依托精确的地理数据和高效的空间计算算法，实现了毫秒级的数据处理和渲染。即使在大范围高密度采样的情况下，也能保持流畅的用户体验，让分析过程几乎无等待感。

交互式点选系统

async function activatePickLine() {
    const pickHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    const picked = [];
    

// 鼠标移动时更新提示标签
pickHandler.setInputAction((movement) => {
    tooltip.style.display = 'block';
    tooltip.style.left = (movement.endPosition.x + 15) + 'px';
    tooltip.style.top = (movement.endPosition.y - 10) + 'px';
    
    if (picked.length === 0) {
        tooltip.textContent = '请左键单击地图选择起点';
    } else if (picked.length === 1) {
        tooltip.textContent = '请左键单击地图选择终点';
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

// 左键点击选择点
pickHandler.setInputAc

此内容登录或注册后可见