gis-common 5.1.30 → 5.1.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/17.png +0 -0
- package/dist/gis-common.es.js +169 -161
- package/dist/gis-common.umd.js +1 -1
- package/dist/index.d.ts +15 -8
- package/package.json +1 -1
package/dist/17.png
ADDED
|
Binary file
|
package/dist/gis-common.es.js
CHANGED
|
@@ -547,129 +547,6 @@ const ObjectUtil = {
|
|
|
547
547
|
}
|
|
548
548
|
}
|
|
549
549
|
};
|
|
550
|
-
const ImageUtil = {
|
|
551
|
-
emptyImageUrl: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
|
|
552
|
-
transparentImageUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==",
|
|
553
|
-
createCircle(radius, options = {}) {
|
|
554
|
-
const lineWidth = options.lineWidth || 1;
|
|
555
|
-
const canvas = CanvasDrawer.createCanvas(2 * radius, 2 * radius);
|
|
556
|
-
const ctx = canvas.getContext("2d");
|
|
557
|
-
ctx.beginPath();
|
|
558
|
-
ctx.fillStyle = options.fillColor || "#f00";
|
|
559
|
-
ctx.strokeStyle = options.color || "#f00";
|
|
560
|
-
ctx.lineWidth = lineWidth;
|
|
561
|
-
ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
|
|
562
|
-
ctx.stroke();
|
|
563
|
-
ctx.fill();
|
|
564
|
-
return canvas.toDataURL("image/png");
|
|
565
|
-
},
|
|
566
|
-
createRectangle(width, height, options = {}) {
|
|
567
|
-
const lineWidth = options.lineWidth || 1;
|
|
568
|
-
const canvas = CanvasDrawer.createCanvas(width, height);
|
|
569
|
-
const ctx = canvas.getContext("2d");
|
|
570
|
-
ctx.fillStyle = options.fillColor || "#f00";
|
|
571
|
-
ctx.strokeStyle = options.color || "#f00";
|
|
572
|
-
ctx.lineWidth = lineWidth;
|
|
573
|
-
ctx.beginPath();
|
|
574
|
-
ctx.stroke();
|
|
575
|
-
ctx.fillRect(0, 0, width, height);
|
|
576
|
-
return canvas.toDataURL("image/png");
|
|
577
|
-
},
|
|
578
|
-
/**
|
|
579
|
-
*
|
|
580
|
-
* @param image image,类型可以是HTMLCanvasElement、ImageData、Image
|
|
581
|
-
* @returns
|
|
582
|
-
*/
|
|
583
|
-
getBase64(image) {
|
|
584
|
-
let _canvas;
|
|
585
|
-
let canvas;
|
|
586
|
-
if (image instanceof HTMLCanvasElement) {
|
|
587
|
-
canvas = image;
|
|
588
|
-
} else {
|
|
589
|
-
if (_canvas === void 0) _canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
|
|
590
|
-
_canvas.width = image.width;
|
|
591
|
-
_canvas.height = image.height;
|
|
592
|
-
const ctx = _canvas.getContext("2d");
|
|
593
|
-
if (image instanceof ImageData) {
|
|
594
|
-
ctx.putImageData(image, 0, 0);
|
|
595
|
-
} else if (image instanceof Image) {
|
|
596
|
-
ctx.drawImage(image, 0, 0, image.width, image.height);
|
|
597
|
-
}
|
|
598
|
-
canvas = _canvas;
|
|
599
|
-
}
|
|
600
|
-
if (canvas.width > 2048 || canvas.height > 2048) {
|
|
601
|
-
console.warn("ImageUtil.getDataURL: Image converted to jpg for performance reasons", image);
|
|
602
|
-
return canvas.toDataURL("image/jpeg", 0.6);
|
|
603
|
-
} else {
|
|
604
|
-
return canvas.toDataURL("image/png");
|
|
605
|
-
}
|
|
606
|
-
},
|
|
607
|
-
/**
|
|
608
|
-
* 将图片的URL转换为Base64编码
|
|
609
|
-
*
|
|
610
|
-
* @param url 图片的URL地址
|
|
611
|
-
* @param width 图片的宽度,默认为图片原始宽度
|
|
612
|
-
* @param height 图片的高度,默认为图片原始高度
|
|
613
|
-
* @returns 返回Promise对象,解析后得到包含Base64编码数据的对象
|
|
614
|
-
*/
|
|
615
|
-
getBase64FromUrl(url) {
|
|
616
|
-
return new Promise((resolve, reject) => {
|
|
617
|
-
let image = new Image();
|
|
618
|
-
image.setAttribute("crossOrigin", "Anonymous");
|
|
619
|
-
image.src = url;
|
|
620
|
-
image.onload = () => {
|
|
621
|
-
let dataURL = this.getBase64(image);
|
|
622
|
-
resolve(dataURL);
|
|
623
|
-
};
|
|
624
|
-
image.onerror = reject;
|
|
625
|
-
});
|
|
626
|
-
},
|
|
627
|
-
/**
|
|
628
|
-
* 解析base64编码
|
|
629
|
-
*
|
|
630
|
-
* @param base64 base64编码字符串
|
|
631
|
-
* @returns 返回一个对象,包含type(类型)、ext(扩展名)和data(数据)字段,如果解析失败则返回null
|
|
632
|
-
*/
|
|
633
|
-
parseBase64(base64) {
|
|
634
|
-
let re = new RegExp("data:(?<type>.*?);base64,(?<data>.*)");
|
|
635
|
-
let res = re.exec(base64);
|
|
636
|
-
if (res && res.groups) {
|
|
637
|
-
return {
|
|
638
|
-
type: res.groups.type,
|
|
639
|
-
ext: res.groups.type.split("/").slice(-1)[0],
|
|
640
|
-
data: res.groups.data
|
|
641
|
-
};
|
|
642
|
-
}
|
|
643
|
-
ExceptionUtil.throwException("parseBase64: Invalid base64 string");
|
|
644
|
-
},
|
|
645
|
-
/**
|
|
646
|
-
* 复制图片到剪贴板
|
|
647
|
-
*
|
|
648
|
-
* @param url 图片的URL地址
|
|
649
|
-
* @returns 无返回值
|
|
650
|
-
* @throws 如果解析base64数据失败,则抛出异常
|
|
651
|
-
*/
|
|
652
|
-
async copyImage(url) {
|
|
653
|
-
try {
|
|
654
|
-
const base64Result = await this.getBase64FromUrl(url);
|
|
655
|
-
const parsedBase64 = this.parseBase64(base64Result);
|
|
656
|
-
if (!parsedBase64) {
|
|
657
|
-
throw new Error("Failed to parse base64 data.");
|
|
658
|
-
}
|
|
659
|
-
let type = parsedBase64.type;
|
|
660
|
-
let bytes = atob(parsedBase64.data);
|
|
661
|
-
let ab = new ArrayBuffer(bytes.length);
|
|
662
|
-
let ua = new Uint8Array(ab);
|
|
663
|
-
for (let i = 0; i < bytes.length; i++) {
|
|
664
|
-
ua[i] = bytes.charCodeAt(i);
|
|
665
|
-
}
|
|
666
|
-
let blob = new Blob([ab], { type });
|
|
667
|
-
await navigator.clipboard.write([new ClipboardItem({ [type]: blob })]);
|
|
668
|
-
} catch (error) {
|
|
669
|
-
ExceptionUtil.throwException("Failed to copy image to clipboard:");
|
|
670
|
-
}
|
|
671
|
-
}
|
|
672
|
-
};
|
|
673
550
|
const AjaxUtil = {
|
|
674
551
|
/**
|
|
675
552
|
* Get JSON data by jsonp
|
|
@@ -862,28 +739,6 @@ const AjaxUtil = {
|
|
|
862
739
|
options["responseType"] = "arraybuffer";
|
|
863
740
|
return this.get(url, options, cb);
|
|
864
741
|
},
|
|
865
|
-
getImage(img, url, options) {
|
|
866
|
-
return this.getArrayBuffer(url, options, (err, imgData) => {
|
|
867
|
-
if (err) {
|
|
868
|
-
if (img.onerror) {
|
|
869
|
-
img.onerror(err);
|
|
870
|
-
}
|
|
871
|
-
} else if (imgData) {
|
|
872
|
-
const URL2 = window.URL || window.webkitURL;
|
|
873
|
-
const onload = img.onload;
|
|
874
|
-
img.onload = () => {
|
|
875
|
-
if (onload) {
|
|
876
|
-
onload();
|
|
877
|
-
}
|
|
878
|
-
URL2.revokeObjectURL(img.src);
|
|
879
|
-
};
|
|
880
|
-
const blob = new Blob([new Uint8Array(imgData.data)], { type: imgData.contentType });
|
|
881
|
-
img.cacheControl = imgData.cacheControl;
|
|
882
|
-
img.expires = imgData.expires;
|
|
883
|
-
img.src = imgData.data.byteLength ? URL2.createObjectURL(blob) : ImageUtil.emptyImageUrl;
|
|
884
|
-
}
|
|
885
|
-
});
|
|
886
|
-
},
|
|
887
742
|
/**
|
|
888
743
|
* Fetch resource as a JSON Object.
|
|
889
744
|
* @param {String} url - json's url
|
|
@@ -2405,6 +2260,140 @@ __publicField(GeoUtil, "toRadian", Math.PI / 180);
|
|
|
2405
2260
|
__publicField(GeoUtil, "R", 6371393);
|
|
2406
2261
|
// 地球平均半径
|
|
2407
2262
|
__publicField(GeoUtil, "R_EQU", 6378137);
|
|
2263
|
+
const ImageUtil = {
|
|
2264
|
+
emptyImageUrl: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
|
|
2265
|
+
transparentImageUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==",
|
|
2266
|
+
createCircle(radius, options = {}) {
|
|
2267
|
+
const lineWidth = options.lineWidth || 1;
|
|
2268
|
+
const canvas = CanvasDrawer.createCanvas(2 * radius, 2 * radius);
|
|
2269
|
+
const ctx = canvas.getContext("2d");
|
|
2270
|
+
ctx.beginPath();
|
|
2271
|
+
ctx.fillStyle = options.fillColor || "#f00";
|
|
2272
|
+
ctx.strokeStyle = options.color || "#f00";
|
|
2273
|
+
ctx.lineWidth = lineWidth;
|
|
2274
|
+
ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
|
|
2275
|
+
ctx.stroke();
|
|
2276
|
+
ctx.fill();
|
|
2277
|
+
return canvas.toDataURL("image/png");
|
|
2278
|
+
},
|
|
2279
|
+
createRectangle(width, height, options = {}) {
|
|
2280
|
+
const lineWidth = options.lineWidth || 1;
|
|
2281
|
+
const canvas = CanvasDrawer.createCanvas(width, height);
|
|
2282
|
+
const ctx = canvas.getContext("2d");
|
|
2283
|
+
ctx.fillStyle = options.fillColor || "#f00";
|
|
2284
|
+
ctx.strokeStyle = options.color || "#f00";
|
|
2285
|
+
ctx.lineWidth = lineWidth;
|
|
2286
|
+
ctx.beginPath();
|
|
2287
|
+
ctx.stroke();
|
|
2288
|
+
ctx.fillRect(0, 0, width, height);
|
|
2289
|
+
return canvas.toDataURL("image/png");
|
|
2290
|
+
},
|
|
2291
|
+
/**
|
|
2292
|
+
*
|
|
2293
|
+
* @param image image,类型可以是HTMLCanvasElement、ImageData、Image
|
|
2294
|
+
* @returns
|
|
2295
|
+
*/
|
|
2296
|
+
getBase64(image) {
|
|
2297
|
+
let _canvas;
|
|
2298
|
+
let canvas;
|
|
2299
|
+
if (image instanceof HTMLCanvasElement) {
|
|
2300
|
+
canvas = image;
|
|
2301
|
+
} else {
|
|
2302
|
+
if (_canvas === void 0) _canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
|
|
2303
|
+
_canvas.width = image.width;
|
|
2304
|
+
_canvas.height = image.height;
|
|
2305
|
+
const ctx = _canvas.getContext("2d");
|
|
2306
|
+
if (image instanceof ImageData) {
|
|
2307
|
+
ctx.putImageData(image, 0, 0);
|
|
2308
|
+
} else if (image instanceof Image) {
|
|
2309
|
+
ctx.drawImage(image, 0, 0, image.width, image.height);
|
|
2310
|
+
}
|
|
2311
|
+
canvas = _canvas;
|
|
2312
|
+
}
|
|
2313
|
+
if (canvas.width > 2048 || canvas.height > 2048) {
|
|
2314
|
+
console.warn("ImageUtil.getDataURL: Image converted to jpg for performance reasons", image);
|
|
2315
|
+
return canvas.toDataURL("image/jpeg", 0.6);
|
|
2316
|
+
} else {
|
|
2317
|
+
return canvas.toDataURL("image/png");
|
|
2318
|
+
}
|
|
2319
|
+
},
|
|
2320
|
+
/**
|
|
2321
|
+
* 将图片的URL转换为Base64编码
|
|
2322
|
+
*
|
|
2323
|
+
* @param url 图片的URL地址
|
|
2324
|
+
* @param width 图片的宽度,默认为图片原始宽度
|
|
2325
|
+
* @param height 图片的高度,默认为图片原始高度
|
|
2326
|
+
* @returns 返回Promise对象,解析后得到包含Base64编码数据的对象
|
|
2327
|
+
*/
|
|
2328
|
+
getBase64FromUrl(url) {
|
|
2329
|
+
return new Promise((resolve, reject) => {
|
|
2330
|
+
let image = new Image();
|
|
2331
|
+
image.setAttribute("crossOrigin", "Anonymous");
|
|
2332
|
+
image.src = url;
|
|
2333
|
+
image.onload = () => {
|
|
2334
|
+
let dataURL = this.getBase64(image);
|
|
2335
|
+
resolve(dataURL);
|
|
2336
|
+
};
|
|
2337
|
+
image.onerror = reject;
|
|
2338
|
+
});
|
|
2339
|
+
},
|
|
2340
|
+
/**
|
|
2341
|
+
* 解析base64编码
|
|
2342
|
+
*
|
|
2343
|
+
* @param base64 base64编码字符串
|
|
2344
|
+
* @returns 返回一个对象,包含type(类型)、ext(扩展名)和data(数据)字段,如果解析失败则返回null
|
|
2345
|
+
*/
|
|
2346
|
+
parseBase64(base64) {
|
|
2347
|
+
let re = new RegExp("data:(?<type>.*?);base64,(?<data>.*)");
|
|
2348
|
+
let res = re.exec(base64);
|
|
2349
|
+
if (res && res.groups) {
|
|
2350
|
+
return {
|
|
2351
|
+
type: res.groups.type,
|
|
2352
|
+
ext: res.groups.type.split("/").slice(-1)[0],
|
|
2353
|
+
data: res.groups.data
|
|
2354
|
+
};
|
|
2355
|
+
}
|
|
2356
|
+
ExceptionUtil.throwException("parseBase64: Invalid base64 string");
|
|
2357
|
+
},
|
|
2358
|
+
/**
|
|
2359
|
+
* 复制图片到剪贴板
|
|
2360
|
+
*
|
|
2361
|
+
* @param url 图片的URL地址
|
|
2362
|
+
* @returns 无返回值
|
|
2363
|
+
* @throws 如果解析base64数据失败,则抛出异常
|
|
2364
|
+
*/
|
|
2365
|
+
async copyImage(url) {
|
|
2366
|
+
try {
|
|
2367
|
+
const base64Result = await this.getBase64FromUrl(url);
|
|
2368
|
+
const parsedBase64 = this.parseBase64(base64Result);
|
|
2369
|
+
if (!parsedBase64) {
|
|
2370
|
+
throw new Error("Failed to parse base64 data.");
|
|
2371
|
+
}
|
|
2372
|
+
let type = parsedBase64.type;
|
|
2373
|
+
let bytes = atob(parsedBase64.data);
|
|
2374
|
+
let ab = new ArrayBuffer(bytes.length);
|
|
2375
|
+
let ua = new Uint8Array(ab);
|
|
2376
|
+
for (let i = 0; i < bytes.length; i++) {
|
|
2377
|
+
ua[i] = bytes.charCodeAt(i);
|
|
2378
|
+
}
|
|
2379
|
+
let blob = new Blob([ab], { type });
|
|
2380
|
+
await navigator.clipboard.write([new ClipboardItem({ [type]: blob })]);
|
|
2381
|
+
} catch (error) {
|
|
2382
|
+
ExceptionUtil.throwException("Failed to copy image to clipboard:");
|
|
2383
|
+
}
|
|
2384
|
+
},
|
|
2385
|
+
readImage(url) {
|
|
2386
|
+
return new Promise((resolve, reject) => {
|
|
2387
|
+
let image = new Image();
|
|
2388
|
+
image.setAttribute("crossOrigin", "Anonymous");
|
|
2389
|
+
image.src = url;
|
|
2390
|
+
image.onload = () => {
|
|
2391
|
+
resolve(image);
|
|
2392
|
+
};
|
|
2393
|
+
image.onerror = reject;
|
|
2394
|
+
});
|
|
2395
|
+
}
|
|
2396
|
+
};
|
|
2408
2397
|
const FileUtil = {
|
|
2409
2398
|
/**
|
|
2410
2399
|
* 将Base64编码的字符串转换为Blob对象
|
|
@@ -2879,6 +2868,20 @@ const TreeUtil = {
|
|
|
2879
2868
|
}
|
|
2880
2869
|
});
|
|
2881
2870
|
return result;
|
|
2871
|
+
},
|
|
2872
|
+
/**
|
|
2873
|
+
* 遍历树形结构的节点,执行指定的回调函数
|
|
2874
|
+
*
|
|
2875
|
+
* @param data 树形结构的节点数组
|
|
2876
|
+
* @param callback 回调函数,参数为当前遍历到的节点
|
|
2877
|
+
*/
|
|
2878
|
+
forEachTree(data, callback) {
|
|
2879
|
+
data.forEach((node) => {
|
|
2880
|
+
callback(node);
|
|
2881
|
+
if (node.children && node.children.length > 0) {
|
|
2882
|
+
this.forEachTree(node.children, callback);
|
|
2883
|
+
}
|
|
2884
|
+
});
|
|
2882
2885
|
}
|
|
2883
2886
|
};
|
|
2884
2887
|
const UrlUtil = {
|
|
@@ -3351,13 +3354,13 @@ class Color {
|
|
|
3351
3354
|
class CanvasDrawer {
|
|
3352
3355
|
constructor(el) {
|
|
3353
3356
|
__publicField(this, "ctx");
|
|
3354
|
-
if (typeof el === "string") {
|
|
3357
|
+
if (el && typeof el === "string") {
|
|
3355
3358
|
el = document.querySelector("#" + el);
|
|
3356
3359
|
if (!el) {
|
|
3357
3360
|
throw new Error("Element not found");
|
|
3358
3361
|
}
|
|
3359
3362
|
}
|
|
3360
|
-
if (el instanceof
|
|
3363
|
+
if (el instanceof HTMLCanvasElement) {
|
|
3361
3364
|
const canvas = el;
|
|
3362
3365
|
if (canvas.getContext) {
|
|
3363
3366
|
this.ctx = canvas.getContext("2d");
|
|
@@ -3365,7 +3368,15 @@ class CanvasDrawer {
|
|
|
3365
3368
|
throw new Error("getContext is not available on this element");
|
|
3366
3369
|
}
|
|
3367
3370
|
} else {
|
|
3368
|
-
|
|
3371
|
+
const canvas = document.createElement("canvas");
|
|
3372
|
+
canvas.style.cssText = "position: absolute; display: block; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999;";
|
|
3373
|
+
canvas.width = window.innerWidth;
|
|
3374
|
+
canvas.height = window.innerHeight;
|
|
3375
|
+
document.body.appendChild(canvas);
|
|
3376
|
+
this.ctx = canvas.getContext("2d");
|
|
3377
|
+
if (!this.ctx) {
|
|
3378
|
+
throw new Error("getContext is not available on this element");
|
|
3379
|
+
}
|
|
3369
3380
|
}
|
|
3370
3381
|
}
|
|
3371
3382
|
/**
|
|
@@ -3412,17 +3423,16 @@ class CanvasDrawer {
|
|
|
3412
3423
|
this.ctx.stroke();
|
|
3413
3424
|
}
|
|
3414
3425
|
}
|
|
3415
|
-
drawImage({ x, y },
|
|
3416
|
-
const
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
|
|
3420
|
-
const
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3424
|
-
|
|
3425
|
-
};
|
|
3426
|
+
drawImage({ x, y }, image, angleDeg, color) {
|
|
3427
|
+
const width = image.width;
|
|
3428
|
+
const height = image.height;
|
|
3429
|
+
this.ctx.translate(x, y);
|
|
3430
|
+
if (angleDeg) {
|
|
3431
|
+
const angleRad = angleDeg * Math.PI / 180;
|
|
3432
|
+
this.ctx.rotate(angleRad);
|
|
3433
|
+
}
|
|
3434
|
+
this.ctx.drawImage(image, -width / 2, -height / 2, width, height);
|
|
3435
|
+
this.ctx.restore();
|
|
3426
3436
|
}
|
|
3427
3437
|
drawText({ x, y }, text, options) {
|
|
3428
3438
|
this.ctx.font = options.font || "10px sans-serif";
|
|
@@ -3434,11 +3444,9 @@ class CanvasDrawer {
|
|
|
3434
3444
|
const canvas = document.createElement("canvas");
|
|
3435
3445
|
if (width) {
|
|
3436
3446
|
canvas.width = width;
|
|
3437
|
-
canvas.style.width = width + "px";
|
|
3438
3447
|
}
|
|
3439
3448
|
if (height) {
|
|
3440
3449
|
canvas.height = height;
|
|
3441
|
-
canvas.style.height = height + "px";
|
|
3442
3450
|
}
|
|
3443
3451
|
return canvas;
|
|
3444
3452
|
}
|