feature: add crossOrigin option to ImageLayer for the image.

naivemap · May 19, 2022 · 0cdc50d · 0cdc50d
1 parent baf494f
commit 0cdc50d
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 0.3.1
+
+### ✨ Features
+
+- Add `crossOrigin` option to `ImageLayer` for the image.
+
+### 🐞 Bug fixes
+
+- Fix `ImageOption`'s type of the `ImageLayer` is incorrect.
+
 ## 0.3.0
 
 ### ✨ Features

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,3 +1,13 @@
+## 0.3.1
+
+### ✨ Features
+
+- `ImageLayer` 新增 `crossOrigin` 选项
+
+### 🐞 Bug fixes
+
+- 修复 `ImageLayer` 的 `ImageOption` 错误
+
 ## 0.3.0
 
 ### ✨ Features

diff --git a/dist/mapbox-gl-layers.es.js b/dist/mapbox-gl-layers.es.js
@@ -220,9 +220,10 @@ class Arrugator {
     this._segment(v3, v2, t2);
   }
 }
-function loadImage(src) {
+function loadImage(src, crossOrigin) {
   return new Promise((res, rej) => {
     const img = new Image();
+    img.crossOrigin = crossOrigin != null ? crossOrigin : "";
     img.src = src;
     img.onload = function() {
       res(img);
@@ -391,7 +392,7 @@ class ImageLayer {
     return arrugator.output();
   }
   _loadImage(map, gl) {
-    loadImage(this._option.url).then((img) => {
+    loadImage(this._option.url, this._option.crossOrigin).then((img) => {
       this._loaded = true;
       this._texture = gl.createTexture();
       gl.bindTexture(gl.TEXTURE_2D, this._texture);

diff --git a/dist/mapbox-gl-layers.umd.js b/dist/mapbox-gl-layers.umd.js
diff --git a/doc/imagelayer.md b/doc/imagelayer.md
@@ -26,8 +26,9 @@ export default class ImageLayer implements mapboxgl.CustomLayerInterface
 | --- | --- |
 | **option.url** <br />`(string)` | URL that points to an image. |
 | **option.projection** <br />`(string)` | Projection with EPSG code that points to the image. |
-| **option.resampling** <br />(Optional `enum`. One of `"linear"`, `"nearest"`. Defaults to `"linear"`) | The resampling/interpolation method to use for overscaling, also known as texture magnification filter. ref: [raster-resampling](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-raster-raster-resampling) |
 | **option.coordinates** <br />`(Array<Array<number>>)` | Corners of image specified in longitude, latitude pairs: top left, top right, bottom right, bottom left. ref: [coordinates](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image-coordinates) |
+| **option.resampling** <br />(Optional `enum`. One of `"linear"`, `"nearest"`. Defaults to `"linear"`) | The resampling/interpolation method to use for overscaling, also known as texture magnification filter. ref: [raster-resampling](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-raster-raster-resampling) |
+| **options.crossOrigin** <br />`(string)` | The crossOrigin attribute is a string which specifies the Cross-Origin Resource Sharing ([CORS](https://developer.mozilla.org/en-US/docs/Glossary/CORS)) setting to use when retrieving the image. |
 
 ```ts
 export type ImageOption = {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@naivemap/mapbox-gl-layers",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "mapbox-gl-layers",
   "files": [
     "dist",

diff --git a/src/ImageLayer/index.ts b/src/ImageLayer/index.ts
@@ -18,7 +18,8 @@ export type ImageOption = {
   url: string
   projection: string
   coordinates: Coordinates
-  resampling: 'linear' | 'nearest'
+  resampling?: 'linear' | 'nearest'
+  crossOrigin?: string
 }
 
 export default class ImageLayer implements mapboxgl.CustomLayerInterface {
@@ -192,7 +193,7 @@ export default class ImageLayer implements mapboxgl.CustomLayerInterface {
   }
 
   private _loadImage(map: mapboxgl.Map, gl: WebGLRenderingContext) {
-    loadImage(this._option.url).then((img) => {
+    loadImage(this._option.url, this._option.crossOrigin).then((img) => {
       this._loaded = true
 
       // 创建纹理

diff --git a/src/util/image.ts b/src/util/image.ts
@@ -1,11 +1,14 @@
 /**
  * load image
  * @param src
+ * @param crossOrigin
  * @returns
  */
-export function loadImage(src: string): Promise<HTMLImageElement> {
+export function loadImage(src: string, crossOrigin?: string): Promise<HTMLImageElement> {
   return new Promise((res, rej) => {
     const img = new Image()
+
+    img.crossOrigin = crossOrigin ?? ''
     img.src = src
     img.onload = function () {
       res(img)

diff --git a/types/ImageLayer.d.ts b/types/ImageLayer.d.ts
@@ -4,7 +4,8 @@ export declare type ImageOption = {
   url: string
   projection: string
   coordinates: Coordinates
-  resampling: 'linear' | 'nearest'
+  resampling?: 'linear' | 'nearest'
+  crossOrigin?: string
 }
 export default class ImageLayer implements mapboxgl.CustomLayerInterface {
   id: string
@@ -20,5 +21,6 @@ export default class ImageLayer implements mapboxgl.CustomLayerInterface {
   onAdd(map: mapboxgl.Map, gl: WebGLRenderingContext): void
   onRemove(map: mapboxgl.Map, gl: WebGLRenderingContext): void
   render(gl: WebGLRenderingContext, matrix: number[]): void
+  update(url: string): void
   private _initArrugator
 }