通过mapbox.gl结合threebox添加自定义图层

1,测试数据mock

var lines = new Array();

	var arcSegments = 5;
	var lineQuantity = 50;
	for (var i = 0; i < lineQuantity; i++){
		var line = new Array();
		var destination = [300*(Math.random()-0.5), 140*(Math.random()-0.5)];
		var maxElevation = Math.pow(Math.abs(destination[0]*destination[1]), 0.5) * 80000;

		var increment = destination.map(function(direction){
			return direction/arcSegments;
		})

		for (var l = 0; l<=arcSegments; l++){
			var waypoint = increment.map(function(direction){
				return direction * l
			})

			var waypointElevation = Math.sin(Math.PI*l/arcSegments) * maxElevation;

			waypoint.push(waypointElevation);
			line.push(waypoint);
		}

		lines.push(line)
	}
this.mapboxmapService.addArcCustomlayer(lines, {layerid: 'lineLayer'});

2,使用

1，引入核心包

public addArcCustomlayer(geoData, options) {

let tb: any = null;
const customLayerConfig = {
  id: 'custom_layer',
  type: 'custom',
  onAdd: function (map, mbxContext) {
    tb = new Threebox(
      map,
      mbxContext,
      { defaultLights: true }
    );

    for (let line of geoData) {
      var lineOptions = {
        geometry: line,
        color: (line[1][1] / 180) * 0xffffff, // color based on latitude of endpoint
        width: Math.random() + 1 // random width between 1 and 2
      }
      let lineMesh = tb.line(lineOptions);

      tb.add(lineMesh)
    }
  },
  render: function (gl, matrix) {
    if (tb) {
      gl.clear(gl.DEPTH_BUFFER_BIT);
      tb.update();
    }
  }
}
this.removeLayerByIds([options.layerid]);
this.mapboxmap.addLayer(customLayerConfig);

}