openlayers4.6.5实现距离量测和面积量测

本文实例为大家分享了openlayers4.6.5实现距离量测和面积量测的具体代码，供大家参考，具体内容如下

版本： openlayers4.6.5

效果图：

小插曲：

原本使用ol官方提供的 量测例子，就挺不错的。但是由于放在项目中后。量测样式不知道为啥出不来，找了半天原因 也没有找到，单独在一个html中完全没问题。所以推测可能和项目中哪些地方有冲突，但是问题暂时没找出来，项目也比较急，所以只能自己实现文字标注部门的样式，实现效果如上图gif所示。

实现原理：
量测功能还是使用了ol例子提供的源码，修改部分主要是在标注这一块，另外就是时刻去添加这个标注 然后时刻删除这个标注  就可以了。

完整的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;
    };
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。