harp.gl 入门

发表于 更新于 分类于 阅读次数： Waline：

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
    • 官方示例：网址