改造SuperMap的DrawHandler接口,自定義繪制的圖形樣式


超圖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動態繪制實體(點、標注、面、線、圓、矩形)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM