<!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> <button id="deleteArea">删除上一个面积</button> <button id="deletePoint">删除上一个点</button> <button id="finishDraw">完成绘制</button> <button id="cancelDraw">取消绘制</button> <div id="map"></div> <script> $("#deleteArea").click(function(){ if(0!==q.length){ var t=q.pop().number;//删除的FeatureID var feature=drawing_layer.getSource().getFeatureById(t); drawing_layer.getSource().removeFeature(feature); $("div.tooltip-static").eq(0).remove(); } }); $("#deletePoint").click(function(){ polygon_drawing_tool.removeLastPoint(); }); $("#cancelDraw").click(function(){ drawing_layer.getSource().clear(); i=0,q=[]; $(".ol-overlay-container").hide(); }); $("#finishDraw").click(function(){ polygon_drawing_tool.finishDrawing(); }); 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", width:2 }), image:new ol.style.Circle({ radius:7, fill:new ol.style.Fill({ color:"#ffcc33" }) }) }) });// 画面积计算的图层 map.addLayer(drawing_layer); var polygon_drawing_tool = new ol.interaction.Draw({ source: drawing_layer.getSource(), type: 'Polygon', style: new ol.style.Style({ fill: new ol.style.Fill({ color: '#ffcc33' }), stroke: new ol.style.Stroke({ color: '#ffcc33', lineDash: [10, 10], width: 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; polygon_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 = formatArea(/** @type {ol.geom.LineString} */ (geom)); tooltipCoord = geom.getLastCoordinate(); createMeasureTooltip(); measureTooltipElement.innerHTML = output; measureTooltip.setPosition(tooltipCoord); }); }, this); var i=0,q=[]; polygon_drawing_tool.on('drawend',function(e) { i=q.length+1; e.feature.setId(i); q.push({number:i}); measureTooltipElement.className = 'tooltip tooltip-static'; measureTooltip.setOffset([0, -7]); sketch = null; measureTooltipElement = null; createMeasureTooltip(); ol.Observable.unByKey(listener); }, this); var formatArea = function(polygon) { var area=polygon.getArea(); 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; }; 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(polygon_drawing_tool); }); </script> </body> </html>
