首页 / 浏览问题 / 三维GIS / 问题详情
cesium绘制点线面
98EXP 2018年01月31日
cesium中,第二次绘制点线面,就清除掉上一次的绘制图形了,有什么办法可以保留上一次的吗?

1个回答

您好,您可以通过entities保存您绘制的点线面。

示例可以参考:http://support.supermap.com.cn:8090/webgl/examples/editor.html#Polyline

核心代码例:

        var redLine = viewer.entities.add({
            name : 'Red line on the surface',
            polyline : {
                positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                                -125, 35]),
                width : 5,
                material : Cesium.Color.RED
            }
        });

5,560EXP 2018年01月31日

能否说的详细点,我想通过鼠标绘制多个点,但是每次重新绘制的时候都要执行删除所有点程序

viewer.entities.removeAll();,否则会出错,应该怎么编译可以绘制多个点

这个问题的解决,是通过设置的一个新的按钮,这个按钮用来保存之前绘制的点,因为鼠标点击事件每次点击必须要执行viewer.entities.removeAll();这句话,但是将每次鼠标左键点击的位置坐标保存下来,设置一个保存按钮进行绘制鼠标左键点击过的点。另附代码:

//位置数组
var positions_lon = [];
var positions_lat = [];
var positions_hgt = [];
//标注按钮点击事件
label_btn = document.getElementById('label');
label_btn.onclick = function () {
    var display = document.getElementById('label_div').style.display;
    if (display == 'block') {
        document.getElementById('label_div').style.display = 'none';
    } else {
        document.getElementById('label_div').style.display = 'block';
    }
}
//新建标注按钮点击事件
add_btn = document.getElementById('add_label');
//鼠标监听事件
var label_left = new Cesium.ScreenSpaceEventHandler(scene.canvas);
add_btn.onclick = function () {
    var display = document.getElementById('label_information').style.display;
    if (display == 'block') {
        document.getElementById('label_information').style.display = 'none';
    } else {
        document.getElementById('label_information').style.display = 'block';
    }
    //设置鼠标左键单击回调事件
    label_left.setInputAction(function (e) {
        //首先移除之前添加的点
        viewer.entities.removeAll();
        //获取点击位置笛卡尔坐标
        var position = scene.pickPosition(e.position);
        //将笛卡尔坐标转化为经纬度坐标
        var cartographic = Cesium.Cartographic.fromCartesian(position);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
        var height = cartographic.height;
        if (height < 0) {
            height = 0;
        }
        positions_lon.push(longitude);
        positions_lat.push(latitude);
        positions_hgt.push(height);
        //在点击位置添加对应点
        viewer.entities.add(new Cesium.Entity({
            id: "temporary",
            point: new Cesium.PointGraphics({
                color: new Cesium.Color(1, 1, 0),
                pixelSize: 10,
                outlineColor: new Cesium.Color(0, 1, 1)
            }),
            position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 0.5)
        }));
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
//保存按钮点击事件
var label_save;
var points = [];
label_save = document.getElementById('label_save');
label_save.onclick = function(){
    for(var i = 0; i < positions_lon.length; i++){
        points[i] = viewer.entities.add({
            id : i,
            point:new Cesium.PointGraphics({
                color: new Cesium.Color(1, 1, 0),
                pixelSize: 10,
                outlineColor: new Cesium.Color(0, 1, 1)
            }),
            position : Cesium.Cartesian3.fromDegrees(positions_lon[i], positions_lat[i], positions_hgt[i] + 0.5)
        });
    };
};

...