mapbox中加載本地圖片

一、前面

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

二、過程

• 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);
  

三、最后

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

​