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.
A user had previously replied to me but his reply disappeared, here is the idea:
<ol-geom-multi-line-string :coordinates="mouvementCoordinates"></ol-geom-multi-line-string>
<ol-geom-multi-point :coordinates="arretCoordinates"></ol-geom-multi-point>
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.