Cesium实现文字点多段线多边形的实时绘制

Posted sunyzblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Cesium实现文字点多段线多边形的实时绘制相关的知识,希望对你有一定的参考价值。

背景知识

点、线、面以及文字的实时绘制是GIS很重要的一个功能,是用户对感兴趣区域标注的业务需要。同时Cesium提供了点、线(多段线)、面及文字(label)绘制的接口绘制方式总共有两种,一种是通过Entity实体的方式,一种是通过Primitives的方式。第一种使用较为简单,是在Primitives基础上进行了封装;第二种则更加贴近WebGL底层,语法更复杂但是绘制效率更高效率。鉴于实时绘制数据量并不大,不需要使用复杂高效的方法,第一种方法完全适用。

Cesium通过ScreenSpaceEventHandler方法添加鼠标监听,包括鼠标的移动、点击等,同时会把鼠标的位置信息以回调函数方式返回。通过监听用户鼠标状态实现矢量图形及文字注记的位置记录。

CallbackProperty监听:当变量变化时触发该监听,通过监听鼠标拾取坐标的变化实现动态绘制。

代码实现

记录点位

var location = {
    latitude: 0,
    longitude: 0,
    height: 0,
    endPosition: null,
    cartesian : null
};
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
    //记录移动位置
    location.endPosition = viewer.scene.pickPosition(movement.endPosition);
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);

viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
    var cartesian = viewer.scene.pickPosition(movement.position);
    //记录点击位置
    location.cartesian = cartesian;
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    location.latitude = Cesium.Math.toDegrees(cartographic.latitude);
    location.longitude = Cesium.Math.toDegrees(cartographic.longitude);
    location.height = cartographic.height;
},Cesium.ScreenSpaceEventType.LEFT_CLICK);

绘制文字注记

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function(movement) {
        var label = new Cesium.Entity({
            position : Cesium.Cartesian3.fromDegrees(location.longitude, location.latitude,location.height),
            name : ‘label‘,
            label:{
                text: ‘文字‘,
                font: ‘24px Helvetica‘,
                fillColor: Cesium.Color.SKYBLUE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 200, 0.4)
            }
        });
        viewer.entities.add(label);
        featureCollection.push(label);
        handler.destroy();
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});

绘制点

document.getElementById(‘point‘).onclick = function () {
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function(movement) {
        var label = new Cesium.Entity({
            position : Cesium.Cartesian3.fromDegrees(location.longitude, location.latitude,location.height),
            name : ‘point‘,
            point:{
                outlineColor: Cesium.Color.BLACK,
            }
        });
        viewer.entities.add(label);
        featureCollection.push(label);
        handler.destroy();
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};

绘制多段线

function drawPolyline() {
    var floatingPoint;
    var activePolyline;
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function(click) {
        //var position = viewer.scene.pickPosition(click.position);
        if(Cesium.defined(location.cartesian)){
            var cartesian = location.cartesian;
            if(activeShapePoints.length === 0){
                floatingPoint = creatPoint(cartesian);
                activeShapePoints.push(cartesian);
                var dynamicPositions = new Cesium.CallbackProperty(function() {
                    return activeShapePoints;
                },false);
                activePolyline = createPolyline(dynamicPositions);
            }
            activeShapePoints.push(cartesian);
            creatPoint(cartesian);
        }
    },Cesium.ScreenSpaceEventType.LEFT_CLICK);
    handler.setInputAction(function(movement) {
        if(Cesium.defined(floatingPoint)){
            if(Cesium.defined(location.endPosition)){
                floatingPoint.position.setValue(location.endPosition);
                activeShapePoints.pop();
                activeShapePoints.push(location.endPosition);
            }
        }
    },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    handler.setInputAction(function(movement) {
        handler.destroy();
        for(var i=0;i<Points.length;i++){
            viewer.entities.remove(Points[i]);
        }
        Points = [];
    },Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

    function createPolyline(positionData) {
        var polyline;
        polyline = viewer.entities.add({
            name : ‘polyline‘,
            polyline : {
                positions : positionData,
                //在地形上绘制多段线,但是在3dtilset模型上无效
                clampToGround : false,
                followSurface : false,
                material: Cesium.Color.RED,
                width : 3
            }
        });
        return polyline;
    }
}

绘制多边形

function drawPolygon() {
    var floatingPoint;
    var activePolygon;
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function(click) {
        var position = viewer.scene.pickPosition(click.position);
        if(Cesium.defined(location.cartesian)){
            var cartesian = location.cartesian;
            if(activeShapePoints.length === 0){
                floatingPoint = creatPoint(cartesian);
                activeShapePoints.push(cartesian);
                var dynamicPositions = new Cesium.CallbackProperty(function() {
                    return activeShapePoints;
                },false);
                activePolygon = createPolygon(dynamicPositions);
            }
            activeShapePoints.push(cartesian);
            creatPoint(cartesian);
        }
    },Cesium.ScreenSpaceEventType.LEFT_CLICK);
    handler.setInputAction(function(movement) {
        if(Cesium.defined(floatingPoint)){
            if(Cesium.defined(location.endPosition)){
                floatingPoint.position.setValue(location.endPosition);
                activeShapePoints.pop();
                activeShapePoints.push(location.endPosition);
            }
        }
    },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    handler.setInputAction(function(movement) {
        handler.destroy();
        for(var i=0;i<Points.length;i++){
            viewer.entities.remove(Points[i]);
        }
        Points = [];
    },Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    function createPolygon(positionData) {
        var polygon;
        polygon = viewer.entities.add({
            name: ‘polygon‘,
            positions : positionData,
            polygon:{
                hierarchy : positionData,
                perPositionHeight: true,
                material: Cesium.Color.RED.withAlpha(0.7),
                outline: true,
                outlineColor: Cesium.Color.YELLOW.withAlpha(1)
            }
        });
        return polygon;
    }
}

效果图

技术分享图片

 

以上是关于Cesium实现文字点多段线多边形的实时绘制的主要内容,如果未能解决你的问题,请参考以下文章

谁能提供一段vb在CAD中绘制多段线的实例代码作参考!

CAD参数绘制多段线(网页版)

多段线切割多边形

Pycomcad快速绘制参数化多段线的一种方法

vba在cad中画直线和圆弧多段线

OpenCV 例程200篇215. 基于多段线绘制近似椭圆