实现量测距离和面积
官网示例：https://openlayers.org/en/latest/examples/measure.html
1、初始化地图
var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: ‘http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G’
}) //加载谷歌影像地图
});
var view = new ol.View({
center: [113, 23],
projection: ‘EPSG:3857’,
zoom: 10
});
map = new ol.Map({
layers: [rootLayer],
target: ‘map’,
view: view
});
2、初始化绘图方法
var type = typeSelect.value == ‘area’ ? ‘Polygon’ : ‘LineString’;
draw = new ol.interaction.Draw({
source: source,
type: type
});
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;
var output;
if (geom instanceof ol.geom.Polygon) {
var p=geom.clone();
var circleIn4326 = p.transform(map.getView().getProjection(),’EPSG:3857′);
output = formatArea(circleIn4326);
} else if (geom instanceof ol.geom.LineString) {
var p=geom.clone();
var circleIn4326 = p.transform(map.getView().getProjection(),’EPSG:3857′);
output = formatLength(circleIn4326);
}
document.getElementById(‘label’).innerText=output;
});
});
draw.on(‘drawend’, function () {
sketch = null;
ol.Observable.unByKey(listener);
});
3、量测面积函数
var formatArea = function (polygon) {
var area = ol.sphere.getArea(polygon);
var output;
if (area > 10000) {
output = Math.round((area / 1000000) * 100) / 100 + ‘ ‘ + ‘km<sup>2</sup>’;
} else {
output = Math.round(area * 100) / 100 + ‘ ‘ + ‘m<sup>2</sup>’;
}
return output;
};
4、量测距离的方法
var formatLength = function (line) {
var length = ol.sphere.getLength(line);
var output;
if (length > 100) {
output = Math.round((length / 1000) * 100) / 100 + ‘ ‘ + ‘km’;
} else {
output = Math.round(length * 100) / 100 + ‘ ‘ + ‘m’;
}
return output;
};
效果如下
量距离
量面积
完整代码如下
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Draw Shapes</title>
<!– Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer –>
<script src=”https://unpkg.com/elm-pep”></script>
<style>
.map {
width: 100%;
height: 400px;
}
</style>
<link rel=”stylesheet” href=”../../lib/openlayerv6.4.3/css/ol.css”>
<script src=”../../lib/openlayerv6.4.3/build/ol.js”></script>
</head>
<script>
var map;
var typeSelect;
var draw; // global so we can remove it later
var source;
function init() {
var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: ‘http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G’
}) //加载谷歌影像地图
});
var view = new ol.View({
center: [113, 23],
projection: ‘EPSG:4326’,
zoom: 10
});
map = new ol.Map({
layers: [rootLayer],
target: ‘map’,
view: view
});
source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source,
});
map.addLayer(vector);
typeSelect = document.getElementById(‘type’);
/**
* Handle change event.
*/
typeSelect.onchange = function () {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
}
var type;
var df;
var sketch;
function addInteraction() {
var type = typeSelect.value == ‘area’ ? ‘Polygon’ : ‘LineString’;
draw = new ol.interaction.Draw({
source: source,
type: type
});
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;
var output;
if (geom instanceof ol.geom.Polygon) {
var p=geom.clone();
var circleIn4326 = p.transform(map.getView().getProjection(),’EPSG:3857′);
output = formatArea(circleIn4326);
} else if (geom instanceof ol.geom.LineString) {
var p=geom.clone();
var circleIn4326 = p.transform(map.getView().getProjection(),’EPSG:3857′);
output = formatLength(circleIn4326);
}
document.getElementById(‘label’).innerText=output;
});
});
draw.on(‘drawend’, function () {
sketch = null;
ol.Observable.unByKey(listener);
});
}
/**
* Format area output.
* @param {Polygon} polygon The polygon.
* @return {string} Formatted area.
*/
var formatArea = function (polygon) {
var area = ol.sphere.getArea(polygon);
var output;
if (area > 10000) {
output = Math.round((area / 1000000) * 100) / 100 + ‘ ‘ + ‘km<sup>2</sup>’;
} else {
output = Math.round(area * 100) / 100 + ‘ ‘ + ‘m<sup>2</sup>’;
}
return output;
};
var formatLength = function (line) {
var length = ol.sphere.getLength(line);
var output;
if (length > 100) {
output = Math.round((length / 1000) * 100) / 100 + ‘ ‘ + ‘km’;
} else {
output = Math.round(length * 100) / 100 + ‘ ‘ + ‘m’;
}
return output;
};
</script>
<body οnlοad=”init()”>
<div id=”map” class=”map”></div>
<form class=”form-inline”>
<label>Shape type </label>
<select id=”type”>
<option value=”length”>Length (LineString)</option>
<option value=”area”>Area (Polygon)</option>
</select>
</form>
<label id=”label”></label>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「mylove10086」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014572215/article/details/109205105