mapbox.gl为主基于deck.gl添加超级酷炫的路网图层

1，数据格式

start:起点坐标； end:终点坐标； name: 路线名称； [ {"start":[8.714,54.2638,11582.4],"end":[8.6875,54.2501,11582.4],"name":"SAS52H"}, {"start":[13.4383,46.8144,10972.8],"end":[13.4149,46.8265,10972.8],"name":"GWI7PT"}, {"start":[-0.676,51.7317,3070.86],"end":[-0.6567,51.7309,3025.14],"name":"SHT3P"}, {"start":[5.9049,50.4579,9349.74],"end":[5.9323,50.4528,9250.68],"name":"BAW906N"}, {"start":[-0.1163,51.3325,2125.98],"end":[-0.1321,51.3312,2125.98],"name":"BAW583"} ]

2，所需要的的deck.gl的包

import { LineLayer} from '@deck.gl/layers';

import { MapboxLayer } from '@deck.gl/mapbox';

3，核心添加图层代码

// 下面map为创建的地图实例对象； layerid： 图层的唯一id标识，可用于移除添加图层

const lineLayer = (map, layerid, options: any) =>{

  const layer = new MapboxLayer({
    id: layerid || 'mapbox-line-layer',
    type: LineLayer,
    data: './assets/config/mock.data/heathrow-flights.json', 
    opacity: 0.8,
    getSourcePosition: d => d.start,
    getTargetPosition: d => d.end,
    getColor,
    getWidth: 3,
    pickable: true
  });
  map.addLayer(layer);
}

function getColor(d) {

  const z = d.start[2];
  const r = z / 10000;

  return [255 * (1 - r * 2), 128 * r, 255 * r, 255 * (1 - r)];
}