在 openlayers 中使用 drawinteraction 绘制线条时如何找到相交的特征？

Question

我正在使用 openlayers 版本 6.5.0。

我用drawinteraction画了一条线

这条线可能与其他线相交。

相交时，能知道交点和相交线的特征信息吗？

绘制完成后，触发 drawend 事件。

这时候我画的线应该加上交点

如何为我画的线添加交点？

交点不是特征，应该添加为我画的线的几何坐标。

Answer 1

您可以使用turf.js找到交点

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/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>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <script src="https://unpkg.com/@turf/turf@6.3.0/turf.min.js"></script>
  </head>
  <body>
    <div id="map" class="map">
    <form id="form">
      <label>Geometry type &nbsp;</label>
      <select id="type">
        <option value="Point">Point</option>
        <option value="LineString" selected>LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
        <option value="None">None</option>
      </select>
    </form>
    </div>
    <script>
      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var source = new ol.source.Vector({wrapX: false});

      var vector = new ol.layer.Vector({
        source: source
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
          center: [-11000000, 4600000],
          zoom: 4
        })
      });

      var typeSelect = document.getElementById('type');
      var format = new ol.format.GeoJSON();

      var drawend = function (event) {
        var geometry = event.feature.getGeometry();
        var type = geometry.getType();
        if (type === "LineString" || type === "Polygon") {
          var geojson1 = format.writeFeaturesObject([event.feature]);
          var extent = geometry.getExtent();
          source.forEachFeatureIntersectingExtent(extent, function (feature) {
            var geometry = feature.getGeometry();
            var type = geometry.getType();
            if (type === "LineString" || type === "Polygon") {
              var geojson2 = format.writeFeaturesObject([feature]);
              var intersects = turf.lineIntersect(geojson1, geojson2);
              var points = format.readFeatures(intersects);
              source.addFeatures(points);
            }
          });
        }
      };

      var draw; // global so we can remove it later
      function addInteraction() {
        var value = typeSelect.value;
        if (value !== 'None') {
          draw = new ol.interaction.Draw({
            source: source,
            type: typeSelect.value
          });
          draw.on('drawend', drawend);
          map.addInteraction(draw);
        }
      }


      /**
       * Handle change event.
       */
      typeSelect.onchange = function() {
        map.removeInteraction(draw);
        addInteraction();
      };

      addInteraction();
    </script>
  </body>
</html>

如果要将新顶点插入到绘制的线串中，您需要运行对线串的每一段进行该处理以确定插入新顶点的位置。

请注意，交点会因使用的投影而异 - 如果在确定交点之前将示例中的绘制线转换为 EPSG:4326，则结果看起来会有所不同。

Answer 2

查看 ol-ext ol/interaction/splitter，它在编辑矢量线串时充当分割特征代理。
参见示例：https://viglino.github.io/ol-ext/examples/interaction/map.interaction.splitter.html

在 openlayers 中使用 drawinteraction 绘制线条时如何找到相交的特征？

How to find features that intersect when drawing lines with drawinteraction in openlayers?

openlayers