turf-midpoint

Takes two point features and returns the mid point.
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <link rel="stylesheet" href="assets/css/styles.css" type="text/css">
    <script src="//cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
    <script src="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" type="text/javascript"></script>
    <title>Turf and OpenLayers 3 - midpoint</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      // Declare a GeoJSON source
      var geojson_source = new ol.source.Vector({
        projection: 'EPSG:3857'
      });

      var x1 = -1.5741021;
      var y1 = 47.1991929;
      // Cranes of Nantes with properties defined
      var pt1 = turf.point([x1, y1], {
        name: 'Grue grise',
        man_made: 'crane'
      });

      var x2 = -1.57007;
      var y2 = 47.20507;
      var pt2 = turf.point([x2, y2], {
        name: 'Grue jaune',
        man_made: 'crane'
      });

      var fc = turf.featureCollection([pt1, pt2]);

      var midPoint = turf.midpoint(pt1, pt2);

      // Declare a formatter to read GeoJSON
      var format = new ol.format.GeoJSON();

      // Declare a source
      var vectorSource = new ol.source.Vector();

      // When reading feature, reproject to EPSG 3857
      var features = format.readFeatures(fc, {
        featureProjection: 'EPSG:3857'
      });
      // Add a feature
      vectorSource.addFeatures(features);

      var pointsStyle = [new ol.style.Style({
        image: new ol.style.Circle({
          stroke: new ol.style.Stroke({
            color: 'white'
          }),
          fill: new ol.style.Fill({
            color: '#1f6b75'
          }),
          radius: 5
        })
      })];

      var midPointStyle = [new ol.style.Style({
        image: new ol.style.Circle({
          stroke: new ol.style.Stroke({
            color: 'white'
          }),
          fill: new ol.style.Fill({
            color: 'black'
          }),
          radius: 5
        })
      })];

      // Declare a vector layer with the already
      // created source containing added features
      var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: pointsStyle
      });

      var vectorMidPoint = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: (new ol.format.GeoJSON()).readFeatures(
            midPoint, {
              featureProjection: 'EPSG:3857'
            }
          ),
          projection: 'EPSG:3857'
        }),
        style: midPointStyle
      });

      var vectorLine = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: (new ol.format.GeoJSON()).readFeatures(
            turf.lineString([[x1, y1], [x2, y2]], {}), {
              featureProjection: 'EPSG:3857'
            }
          ),
          projection: 'EPSG:3857'
        }),
        style: [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'white',
              width: 3
            })
          }),
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: [0, 121, 88, 1],
              width: 1
            })
          })
        ]
      });

      // Instanciate a map and add layers
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vectorLine,
          vectorLayer,
          vectorMidPoint
        ],
        view: new ol.View({
          center: ol.proj.transform(
            [-1.571456, 47.202561],
            'EPSG:4326',
            'EPSG:3857'
          ),
          zoom: 15
        })
      });
    </script>
  </body>
</html>
midpoint

turf-midpoint

results matching ""

No results matching ""
