属于Angular的deck.gl食用指南（一）

deck.gl是Uber出品的一个地理数据前端可视化框架，基于WebGL技术构建。从官网的Demo来看，它样式丰富，渲染流畅，并且支持三维可视化（毕竟是WebGL嘛），比我手上项目在用的echarts专业多了。但官网的实例基本上是基于React和JS实现的，放到TS的Angular上不一定合适。而且国内针对这个可视化框架的中文教程也不多。所以这次趁着项目技术方案更新，随手把自己跟着官方文档学习避坑的经历写下来吧。因为我自己也是个前端萌新，（而且六级考了五次还没过480），所以这个指南写到哪里随缘~

本文基于Angular 8.1写作（狗狗你不要再刷版本号了）

申请一个Mapbox帐号#

地理可视化的关键在于地图。百度的echarts官方提供了百度地图，用户也可以使用高德、天地图等图源，或干脆加载自己自定义的JSON文件。而deck.gl这个库，虽然官方声称不依赖于任何地图组件工作（如果你配置本文项目的地图时出错了会发现确实是这样，地图虽然没有加载出来但数据依然不受影响，能够正常加载），但还是推荐同mapbox-gl这个地图组件库一同使用。mapbox-gl来自于一个免费创建并定制地图的网站Mapbox，所以我们的第一步就是在Mapbox这个网站上注册一个新的帐号

帐号注册界面很简单，只有一张网页，几个数据框而已，连验证邮件都不需要。所以这里略去不讲了。注册后进入帐号页面，看到Access tokens界面了没有？点击“Create a token”，填好Name，其他保持默认，就可以创建一个属于你的地图token了。

创建一个新的Angular项目#

接下来创建一个新的Angular项目。待创建完毕后，切换到项目文件夹，用npm安装deck.gl的两个库@deck.gl/core与@deck.gl/layers

npm install @deck.gl/core @deck.gl/layers

这是官方教程的推荐方法。但我在安装时遇到了npm报错：“只能将“@deck”作为命令的参数。要在表达式中引用变量，请使用“$deck””，把npm更新到新版后还是不支持这个命令。所以我就手动在项目文件package.json的dependencies中手动添加了这两个库，然后使用npm安装

    "@deck.gl/core": "~7.2.3",
    "@deck.gl/layers": "~7.2.3",

npm install

修改模版文件与TS文件#

安装完毕后，我们首先在Index文件里添加mapbox要用的样式

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />

然后找到模版文件app.component.html，把下面这个复制到里面，替换新工程创建时自动生成的丑八怪（听说Angular下个版本就要换掉这个生成的模版了，新模版好看很多）

<div id="container">
  <div id="map"></div>
  <canvas id="deck-canvas"></canvas>
</div>

然后找到TS文件，还是清空，把下面的代码复制进去

import { Component, OnInit } from '@angular/core';
import { Deck } from '@deck.gl/core';
import { GeoJsonLayer, ArcLayer } from '@deck.gl/layers';
import mapboxgl from 'mapbox-gl';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'ngDeckGL';
  ngOnInit(): void {
    // 数据集来源
    const AIR_PORTS =
      'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

    const INITIAL_VIEW_STATE = {
      latitude: 51.47,
      longitude: 0.45,
      zoom: 4,
      bearing: 0,
      pitch: 30
    };

    // 贴上自己在MapBox申请到的帐号
    mapboxgl.accessToken = '贴上自己在MapBox申请到的帐号'; // eslint-disable-line

    // 地图样式设定
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      // Note: deck.gl will be in charge of interaction and event handling
      interactive: false,
      center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
      zoom: INITIAL_VIEW_STATE.zoom,
      bearing: INITIAL_VIEW_STATE.bearing,
      pitch: INITIAL_VIEW_STATE.pitch
    });

    // 可视化数据集投影
    const deck = new Deck({
      canvas: 'deck-canvas',
      width: '100%',
      height: '100%',
      initialViewState: INITIAL_VIEW_STATE,
      controller: true,
      onViewStateChange: ({ viewState }) => {
        map.jumpTo({
          center: [viewState.longitude, viewState.latitude],
          zoom: viewState.zoom,
          bearing: viewState.bearing,
          pitch: viewState.pitch
        });
      },
      layers: [
        new GeoJsonLayer({
          id: 'airports',
          data: AIR_PORTS,
          // Styles
          filled: true,
          pointRadiusMinPixels: 2,
          opacity: 1,
          pointRadiusScale: 2000,
          getRadius: f => 11 - f.properties.scalerank,
          getFillColor: [200, 0, 80, 180],
          // Interactive props
          pickable: true,
          autoHighlight: true,
          onClick: info =>
            // eslint-disable-next-line
            info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
        }),
        new ArcLayer({
          id: 'arcs',
          data: AIR_PORTS,
          dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
          // Styles
          getSourcePosition: f => [-0.4531566, 51.4709959], // London
          getTargetPosition: f => f.geometry.coordinates,
          getSourceColor: [0, 128, 200],
          getTargetColor: [200, 0, 80],
          getWidth: 1
        })
      ]
    });
  }
}

上面重要的参数基本上都有注释，有一定基础的朋友基本上都能看懂代码什么意思，所以就不逐个介绍了。作为一篇介绍性质的文章，我们也无须关心其中每行的意思。唯一要做的就是把mapbox的token替换成刚刚注册的自己的token。做完以后保存，启动项目就可以咯

修改css文件#

此时朋友们应该能看到数据投影了，但是地面上却是白茫茫一片，没有地图存在。这是为什么呢？因为我们没有设定好模版文件的css样式。数据视图把本应位于其下的地理视图挤没了。我们把模版文件的CSS改成下面这样，设定这两个视图均为100%宽高，就能看到最终成果咯

#container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}