印度尼西亚 GeoJSON 与 TopoJSON 地图（38个省）

Source: Dev.to

为什么这很重要

地图不仅仅是好看的视觉元素。地图是您数据的 基础。
如果省份列表不准确，整个系统都会出现问题：分层颜色地图会出错，分析结果与实际区域不符，提示框会显示错误的名称。

印度尼西亚已经新增了几个省份——南巴布亚、中巴布亚、山地巴布亚和西南巴布亚——因此许多旧数据集已经不再适用。甚至很多公开来源仍只显示 34 个省份。

范围

完整数据

38 个省份，包括：

• 南巴布亚
• 中巴布亚
• 山地巴布亚
• 西南巴布亚

两种格式

• GeoJSON – 使用简便，兼容 Leaflet、Mapbox GL 和 Google Maps 覆盖层。
• TopoJSON – 文件大小约小 80–90 %，加载更快，适合 D3.js 和大规模可视化。

干净 & 一致

• 已标准化的省份名称
• 稳定的 ID 便于数据关联
• 没有重复的几何体
• 已简化且适合网页的路径

GeoJSON vs TopoJSON（摘要）

• 如果您在构建 交互式仪表盘，TopoJSON 是最佳选择。
• 如果您需要 即插即用，GeoJSON 已经足够。

使用案例示例

该数据集适用于：

• 📊 政府与公共服务仪表盘
• 🌋 灾害与洪水监测
• 🗳️ 选举与人口统计地图
• 🚚 物流规划与服务覆盖
• 📍 基于位置的 SaaS 产品
• 📱 移动优先的数据可视化

示例：在 Leaflet 中使用 GeoJSON

import L from "leaflet";
import indonesiaProvinces from "./indonesia-38-provinces.geojson";

L.geoJSON(indonesiaProvinces, {
  style: {
    color: "#1e40af",
    weight: 1,
    fillOpacity: 0.6,
  },
  onEachFeature: (feature, layer) => {
    layer.bindPopup(feature.properties.province);
  },
}).addTo(map);

示例：在 D3.js 中使用 TopoJSON

import * as d3 from "d3";
import { feature } from "topojson-client";

// Import file TopoJSON (支持 Vite / Webpack / Next.js)
import topoData from "./indonesia-38-provinces.topo.json";

const width = 800;
const height = 600;

const svg = d3
  .select("#map")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const projection = d3
  .geoMercator()
  .fitSize([width, height], feature(topoData, topoData.objects.indonesia_provinces));

const path = d3.geoPath().projection(projection);

// 转换 TopoJSON → GeoJSON
const provinces = feature(topoData, topoData.objects.indonesia_provinces);

svg
  .selectAll("path")
  .data(provinces.features)
  .enter()
  .append("path")
  .attr("d", path)
  .attr("fill", "#60a5fa")
  .attr("stroke", "#1e3a8a")
  .append("title")
  .text(d => d.properties.province);

下载

通过以下仓库下载数据集：

• GeoJSON（38 省） – indonesia-38-provinces.geojson
• TopoJSON（38 省） – indonesia-38-provinces.topo.json