初学者如何在React作品集集成Python与Google Earth Engine交互式可视化

一、Google Earth Engine（GEE）项目集成 #

核心思路：用GEE JS API复用Python分析结果，保留原生交互 #

• 第一步：把Python生成的GEE图层转为托管资产
  用你的Python GEE代码，将最终可视化图层（比如时序遥感图、分类结果）发布为GEE托管资产。示例Python代码片段：

  import ee
  ee.Initialize()
  
  # 示例：生成2020年NDVI中位数图层
  ndvi_layer = ee.ImageCollection('LANDSAT/LC08/C02/T1_L2') \
    .filterDate('2020-01-01', '2020-12-31') \
    .map(lambda img: img.normalizedDifference(['B5', 'B4'])) \
    .median()
  
  # 发布为托管资产
  task = ee.batch.Export.image.toAsset(
    image=ndvi_layer,
    description='NDVI_2020_Median',
    assetId='projects/your-project-id/assets/ndvi_2020_median',
    scale=30,
    region=your_roi
  )
  task.start()
  

• 第二步：在React中加载并添加交互
  直接引入GEE JS API，结合React状态管理实现交互（比如时间滑块、图层点击查询）。极简实现示例：

  import { useEffect, useState } from 'react';
  
  const GEEInteractiveMap = () => {
    const [selectedDate, setSelectedDate] = useState('2020-06-01');
  
    useEffect(() => {
      // 加载GEE JS API
      if (!window.google) {
        const script = document.createElement('script');
        script.src = 'https://earthengine.googleapis.com/jsapi.js';
        script.onload = initGEE;
        document.body.appendChild(script);
      } else {
        initGEE();
      }
  
      async function initGEE() {
        await ee.initialize();
        const map = new google.maps.Map(document.getElementById('gee-map-container'), {
          center: [30, 10],
          zoom: 6
        });
  
        // 根据选中日期更新图层
        const updateLayer = async () => {
          const image = ee.ImageCollection('LANDSAT/LC08/C02/T1_L2')
            .filterDate(selectedDate, selectedDate)
            .first()
            .normalizedDifference(['B5', 'B4'])
            .visualize({ min: -0.2, max: 0.8, palette: ['brown', 'yellow', 'green'] });
          
          const mapId = await image.getMapId();
          const tileLayer = new google.maps.ImageMapType({
            getTileUrl: (coord, zoom) => 
              `https://earthengine.googleapis.com/map/${mapId.mapid}/${zoom}/${coord.x}/${coord.y}?token=${mapId.token}`,
            tileSize: new google.maps.Size(256, 256)
          });
          
          map.overlayMapTypes.clear();
          map.overlayMapTypes.push(tileLayer);
        };
  
        updateLayer();
      }
    }, [selectedDate]);
  
    return (
      <div>
        <input 
          type="date" 
          value={selectedDate} 
          onChange={(e) => setSelectedDate(e.target.value)}
          style={{ marginBottom: '1rem' }}
        />
        <div id="gee-map-container" style={{ width: '100%', height: '600px' }} />
      </div>
    );
  };
  
  export default GEEInteractiveMap;
  

二、Python交互式可视化集成 #

分两种场景处理： #

1. Plotly/Bokeh等图表类项目

• 导出图表数据为JSON：在Python里把图表对象转为JSON，比如Plotly：

  import plotly.express as px
  df = px.data.iris()
  fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species")
  fig.write_json("iris_plot.json")
  

• React中用官方组件渲染：安装react-plotly.js，直接导入JSON数据，完全保留交互：

  import Plot from 'react-plotly.js';
  import irisPlot from './iris_plot.json';
  
  const PythonPlot = () => {
    return (
      <Plot
        data={irisPlot.data}
        layout={irisPlot.layout}
        style={{ width: '100%', height: '500px' }}
      />
    );
  };
  
  export default PythonPlot;
  

2. 自定义交互工具（如Streamlit项目）

• 部署Python服务：把你的Streamlit项目部署到Streamlit Cloud或自有服务器，获取访问URL。
• React中用iframe嵌入：直接嵌入URL，确保交互完整：

  const StreamlitEmbed = () => {
    return (
      <iframe
        src="https://your-streamlit-app-url.streamlit.app/"
        width="100%"
        height="700px"
        frameBorder="0"
        sandbox="allow-scripts allow-same-origin allow-forms"
      />
    );
  };
  
  export default StreamlitEmbed;
  

三、作品集集成注意事项 #

• 样式统一：用CSS框架（如Tailwind）调整组件样式，和作品集整体风格匹配，避免iframe或第三方组件出现样式断层。
• 性能优化：给GEE地图和大型图表添加懒加载（比如用react-intersection-observer），只有进入视口才初始化，减少页面加载压力。
• 权限处理：如果GEE资产是私有，要确保React项目能通过OAuth或服务账号密钥访问，避免图层加载失败。

内容的提问来源于stack exchange，提问作者Boineelo Moyo