/**

 *  @description 标注弹出框

 */

HtmlPopup = null;

/**

 *  @description 临时图层类数据源

 */

VectorSource = null;

/**

 *  @description 绘图工具

 */

Draw = null;

    let measureTooltipElement;

    let measureTooltip=HtmlPopup;

    let drawingFeature = null;

 //动态测量距离

    this.dynamicLengthMeasure = function (_map,_measureLengthStyle,_measureTooltipStyle,_measureEndCallback) {

        measureTooltipElement = document.createElement("div");

        //暂停绘制

        if (Draw != null) {

            _map.removeInteraction(Draw);

            Draw = null;

        }

        if(_measureLengthStyle){

            Draw = new ol.interaction.Draw({

                //绘制层数据源

                source: VectorSource,

                /** @type {ol.geom.GeometryType}几何图形类型 */

                type: 'LineString',

                //几何信息变更时调用函数

                //geometryFunction: geometryFunction,

                freehand: false,

                style:_measureLengthStyle

            });

        }else{

            Draw = new ol.interaction.Draw({

                //绘制层数据源

                source: VectorSource,

                /** @type {ol.geom.GeometryType}几何图形类型 */

                type: 'LineString',

                //几何信息变更时调用函数

                //geometryFunction: geometryFunction,

                freehand: false,

            });

        }

        _map.addInteraction(Draw);

        Draw.on('drawstart', function (e) {

            if(_measureLengthStyle){

                e.feature.setStyle(_measureLengthStyle);

            }

            measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);

            drawingFeature = e.feature;

            let tooltipCoord = e.coordinate;

            drawingFeature.getGeometry().on('change',function (evt) {

                let geom = evt.target;

                let output = geom.getLength();

                if (output > 100) {

                    output = (Math.round(output / 1000 * 100) / 100) + ' km';

                } else {

                    output = (Math.round(output * 100) / 100) + ' m';

                }

                tooltipCoord = geom.getLastCoordinate();

                measureTooltipElement.innerHTML = output;

                measureTooltip.setPosition(tooltipCoord);

            });

        });

        Draw.on('drawend', function (e) {

            _map.removeInteraction(Draw);

            Draw = null;

            if(_measureLengthStyle){

                e.feature.setStyle(_measureLengthStyle);

            }

            measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);

            drawingFeature = e.feature;

            let output = e.feature.getGeometry().getLength();

            if (output > 100) {

                output = (Math.round(output / 1000 * 100) / 100) + ' km';

            } else {

                output = (Math.round(output * 100) / 100) + ' m';

            }

            let tooltipCoord = e.feature.getGeometry().getLastCoordinate();

            measureTooltipElement.innerHTML = output;

            measureTooltip.setPosition(tooltipCoord);

            if(_measureEndCallback){

                let measureEndCallbackkObj = {};

                measureEndCallbackkObj.feature=e.feature;

                measureEndCallbackkObj.length = output;

                _measureEndCallback(measureEndCallbackkObj);

            }

        });

        function createMeasureTooltip(measureTooltip,_param,_map) {

            if(_param==null||_param==undefined){

                _param={};

            }

            measureTooltipElement.className = _param.className||'ol-overlay-container ol-selectable';

            measureTooltipElement.id='measureLength_DIV';

            measureTooltip = new ol.Overlay({

                element: measureTooltipElement,

                id:'measureLength_DIV',

                offset: _param.offset||[0, -15],

                positioning: _param.positioning||'bottom-center'   //显示的位置

            });

            _map.addOverlay(measureTooltip);

            return measureTooltip;

        }

    };

