如何从Carto地图中提取星球大战天体坐标数据？

一、优先：直接抓取底层数据源（最高效） #

1. 处理hbernberg的Carto嵌入地图 #

打开地图页面后按F12调出浏览器开发者工具：

• 切到Network标签，刷新页面，在筛选栏输入json，找带table或layer的请求，点进去看Response，里面就是完整的天体数据（坐标、名称、分类全有），直接复制存成.json文件就行。
• 如果没找到，切到Console标签，复制粘贴这段代码执行，自动下载数据：

  // 提取Carto图层所有数据并导出
  const layers = window.cartodb.getVis().getLayers();
  layers.forEach(layer => {
    layer.getSource().getRows().then(rows => {
      const dataStr = JSON.stringify(rows);
      const dataBlob = new Blob([dataStr], {type: 'application/json'});
      const a = document.createElement('a');
      a.href = URL.createObjectURL(dataBlob);
      a.download = 'star-wars-objects.json';
      a.click();
    });
  });
  

2. 处理swgalaxymap.com站点 #

这个是基于Carto的自定义站点，方法类似：

• 同样用Network标签找json请求，优先抓数据源。
• 要是找不到，在Console试试这段代码：

  // 尝试获取站点的Carto图层数据
  if (window.CartoDB) {
    window.CartoDBVis.getLayers().forEach(layer => {
      layer.getSource().getRows().then(rows => {
        const dataStr = JSON.stringify(rows);
        const dataBlob = new Blob([dataStr], {type: 'application/json'});
        const a = document.createElement('a');
        a.href = URL.createObjectURL(dataBlob);
        a.download = 'sw-galaxy-objects.json';
        a.click();
      });
    });
  }
  

  要是代码不生效，就先点一个天体，在Elements标签里看弹出框的HTML结构，确认坐标所在的DOM元素，再调整代码。

二、备选：模拟点击批量抓取（数据源抓不到时用） #

如果上面的方法都不行，只能靠模拟点击每个天体来拿坐标，适合数据量不大的情况：
在Console里复制这段代码（注意要根据页面实际的类名调整选择器）：

// 模拟点击所有天体并提取坐标
const objectMarkers = document.querySelectorAll('.cartodb-popup-trigger'); // 天体标记的选择器，需自行核对页面元素
const results = [];
let currentIndex = 0;

function processNext() {
  if (currentIndex >= objectMarkers.length) {
    // 导出结果
    const dataStr = JSON.stringify(results);
    const dataBlob = new Blob([dataStr], {type: 'application/json'});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(dataBlob);
    a.download = 'sw-coordinates.json';
    a.click();
    return;
  }
  const marker = objectMarkers[currentIndex];
  marker.click();
  setTimeout(() => {
    // 这里的选择器要对应页面弹出框里的名称和坐标元素，需自行核对
    const name = document.querySelector('.cartodb-popup-content h3').textContent;
    const coords = document.querySelector('.cartodb-popup-content .coords').textContent;
    results.push({name, coords});
    currentIndex++;
    processNext();
  }, 500); // 等待0.5秒确保弹出框加载完成
}

processNext();

怎么核对选择器？点一个天体，在Elements标签里找弹出框的HTML结构，比如坐标所在的<div>或<span>类名，把代码里的.coords换成对应的类名即可。

三、注意事项 #

• 页面完全加载后再执行代码，避免因元素未加载导致抓取失败
• 如果碰到跨域限制，可安装Tampermonkey插件，将代码写成用户脚本运行
• 请遵守站点的使用条款，提取的数据仅用于个人非商业用途

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