En mi proyecto Gatsby, estoy recogiendo los siguientes datos de mi plataforma de WordPress:
[{ "geometry": { "type": "Polygon", "coordinates": "[\"0|55.852081917669,11.704305226785\",\"1|55.851551628025,11.706345689048\",\"2|55.853209224226,11.712709159294\",\"3|55.851748029256,11.713342357427\",\"4|55.845937703792,11.720414588428\",\"5|55.845051483877,11.713738293486\",\"6|55.846069367192,11.711604417263\",\"7|55.846239161586,11.71001852885\",\"8|55.845765045803,11.709506210798\",\"9|55.844532089093,11.709164766166\",\"10|55.84419438921,11.705722332566\",\"11|55.847328748169,11.704214635447\",\"12|55.848990718611,11.703850761782\",\"13|55.850086606046,11.704294408103\",\"14|55.850086606046,11.704294408103\"]" }, "properties": { "title": "Area 1", "slug": "area-1" } }]Estoy procesando la cadena de coordenadas dividiéndola por tubería (|) y desplazando el primer elemento de la matriz. Vea abajo:
const polygonareas = data.allWpArea.nodes.map(area => ({ geometry: { type: "Polygon", coordinates: area.coordinates.split("|") }, properties: { title: area.title, slug: area.slug } })) polygonareas.map(data => ({ geometry: { coordinates: data.geometry.coordinates.shift() } }))Ese mapeo del objeto está produciendo lo siguiente:
{ "geometry": "type": "Polygon", "coordinates": [ "55.852081917669,11.704305226785\",\"1", "55.851551628025,11.706345689048\",\"2", "55.853209224226,11.712709159294\",\"3" ] }, "properties": { "title": "Area 1", "slug": "area-1" } }Me gustaría dividir los elementos de la matriz de coordenadas mediante una barra invertida usando el siguiente código, que no funciona:
polygonareas.map(data => ({ geometry: { coordinates: data.geometry.coordinates.map(coord => ( coord.split("\\") )) } }))Pero sin resultado. ¿Cómo puedo dividir los elementos por barra invertida de la matriz y solo conservar las coordenadas?
¡No tiene barras diagonales inversas en los elementos de coordenadas! Esas son comillas dobles escapadas. Puede analizarlos fácilmente y luego hacer las modificaciones que necesite:
const data = [{ "geometry": { "type": "Polygon", "coordinates": "[\"0|55.852081917669,11.704305226785\",\"1|55.851551628025,11.706345689048\",\"2|55.853209224226,11.712709159294\",\"3|55.851748029256,11.713342357427\",\"4|55.845937703792,11.720414588428\",\"5|55.845051483877,11.713738293486\",\"6|55.846069367192,11.711604417263\",\"7|55.846239161586,11.71001852885\",\"8|55.845765045803,11.709506210798\",\"9|55.844532089093,11.709164766166\",\"10|55.84419438921,11.705722332566\",\"11|55.847328748169,11.704214635447\",\"12|55.848990718611,11.703850761782\",\"13|55.850086606046,11.704294408103\",\"14|55.850086606046,11.704294408103\"]" }, "properties": { "title": "Area 1", "slug": "area-1" } }]; const polygonareas = data.map(area => ({ geometry: { type: "Polygon", coordinates: JSON.parse(area.geometry.coordinates) }, properties: { title: area.properties.title, slug: area.properties.slug } })); console.log(polygonareas);Gracias por la ayuda. Eso hizo el truco. Terminé con la siguiente solución para resolver mi problema:
// Building the base geojson object const areasdata = { 'type': 'FeatureCollection', 'features': [] } const polygons = data.allWpArea.nodes.map(area => ({ geometry: { type: "Polygon", coordinates: JSON.parse(area.coordinates) }, properties: { title: area.title, slug: area.slug } })) const areas = polygons.map(data => ({ geometry: { coordinates: data.geometry.coordinates.map(coord => coord.split("|").pop()) } })) areasdata.features = areasEl código anterior está produciendo el siguiente resultado:
{ "type": "FeatureCollection", "features": [ { "geometry": { "type": "Polygon", "coordinates": [ "55.7091,11.842046", "55.708983,11.841894", "55.708738,11.84157" ] }, "properties": { "title": "Area 2", "slug": "area-2" } } ] }