关于SolarAPI获取光伏屋顶图像及GeoTIFF在React中展示的技术问询

1. React应用中展示TIFF文件或叠加GeoTIFF数据到地图 #

展示TIFF文件 #

使用react-tiff库直接在React组件中渲染TIFF文件，支持多页TIFF和基础缩放功能：

import React from 'react';
import Tiff from 'react-tiff';

const TiffViewer = ({ tiffUrl }) => {
  return (
    <div style={{ width: '100%', height: '600px' }}>
      <Tiff
        file={tiffUrl}
        onLoad={(tiff) => console.log('TIFF加载完成:', tiff)}
        onError={(error) => console.error('TIFF加载失败:', error)}
      />
    </div>
  );
};

export default TiffViewer;

叠加GeoTIFF到地图 #

结合geotiff.js解析GeoTIFF数据，再通过地图库的自定义图层实现叠加：

1. 先读取并解析GeoTIFF数据：

import GeoTIFF from 'geotiff';

async function loadGeoTIFF(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
  const image = await tiff.getImage();
  const data = await image.readRasters();
  const bounds = image.getBoundingBox(); // 获取地理边界范围
  return { data, bounds, width: image.getWidth(), height: image.getHeight() };
}

2. 将解析后的数据转成Canvas，再作为自定义叠加层添加到地图（以Mapbox GL为例，Google Maps可参考后续OverlayView实现逻辑）。

2. Google Maps JavaScript API叠加GeoTIFF的实现方法 #

Google Maps JS API不支持直接加载GeoTIFF，可通过以下两种方式解决：

方法1：将GeoTIFF转为瓦片服务后加载 #

使用GDAL工具将GeoTIFF切制成符合Google Maps瓦片规范的瓦片集：

gdal2tiles.py --s_srs EPSG:4326 --t_srs EPSG:3857 your-geotiff.tiff output-tiles-folder

然后通过TileOverlay加载瓦片：

const tileOverlay = new google.maps.TileOverlay({
  getTileUrl: (coord, zoom) => {
    return `https://你的服务器地址/tiles/${zoom}/${coord.x}/${coord.y}.png`;
  },
  opacity: 0.7,
  map: map实例
});

方法2：通过OverlayView渲染Canvas叠加层 #

解析GeoTIFF后，将像素数据绘制到Canvas，再通过OverlayView绑定到地图：

class GeoTIFFOverlay extends google.maps.OverlayView {
  constructor(options) {
    super();
    this.tiffUrl = options.tiffUrl;
    this.map = options.map;
    this.canvas = document.createElement('canvas');
    this.context = this.canvas.getContext('2d');
    this.loadGeoTIFF();
  }

  async loadGeoTIFF() {
    const { data, bounds, width, height } = await loadGeoTIFF(this.tiffUrl);
    this.canvas.width = width;
    this.canvas.height = height;
    // 将单波段数据转成灰度图像绘制到Canvas
    const imageData = this.context.createImageData(width, height);
    for (let i = 0; i < width * height; i++) {
      const val = data[0][i];
      imageData.data[i*4] = val;
      imageData.data[i*4+1] = val;
      imageData.data[i*4+2] = val;
      imageData.data[i*4+3] = 255;
    }
    this.context.putImageData(imageData, 0, 0);
    this.draw();
  }

  onAdd() {
    this.getPanes().overlayLayer.appendChild(this.canvas);
  }

  draw() {
    const projection = this.getProjection();
    const ne = projection.fromLatLngToDivPixel(new google.maps.LatLng(this.bounds[3], this.bounds[2]));
    const sw = projection.fromLatLngToDivPixel(new google.maps.LatLng(this.bounds[1], this.bounds[0]));
    this.canvas.style.left = sw.x + 'px';
    this.canvas.style.top = ne.y + 'px';
    this.canvas.style.width = (ne.x - sw.x) + 'px';
    this.canvas.style.height = (sw.y - ne.y) + 'px';
  }

  onRemove() {
    this.canvas.remove();
  }
}

// 使用示例
new GeoTIFFOverlay({
  tiffUrl: '你的GeoTIFF文件地址.tiff',
  map: map实例
});

3. 获取可调整的带光伏板屋顶高清图像 #

通过Solar API结合Google Maps可视化能力实现：

• 从Solar API的buildingInsights接口获取屋顶边界、最优光伏板布局数量和位置数据。
• 调用Google Street View Static API获取屋顶的高清街景图，或使用Street View Publish API上传自定义屋顶图像。
• 用Canvas将光伏板图层（可根据用户输入调整数量/位置）叠加到屋顶图像：根据Solar API返回的屋顶坐标，计算光伏板在图像中的像素位置，动态绘制可交互的光伏板元素。
• 结合Google Maps的Custom Overlay，实现地图上的可调整光伏板可视化，允许用户拖动、增减光伏板，实时联动更新发电量估算数据。

内容的提问来源于stack exchange，提问作者rushil patel