OpenLayers3实现测量功能

OpenLayers3实现测量功能实现测量功能

主要为大家详细介绍了OpenLayers3实现测量功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小

伙伴们可以参考一下

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

1. 前言前言

测量功能实现面积的测量以及长度的测量。通过鼠标绘制区域以及长度来进行测量。OpenLayers 3 框架没有提供测量控件，但提供了相

应的接口，需要需要基于几何对象的相应接口，结合图形绘制功能实现。

2. 实现思路实现思路

<div id="menu">

<label>测量类型：</label>

<select id="type">

<option value="length">长度</option>

<option value="area">面积</option>

</select>

<label class="checkbox"><input type="checkbox" id="geodesic">使用大地测量</label>

</div>

</div>

测量类型控件的样式设置：

}

.checkbox {

left: 20px;

}

/* 提示框的样式信息 */

.tooltip {

position: relative;

background: rgba(0, 0, 0, 0.5);

border-radius: 4px;

color: white;

font-weight: bold;

}

.tooltip-static {

background-color: #ffcc33;

color: black;

border: 1px solid white;

}

.tooltip-measure::before,

.tooltip-static::before {

border-top: 6px solid rgb(0, 0, 0, 0.5);

left: 50%;

}

.tooltip-static::before {

border-top-color: #ffcc33;