Openlayers测量距离与面积的实现方法

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

1、地图测量功能

一般的地图的测量功能主要表现在两个方面，一是测量距离，一是测量面积；面积的测量是根据鼠标绘制的范围，通过地理坐标系的转换而计算出实际面积大小，距离的测量是根据鼠标在地图上绘制的点，实时计算出两点之间的实际距离，下面我们就在Openlayers3中来实现这一功能；

2、代码实现

 
 
 
 
 
 
 
  #map {
   width: 100%;
   height: 100%;
   position: absolute;
  }
 
  #menu {
   float: left;
   position: absolute;
   bottom: 10px;
   left: 10px;
   z-index: 2000;
  }
 
  .checkbox {
   left: 20px;
  }
  
  .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: #ffffff;
   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: #ffffff;
   }
 
  #scalebar {
   float: left;
   margin-bottom: 10px;
  }
 
 


 
  
   测量类型选择
   
    长度
    面积
   
   使用大地测量
  
 
 

3、结果展示

测量距离

测量面积

此外，还能勾选使用大地测量的复选框，进行球面距离和面积的测量

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