使用 deck.gl 构建自定义图层视图

重点注意：

此示例显示实验功能，请在产品中使用之前仔细阅读文档。

此示例演示如何使用 deck.gl 在 GeoScene 底图上进行渲染。使用此示例中描述的技术，开发人员可以将任何现有的基于 2D deck.gl 的可视化带入 GeoScene API for JavaScript 应用程序。

此示例假定您熟悉 WebGL、自定义 WebGL 图层视图和 deck.gl 可视化库。

一起使用 deck.gl 和 GeoScene API for JavaScript

GeoScene API for JavaScript 使用 <script> 标签从 js.arcgis.com CDN 加载；deck.gl 主要通过 npm 分发，但 CDN 包也可通过 unpkg.com 获得。对于这个示例，我们需要主 "deck.gl" 包和两个扩展 "@deck.gl/geo-layers" 和 "@deck.gl/arcgis"。支持 GeoScene 的第一版 deck.gl 是 8.1.0。

    <script src="https://unpkg.com/deck.gl@8.1.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/geo-layers@8.1.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/arcgis@8.1.0/dist.min.js"></script>
    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

然后我们使用 require() 加载任何需要的 "geoscene/*" 模块；大多数 deck.gl 功能都可用于全局deck 对象。将deck.gl 与 JavaScript 的 GeoScene API 接口所需的额外位可在必须使用方法deck.loadArcGISModules() 异步加载的模块中找到。

    // We use require to load "geoscene/*" modules
    require([
      "geoscene/Map",
      "geoscene/views/MapView"
    ], (Map, MapView) => {
      // Most deck.gl features are available on the global "deck" object
      // The ArcGIS/deck.gl interface code is located in a separate module
      // that must be loaded asynchronously
      deck.loadArcGISModules().then((arcGIS) => {
        // Now we can use the arcGIS module
        ...

为 MapView 使用 deck.gl 层

加载的 arcGIS 模块显示了 arcGIS.DeckLayer 类；这是一个类似于 ArcGIS 图层的类，可以使用 deck.gl 图层列表进行配置并添加到 MapView，例如：

    const layer = new DeckLayer({
      "deck.layers": [
        new deck.GeoJsonLayer({
          ...
        }),
        new deck.ArcLayer({
          ...
        })
      ]
    });

    const mapView = new MapView({
      container: "viewDiv",
      map: new Map({
        basemap: "geoscene-blue",
        layers: [layer]
      }),
      ...
    });

在此示例中，我们使用 TripsLayer 的单个实例，一个动画折线层。它由 "@deck.gl/geo-layers" 模块导出，与 "@deck.gl/layers" 中的大多数其他层形成对比。为了给 TripsLayer 设置动画，我们每 50 毫秒创建一个新实例并将其设置在 DeckLayer 上。

    const layer = new arcGIS.DeckLayer();

    setInterval(() => {
      layer.deck.layers = [
        new deck.TripsLayer({
          id: "trips",
          data: "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/trips/trips-v7.json",
          getPath: (d) => { return d.path; },
          getTimestamps: (d) => { return d.timestamps; },
          getColor: (d) => { return (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]); },
          opacity: 1.0,
          widthMinPixels: 4,
          rounded: true,
          trailLength: 180,
          currentTime: (performance.now() % 20000) / 10,
          shadowEnabled: false
        })
      ];
    }, 50);