openlayers点线面测量、绘制设计实现

一、实现逻辑图

通过创建draw对象注册事件，再注册交互到地图实现控件的交互

二、代码实现

var Measure= /** @class */ (function () {
    function Measure(map, measureType,drawType) {
        /**
         * Currently drawn feature.
         * @type {module:ol/Feature~Feature}
         */
        this.sketch=null;


        /**
         * The help tooltip element.
         * @type {Element}
         */
        this.helpTooltipElement=null;


        /**
         * Overlay to show the help messages.
         * @type {module:ol/Overlay}
         */
        this.helpTooltip=null;


        /**
         * The measure tooltip element.
         * @type {Element}
         */
        this.measureTooltipElement=null;


        /**
         * Overlay to show the measurement.
         * @type {module:ol/Overlay}
         */
        this.measureTooltip=null;


        /**
         * Message to show when the user is drawing a polygon.
         * @type {string}
         */
        this.continuePolygonMsg = '继续点击绘制多边形';


        /**
         * Message to show when the user is drawing a line.
         * @type {string}
         */
        this.continueLineMsg = '继续点击绘制线';
        this.map=map;
        this.measureType=measureType;
        this.draw=null;
        this.listener=null;
        this.source=null;
        // var layer ;
        // 获取存放feature的vectorlayer层。map初始化的时候可以添加好了
        for(let layerTmp of map.getLayers().getArray()){
            if(layerTmp.get("name")=="Measure"){
                this.source= layerTmp.getSource();
            }
        }
        if(this.source==undefined||this.source==null){
            this.source = new VectorSource();

            var vector = new VectorLayer({
                source: this.source,
                style: new Style({
                    fill: new Fill({
                        color: 'rgba(255, 255, 255, 0.2)',
                    }),
                    stroke: new Stroke({
                        color: '#ffcc33',
                        width: 2,
                    }),
                    image: new CircleStyle({
                        radius: 7,
                        fill: new Fill({
                            color: '#ffcc33',
                        }),
                    }),
                }),
            });
            vector.set("name","Measure");
            vector.set("code","Measure");
            this.map.addLayer(vector);
        }
        if(drawType=="Measure"){
            this.createMeasureTooltip();
            this.createHelpTooltip();
            let that=this;
            this.pointerMoveHandler = function (evt) {
                if (evt.dragging) {
                    return;
                }
                /** @type {string} */
                var helpMsg = '请点击开始绘制';

                if (that.sketch) {
                    var geom = (that.sketch.getGeometry());
                    if (geom instanceof Polygon) {
                        helpMsg = that.continuePolygonMsg;
                    } else if (geom instanceof LineString) {
                        helpMsg = that.continueLineMsg;
                    }
                }

                that.helpTooltipElement.innerHTML = helpMsg;
                that.helpTooltip.setPosition(evt.coordinate);

                that.helpTooltipElement.classList.remove('hidden');
            };
            /**
             * Handle pointer move.
             * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event.
             */
            map.on('pointermove', this.pointerMoveHandler);

            map.getViewport().addEventListener('mouseout',() =>{
                this.helpTooltipElement.classList.add('hidden');
            });
            // 量测调用
            this.addInteraction();
        }else if(drawType=="Draw"){
            // 量测调用
            this.addInteractionEx();
        }

    };
    Measure.prototype. formatLength = function (line) {
        var length = getLength(line,{projection:'EPSG:4326'});
        var output;
        if (length > 100) {
            output = (Math.round(length / 1000 * 100) / 100) +
                ' ' + 'km';
        } else {
            output = (Math.round(length * 100) / 100) +
                ' ' + 'm';
        }
        return output;
    };
    Measure.prototype. formatArea = function (polygon) {
        var area = getArea(polygon,{projection:'EPSG:4326'});
        var output;
        if (area > 10000) {
            output = (Math.round(area / 1000000 * 100) / 100) +
                ' ' + 'km<sup>2</sup>';
        } else {
            output = (Math.round(area * 100) / 100) +
                ' ' + 'm<sup>2</sup>';
        }
        return output;
    };
    Measure.prototype.addInteraction=function() {
        var type = (this.measureType == 'area' ? 'Polygon' : 'LineString');
        this.draw = new Draw({
            source: this.source,
            type: type,
            style: new Style({
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new Stroke({
                    color: 'rgba(0, 0, 0, 0.5)',
                    lineDash: [10, 10],
                    width: 2
                }),
                image: new CircleStyle({
                    radius: 5,
                    stroke: new Stroke({
                        color: 'rgba(0, 0, 0, 0.7)'
                    }),
                    fill: new Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    })
                })
            })
        });
        this.map.addInteraction(this.draw);


        this.draw.on('drawstart',
             (evt)=> {
                // set sketch
                this.sketch = evt.feature;

                /** @type {module:ol/coordinate~Coordinate|undefined} */
                var tooltipCoord = evt.coordinate;

                this.listener = this.sketch.getGeometry().on('change', (evt)=> {
                    var geom = evt.target;
                    var output;
                  
                    this.measureTooltipElement.innerHTML = output;
                    this.measureTooltip.setPosition(tooltipCoord);
                });
            }, this);

        this.draw.on('drawend',
            ()=> {
                this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
                this.measureTooltip.setOffset([0, -7]);
                // unset sketch
                this.clearDraw();
            }, this);
    };

    Measure.prototype.addInteractionEx=function(){
        var type = (this.measureType == 'area' ? 'Polygon' : 'LineString');
        if(this.measureType=="Point"){
            type=this.measureType;
        }
        this.draw = new Draw({
            source: this.source,
            type: type,
        });
        this.draw.on('drawend',
            (e)=> {
                const geometry = e.feature.getGeometry()
                const corrdinates = geometry.getCoordinates()
                // unset sketch
                this.clearDraw();
            }, this);
        this.map.addInteraction(this.draw);
    };

    Measure.prototype.createMeasureTooltip=function() {
        if (this.measureTooltipElement) {
            this.measureTooltipElement.parentNode.removeChild(this.measureTooltipElement);
        }
        this.measureTooltipElement = document.createElement('div');
        this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
        this.measureTooltip = new Overlay({
            element: this.measureTooltipElement,
            offset: [0, -15],
            positioning: 'bottom-center'
        });
        this.measureTooltip.set("name","Measure");
        this.map.addOverlay(this.measureTooltip);
    };
    Measure.prototype.createHelpTooltip=function () {
        if (this.helpTooltipElement) {
            this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
        }
        this.helpTooltipElement = document.createElement('div');
        this.helpTooltipElement.className = 'ol-tooltip hidden';
        this.helpTooltip = new Overlay({
            element: this.helpTooltipElement,
            offset: [15, 0],
            positioning: 'center-left'
        });
        this.map.addOverlay(this.helpTooltip);
    };

    Measure.prototype.clearDraw=function () {
       
    };
    return Measure;
}());

export {Measure};

 三、实现效果

测距

测面 

绘制点、线、面

 如果对您有帮助

 感谢支持技术分享，请扫码点赞支持：

技术合作交流qq:2401315930