React/JS字符串处理：坐标字符串数组转lat、lng对象数组实现方法

处理逻辑分为三步：

• 遍历原始polygonCoordinates数组的每一个字符串元素
• 移除每个字符串首尾的括号，按分隔符拆分出纬度、经度的字符串值，转成数字类型
• 组装成带lat、lng属性的对象，收集为新数组即可

基础实现代码 #

// 原始数据示例
const sourceData = {
  polygonCoordinates: [
    "(3.0, 0.0)",
    "(3.0, 5.0)",
    "(8.0, 12.0)",
    "(3.0, 0.0)"
  ]
}

// 转换逻辑
const polyCoords = sourceData.polygonCoordinates.map(coordStr => {
  // 移除括号后拆分经纬度
  const [latVal, lngVal] = coordStr.replace(/[()]/g, '').split(', ')
  return {
    lat: Number(latVal),
    lng: Number(lngVal)
  }
})

兼容异常格式的优化版本 #

如果坐标字符串可能存在多余空格，可以调整拆分逻辑适配：

const polyCoords = sourceData.polygonCoordinates.map(coordStr => {
  // 先移除括号，按逗号拆分后分别去除首尾空格再转数字
  const [latStr, lngStr] = coordStr.replace(/[()]/g, '').split(',')
  return {
    lat: Number(latStr.trim()),
    lng: Number(lngStr.trim())
  }
})

React 组件内使用示例 #

如果是在React项目中从接口拉取数据后处理，可以参考如下写法：

import { useState, useEffect } from 'react'

const PolygonMap = () => {
  const [polyCoords, setPolyCoords] = useState([])

  useEffect(() => {
    // 模拟请求接口获取原始数据
    fetch('/api/get-polygon-data')
      .then(res => res.json())
      .then(rawData => {
        const transformedCoords = rawData.polygonCoordinates.map(coordStr => {
          const [lat, lng] = coordStr.replace(/[()]/g, '').split(',').map(item => Number(item.trim()))
          return { lat, lng }
        })
        setPolyCoords(transformedCoords)
      })
  }, [])

  // 后续使用polyCoords渲染多边形等业务逻辑
  return <div>地图组件渲染区域</div>
}

内容的提问来源于stack exchange，提问作者lokesh kumar