mapbox中加載本地圖片-有解無憂

一、前面

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

二、程序

HTMLImageElement

let image = new Image(64, 64);
// 這里的imageUrl采用require方式呼叫的base64格式
image.src = https://www.cnblogs.com/asdlijian/archive/2020/11/24/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 = https://www.cnblogs.com/asdlijian/archive/2020/11/24/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 = https://www.cnblogs.com/asdlijian/archive/2020/11/24/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內置的一種動態渲染介面，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/228819.html

標籤：其他

上一篇：NTP時間同步服務器,GPS時鐘系統,北斗授時產品,京準科技

下一篇：Snort的安裝以及使用實驗