harp.gl 是 HERE 公司开发的一个开源的 Web 端的三维地图渲染引擎，基于 three.js，使用 typescript 编写。

关键概念

• MapView：地图本身
  • 有多个图层组成，图层和图层中的对象由不同的矢量元素组成，且可以设置不同的样式。
  • 可以在上面添加新图层或自定义样式。
• Data source：用来渲染地图的数据源，一般有两种方式
  • Static data source：静态数据源，通常是 geojson 格式（全量加载）
  • Tiled data source：瓦片数据，按地图上的不同位置和缩放级别进行划分的一块一块的数据，地图上仅会显示当前视图内的数据（部分加载）
  • harp.gl 本身提供了几种开箱即用的 Tiled data source，见下文。
• Technique：图层中可存在的矢量元素类型，比如点、线、面、文字等等。图层中的对象都是由 technique 来表示的，比如道路就是有一定宽度的线。
• Style sheets and syntax：样式表和语法
  • 使用 Style Expressions （样式表达式）来筛选要添加样式的 technique，然后赋值宽度、颜色等样式属性。
  • renderOrder 字段表示图层呈现顺序的 z-index 值
• Projections：投影方式
  • 从技术上讲，球形的地图无法完美的投影到一个矩形上。harp.gl 提供了两种常见的投影方式。
  • mercator：墨卡托投影，将地图投影到一个矩形上。会变形，适合小范围。
  • globe：球投影。顾名思义，就是地球仪。不会变形，适合大范围。

官方文档-命名空间

以下为 官方文档 中包含的各个命名空间的简单介绍，每个命名空间也是单独的 npm 包，一共 27 个。

datasource 相关

• harp-datasource-protocol
  • 包含一些组件，用于解码数据源、自定义图层样式，使用了 web-worker 并行解码数据源
  • 定义了可以在地图画布上绘制的几种矢量元素类型 (technique)，点、线、面、文字、填充等等。图层中的对象都是由 technique 来表现的，比如道路就是有宽度的线。
  • 定义了一套规则（Style Expressions）来筛选 technique 然后添加样式
• harp-debug-datasource
  • 用来调试 datasource
• harp-features-datasource
  • 用来实现用户自定义功能
• harp-geojson-datasource
  • 提供一个支持 GeoJSON 的数据源
• harp-omv-datasource
  • HERE 提供的 OMV 数据源，JSON 格式。该数据源遵循 vector tile 标准，每个 tile 以 protobuf 方式编码。
• harp-vectortile-datasource
  • HERE 提供的 OMV 数据源，JSON 格式。该数据源遵循 vector tile 标准，每个 tile 以 protobuf 方式编码。
  • 使用的话需要提供秘钥
• harp-webtile-datasource
  • 提供了调用 HERE Map Tile API 2.1 的功能。
  • 使用的话需要提供秘钥

map 相关

• harp-mapview
  • 提供了创建地图时所需要的大部分功能
  • 包括但不限于：处理数据源、雾渲染、选择元素、天空、加载主题等
• harp-map-controls
  • 提供地图控制、交互和相机动画相关的功能
• harp-map-theme
  • 主题文件，json 格式，全部放在 resources 目录下
• harp-mapview-decoder
  • 使用 web worker 解码 harp-mapview 中使用的 datasource、theme
• harp-materials
  • 提供了 harp.gl 中所能使用的材质 (material)，基于 three.js 中的材质，用来改变图层中对象的外貌。

工具集

• harp-atlas-tools
  • 图标相关的工具集，包含两个命令行工具
  • harp-atlas-generator：精灵图生成（多个小图片集合到一个图片上）。
  • harp-sprites-generator：将每个精灵图单独的拷贝到指定的目录。
  • 除此之外还可以自行创建图标集。
• harp-fetch
  • 兼容 fetch API 的一个包，可在 Node.js 中使用
• harp-geometry
  • harp 创建 geometry 时所需要使用的算法和数据结构
• harp-geoutils
  • 提供了处理地空间数据 (geospatial data) 的一些工具类。关于 geospatial data 可参考 IBM 的 这篇文章。
  • WGS 84 坐标处理、tile 方式、投影方式、处理弧度和度数的一些数学函数
• harp-lines
  • 提供了为宽线 (wide line) 创建 three.js 几何体所需的功能
• harp-lrucache
  • 缓存相关
• harp-olp-utils
  • 工具集，用来处理 HERE Open Location Platform 提供的数据。
• harp-test-utils
  • 测试工具集
• harp-text-canvas
  • 一个第三方库，用于在 three.js 中渲染 SDF 文字。
• harp-theme-tools
  • 主题编辑、调试工具，命令行工具。
• harp-transfer-manager
  • 下载管理器
• harp-utils
  • 工具类集合。包括但不限于：logging、caching、URL resolving、Simple Math

其他

• @docs/fallback
  • 文档相关
• @docs/label-rendering
  • 文档相关
• harp-examples
  • 官方示例：网址