Openlayers实现测量功能

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

由于公司项目需要使用到openlayers，就开始学习了openlayers，其中有一个需求需要用到测量功能，就参考《WebGisOpenlayers全面解析》写了一个小demo，话不多说，直接上代码：

 

 
 
 
 
 
 
 
 
  #map {
   width: 100%;
   height: 100%;
   position: absolute;
  }
 
  #menu {
   float: left;
   position: absolute;
   bottom: 50px;
   right: 30px;
   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;
  }
 
 

 

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

 

效果图：

PS：这里调用的图层是使用geoserver发布的一个组合图层，可以自行定义。

源代码地址：测量实例

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