mapbox初始化空白球

如果只是利用mapbox加载tif，那就初始化一个空白球就可以了，可以结合mapbox-gl-draw工具对tif进行标注，当然tif要发布成服务才行。

import { Component, ElementRef, ViewChild } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent {
  @ViewChild('map')
  private mapContainer!: ElementRef<HTMLElement>;
  constructor() {}
  ngAfterViewInit() {
    (mapboxgl as any).accessToken = 'default_token'; //随便写
    const polygon: any = {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [-74.5, 40.0],
            [-74.5, 40.1],
            [-74.6, 40.1],
            [-74.6, 40.0],
            [-74.5, 40.0],
          ],
        ],
      },
    }; //示例多边形
    const map = new mapboxgl.Map({
      container: this.mapContainer.nativeElement,
      projection: 'globe', // 设置为球体投影
      style: {
        version: 8, //这个不能乱写
        sources: {}, //置空
        layers: [
          {
            id: 'background',
            type: 'background',
            paint: { 'background-color': 'white' },
          }, //背景为白色的球
        ],
      },
      center: [0, 0], // 初始位置
      zoom: 0, // 初始缩放级别
    });

    map.on('load', function () {
      // 添加数据源
      map.addSource('polygon-source', {
        type: 'geojson',
        data: polygon,
      });

      // 添加图层
      map.addLayer({
        id: 'polygon-layer',
        type: 'fill',
        source: 'polygon-source',
        paint: {
          'fill-color': '#0080ff', // 多边形填充颜色
          'fill-opacity': 0.5, // 多边形透明度
        },
      });
    });
    map.flyTo({
      center: [-74.5, 40.0],
      zoom: 12,
    });
    const draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {
        polygon: true,
        trash: true,
      },
    });
    map.addControl(draw);
  }
}