jVectorMap番外篇：用 GeoJSON 补全未竟的足迹地图

#!/usr/bin/env node

import fs from 'fs'
import path from 'path'
import { parse } from 'node-html-parser'

// ===== 参数解析 =====
const args = process.argv.slice(2)

if (args.length === 0) {
    console.error('❌ 请提供 SVG 文件路径，例如: npx parse.js china.svg')
    process.exit(1)
}

const inputPath = args[0]
const outputPath =
    args[1] ||
    path.join(
        path.dirname(inputPath),
        path.basename(inputPath, '.svg') + '.js'
    )

// ===== 读取 SVG =====
if (!fs.existsSync(inputPath)) {
    console.error('❌ 文件不存在:', inputPath)
    process.exit(1)
}

const svgContent = fs.readFileSync(inputPath, 'utf-8')
const root = parse(svgContent)

// ===== 解析 SVG =====
const svgTag = root.querySelector('svg')

if (!svgTag) {
    console.error('❌ 非法 SVG 文件')
    process.exit(1)
}

// 获取 viewBox
let width = 1000
let height = 600

const viewBox = svgTag.getAttribute('viewBox')
if (viewBox) {
    const parts = viewBox.split(/\s+/)
    width = parseFloat(parts[2])
    height = parseFloat(parts[3])
}

// ===== 提取 path =====
const paths = {}

const elements = root.querySelectorAll('path')

if (elements.length === 0) {
    console.error('❌ SVG 中未找到 path 元素')
    process.exit(1)
}

elements.forEach((el, index) => {
    const d = el.getAttribute('d')
    if (!d) return

    // 尝试读取属性（兼容 mapshaper）
    const name =
        el.getAttribute('name') ||
        el.getAttribute('data-name') ||
        `region_${index}`

    const adcode =
        el.getAttribute('adcode') ||
        el.getAttribute('data-adcode') ||
        index

    const id = `CN_${adcode}`

    paths[id] = {
        path: d,
        name
    }
})

// ===== 生成 jvectormap 数据 =====
const mapName = path.basename(outputPath, '.js')

const mapData = {
    width,
    height,
    paths
}

const output = `/*!
 * Generated by parse.js
 */
jQuery.fn.vectorMap('addMap', '${mapName}', ${JSON.stringify(mapData)});
`

// ===== 写入文件 =====
fs.writeFileSync(outputPath, output)

console.log(`✅ 转换完成:`)
console.log(`📥 输入: ${inputPath}`)
console.log(`📤 输出: ${outputPath}`)
console.log(`🧩 区域数: ${Object.keys(paths).length}`)

#!/usr/bin/env node

import fs from 'fs'
import path from 'path'

// ===== 参数 =====
const input = process.argv[2]
if (!input) {
    console.error('❌ 用法: node parse.js xxx.json')
    process.exit(1)
}

const output =
    process.argv[3] ||
    input.replace('.json', '.js')

// ===== 读取 GeoJSON =====
const geojson = JSON.parse(fs.readFileSync(input, 'utf-8'))

const features = geojson.features || []

// ===== 计算 bbox =====
let minX = Infinity, minY = Infinity
let maxX = -Infinity, maxY = -Infinity

features.forEach(f => {
    scanCoords(f.geometry.coordinates)
})

function scanCoords(coords) {
    coords.forEach(c => {
        if (Array.isArray(c[0])) {
            scanCoords(c)
        } else {
            const [lng, lat] = c
            const [x, y] = mercator([lng, lat])

            minX = Math.min(minX, x)
            minY = Math.min(minY, y)
            maxX = Math.max(maxX, x)
            maxY = Math.max(maxY, y)
        }
    })
}

features.forEach(f => scanCoords(f.geometry.coordinates))

const width = maxX - minX
const height = maxY - minY

// ===== 转 path =====
const paths = {}

features.forEach((f, index) => {
    const props = f.properties || {}
    const coords = f.geometry.coordinates

    const name = props.name || `region_${index}`
    const adcode = String(props.adcode || index)

    const d = geoToPath(f.geometry)

    paths[adcode] = {
        path: d,
        name
    }
})

// ===== 生成结果 =====
const mapName = path.basename(output, '.js')

const mapData = {
    width,
    height,

    projection: {
        type: 'merc',
        centralMeridian: 0
    },

    insets: [{
        width,
        height,
        top: 0,
        left: 0,
        bbox: [
            { x: minX, y: minY },
            { x: maxX, y: maxY }
        ]
    }],

    paths
}

