改造SuperMap的DrawHandler接口,自定义绘制的图形样式
阅读原文时间:2023年07月10日阅读:1

超图WebGL三维接口中有一个绘制的接口(new Cesium.DrawHandler(viewer, mode, clampMode),它封装了绘制完之后的式样,画完之后捕捉绘制完成的实体有一定的难度,而且样子也改不了,所以我对其Drawhandler的方法做了变形,只使用其绘制中的预览效果,最终画完的东西按我们自己的来,我们只抓取绘制的点。

原理是使用Drawhandler的 drawEvt,绘制完成事件的回调

handler.drawEvt.addEventListener(function(result){
console.log(result);
});

下面是改装:

 let draw =  new Cesium.DrawHandler(\_view.view, mode, \_clampMode||Cesium.ClampMode.Space);  
    draw.activate();  
    let style;  
    if(!\_style){  
        style={};  
    }else{  
        style=\_style;  
    }  
    draw.drawEvt.addEventListener(function(result){  
        let DRAWENTITY;  
        switch (mode) {  
            case Cesium.DrawMode.Polygon:case 'Cesium.DrawMode.Polygon':case '2':case 2:  
                style.polygon.hierarchy=result.object.polygon.hierarchy;  
                \_view.view.entities.remove(result.object);  
                draw.clear();  
                DRAWENTITY= \_view.view.entities.add({  
                    id:entityProperty.id||null,  
                    description:entityProperty.description||null,  
                    name:entityProperty.name||'',  
                    show:entityProperty.show||true,  
                    polygon:style.polygon  
                });  
                break;  
            case Cesium.DrawMode.Point:case 'Cesium.DrawMode.Point':case '0':case 0:  
                let pointPosition = result.object.position;  
                \_view.view.entities.remove(result.object);  
                draw.clear();  
                DRAWENTITY=\_view.view.entities.add({  
                    id:entityProperty.id||null,  
                    description:entityProperty.description||null,  
                    name:entityProperty.name||'',  
                    show:entityProperty.show||true,  
                    position:pointPosition,  
                    point:style.point  
                });  
                break;  
            case Cesium.DrawMode.Line:case 'Cesium.DrawMode.Line':case '1':case 1:  
                let lineStyle = style;  
                lineStyle.polyline.positions= result.object.positions;  
                \_view.view.entities.remove(result.object);  
                draw.clear();  
                DRAWENTITY=\_view.view.entities.add({  
                    id:entityProperty.id||null,  
                    description:entityProperty.description||null,  
                    name:entityProperty.name||'',  
                    show:entityProperty.show||true,  
                    polyline:lineStyle.polyline  
                });  
                break;  
            case Cesium.DrawMode.Marker:case 'Cesium.DrawMode.Marker':case '3':case 3:  
                if(style.billboard) {  
                    let markerPosition = result.object.position;  
                    \_view.view.entities.remove(result.object);  
                    draw.clear();  
                    DRAWENTITY=\_view.view.entities.add({  
                        id:entityProperty.id||null,  
                        description:entityProperty.description||null,  
                        name:entityProperty.name||'',  
                        show:entityProperty.show||true,  
                        position:markerPosition,  
                        billboard:style.billboard  
                    });  
                }else{  
                    DRAWENTITY=result.object  
                }  
                break;  
        }  
        if(\_drawEndcallback){  
            \_drawEndcallback(DRAWENTITY)  
        }  
        draw.deactivate();  
    });

  这样就可以在回调中抓取到绘制的实体,当然,如果不想依赖于超图的接口,因为在绘制过程中预览效果用的是绿色的线,不好看。也可以基于纯Cesium自己写一个,我写的基于原始Cesium的绘制方法在下面这个链接里:

Cesium动态绘制实体(点、标注、面、线、圆、矩形)