mapbox中加載本地圖片

1、前面

mapbox中添加圖片addImage看似簡單的一個方法，但是在實際的生產過程當中卻產生了不少的問題，好比如何加載本地圖片。這個一個小問題能夠來回搞了好久，如今來看多種加載方式是如何實現的：

2、過程

• HTMLImageElement

  let image = new Image(64, 64);
  // 這裏的imageUrl採用require方式調用的base64格式
  image.src = imageUrl;
  image.onload = () =>{
      this.map.addImage("custom-marker", image);
  };

• ImageBitmap

  ImageBitmap接口表示一個位圖圖像，能夠在WebGL中高效繪製。能夠使用函數 createImageBitmap 建立，異步加載

  // 這裏的imageData採用require方式調用的base64格式
  //createImageBitmap方法支持的數據格式有<img>, SVG <image>, <video>, <canvas>, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, Blob, ImageData, ImageBitmap, or OffscreenCanvas object.這裏使用Blob
  window.createImageBitmap(this.b64toBlob(imageData), 0, 0, 64, 64).then(res => {
      this.map.addImage("custom-marker", res);
  });
  
  function b64toBlob(dataURI) {
      var byteString = atob(dataURI.split(",")[1]);
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
  
      for (var i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], { type: "image/jpeg" });
  }

• ImageData

  canvas對象的像素數據，能夠使用構造器ImageData()建立，也能夠用canvas渲染上下文中createImageData()方法建立

  /** @HTMLCanvasElement */
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  let image = new Image(64, 64);
  image.src = image_Base64;
  
  image.onload = () => {
      ctx.drawImage(image, 0, 0);
      this.map.addImage('custom-marker', ctx.getImageData(0,0,64,64));
  };

• {width: number, height: number, data: (Uint8Array | Uint8ClampedArray)}

  與ImageData相似

• StyleImageInterface

  mapbox內部定義的image渲染接口，經常使用於動態渲染

  var flashingSquare = {
    width: 64,
    height: 64,
    data: new Uint8Array(64 * 64 * 4),
  
    onAdd: function(map) {
      this.map = map;
    },
  
    render: function() {
      // keep repainting while the icon is on the map
      this.map.triggerRepaint();
  
      // alternate between black and white based on the time
      var value = Math.round(Date.now() / 1000) % 2 === 0 ? 255 : 0;
  
      // check if image needs to be changed
      if (value !== this.previousValue) {
        this.previousValue = value;
  
        var bytesPerPixel = 4;
        for (var x = 0; x < this.width; x++) {
          for (var y = 0; y < this.height; y++) {
            var offset = (y * this.width + x) * bytesPerPixel;
            this.data[offset + 0] = value;
            this.data[offset + 1] = value;
            this.data[offset + 2] = value;
            this.data[offset + 3] = 255;
          }
        }
  
        // return true to indicate that the image changed
        return true;
      }
    }
  };
  
  map.addImage("flashing_square", flashingSquare);

3、最後

​ 比較這幾種方式，HTMLImageElement是最經常使用的方式，也是最簡單的方式（須要注意這裏的Image須要base64的文件，或者服務器上的文件路徑）；後面的ImageBitmap, ImageData, 經常使用於canvas渲染中使用，StyleImageInterface是mapbox內置的一種動態渲染接口。

​