Search code examples
javascriptvuejs3geojsonopenlayers-3

Problem when displaying lines and points (json) on OpenLayers Vue 3 js


I'm trying to display on an OpenLayers Map some points and lines using Vue js 3 but there is and "invalid type" issue that I could'nt solve. Here is the warning message on console log :

runtime-core.esm-bundler.js:40 [Vue warn]: Invalid prop: type check failed for prop "coordinates". Expected Array, got Object  
  at <OlGeomMultiLineString coordinates= {type: 'FeatureCollection', features: Array(58)} > 
  at <OlFeature> 
  at <OlSourceVector> 
  at <OlVectorLayer> 
  at <OlMap style= {height: '400px'} > 
  at <Map key=0 geoJsonArretList= {type: 'FeatureCollection', features: Array(60)} geoJsonMouvementList= {type: 'FeatureCollection', features: Array(58)} > 
  at <VCardItem> 
  at <VCard height="100%" width="200%" > 
  at <VContainer class="justify-center d-flex" > 
  at <Dashboard.vue onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {addBlock: ƒ, removeBlock: ƒ, validateTraces: ƒ, getData: ƒ, …} > > 
  at <RouterView> 
  at <VMain> 
  at <View key=0 > 
  at <VApp> 
  at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <RouterView> 
  at <App>

My template is defined as following :

<template>
  <ol-map style="height:400px">
    <ol-view
      ref="view"
      :center="center"
      :rotation="rotation"
      :zoom="zoom"
      :projection="projection"
      @zoomChanged="zoomChanged"
      @centerChanged="centerChanged"
      @resolutionChanged="resolutionChanged"
      @rotationChanged="rotationChanged"
    />

    <ol-zoom-control />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-vector-layer>
      <ol-source-vector>
        <ol-feature>
          <ol-geom-multi-point :coordinates="geoJsonArretList"></ol-geom-multi-point>
          <ol-geom-multi-line-string :coordinates="geoJsonMouvementList"></ol-geom-multi-line-string>
        </ol-feature>
      </ol-source-vector>
    </ol-vector-layer>
  </ol-map>
</template>

The problem is located at the ol-source-vector line. The props received (geoJsonArretList and geoJsonMouvementList) are of type :

{
type : "FeatureCollection", 
features: Array(60)
0: {type: "Feature", geometry:{...}, properties: {...}}
1: ...
}

I tried saving my data (for example geoJsonArretList) as a .json file but the component couldn't access the file. I tried modifying the props received (geoJsonArretList for example) forcing the Object to become an Array but the component couldn't read it neither.


Solution

  • A user had previously replied to me but his reply disappeared, here is the idea:

    • In the templates:
    <ol-geom-multi-line-string :coordinates="mouvementCoordinates"></ol-geom-multi-line-string>
    <ol-geom-multi-point :coordinates="arretCoordinates"></ol-geom-multi-point>
    
    • In the script:
    computed: {
        arretCoordinates() {
          return this.geoJsonArretList.features.map(feature => feature.geometry.coordinates);
        },
        mouvementCoordinates() {
          return this.geoJsonMouvementList.features.map(feature => feature.geometry.coordinates);
        },
      },
    

    The problem was the format of the data received for which the coordinates of the geometries had to be returned.