Openlayer 3 的画线测量长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画线测量长度</title>
    <link rel="stylesheet" href="css/ol.css">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ol.js"></script>
    <style>
        #map{
            width:100%;
            height:100%;
        }
        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
        }
        .tooltip-measure {
            opacity: 1;
            font-weight: bold;
        }
        .tooltip-static {
            background-color: #ffcc33;
            color: black;
            border: 1px solid white;
        }
        .tooltip-measure:before,
        .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%;
        }
        .tooltip-static:before {
            border-top-color: #ffcc33;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map=new ol.Map({
            target:'map',
            layers:[
                new ol.layer.Tile({
                    source:new ol.source.OSM()
                })
            ],
            view:new ol.View({
                center:[0,0],
                zoom:2
            })
        });//初始化地图
        var drawing_layer = new ol.layer.Vector({
            source: new ol.source.Vector(),
            style:new ol.style.Style({
                fill:new ol.style.Fill({
                    color:"rgba(225,225,225,.2)"
                }),
                stroke:new ol.style.Stroke({
                    color:"#ffcc33",
                    2
                }),
                image:new ol.style.Circle({
                    radius:7,
                    fill:new ol.style.Fill({
                        color:"#ffcc33"
                    })
                })
            })
        });// 画面积计算的图层
        map.addLayer(drawing_layer);
        var line_drawing_tool = new ol.interaction.Draw({
            source: drawing_layer.getSource(),
            type: 'LineString',
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    lineDash: [10, 10],
                     3
                }),
                image: new ol.style.Circle({
                    radius: 5,
                    stroke: new ol.style.Stroke({
                        color: 'rgba(0, 0, 0, 0.7)'
                    }),
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });//绘图控件对象
        var listener;//绑定交互绘制工具开始绘制事件
        var measureTooltipElement;
        line_drawing_tool.on('drawstart',function(evt) {
            sketch = evt.feature;
            var tooltipCoord = evt.coordinate;
            listener = sketch.getGeometry().on('change', function(evt) {
                var geom = evt.target;
                var output = formatLength(/** @type {ol.geom.LineString} */ (geom));
                tooltipCoord = geom.getLastCoordinate();
                createMeasureTooltip();
                measureTooltipElement.innerHTML = output;
                measureTooltip.setPosition(tooltipCoord);
            });
        }, this);
        line_drawing_tool.on('drawend',function() {
            measureTooltipElement.className = 'tooltip tooltip-static';
            measureTooltip.setOffset([0, -7]);
            sketch = null;
            measureTooltipElement = null;
            createMeasureTooltip();
            ol.Observable.unByKey(listener);
        }, this);
        var formatLength = function(line) {
            var length = Math.round(line.getLength() * 100) / 100;
            var output;
            if (length > 100) {
                output = (Math.round(length / 1000 * 100) / 100) +' ' + 'km';
            } else {
                output = (Math.round(length * 100) / 100) +' ' + 'm';
            }
            return output;
        };
        function createMeasureTooltip() {
            if (measureTooltipElement) {
                measureTooltipElement.parentNode.removeChild(measureTooltipElement);
            }
            measureTooltipElement = document.createElement('div');
            measureTooltipElement.className = 'tooltip tooltip-measure';
            measureTooltip = new ol.Overlay({
                element: measureTooltipElement,
                offset: [0, -15],
                positioning: 'bottom-center'
            });
            map.addOverlay(measureTooltip);
        }
        $(document).ready(function() {
            map.addInteraction(line_drawing_tool);
        });
    </script>
</body>
</html>
相关阅读:
迭代器、生成器
 函数(函数基础、装饰器、递归、匿名函数)
文件处理
 python对象、引用
 字符编码
 流程控制if、while、for
编程与编程语言
 Java源码阅读（五）—— AbstractQueuedSynchronizer
Java并发编程（二） —— volatile
Java源码阅读（七）—— ReentrantReadWriteLock
原文地址：https://www.cnblogs.com/mina-huojian66/p/6142059.html