标注多边形开口层各边的长度3 [英] Labeling the length of each side of polygon openlayers 3
本文介绍了标注多边形开口层各边的长度3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何用边的长度标记多边形的每一条边？
我尝试以下代码： http://jorix.github.io/OL-DynamicMeasure/examples/measure-dynamic.html
注意：如果将要显示的段保留为空白，则将显示所有段的长度。
但这段代码在Open Layers 2中。有人能将它转换为Open Layers 3吗？
推荐答案
OpenLayers 3没有内置的测量控件，但您可以像示例https://openlayers.org/en/v3.20.1/examples/measure.html那样自己创建。使用矢量样式显示标签比使用该样例中使用的覆盖更容易，尤其是在要将直线打断为线段的情况下。OpenLayers 3的文本样式能力有限，在版本4或更高版本中，您可以指定背景填充以使它们看起来非常像覆盖图，但此代码是OpenLayers 3：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"><!DOCTYPE html>
<html>
<head>
<title>Measure</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#map {
position: relative;
}
#form {
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
}
</style>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map">
<form id ="form" class="form-inline">
<label>Measurement type </label>
<select id="type">
<option value="LineString">Segments (LineString)</option>
<option value="Polygon">Sides (Polygon)</option>
</select>
</form>
</div>
<script>
var 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)'
})
})
});
var labelStyle = new ol.style.Style({
text: new ol.style.Text({
font: '14px Calibri,sans-serif',
fill: new ol.style.Fill({
color: 'rgba(0, 0, 0, 1)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 1)',
width: 3
})
})
});
var labelStyleCache = [];
var wgs84Sphere = new ol.Sphere(6378137);
var formatLength = function(line) {
var length;
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);
}
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + 'km';
} else {
output = (Math.round(length * 100) / 100) +
' ' + 'm';
}
return output;
};
var styleFunction = function (feature, drawType) {
var styles = [style];
var geometry = feature.getGeometry();
var type = geometry.getType();
var lineString;
if (!drawType || drawType === type) {
if (type === 'Polygon') {
lineString = new ol.geom.LineString(geometry.getCoordinates()[0]);
} else if (type === 'LineString') {
lineString = geometry;
}
}
if (lineString) {
var count = 0;
lineString.forEachSegment(function(a, b) {
var segment = new ol.geom.LineString([a, b]);
var label = formatLength(segment);
if (labelStyleCache.length - 1 < count) {
labelStyleCache.push(labelStyle.clone());
}
labelStyleCache[count].setGeometry(segment);
labelStyleCache[count].getText().setText(label);
styles.push(labelStyleCache[count]);
count++;
});
}
return styles;
};
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source,
style: function(feature) {
return styleFunction(feature);
}
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 15
})
});
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction() {
var drawType = typeSelect.value;
draw = new ol.interaction.Draw({
source: source,
type: drawType,
style: function (feature) {
return styleFunction(feature, drawType)
}
});
map.addInteraction(draw);
}
typeSelect.onchange = function () {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
</script>
</body>
</html>这篇关于标注多边形开口层各边的长度3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
