Openlayers实现距离面积测量

CSS

.ol-tooltip {
        position: relative;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        color: white;
        padding: 4px 8px;
        opacity: 0.7;
        white-space: nowrap;
        font-size: 12px;
    }
    .ol-tooltip-measure {
        opacity: 1;
        font-weight: bold;
    }
    .ol-tooltip-static {
        background-color: #ffcc33;
        color: black;
        border: 1px solid white;
    }
    .ol-tooltip-measure:before,
    .ol-tooltip-static:before {
        border-top: 6px solid rgba(0, 0, 0, 0.5);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        content: "";
        position: absolute;
        bottom: -6px;
        margin-left: -7px;
        left: 50%;
    }
    .ol-tooltip-static:before {
        border-top-color: #ffcc33;
    }

 具体实现

   let layer_1 =new ol.layer.Tile({
            source: new ol.source.OSM()
        });
    let source = new ol.source.Vector();
    let vector = new ol.layer.Vector({
        source: 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: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        })
    });
    let map=new ol.Map({
        layers: [
           layer_1 ,vector
        ],
        view: new ol.View({
            center: [-11000000, 4600000],
            zoom: 5,