使用openlayers4.6.5实现距离量测和面积量测-创新互联

使用openlayers4.6.5实现距离量测和面积量测？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

完整的js代码如下（鼠标样式图标 我没放上来，有需要的我给你发邮箱）：

var draw;
var click=false;
var output=0;
var vector;
var source;
var lastPolygonLabelFeature;//记录上一个面标注要素 
var lastLengthLabelFeature;//记录上一个点标注要素
$(
 function(){
 $("#measureDistance").click(function(){
 if(draw){
  map.removeInteraction(draw); 
 }
 addInteraction("length");
 setMeasureCur();
 })
 $("#measureArea").click(function(){
 if(draw){
  map.removeInteraction(draw); 
 }
 addInteraction("area"); 
 setMeasureCur();
 })
 $("#measureClear").click(function(){
 map.removeInteraction(draw); 
 vector.setSource(null);
 source=new ol.source.Vector();
 vector.setSource(source);
 lastPolygonLabelFeature=null;
 lastLengthLabelFeature=null;
 click=false;
 
 sketch = null;
    output="0";
    
 reSetCur();
 })
 function setMeasureCur(){
  $('#map').css({
       cursor:"url(../../static/images/measureIcon/measure.cur), auto"
     });
 }
 
 function reSetCur(){
 $('#map').css('cursor','default');
 }
 
   source = new ol.source.Vector();
   vector = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
     fill: new ol.style.Fill({//面的填充颜色
      color: 'rgba(255, 0, 0, 0.1)'
     }),
     stroke: new ol.style.Stroke({
      color: 'rgb(255,116,3)',
      width: 2
     }),
     image: new ol.style.Circle({
      radius: 3,
      stroke: new ol.style.Stroke({
        color: 'rgba(255, 0, 0,1)',
        width: 2
       }),
      fill: new ol.style.Fill({
       color: 'rgba(255,255,255)'
      })
     
     })
    })
   });
 map.addLayer(vector);
 
 var sketch;
 
  var pointerMoveHandler = function(evt) {
    if (evt.dragging) {
     return;
    }
    var Coord;
    
   if(sketch){
  var geom = sketch.getGeometry();
     if (geom instanceof ol.geom.Polygon) {
      
      if(lastPolygonLabelFeature){
          //鼠标移动 不停的添加和删除
      source.removeFeature(lastPolygonLabelFeature);
      }
      
      Coord = geom.getInteriorPoint().getCoordinates();
      
      //新建一个要素ol.Feature
       var newFeature = new ol.Feature({
         geometry: new ol.geom.Point(Coord), //几何信息
         name: output
       });
       lastPolygonLabelFeature=newFeature;  
       newFeature.setStyle(createLabelStyle(newFeature,0,0)); 
     } else if (geom instanceof ol.geom.LineString) {
      if(lastLengthLabelFeature){
      source.removeFeature(lastLengthLabelFeature);
       }
      
       Coord = geom.getLastCoordinate();
       //新建一个要素ol.Feature
       var newFeature = new ol.Feature({
         geometry: new ol.geom.Point(Coord), //几何信息
         name: output
       });
       lastLengthLabelFeature=newFeature;
       newFeature.setStyle(createLabelStyle(newFeature,35,-10)); 
     }
     //设置要素样式
     source.addFeature(newFeature);
   }
 };
   
   map.on('pointermove', pointerMoveHandler);
   map.on('click', function(evt){
    var coordinate = evt.coordinate; //鼠标单击点的坐标
    console.log(coordinate);
    if(output=="0"){
    lastPolygonLabelFeature=null;
    if(lastLengthLabelFeature){
      source.removeFeature(lastLengthLabelFeature);
      lastLengthLabelFeature=null;
       }
    return;
    }
      
    var Coord;
    if(sketch){
   var geom = sketch.getGeometry();
      if (geom instanceof ol.geom.Polygon) {
       
       if(lastPolygonLabelFeature){
       source.removeFeature(lastPolygonLabelFeature);
       }
       Coord = geom.getInteriorPoint().getCoordinates();
       
       //新建一个要素ol.Feature
        var newFeature = new ol.Feature({
          geometry: new ol.geom.Point(Coord), //几何信息
          name: output
        });
        lastPolygonLabelFeature=newFeature;
        newFeature.setStyle(createLabelStyle(newFeature,0,0));   //设置要素样式
        source.addFeature(newFeature);
        
       
      } else if (geom instanceof ol.geom.LineString) {
       
       Coord = geom.getLastCoordinate();
        //新建一个要素ol.Feature
        var newFeature = new ol.Feature({
          geometry: new ol.geom.Point(Coord), //几何信息
          name: output
        });
        newFeature.setStyle(createLabelStyle(newFeature,35,-10));   //设置要素样式
        source.addFeature(newFeature);
      }
      
      var pointFeature = new ol.Feature({
        geometry: new ol.geom.Point(coordinate), //几何信息
        name: output
      });
      source.addFeature(pointFeature);
    }
     
   });
   
   //矢量标注样式设置函数，设置image为图标ol.style.Icon
   function createLabelStyle(feature,offsetX,offsetY){
     return new ol.style.Style({
//       image: new ol.style.Icon({
//         anchor: [0.5, 60],       //锚点
//         anchorOrigin:'top-right',    //锚点源
//         anchorXUnits: 'fraction',    //锚点X值单位
//         anchorYUnits: 'pixels',     //锚点Y值单位
//         offsetOrigin: 'top-right',   //偏移原点
//         opacity: 0.75,
//         src: 'OL3Demo/images/label/blueIcon.png' //图标的URL
//       }),
       text: new ol.style.Text({
         textAlign: 'center',      //位置
         textBaseline: 'middle',     //基准线
         font: 'normal 10px sans-serif',  //文字样式
         text: feature.get('name'),   //文本内容
         fill: new ol.style.Fill({    //文本填充样式（即文字颜色)
           color: 'white'
         }),
         stroke: new ol.style.Stroke({
           color: 'black', 
           width: 5
         }),
         offsetX:offsetX,
         offsetY:offsetY
       
       })
     });
   }
   
   
 
 function addInteraction(drawType) {
    var type = (drawType== 'area' ? 'Polygon' : 'LineString');
    draw = new ol.interaction.Draw({
     source: source,
     type: type,
     style: new ol.style.Style({
      fill: new ol.style.Fill({
       color: 'rgba(255, 0, 0, 0.2)'
      }),
      stroke: new ol.style.Stroke({
       color: 'rgb(255,116,3)',
//       lineDash: [10, 10],//虚线
       width: 2
      }),
      image: new ol.style.Circle({
       radius: 5,
       stroke: new ol.style.Stroke({
        color: 'rgba(255, 0, 0, 0.1)'
       }),
       fill: new ol.style.Fill({
        color: 'rgba(255,116,3, 0.3)'
       })
      })
     })
    });
    map.addInteraction(draw);
    
    var listener;
    draw.on('drawstart',
      function(evt) {
       // set sketch
       sketch = evt.feature;
       listener = sketch.getGeometry().on('change', function(evt) {
        var geom = evt.target;
        
        if (geom instanceof ol.geom.Polygon) {
         output = formatArea(geom);
        } else if (geom instanceof ol.geom.LineString) {
         output = formatLength(geom);
        }
        
       });
      }, this);
 
    draw.on('drawend',
      function() {
       // unset sketch
       sketch = null;
       ol.Observable.unByKey(listener);
       output="0";
      }, this);
   }
 
 var formatLength = function(line) {
    var length = ol.Sphere.getLength(line);
    var output;
    if (length > 100) {
     output = (Math.round(length / 1000 * 100) / 100) +
       ' ' + '千米';
    } else {
     output = (Math.round(length * 100) / 100) +
       ' ' + '米';
    }
    return output;
   };
   
   var formatArea = function(polygon) {
     var area = ol.Sphere.getArea(polygon);
     var output;
     if (area > 10000) {
      output = (Math.round(area / 1000000 * 100) / 100) +
        ' ' + '平方千米';
     } else {
      output = (Math.round(area * 100) / 100) +
        ' ' + '平方米';
     }
     return output;
    };
})