分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了标记多边形 openlayers 3 的每条边的长度，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决标记多边形 openlayers 3 的每条边的长度？

开发过程中遇到标记多边形 openlayers 3 的每条边的长度的问题如何解决？下面主要结合日常开发的经验，给出你关于标记多边形 openlayers 3 的每条边的长度的解决方法建议，希望对你解决标记多边形 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 &nbsp;</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>