Newer
Older
urbanLifeline_YanAn / public / static / libs / mapbox / RainsLayer.js
@jimengfei jimengfei on 14 Oct 5 KB updata
  1. (function (global, factory) {
  2. typeof exports === 'object' && typeof module !== 'undefined'
  3. ? (module.exports = factory())
  4. : typeof define === 'function' && define.amd
  5. ? define(factory)
  6. : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory()));
  7. })(window, function () {
  8. async function urlToFile(url, fileName) {
  9. // 使用 fetch 获取图片并转换为 Blob
  10. const response = await fetch(url);
  11. const blob = await response.blob();
  12. // 将 Blob 转换为 File 对象
  13. const file = new File([blob], fileName, { type: blob.type });
  14. return file;
  15. }
  16. const createCanvas = id => {
  17. let canvas = document.createElement('canvas');
  18. canvas.id = 'canvas' + id;
  19. canvas.style.display = 'none';
  20. document.body.append(canvas);
  21. return canvas;
  22. };
  23. const createPlot = async (e, canvas, scaleKey, plot) => {
  24. var tif = await GeoTIFF.fromArrayBuffer(e.target.result);
  25. var tifImg = await tif.getImage();
  26. var readRasters = await tifImg.readRasters();
  27. plot == null &&
  28. (plot = new plotty.plot({
  29. canvas,
  30. data: readRasters[0],
  31. width: tifImg.getWidth(),
  32. height: tifImg.getHeight(),
  33. domain: [0, 256],
  34. colorScale: scaleKey,
  35. }));
  36. plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
  37. plot.render();
  38. };
  39. const createCanvasLayer = (canvasId, i, bbox, map) => {
  40. bbox = [
  41. [bbox[0], bbox[3]],
  42. [bbox[2], bbox[3]],
  43. [bbox[2], bbox[1]],
  44. [bbox[0], bbox[1]],
  45. ];
  46. if (map.getLayer('canvas-layer' + i)) {
  47. map.removeLayer('canvas-layer' + i);
  48. map.removeSource('canvas-source' + i);
  49. }
  50. map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true });
  51. map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i });
  52. map.moveLayer('canvas-layer' + i);
  53. };
  54. const plotInit = (name, colorScale = colorScale) => {
  55. const minVal = colorScale[0].value;
  56. const maxVal = colorScale[colorScale.length - 1].value;
  57. let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
  58. if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color });
  59. plotty.addColorScale(
  60. name,
  61. color.map(i => i.color),
  62. color.map(i => (i.value / maxVal).toFixed(5))
  63. );
  64. };
  65.  
  66. const setRainImage = (file, canvas, scaleKey, plot) => {
  67. var reader = new FileReader();
  68. reader.onload = e => createPlot(e, canvas, scaleKey, plot);
  69. reader.readAsArrayBuffer(file);
  70. };
  71.  
  72. return class RainsLayer {
  73. map = null;
  74. index = null;
  75. bbox = null;
  76. callback = null;
  77. images = [];
  78. imagesFiles = [];
  79. canvas = null;
  80. plot = null;
  81. scales = {
  82. 1: [
  83. { value: '0', color: 'rgba(7, 213, 118, 0)' },
  84. { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
  85. { value: '5', color: 'rgba(38, 129, 240,1)' },
  86. { value: '25', color: 'rgba(255, 26, 26, 1)' },
  87. { value: '250', color: 'rgba(255, 26, 26, 1)' },
  88. ],
  89. 3: [
  90. { value: '0', color: 'rgba(7, 213, 118, 0)' },
  91. { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
  92. { value: '5', color: 'rgba(38, 129, 240,1)' },
  93. { value: '25', color: 'rgba(255, 26, 26, 1)' },
  94. { value: '250', color: 'rgba(255, 26, 26, 1)' },
  95. ],
  96. 12: [
  97. { value: '0', color: 'rgba(7, 213, 118, 0)' },
  98. { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
  99. { value: '5', color: 'rgba(38, 129, 240,1)' },
  100. { value: '25', color: 'rgba(255, 26, 26, 1)' },
  101. { value: '250', color: 'rgba(255, 26, 26, 1)' },
  102. ],
  103. 24: [
  104. { value: '0', color: 'rgba(7, 213, 118, 0)' },
  105. { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
  106. { value: '5', color: 'rgba(38, 129, 240,1)' },
  107. { value: '25', color: 'rgba(255, 26, 26, 1)' },
  108. { value: '250', color: 'rgba(255, 26, 26, 1)' },
  109. ],
  110. };
  111. constructor(bbox, images, callback) {
  112. this.callback = callback;
  113. this.bbox = bbox;
  114. this.images = images;
  115. this.init();
  116. }
  117.  
  118. async init() {
  119. if (this.bbox.length && this.images.length) {
  120. Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key]));
  121. this.canvas = createCanvas(0);
  122. this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/')))));
  123. this.callback && this.callback(this);
  124. }
  125. }
  126.  
  127. addTo(map) {
  128. this.destroy();
  129. this.map = map;
  130. createCanvasLayer(this.canvas.id, 0, this.bbox, map);
  131. return this;
  132. }
  133.  
  134. next(scaleKey = 1) {
  135. if (!this.index) this.index = 0;
  136. this.index++;
  137. if (this.index >= this.images.length) this.index = 0;
  138. setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot);
  139. }
  140.  
  141. prev(scaleKey = 1) {
  142. if (!this.index) this.index = 0;
  143. this.index++;
  144. if (this.index <= 0) this.index = this.imagesFiles.length;
  145. setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot);
  146. }
  147.  
  148. hide(newfiberMap) {
  149. newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none');
  150. }
  151.  
  152. show(newfiberMap) {
  153. newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible');
  154. }
  155.  
  156. destroy() {
  157. if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0');
  158. if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0');
  159. }
  160. };
  161. });