<!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>
