如何解决标记多边形 openlayers 3 的每条边的长度
如何用边的长度标记多边形的每条边？
我试试这个代码： http://jorix.github.io/OL-DynamicMeasure/examples/measure-dynamic.html
注意：如果将“要显示的段”留空，则可以查看所有段的长度。
但是这个代码在 openlayers 2. 任何人都可以将它转换为 openlayers 3 吗？
解决方法
OpenLayers 3 没有内置的 Measure 控件，但您可以像示例 https://openlayers.org/en/v3.20.1/examples/measure.html 中那样自己制作。使用矢量样式显示标签比使用该示例中使用的叠加更容易，特别是如果您想将线分成几段。 OpenLayers 3 的文本样式能力有限，在版本 4 或更高版本中，您可以指定背景填充以使它们看起来非常像叠加层，但此代码是 OpenLayers 3：
<!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,0.2)'
}),stroke: new ol.style.Stroke({
color: 'rgba(0,0.5)',lineDash: [10,10],width: 2
}),image: new ol.style.Circle({
radius: 5,stroke: new ol.style.Stroke({
color: 'rgba(0,0.7)'
}),fill: new ol.style.Fill({
color: 'rgba(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,1)'
}),stroke: new ol.style.Stroke({
color: 'rgba(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],'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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。