24bec2563ce4a3c11d668b28fab74489
Cesium专栏-测距、测面、测高(附源码下载)

Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。

关于测量


测量是一个GIS系统最基本的,也是必备的模块,网上也有很多相关开发者分享过关于Cesium测量的技术文章,风格各异,但是大同小异,只要弄清楚了原理以及方法,其实每个人都可以写出自己的测量小工具。

测距


测距其实计算两点之间的距离,这个计算方法可以使用最原始的直角三角形求斜边的方法,但是我们也可以直接使用Cesium中Cartesian3接口的distance方法。

Cesium.Cartesian3.distance(firstPoint, secondPoint);

计算方法已经有了,我们要做的就是添砖加瓦,做成一个可供用户交互的测距,并且实时显示距离长度的效果。

// 注册鼠标左击事件
viewer.screenSpaceEventHandler.setInputAction(function (clickEvent) {
    var cartesian = viewer.scene.pickPosition(clickEvent.position);
    // 如果是第一次点击
    if (positions.length == 0) {
        addPoint(cartesian); // 存储第一个点,并在点击处绘制一个点entity
        // 同时注册鼠标移动事件
    } else {
        addPoint(cartesian); // 存储第二个点,并在点击处绘制一个点entity,测量结束,注销所有的鼠标注册事件
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 注册鼠标移动事件
viewer.screenSpaceEventHandler.setInputAction(function (moveEvent) {
    var movePosition = viewer.scene.pickPosition(moveEvent.endPosition); // 鼠标移动的点
    if (positions.length == 1) {
        // 存储第二个点
        positions.push(movePosition);
        // 绘制线
        addLine(positions);
    } else {
        positions.pop(); // 移除上次鼠标经过的点
        positions.push(movePosition); // 存储这次鼠标经过的点
        // 计算中点
        var centerPoint = Cesium.Cartesian3.midpoint(positions[0], positions[1], new Cesium.Cartesian3());
        // 计算距离
        var lengthText = "距离:" + getLengthText(positions[0], positions[1]);
        // 绘制距离长度标签
        labelEntity = addLabel(centerPoint, lengthText);
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

测面


测面积,也就是计算至少三个点构成的任意多边形的面积,可以使用拆分三角曲面的方法计算每一个小三角形的面积,然后累加得到任意多边形的面积。由于多边形点的个数是至少3个,所以我们还要比测距多一个结束注册事件,可以双击结束,也可以右击结束。

// 注册鼠标左击事件
viewer.screenSpaceEventHandler.setInputAction(function (clickEvent) {
    var cartesian = viewer.scene.pickPosition(clickEvent.position);
    if (positions.length == 0) {
        positions.push(cartesian.clone()); //鼠标左击 添加第1个点
        addPoint(cartesian);
        // 注册鼠标移动事件
    } else if (positions.length == 2) {
        positions.pop();
        positions.push(cartesian.clone()); // 鼠标左击 添加第2个点
        addPoint(cartesian);
        addPolyGon(positions); // 绘制面
        // 注册鼠标右击结束事件

    } else if (positions.length >= 3) {
        positions.pop();
        positions.push(cartesian.clone()); // 鼠标左击 添加第3个点
        addPoint(cartesian);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 注册鼠标移动事件
viewer.screenSpaceEventHandler.setInputAction(function (moveEvent) {
    var movePosition = viewer.scene.pickPosition(moveEvent.endPosition);
    if (positions.length == 1) {
        positions.push(movePosition);
        addLine(positions);
    } else {
        positions.pop();
        positions.push(movePosition);
    }
    if (positions.length >= 3) {
        var text = "面积:" + getArea(positions);
        // 获取面积的重心
        var centerPoint = getCenterOfGravityPoint(positions);
        // 绘制label
        addLabel(centerPoint, text);
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

```
// 注册鼠标右击结束事件
viewer.screenSpaceEventHandler.setInputAction(function (clickEvent) {

var clickPosition = viewer.scene.pickPosition(clickEvent.position);
top Created with Sketch.