0

I followed the example on how to implement a drag and drop interaction with openLayers.

I now want to read the coordinate of every features like the following

this.dragAndDropInteraction.on('addfeatures', (event: DragAndDropEvent) => {
      const features: Feature<Geometry>[] = event.features

      features.forEach((feature, index) => {
        const properties = feature.getProperties()
        const coordinates = properties?.geometry

        console.log(coordinates.flatCoordinates)
      })
    })

But I get [799785.5152789096,...] and I wanted to have it with the EPSG:4326 format.

I did try to change the projections when I initialized the map like this

 const dragAndDropInteraction = new DragAndDrop({
    formatConstructors: [<any>GPX, KML],
    projections: 'EPSG:4326',
  })

this.map = new Map({
  projections: 'EPSG:4326',
  interactions: defaultInteractions().extend([this.dragAndDropInteraction]),
  target: target,
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: this.view,
})

But I keep get the wrong coordinate.

Is it normal?

I'm importing a KML file
Here is his content

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2"
  xmlns:gx="http://www.google.com/kml/ext/2.2"
  xmlns:kml="http://www.opengis.net/kml/2.2"
  xmlns:atom="http://www.w3.org/2005/Atom">
  <Document>
    <name>Traces du passé</name>
    <open>1</open>
    <Style id="default0">
    </Style>
    <StyleMap id="default">
      <Pair>
        <key>normal</key>
        <styleUrl>#default0</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#hl</styleUrl>
      </Pair>
    </StyleMap>
    <Style id="hl">
      <IconStyle>
        <scale>1.2</scale>
      </IconStyle>
    </Style>
    <Folder id="kml_ft_Sentier">
      <name>Sentier</name>
      <Placemark>
        <name>31</name>
        <description>La porte de Fully</description>
        <LookAt>
          <longitude>7.184550738826426</longitude>
          <latitude>46.17214547339596</latitude>
          <altitude>0</altitude>
          <heading>-0.0005252280984056049</heading>
          <tilt>60.00131024332176</tilt>
          <range>168.3472321103629</range>
          <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
        </LookAt>
        <styleUrl>#default</styleUrl>
        <Point>
          <gx:drawOrder>1</gx:drawOrder>
          <coordinates>7.184330180845047,46.17181721801122,0</coordinates>
        </Point>
      </Placemark>
    </Document>
  </kml>
1

The features are displayed in the view projection, to get the EPSG:4326 coordinates the geometry must be cloned and transformed back to EPSG:4326

  features.forEach((feature, index) => {
    const geometry = feature.getGeometry().clone().transform(map.getView().getProjection(), 'EPSG:4326');

    console.log(geometry)
  })
})
2
  • Well, it did work. I understand that it take the default view projection, but why does it didn't had the right projection from the beginning ? Apr 29 at 9:42
  • If your view uses meters as projection units and the feature was in EPSG:4326 the feature would appear very small near point [0, 0] in the projection.
    – Mike
    Apr 29 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.