openlayer5.2的绘制扩展案例

openlayer5.2的绘制扩展案例
添加onDrawEnd绘制完成事件的功能

//修改和完善绘制几何对象
//vp:hsg
//create date:2019-04-03
const Mode = {
    POINT: 'Point',
    LINE_STRING: 'LineString',
    POLYGON: 'Polygon',
    CIRCLE: 'Circle'
};
function getMode(type) {
    let mode;
    if (type === "Point" ||
        type === "MultiPoint") {
        mode = Mode.POINT;
    } else if (type === "LineString" ||
        type === "MultiLineString") {
        mode = Mode.LINE_STRING;
    } else if (type ==="Polygon" ||
        type === "MultiPolygon") {
        mode = Mode.POLYGON;
    } else if (type === "Circle") {
        mode = Mode.CIRCLE;
    }
    return (
        /** @type {!Mode} */ (mode)
    );
};
const DrawEventType = {
    /**
     * Triggered upon feature draw start
     * @event DrawEvent#drawstart
     * @api
     */
    DRAWSTART: 'drawstart',
    /**
     * Triggered upon feature draw end
     * @event DrawEvent#drawend
     * @api
     */
    DRAWEND: 'drawend'
};
class Draw2 extends ol.interaction.Draw {
    /**
     * @param {Options} options Options.
     */
    constructor(options) {
        super(options);

        this.onDrawEnd=null;

    }

    /**
     * Stop drawing and add the sketch feature to the target layer.
     * The {@link module:ol/interaction/Draw~DrawEventType.DRAWEND} event is
     * dispatched before inserting the feature.
     * @api
     */
    finishDrawing() {
        const sketchFeature = this.abortDrawing_();
        if (!sketchFeature) {
            return;
        }
        let coordinates = this.sketchCoords_;
        const geometry = /** @type {import("../geom/SimpleGeometry.js").default} */ (sketchFeature.getGeometry());
        if (this.mode_ === Mode.LINE_STRING) {
            // remove the redundant last point
            coordinates.pop();
            this.geometryFunction_(coordinates, geometry);
        } else if (this.mode_ === Mode.POLYGON) {
            // remove the redundant last point in ring
            /** @type {PolyCoordType} */ (coordinates)[0].pop();
            this.geometryFunction_(coordinates, geometry);
            coordinates = geometry.getCoordinates();
        }

        // cast multi-part geometries
        if (this.type_ === "MultiPoint") {
            sketchFeature.setGeometry(new ol.geom.MultiPoint([/** @type {PointCoordType} */(coordinates)]));
        } else if (this.type_ === ol.geom.MULTI_LINE_STRING) {
            sketchFeature.setGeometry(new ol.geom.MultiLineString([/** @type {LineCoordType} */(coordinates)]));
        } else if (this.type_ === "MultiPolygon") {
            sketchFeature.setGeometry(new ol.geom.MultiPolygon([/** @type {PolyCoordType} */(coordinates)]));
        }

        // First dispatch event to allow full set up of feature ??
        //this.dispatchEvent(new ol.interaction.Draw.DrawEvent(ol.interaction.DRAWEND, sketchFeature));

        if(this.onDrawEnd) {
            this.onDrawEnd(geometry);
        }
        // Then insert feature
        if (this.features_) {
            this.features_.push(sketchFeature);
        }
        if (this.source_) {
            this.source_.addFeature(sketchFeature);
        }
    }
}

调用Draw2的方法

