Bertin.js 开源项目教程

Bertin.js 开源项目教程

bertin A wrapper for bertin.js 项目地址: https://gitcode.com/gh_mirrors/be/bertin

1. 项目介绍

Bertin.js 是一个用于在 JavaScript 中绘制地图的库。它基于 D3.js，旨在简化创建主题地图的过程。Bertin.js 支持多种地图类型和组件，如标题、脚注、经纬网、轮廓、阴影、比例尺等。项目目前处于活跃开发阶段，欢迎各种形式的贡献，包括错误报告、代码贡献和文档改进。

2. 项目快速启动

安装

在浏览器中使用

最新版本：

<script src="https://cdn.jsdelivr.net/npm/bertin" charset="utf-8"></script>

固定版本：

<script src="https://cdn.jsdelivr.net/npm/bertin@1.7" charset="utf-8"></script>

在 Observable 中使用

最新版本：

bertin = require("bertin")

固定版本：

bertin = require("bertin@1.7")

使用示例

在浏览器中绘制地图

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/bertin"></script>
<script>
  let geojson = "https://raw.githubusercontent.com/neocarto/bertin/main/data/world.geojson";
  d3.json(geojson).then((r) => {
    document.body.appendChild(
      bertin.draw([
        {
          params: {
            projection: "VanDerGrinten4",
            clip: true
          },
          layers: [
            { geojson: r, tooltip: ["$ISO3", "$NAMEen"] },
            { type: "outline" },
            { type: "graticule" }
          ]
        }
      ])
    );
  });
</script>

3. 应用案例和最佳实践

案例1：绘制全球地图

使用 Bertin.js 绘制全球地图，展示国家边界和经纬网。

bertin.draw([
  {
    params: {
      projection: "VanDerGrinten4",
      clip: true
    },
    layers: [
      { geojson: worldGeojson, tooltip: ["$ISO3", "$NAMEen"] },
      { type: "outline" },
      { type: "graticule" }
    ]
  }
]);

案例2：绘制自定义投影地图

使用自定义投影绘制地图，展示特定区域。

bertin.draw([
  {
    params: {
      projection: "Polar",
      width: 750
    },
    layers: [
      { geojson: customGeojson, fill: "#e6acdf" }
    ]
  }
]);

4. 典型生态项目

D3.js

Bertin.js 基于 D3.js 构建，D3.js 是一个强大的数据可视化库，支持各种图表和地图的创建。

Observable

Observable 是一个在线笔记本平台，支持 JavaScript 代码的实时编辑和运行。Bertin.js 可以与 Observable 无缝集成，方便用户进行数据可视化和地图绘制。

Quarto

Quarto 是一个开源的文档和报告生成工具，支持多种编程语言。Bertin.js 可以与 Quarto 结合使用，生成包含地图的可视化报告。

bertin A wrapper for bertin.js 项目地址: https://gitcode.com/gh_mirrors/be/bertin