如何通过正则修改Gatsby节点以适配Leaflet地图的地理数据格式？

一、在Gatsby节点转换阶段处理（推荐长期复用场景） #

直接在Gatsby构建过程中把前置数据里的Location字段转换为纯坐标格式，后续所有组件都能直接使用干净的坐标值，不用重复处理：

• 打开项目根目录的gatsby-node.js，添加onCreateNode钩子：

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions;
  // 只处理Markdown类型的节点
  if (node.internal.type === 'MarkdownRemark') {
    // 用正则匹配并提取geo链接里的坐标
    const locationMatch = node.frontmatter.Location?.match(/\[.*?\]\(geo:(.*?)\)/);
    if (locationMatch) {
      // 新增一个字段存处理后的坐标
      createNodeField({
        node,
        name: 'cleanedLocation',
        value: locationMatch[1],
      });
    }
  }
};

• 之后在组件里就能通过post.fields.cleanedLocation拿到51.485978,-0.1721193这种格式的坐标。

二、在Leaflet解析阶段处理（适合临时/单一场景） #

如果只是Leaflet组件需要用到坐标，也可以在渲染组件时直接处理原始的Location字段：

• 写一个提取坐标的工具函数：

const getCoordsFromLocation = (locationStr) => {
  const match = locationStr?.match(/\[.*?\]\(geo:(.*?)\)/);
  return match ? match[1] : null;
};

• 在Leaflet组件中使用：

const coordsStr = getCoordsFromLocation(post.frontmatter.Location);
if (coordsStr) {
  const [lat, lng] = coordsStr.split(',').map(Number);
  // 将lat和lng传给Leaflet的Marker或Map组件
}

方案选择建议 #

• 若站点多个页面/组件都需要使用地理坐标，选节点转换阶段处理，一次转换全局复用，避免重复逻辑。
• 若仅Leaflet组件需要处理，或不想改动Gatsby构建配置，选解析阶段处理更轻便。

内容的提问来源于stack exchange，提问作者Lone Wallaby