本文实例为大家分享了OpenLayers3实现测量功能的具体代码，供大家参考，具体内容如下
1. 前言
测量功能实现面积的测量以及长度的测量。通过鼠标绘制区域以及长度来进行测量。OpenLayers 3 框架没有提供测量控件，但提供了相应的接口，需要需要基于几何对象的相应接口，结合图形绘制功能实现。
2. 实现思路
（1）新建一个网页，引用 openlayers 3 开发库、jQuery 库与 bootstrap 库，并参照前面显示地图的文章，加载 OSM 瓦片图层。
（2）在地图容器中，创建一个测量类型选择控件，进行选择距离测量与面积测量。
（3）编写代码实现测量功能。
3. 实现代码
html主要代码
|
1
2
3
4
5
6
7
8
9
10
|
<div id="map"> <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> |
测量类型控件的样式设置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
#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: #ffcc33; color: black; border: 1px solid white; } .tooltip-measure::before, .tooltip-static::before { border-top: 6px solid rgb(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: #ffcc33;} |
代码解析
上面的代码是结合 bootstrap库，使用冒泡提示框形式显示当前的测量结果，上面的样式分别设置了两种提示框的样式。
4. 实现测量功能的核心代码
（1）首先在地图上加载测量功能的绘制层，即矢量图层，就相当于，我们画画，需要纸来进行绘画，这里的矢量图层，相当于我们的纸。代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//加载测量的绘制矢量层var source = new ol.source.Vector(); //图层数据源var vector = new ol.layer.Vector({ source: source, style: new ol.style.Style({ //图层样式 fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' //填充颜色 }), stroke: new ol.style.Stroke({ color: '#ffcc33', //边框颜色 width: 2 // 边框宽度 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }) });map.addLayer(vector); |
（2）通过 addInteraction 方法实现测量功能，首先加载交互绘图控件（ol.interaction.Draw），也就是我们前面所说的画画需要的笔，在测量时根据测量类型选择绘制线段或多边形，然后分别为交互绘图控件绑定 drawstart 与 drawend 事件。在绘图开始时实时计算当前当前绘制线的长度或多边形的面积，以提示框形式显示，绘图结束时重新创建一个测量提示框显示测量结果。通过 addInteraction 函数实现绘图测量的代码：
4.1 addInteraction 函数实现绘图测量的代码：
|
1
2
3
4
5
6
7
8
9
|
/** * 切换选择测量类型（长度或面积） * @param {Event} e Change event. */ typeSelect.onchange = function(e) { map.removeInteraction(draw); //移除绘制图形 addInteraction(); //添加绘图进行测量 };addInteraction(); //调用加载绘制交互控件的方法，添加绘图进行测量 |
addInteraction()函数代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
var geodesicCheckbox = document.getElementById('geodesic'); //测地学方式对象var typeSelect = document.getElementById('type'); //测量类型对象var draw; // global so we can remove it later/** * 加载交互绘制控件函数 */function addInteraction() { var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString'); draw = new ol.interaction.Draw({ source: source, //测量绘制层数据源 type: /** @type {ol.geom.GeometryType} */ (type), //几何图形类型 style: new ol.style.Style({ //绘制几何图形的样式 fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }), stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 0, 0.5)', lineDash: [10, 10], width: 2 }), image: new ol.style.Circle({ radius: 5, stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 0, 0.7)' }), fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }) }) }) }); map.addInteraction(draw); createMeasureTooltip(); //创建测量工具提示框 createHelpTooltip(); //创建帮助提示框 var listener; //绑定交互绘制工具开始绘制的事件 draw.on('drawstart', function(evt) { // set sketch sketch = evt.feature; //绘制的要素 /** @type {ol.Coordinate|undefined} */ var tooltipCoord = evt.coordinate; // 绘制的坐标 //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示 listener = sketch.getGeometry().on('change', function(evt) { var geom = evt.target; //绘制几何要素 var output; if (geom instanceof ol.geom.Polygon) { output = formatArea( /** @type {ol.geom.Polygon} */ (geom)); //面积值 tooltipCoord = geom.getInteriorPoint().getCoordinates(); //坐标 } else if (geom instanceof ol.geom.LineString) { output = formatLength( /** @type {ol.geom.LineString} */ (geom)); //长度值 tooltipCoord = geom.getLastCoordinate(); //坐标 } measureTooltipElement.innerHTML = output; //将测量值设置到测量工具提示框中显示 measureTooltip.setPosition(tooltipCoord); //设置测量工具提示框的显示位置 }); }, this); //绑定交互绘制工具结束绘制的事件 draw.on('drawend', function(evt) { measureTooltipElement.className = 'tooltip tooltip-static'; //设置测量提示框的样式 measureTooltip.setOffset([0, -7]); // unset sketch sketch = null; //置空当前绘制的要素对象 // unset tooltip so that a new one can be created measureTooltipElement = null; //置空测量工具提示框对象 createMeasureTooltip(); //重新创建一个测试工具提示框显示结果 ol.Observable.unByKey(listener); }, this);} |
代码解析
首先加载绘图控件（ol.interaction.Draw），也就是我们的笔，在实例化控件时设置当前绘图要素的样式，然后分别调用 createHelpTooltop() 与 createMeasureTooltip() 创建帮助信息提示框和测量工具提示框对象；最后绑定绘图控件对象的 drawstart 与 drawend 事件，实现绘图测量功能。其中，在drawstart 事件处理函数中， 由事件对象得到当前绘制的要素（sketch），通过绘制要素的几何对象绑定 change 事件，根据事件监听的几何对象类型是线或是多边形（ol.geom.Polygon 或 ol.geom.LineString），调用 formatArea() 与 formatLength() 计算输出测量得到的面积值或长度值。
4.2 创建提示框的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
/** *创建一个新的帮助提示框（tooltip） */ function createHelpTooltip() { if (helpTooltipElement) { helpTooltipElement.parentNode.removeChild(helpTooltipElement); } helpTooltipElement = document.createElement('div'); helpTooltipElement.className = 'tooltip hidden'; helpTooltip = new ol.Overlay({ element: helpTooltipElement, offset: [15, 0], positioning: 'center-left' }); map.addOverlay(helpTooltip); } /** *创建一个新的测量工具提示框（tooltip） */ function createMeasureTooltip() { if (measureTooltipElement) { measureTooltipElement.parentNode.removeChild(measureTooltipElement); } measureTooltipElement = document.createElement('div'); measureTooltipElement.className = 'tooltip tooltip-measure'; measureTooltip = new ol.Overlay({ element: measureTooltipElement, offset: [0, -15], positioning: 'bottom-center' }); map.addOverlay(measureTooltip);} |
代码解析
基于Openlayers 3 的 ol.Overlay 实现创建帮助信息提示框和测量工具提示框，分别通过 createHelpTooltip() 与 createMeasureTooltip() 创建帮助信息提示框和测量工具提示框， ol.Overlay j就是动态创建叠加层对象与其目标容器（div层），并将叠加层对象添加到地图容器中。
4.3 计算长度与面积的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
/** * 测量长度输出 * @param {ol.geom.LineString} line * @return {string} */ var formatLength = function(line) { var length; if (geodesicCheckbox.checked) { //若使用测地学方法测量 var coordinates = line.getCoordinates(); //解析线的坐标 length = 0; var sourceProj = map.getView().getProjection(); //地图数据源投影坐标系 //通过遍历坐标计算两点之前距离，进而得到整条线的长度 for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) { var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326'); var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326'); length += wgs84Sphere.haversineDistance(c1, c2); } } else { length = Math.round(line.getLength() * 100) / 100; //直接得到线的长度 } var output; if (length > 100) { output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位 } else { output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位 } return output; //返回线的长度 }; /** * 测量面积输出 * @param {ol.geom.Polygon} polygon * @return {string} */ var formatArea = function(polygon) { var area; if (geodesicCheckbox.checked) { //若使用测地学方法测量 var sourceProj = map.getView().getProjection(); //地图数据源投影坐标系 var geom = /** @type {ol.geom.Polygon} */ (polygon.clone().transform(sourceProj, 'EPSG:4326')); //将多边形要素坐标系投影为EPSG:4326 var coordinates = geom.getLinearRing(0).getCoordinates(); //解析多边形的坐标值 area = Math.abs(wgs84Sphere.geodesicArea(coordinates)); //获取面积 } else { area = polygon.getArea(); //直接获取多边形的面积 } var output; if (area > 10000) { output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>'; //换算成KM单位 } else { output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>'; //m为单位 } return output; //返回多边形的面积 };addInteraction(); //调用加载绘制交互控件方法，添加绘图进行测量 |
代码解析
上面代码通过 formatLength() 与 formatArea() 分别计算输出的长度值以及面积值。计算长度值或者面积值时可以通过两种方法进行计算，一种是使用测地学的方法基于数据的投影坐标系进行计算，另一种是调用几何对象或者多边形对象的方法直接获取值。
（3）开始画画了，分别使用map对象绑定鼠标移动事件（pointermove）和鼠标移除事件（mouseout）。
4.4 添加地图鼠标移动事件的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/** * 当用户正在绘制多边形时的提示信息文本 * @type {string} */ var continuePolygonMsg = '单击继续绘制多边形'; /** * 当用户正在绘制线时的提示信息文本 * @type {string} */ var continueLineMsg = '单击继续绘制线'; /** * 鼠标移动事件处理函数 * @param {ol.MapBrowserEvent} evt */ var pointerMoveHandler = function(evt) { if (evt.dragging) { return; } /** @type {string} */ var helpMsg = '开始绘制'; //当前默认提示信息 //判断绘制几何类型设置相应的帮助提示信息 if (sketch) { var geom = (sketch.getGeometry()); if (geom instanceof ol.geom.Polygon) { helpMsg = continuePolygonMsg; //绘制多边形时提示相应内容 } else if (geom instanceof ol.geom.LineString) { helpMsg = continueLineMsg; //绘制线时提示相应内容 } } helpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示 helpTooltip.setPosition(evt.coordinate); //设置帮助提示框的位置 $(helpTooltipElement).removeClass('hidden'); //移除帮助提示框的隐藏样式进行显示 }; map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容 //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式 $(map.getViewport()).on('mouseout', function() { $(helpTooltipElement).addClass('hidden');}); |
代码解析
鼠标移动事件（pointermove），在回调函数中，根据用户选择测量的类型，在弹窗中显示帮助提示信息，同时为地图容器绑定鼠标移除事件（mouseout），该事件发生后影藏提示框。
5. 实现效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/cj9551/article/details/79128708
