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

【问题标题】：How to find features that intersect when drawing lines with drawinteraction in openlayers?在openlayers中使用drawinteraction绘制线条时如何找到相交的特征？
【发布时间】：2021-05-08 05:12:52
【问题描述】：

我使用的是 openlayers 6.5.0 版。

我用drawinteraction画一条线。

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

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

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

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

如何在我绘制的直线上添加交点？

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

【问题讨论】：

标签： openlayers

【解决方案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，则结果看起来会有所不同。

【讨论】：

谢谢。我解决了我担心了 3 天的问题。

【解决方案2】：

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

【讨论】：