/定义绘制几何图形工具
//定义 临时图层
var draw_crs="EPSG:4326";
var draw_source = new ol.source.Vector({ wrapX: false });
var draw_vector = new ol.layer.Vector({
    source: draw_source,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 1.5
        }),
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: '#ffcc33'
            })
        })
    })
});
class cwgisDrawTool extends cwgisTool
{
     constructor(mapWrap)
     {
         super(mapWrap);
         this.CLASS_NAME="cwgisDrawTool";
         this.init(mapWrap);
         this.draw=null;
         this.draw_type="Polygon";
     }
    createPolygonStyle(color, width) {
        //返回设置区样式函数
        var stylePolygon = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#FF9FD3',
                width: width
            }),
            fill: new ol.style.Fill({
                color: color
            })
        });
        return ol.style.defaultStyles; //[stylePolygon];
    }
    onDrawEnd(evt)
    {
        //8种类型spatialoperation=intersects/contains/crosses/disjoint/equals/overlaps/touches/within
        var feat=evt.feature;
        var geo=feat.getGeometry();
        if(this.draw_type=="Polygon")
        {
            alert(getArea()+'平方米');
        }
        else if(this.draw_type=="LineString")
        {
            alert(getLength()+'米');
        }
    }
    deactivate(){
        //this.mapWrap.map.removeInteraction(this.select);
        //专题信息清除
        //this.mapWrap.map.removeLayer(draw_vector);
        //移除鼠标移动监听事件
        //draw_source.clear();
        //this.mapWrap.map.getOverlays().clear();
        this.mapWrap.map.removeInteraction(this.draw);
        //this.mapWrap.map.removeEventListener("click");
        //this.draw.un("drawend",this.onDrawEnd);
    }
    activate(){
        createDrawDefaultStyle();
         //draw_type=Point,LineString,Polygon,Circle
         this.draw = new Draw2({
             type: this.draw_type,
             source: draw_source,
             style:[new ol.style.Style({//绘制几何图形样式
                 fill: new ol.style.Fill({//填充样式
                     color: 'rgba(255, 255, 255, 0.2)'
                 }),
                 stroke: new ol.style.Stroke({//边线样式
                     color: 'rgba(255, 0, 0, 0.5)',
                     lineDash: [10, 10],
                     width: 2
                 }),
                 image: new ol.style.Circle({//点样式
                     radius: 4,
                     stroke: new ol.style.Stroke({
                         color: 'rgba(255, 0, 0, 0.7)'
                     }),
                     fill: new ol.style.Fill({
                         color: 'rgba(255, 255, 255, 0.2)'
                     })
                 })
             })]
         });
         if(this.draw_type=="Point")
         {
             //draw_vector.setStyle(createPolygonStyle('rgba(255, 255, 255, 0.2)',2));
         }
         else
         {
             draw_vector.setStyle(this.createPolygonStyle('rgba(255, 255, 255, 0.2)',2));
         }
         this.mapWrap.map.removeLayer(draw_vector);
         this.mapWrap.map.addLayer(draw_vector);
         this.mapWrap.map.addInteraction(this.draw);
         var Tthis=this;
         /**/
        this.draw.onDrawEnd=function(geometry){
            //Tthis.draw.features_;
            //var geometry = Tthis.draw.features_[0].getGeometry();
             if(Tthis.draw_type=="Polygon")
             {
                 alert(getAreaByGeometry(geometry)+'平方米');
             }
             else if(Tthis.draw_type=="LineString")
             {
                 alert(getLengthByGeometry(geometry)+'米');
             }
         };
     }
}
function getAreaByGeometry(geometry) {
    var geo = geometry;
    var options = {};
    options.projection = drawLayer.crs;   //EPSG:4326
    return ol.sphere.getArea(geo, options);   //平方米
};
function getLengthByGeometry(geometry)
{
    var geo=geometry;
    var options={};
    options.projection=drawLayer.crs;   //EPSG:4326
    return ol.sphere.getLength(geo,options);   //米
};
//修改绘制几何对象的编辑颜色
function createDrawDefaultStyle() {
    // We don't use an immediately-invoked function
    // and a closure so we don't get an error at script evaluation time in
    // browsers that do not support Canvas. (import("./Circle.js").CircleStyle does
    // canvas.getContext('2d') at construction time, which will cause an.error
    // in such browsers.)
    if (!ol.style.defaultStyles) {
        const fill = new ol.style.Fill({
            color: 'rgba(255,255,255,0.4)'
        });
        const stroke = new ol.style.Stroke({
            color: '#FF0000',
            width: 1.25
        });
        ol.style.defaultStyles = [
            new ol.style.Style({
                image: new ol.style.Circle({
                    fill: fill,
                    stroke: stroke,
                    radius: 5
                }),
                fill: fill,
                stroke: stroke
            })
        ];
    }
    return ol.style.defaultStyles;
};

移除图层的方法

//获取图层名对应的图层对象
cwgisMap.prototype.findLayer=function(layerName){
    var tlayers=this.map.getLayers();
    var tArray=tlayers.getArray();
    for(var i=0;i<tArray.length;i++) {
        var t=tArray[i].values_;
        if(t && t.name && (t.name==layerName))
        {
            return tArray[i];
        }
    }
    return null;
};
//移除图层(通过图层名称)
cwgisMap.prototype.removeLayer=function(layerName){
    //this.map.removeLayer(this.map.getLayers().item(0));
    var tLayer=this.findLayer(layerName);
    while(tLayer!=null) {
        this.map.removeLayer(tLayer);
        tLayer=this.findLayer(layerName);
    }
};
cwgisMap.prototype.getVisible=function(layer) {
    return layer.getVisible();
};
cwgisMap.prototype.setVisible=function(layer,visible)
{
    return layer.setVisible(visible);
};

—the—end—