const js = `
$.fn.vectorMap('addMap', '${mapName}', ${JSON.stringify(mapData)});
`

fs.writeFileSync(output, js)

console.log('✅ 完成:', output)

// ===== GeoJSON → SVG Path =====
function geoToPath(geometry) {
    let d = ''

    function projectRing(ring) {
        ring.forEach(([lng, lat], i) => {
            const [x, y] = mercator([lng, lat])
            d += (i === 0 ? 'M' : 'L') + x + ',' + y
        })
        d += 'Z'
    }

    if (geometry.type === 'Polygon') {
        geometry.coordinates.forEach(projectRing)
    }

    if (geometry.type === 'MultiPolygon') {
        geometry.coordinates.forEach(polygon => {
            polygon.forEach(projectRing)
        })
    }

    return d
}

function mercator([lng, lat]) {
    const x = lng
    const y = Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI / 180) / 2)) * 180 / Math.PI
    return [x, y]
}

const fs = require('fs-extra');

/**
 * 墨卡托投影转换函数
 * 将经纬度转换为 0-1 之间的相对坐标
 */
function projectMercator(lng, lat) {
    const x = (lng + 180) / 360;
    const sinLat = Math.sin(lat * Math.PI / 180);
    const y = 0.5 - Math.log((1 + sinLat) / (1 - sinLat)) / (4 * Math.PI);
    return { x, y };
}

/**
 * 核心转换逻辑
 */
async function convert(inputPath, outputPath, mapName) {
    const geojson = await fs.readJson(inputPath);
    const width = 1000; // 默认参考宽度
    const height = 800; // 默认参考高度

    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;

    // 第一步：预处理所有坐标，计算投影后的 Bounding Box
    const features = geojson.features.map(feature => {
        const coords = feature.geometry.coordinates;
        const type = feature.geometry.type;

        // 递归处理多边形坐标
        const projectedCoords = processCoords(coords, type, (lng, lat) => {
            const p = projectMercator(lng, lat);
            if (p.x < minX) minX = p.x;
            if (p.y < minY) minY = p.y;
            if (p.x > maxX) maxX = p.x;
            if (p.y > maxY) maxY = p.y;
            return p;
        });

        return {
            id: feature.properties.adcode || feature.properties.id || feature.properties.name,
            name: feature.properties.name,
            projectedCoords
        };
    });

    // 计算缩放比例，使地图充满画布
    const mapW = maxX - minX;
    const mapH = maxY - minY;
    const scale = width / mapW;
    const finalHeight = mapH * scale;

    // 第二步：生成 SVG Path 字符串
    const paths = {};
    features.forEach(f => {
        const pathString = f.projectedCoords.map(polygon => {
            return polygon.map((ring, i) => {
                const points = ring.map(p => {
                    const tx = (p.x - minX) * scale;
                    const ty = (p.y - minY) * scale;
                    return `${tx.toFixed(2)},${ty.toFixed(2)}`;
                });
                return `M${points.join('L')}Z`;
            }).join(' ');
        }).join(' ');

        paths[f.id] = {
            path: pathString,
            name: f.name
        };
    });

    // 第三步：构造 jvectormap 格式
    const result = {
        paths: paths,
        width: width,
        height: finalHeight,
        projection: {
            type: 'merc',
            centralMeridian: 0
        },
        insets: [{
            left: 0,
            top: 0,
            width: width,
            height: finalHeight,
            bbox: [
                { x: minX * 360 - 180, y: latFromY(maxY) }, // 转换回经纬度 bbox
                { x: maxX * 360 - 180, y: latFromY(minY) }
            ]
        }]
    };

    const finalJS = `jQuery.fn.vectorMap('addMap', '${mapName}', ${JSON.stringify(result, null, 2)});`;
    await fs.writeFile(outputPath, finalJS);
    console.log(`✅ 成功生成: ${outputPath}`);
}

/**
 * 辅助函数：递归处理 GeoJSON 坐标深度
 */
function processCoords(coords, type, transformFn) {
    if (type === 'Polygon') return [coords.map(ring => ring.map(p => transformFn(p[0], p[1])))];
    if (type === 'MultiPolygon') return coords.map(poly => poly.map(ring => ring.map(p => transformFn(p[0], p[1]))));
    return [];
}

/**
 * 墨卡托反算纬度（用于计算 BBox）
 */
function latFromY(y) {
    const latRad = Math.atan(Math.sinh((0.5 - y) * (2 * Math.PI)));
    return latRad * 180 / Math.PI;
}

// 运行
convert('./100000_full.json', './china_merc.js', 'china_merc');