[英]Labeling the length of each side of polygon openlayers 3
label如何將多邊形的每一邊與邊長對應？
我試試這個代碼： 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. 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>
OpenLayers 4如何檢測一個多邊形是否碰到另一個多邊形的側面
[英]OpenLayers 4 how to detect if a polygon touches the side of another polygon
OpenLayers 創建復雜的樣式（一側有孔和筆划的多邊形）
[英]OpenLayers creating a complex style (polygon with a hole and a stroke on one side)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.