//动态测量面积

    this.dynamicAreaMeasure = function (_map,_measureAreaStyle,_measureTooltipStyle,_measureEndCallback) {

        // if (measureTooltipElement) {

        //     measureTooltipElement.parentNode.removeChild(measureTooltipElement)

        // }

        measureTooltipElement = document.createElement("div");

        //暂停绘制

        if (Draw != null) {

            _map.removeInteraction(Draw);

            Draw = null;

        }

        if(_measureAreaStyle){

            Draw = new ol.interaction.Draw({

                //绘制层数据源

                source: VectorSource,

                /** @type {ol.geom.GeometryType}几何图形类型 */

                type: 'Polygon',

                //几何信息变更时调用函数

                //geometryFunction: geometryFunction,

                freehand: false,

                style:_measureAreaStyle

            });

        }else{

            Draw = new ol.interaction.Draw({

                //绘制层数据源

                source: VectorSource,

                /** @type {ol.geom.GeometryType}几何图形类型 */

                type: 'Polygon',

                //几何信息变更时调用函数

                //geometryFunction: geometryFunction,

                freehand: false,

            });

        }

        _map.addInteraction(Draw);

        Draw.on('drawstart', function (e) {

            if(_measureAreaStyle){

                e.feature.setStyle(_measureAreaStyle);

            }

            measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);

            drawingFeature = e.feature;

            let tooltipCoord = e.coordinate;

            drawingFeature.getGeometry().on('change',function (evt) {

                let geom = evt.target;

                let output = geom.getArea();

                if (output > 10000) {

                    output = (Math.round(output / 1000000 * 100) / 100) + ' km<sup>2</sup>'

                } else {

                    output = (Math.round(output * 100) / 100) + ' m<sup>2</sup>'

                }

                tooltipCoord = geom.getLastCoordinate();

                measureTooltipElement.innerHTML = output;

                measureTooltip.setPosition(tooltipCoord);

            });

        });

        Draw.on('drawend', function (e) {

            _map.removeInteraction(Draw);

            Draw = null;

            if(_measureAreaStyle){

                e.feature.setStyle(_measureAreaStyle);

            }

            // drawingFeature = null;

            // measureTooltipElement = null;

            // measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);

            // createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);

            measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);

            drawingFeature = e.feature;

            // let tooltipCoord = e.coordinate;

            // let geom = e.target;

            let output = e.feature.getGeometry().getArea();

            if (output > 10000) {

                output = (Math.round(output / 1000000 * 100) / 100) + ' km<sup>2</sup>'

            } else {

                output = (Math.round(output * 100) / 100) + ' m<sup>2</sup>'

            }

            let tooltipCoord = e.feature.getGeometry().getLastCoordinate();

            measureTooltipElement.innerHTML = output;

            measureTooltip.setPosition(tooltipCoord);

            if(_measureEndCallback){

                let measureEndCallbackkObj = {};

                // measureEndCallbackkObj.attributes={};

                measureEndCallbackkObj.feature=e.feature;

                measureEndCallbackkObj.length = output;

                // measureEndCallbackkObj.attributes.x = (e.feature.getGeometry().getExtent()[0]+e.feature.getGeometry().getExtent()[2])/2;

                // measureEndCallbackkObj.attributes.y = (e.feature.getGeometry().getExtent()[1]+e.feature.getGeometry().getExtent()[3])/2;

                _measureEndCallback(measureEndCallbackkObj);

            }

        });

        function createMeasureTooltip(measureTooltip,_param,_map) {

            // if (measureTooltipElement) {

            //     measureTooltipElement.parentNode.removeChild(measureTooltipElement)

            // }

            // measureTooltipElement = document.createElement("div");

            // if(_param){

            if(_param==null||_param==undefined){

                _param={};

            }

            measureTooltipElement.className = _param.className||'ol-overlay-container ol-selectable';

            measureTooltipElement.id='measureArea_DIV';

            measureTooltip = new ol.Overlay({

                id:'measureArea_DIV',

                element: measureTooltipElement,

                offset: _param.offset||[0, -15],

                positioning: _param.positioning||'bottom-center'

            });

            // }

            _map.addOverlay(measureTooltip);

            return measureTooltip;

        }