How do I draw a line in Openlayer and draw a point on it?

Question

How do I draw lines on the openlayer and draw points on the line through the miles?

I can draw a line on the openlayer, but I don't know how to draw a point online based on the distance from the distance.

Answer 1

Draw your line, then serialize the drawn line line to GeoJSON (using ol.format.GeoJSON, then use Turf library along function and then reuse the point returned from this Turf function to add it to OpenLayers

// GeoJSON sample line
var geojson = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [
        0.142822265625,
        48.03769224746972
      ],
      [
        -0.230712890625,
        47.73562905149295
      ],
      [
        -0.3131103515625,
        47.55428670127958
      ],
      [
        -0.98876953125,
        47.42065432071318
      ],
      [
        -1.6149902343749998,
        47.21956811231547
      ],
      [
        -1.1370849609375,
        46.558860303117164
      ],
      [
        -0.340576171875,
        46.34692761055676
      ],
      [
        -0.6756591796875,
        45.78284835197676
      ],
      [
        -0.494384765625,
        45.10454630976873
      ],
      [
        -0.5877685546875,
        44.78183504339988
      ]
    ]
  }
};
// Convert GeoJSON feature line to OpenLayers feature
var lineFeature = (new ol.format.GeoJSON()).readFeature(geojson);

// Convert OpenLayers line feature to GeoJSON feature, you may want later
// to change reproject coordinates to display it on the map
var geojsonFromLineFeature = (new ol.format.GeoJSON()).writeFeature(lineFeature);

// Calculate point position 85 miles away from the point
// coordinates beginning along the line
var pointFrom85Miles = turf.along(line1, 85, {units: 'miles'});

// Convert GeoJSON point to OpenLayers point feature
var pointFrom85MilesFeature = (new ol.format.GeoJSON()).write(pointFrom85Miles);

I've tried using OpenLayers getCoordinateAtM but the result were really not aligned with Turf. Below, I've done calculation of length for the GeoJSON line and they are too different, so interpolation with getCoordinateAtM is not better... (maybe because it works on projected plane)

// Units are in degrees
feature.getGeometry().getLength()
// Return 5.359842138525585

// Units are in degrees
turf.length(geojson, {units: 'degrees'});
// Return 4.477214098875635