Spaces:

zhanggrace
/

ImageSearch

Runtime error

File size: 25,858 Bytes

import os
import json
import datetime
import streamlit as st
import streamlit.components.v1 as components
import re
import warnings
import traceback



warnings.filterwarnings("ignore")

# os.environ['SDK_CLIENT_HOST'] = 'https://pre-engine-aiearth.aliyun.com'
import aie


default_map_html = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IPyWidget export</title>
</head>
<body>


<!-- Load require.js. Delete this if your page already loads require.js -->
<script src="https://g.alicdn.com/aie/jp-notebook/0.1.15/static/components/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://g.alicdn.com/aie/jp-notebook/0.1.15/static/components/jquery/dist/jquery-ui.min.css">
<script src="https://g.alicdn.com/aie/jp-notebook/0.1.15/static/components/jquery/dist/jquery-ui.min.js"></script>
<script src="https://g.alicdn.com/aie/jp-notebook/0.1.15/static/components/requirejs/require.js"></script>
<script src="https://g.alicdn.com/aie/jp-notebook/0.1.15/static/components/moment/min/moment.min.js"></script>
<link href="https://g.alicdn.com/aie/jp-notebook/0.1.15/static/build/theme.css" rel="stylesheet">

<style>
  #map {
    height: 100% !important;
  }
  .map-trigger {
    display: none;
  }
</style>

<script type="application/vnd.jupyter.widget-state+json">
{"version_major": 2, "version_minor": 0, "state": {"94ea4efec6cf44c3bfdae7ea872b2ec3": {"model_name": "LeafletMapStyleModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {}}, "397323d9da4942d79ae7a5c917d300e0": {"model_name": "LeafletMapStyleModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"cursor": "move"}}, "f481ac800c3746f78f47085d05ae63b0": {"model_name": "LeafletLayerGroupModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"base": true, "layers": ["IPY_MODEL_36a8e8e546534e548e65cdda5aba81c6", "IPY_MODEL_b0dce2566b604debb38b19c9f25833cd"], "name": "\u7ebf\u753b\u5730\u56fe", "options": []}}, "36a8e8e546534e548e65cdda5aba81c6": {"model_name": "LeafletTDTLayerModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"base": true, "key": "2d585d36d89ab86049e29f6f10364dc3", "options": ["attribution", "bounds", "detect_retina", "key", "max_native_zoom", "max_zoom", "min_native_zoom", "min_zoom", "no_wrap", "proj", "subdomains", "tile_size", "tms", "zoom_offset"], "proj": "c", "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"], "url": "https://t{s}.tianditu.gov.cn/vec_{proj}/wmts?layer=vec&style=default&tilematrixset={proj}&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk={key}", "zoom_offset": 1}}, "b0dce2566b604debb38b19c9f25833cd": {"model_name": "LeafletTDTLayerModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"base": true, "key": "2d585d36d89ab86049e29f6f10364dc3", "options": ["attribution", "bounds", "detect_retina", "key", "max_native_zoom", "max_zoom", "min_native_zoom", "min_zoom", "no_wrap", "proj", "subdomains", "tile_size", "tms", "zoom_offset"], "proj": "c", "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"], "url": "https://t{s}.tianditu.gov.cn/cva_{proj}/wmts?layer=cva&style=default&tilematrixset={proj}&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk={key}", "zoom_offset": 1}}, "d12e84fcb7c84ef08e01fd06cff095b0": {"model_name": "LeafletLayerGroupModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"base": true, "layers": ["IPY_MODEL_7a8015a60adb47b4b047f9013b77f21d", "IPY_MODEL_622608fb288f43d08511308cf829d853"], "name": "\u9065\u611f\u5730\u56fe", "options": []}}, "7a8015a60adb47b4b047f9013b77f21d": {"model_name": "LeafletTDTLayerModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"base": true, "key": "2d585d36d89ab86049e29f6f10364dc3", "options": ["attribution", "bounds", "detect_retina", "key", "max_native_zoom", "max_zoom", "min_native_zoom", "min_zoom", "no_wrap", "proj", "subdomains", "tile_size", "tms", "zoom_offset"], "proj": "c", "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"], "url": "https://t{s}.tianditu.gov.cn/img_{proj}/wmts?layer=img&style=default&tilematrixset={proj}&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk={key}", "zoom_offset": 1}}, "622608fb288f43d08511308cf829d853": {"model_name": "LeafletTDTLayerModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"base": true, "key": "2d585d36d89ab86049e29f6f10364dc3", "options": ["attribution", "bounds", "detect_retina", "key", "max_native_zoom", "max_zoom", "min_native_zoom", "min_zoom", "no_wrap", "proj", "subdomains", "tile_size", "tms", "zoom_offset"], "proj": "c", "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"], "url": "https://t{s}.tianditu.gov.cn/cia_{proj}/wmts?layer=cia&style=default&tilematrixset={proj}&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk={key}", "zoom_offset": 1}}, "50ebd50ae88c4b1f805d489b9b30523d": {"model_name": "LayoutModel", "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "state": {"height": "600px", "width": "100%"}}, "03b29492f1cb40429e461a12468e7e30": {"model_name": "LeafletMapStyleModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {}}, "350441dafd5b4772bb1a67f9fee4c49c": {"model_name": "LeafletMapModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"_dom_classes": [], "center": [39.916668, 116.383331], "controls": ["IPY_MODEL_4025e26e20e745609ea8d442f4747020", "IPY_MODEL_07a7ab3bb9f54361ab752f3e0d779487", "IPY_MODEL_562b3406280e489c955781f8361e49f5", "IPY_MODEL_a14f44ef9941473c801376919b07ab08", "IPY_MODEL_4e83034b92eb447ca7982055140df1ef"], "crs": {"name": "EPSG4326", "custom": false}, "default_style": "IPY_MODEL_94ea4efec6cf44c3bfdae7ea872b2ec3", "dragging_style": "IPY_MODEL_397323d9da4942d79ae7a5c917d300e0", "layers": ["IPY_MODEL_f481ac800c3746f78f47085d05ae63b0", "IPY_MODEL_d12e84fcb7c84ef08e01fd06cff095b0"], "layout": "IPY_MODEL_50ebd50ae88c4b1f805d489b9b30523d", "options": ["bounce_at_zoom_limits", "box_zoom", "center", "close_popup_on_click", "double_click_zoom", "dragging", "fullscreen", "inertia", "inertia_deceleration", "inertia_max_speed", "interpolation", "keyboard", "keyboard_pan_offset", "keyboard_zoom_offset", "max_zoom", "min_zoom", "prefer_canvas", "scroll_wheel_zoom", "tap", "tap_tolerance", "touch_zoom", "world_copy_jump", "zoom", "zoom_animation_threshold", "zoom_delta", "zoom_snap", "zoom_start"], "style": "IPY_MODEL_03b29492f1cb40429e461a12468e7e30", "zoom": 3.0}}, "4025e26e20e745609ea8d442f4747020": {"model_name": "LeafletZoomControlModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"options": ["position", "zoom_in_text", "zoom_in_title", "zoom_out_text", "zoom_out_title"]}}, "07a7ab3bb9f54361ab752f3e0d779487": {"model_name": "LeafletLayersControlModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"options": ["position"], "position": "topright"}}, "562b3406280e489c955781f8361e49f5": {"model_name": "LeafletScaleControlModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"options": ["imperial", "max_width", "metric", "position", "update_when_idle"], "position": "bottomleft"}}, "a14f44ef9941473c801376919b07ab08": {"model_name": "LeafletFullScreenControlModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"options": ["position"]}}, "4e83034b92eb447ca7982055140df1ef": {"model_name": "LeafletMeasureControlModel", "model_module": "jupyter-leaflet", "model_module_version": "^0.15.1", "state": {"_custom_units": {}, "active_color": "orange", "options": ["active_color", "capture_z_index", "completed_color", "popup_options", "position", "primary_area_unit", "primary_length_unit", "secondary_area_unit", "secondary_length_unit"], "popup_options": {"className": "leaflet-measure-resultpopup", "autoPanPadding": [10, 10]}, "position": "bottomleft", "primary_length_unit": "kilometers"}}}}
</script>
<script type="application/vnd.jupyter.widget-view+json">
{"version_major": 2, "version_minor": 0, "model_id": "350441dafd5b4772bb1a67f9fee4c49c"}
</script>

<script>
  (function() {
    function addWidgetsRenderer() {
      var mimeElement = document.querySelector('script[type="application/vnd.jupyter.widget-view+json"]');
      var scriptElement = document.createElement('script');
      var widgetRendererSrc = "https://g.alicdn.com/aie/jp-notebook/0.1.15/@jupyter-widgets/html-manager/embed-amd.js";
      var widgetState;

      try {
        widgetState = mimeElement && JSON.parse(mimeElement.innerHTML);

        if (widgetState && (widgetState.version_major < 2 || !widgetState.version_major)) {
          widgetRendererSrc = 'https://g.alicdn.com/aie/jp-notebook/0.1.15/jupyter-js-widgets@*/dist/embed.js';
        }
      } catch(e) {}

      scriptElement.src = widgetRendererSrc;
      document.body.appendChild(scriptElement);
    }

    document.addEventListener('DOMContentLoaded', addWidgetsRenderer);
  }());
    window.API_SERVER_CONSOLE="https://engine-aiearth.aliyun.com";
</script>

<div id="map"></div>

</body>
</html>
'''

label_text_tmpl='''
<style>
    .filter-label {{
        font-size: 14px;
        #font-family: "sans serif";
        vertical-align: middle;
        color: #e8eaed;
        padding-top: 2px;
    }}
</style>
<div class="filter-label">
{LABEL_TEXT}
</div>
'''

secondary_label_text_tmpl='''
<style>
    .filter-label {{
        font-size: 12px;
        #font-family: "sans serif";
        vertical-align: middle;
        color: rgb(232, 234, 237, 0.699999988079071);
        padding-top: 2px;
        white-space:nowrap;
    }}
</style>
<div class="filter-label">
{LABEL_TEXT}
</div>
'''

page_title_text_tmpl='''
<style>
    .page_title {{
        font-size: 18px;
        // font-family: "sans serif";
        // vertical-align: middle;
        color: rgb(232, 234, 237, 0.699999988079071);
        font-weight: 600;
    }}

    .page_desc {{
        font-size: 14px;
        //font-family: "sans serif";
        //vertical-align: middle;
        color: rgb(232, 234, 237, 0.699999988079071);
        //font-weight: 600;
        margin-top: 12px;
    }}
</style>
<div class="page_title">
{TITLE_TEXT}
</div>
<div class="page_desc">
{DESC_TEXT}
</div>
'''


label_text_component_height = 41


st.set_page_config(layout="wide")

# AIE数据集stac code
aie_dataset_category = [
"LANDSAT_LT05_T02_T1_L2"
,"LANDSAT_LE07_E02_T1_L2"
,"LANDSAT_LC08_C02_T1_L2"
,"LANDSAT_LC09_C02_T1_L2"
,"SENTINEL_MSIL2A"
]

# L5:1984-2011
# L7:1999-至今
# L8:2014-至今
# L9:2021-至今
# S2:2018-至今

# 数据集时间范围
dataset_timestamp = {
    "LANDSAT_LT05_T02_T1_L2": {"startDate": "1984-01-01", "endDate": "2011-12-31", "sampleStart": "2011-11-01", "sampleEnd": "2011-11-30"},
    "LANDSAT_LE07_E02_T1_L2": {"startDate": "1999-01-01", "endDate": "2021-12-31", "sampleStart": "2021-12-01", "sampleEnd": "2021-12-31"},
    "LANDSAT_LC08_C02_T1_L2": {"startDate": "2014-01-01", "endDate": "__NOW__", "sampleStart": "2023-02-01", "sampleEnd": "2023-03-28"},
    "LANDSAT_LC09_C02_T1_L2": {"startDate": "2021-01-01", "endDate": "__NOW__", "sampleStart": "2023-01-01", "sampleEnd": "2023-03-01"},
    "SENTINEL_MSIL2A": {"startDate": "2018-01-01", "endDate": "__NOW__", "sampleStart": "2023-03-01", "sampleEnd": "2023-03-28"}
}

# aie_area_meta = {}


image_collection_reduce_funcs = [
"median",
"min",
"max",
"mosaic",
"mean"
]


def aie_init():
    token = os.environ.get("SDK_TOKEN")
    #token = "81921ae3af932cf35f1e56de4a8b1ca4"
    aie.Authenticate(token=token)
    aie.Initialize()


@st.cache_resource
def load_area_select_options():
    file_path = "./china-area.json"
    with open(file_path, 'r', encoding="utf-8") as reader:
        area_arr = json.loads(reader.read())
        area_dic = {}
        for item in area_arr:
            province_name = item['levelOneAreaName']
            city_name = item['levelTwoAreaName']
            district_name = item['areaName']
            if not province_name in area_dic:
                area_dic[province_name] = {}
            
            cities = area_dic[province_name]
            if not city_name in cities:
                cities[city_name] = {}
            
            districts = cities[city_name]
            if not district_name in districts:
                districts[district_name] = district_name
        
        print("tianxun area data init complete")
        return area_dic

@st.cache_resource
def load_dataset_info():
    file_path = "./aie_dataset_meta.json"
    with open(file_path, 'r', encoding="utf-8") as reader:
        _dataset = json.loads(reader.read())
        return _dataset



def page_reset_callback():
    st.session_state['dateset_picker'] = 'LANDSAT_LT05_T02_T1_L2'
    st.session_state['region_province_select'] = '北京市'
    st.session_state['region_city_select'] = '请选择城市'
    st.session_state['region_district_select'] = '请选择'
    st.session_state['time_picker'] = [datetime.date(2011, 1, 1), datetime.date(2011, 6, 30)]
    st.session_state['cloud_picker'] = '20%'
    st.session_state['reduce_picker'] = 'median'
    st.session_state['band_picker'] = []
    st.session_state['min_input'] = '8000'
    st.session_state['max_input'] = '13000'
    st.session_state['render_map_html'] = None



def page_components_render(ctr_panel, map_panel):
    with ctr_panel:
        hide_streamlit_menu = """
        <style>
        #MainMenu {visibility: hidden;}
        </style>

        """
        st.markdown(hide_streamlit_menu, unsafe_allow_html=True)

        area_selections = load_area_select_options()
        dataset_meta = load_dataset_info()

        # title
        components.html(page_title_text_tmpl.format(TITLE_TEXT="影像快速检索", DESC_TEXT="卫星影像数据获取是业务应用分析的第一步工作，基于平台现有Landsat和Sentinel系列卫星数据资源，根据用户选择的感兴趣行政区、时间范围、云量等参数，可快速获取覆盖区域内的已镶嵌和裁剪后的卫星数据。"), height=160)


        # 选择数据集类型
        dataset_label, dataset_select = st.columns([1.1, 3.9])
        # todo: 实在不行，label用html渲染
        with dataset_label:
            # st.text("数据类型")
            components.html(label_text_tmpl.format(LABEL_TEXT="数据类型"), height=label_text_component_height)
        
        with dataset_select:
            dataset_empty = st.empty()

            dataset = dataset_empty.selectbox(label="请选择数据类型", options=aie_dataset_category, key="dateset_picker", label_visibility="collapsed")

        # 区域过滤
        region_label, province_select, city_select  = st.columns([1.65,2.8,2.75])
        
        with region_label:
            # st.text("区域选择")
            components.html(label_text_tmpl.format(LABEL_TEXT="区域选择"), height=label_text_component_height)
        
        with province_select:
            region_province_options = [name for name in area_selections]
            region_province = st.selectbox(label="请选择省", options=region_province_options, key="region_province_select", label_visibility="collapsed")
        
        with city_select:
            region_city_options = []
            if region_province:
                region_city_options = [name for name in area_selections[region_province]]

            region_city_options_update = ['请选择'] + region_city_options
            region_city = st.selectbox(label="请选择市", options=region_city_options_update, key="region_city_select", label_visibility="collapsed")
        
        # 选择时间区间
        time_label, time_select = st.columns([1.1, 3.9])
        with time_label:
            # st.text("检索日期")
            components.html(label_text_tmpl.format(LABEL_TEXT="检索日期"), height=label_text_component_height)
        
        with time_select:
            try:
                min_time = datetime.date(2011, 1, 1)
                max_time = datetime.date(2011, 6, 30)
                sample_start_time = datetime.date(2011, 1, 1)
                sample_end_time = datetime.date(2011, 6, 30)
                if dataset and dataset in dataset_timestamp:
                    min_time = datetime.datetime.strptime(dataset_timestamp[dataset]['startDate'], '%Y-%m-%d')
                    if dataset_timestamp[dataset]['endDate'] == '__NOW__':
                        # max_time = datetime.date.today()
                        max_time = datetime.datetime.strptime(str(datetime.date.today()), '%Y-%m-%d')
                    else:
                        max_time = datetime.datetime.strptime(dataset_timestamp[dataset]['endDate'], '%Y-%m-%d')

                    # print(f"[DEBUG] {dataset} max_time = {max_time}, min_time = {min_time}")
                    sample_start_time = datetime.datetime.strptime(dataset_timestamp[dataset]['sampleStart'], '%Y-%m-%d')
                    sample_end_time = datetime.datetime.strptime(dataset_timestamp[dataset]['sampleEnd'], '%Y-%m-%d')


                start_date, end_date = st.date_input(label="Select image time range", min_value=min_time, max_value=max_time,value=[sample_start_time, sample_end_time], key="time_picker", label_visibility="collapsed")
            except Exception as e:
                print("date picker error. ignore")

        # 选择云量
        cloud_label, cloud_select = st.columns([1.1, 3.9])
        with cloud_label:
            # st.text("云量")
            components.html(label_text_tmpl.format(LABEL_TEXT="云  量"), height=label_text_component_height)
        
        with cloud_select:
            cloud_options = [ str(x) + "%" for x in range(0, 105, 5)]
            end_cloud = st.select_slider(
                '选择云量',
                options=cloud_options,
                key='cloud_picker',
                value='20%', label_visibility="collapsed")
        
        # 选择镶嵌方式
        crop_label, crop_select = st.columns([1.1, 3.9])
        with crop_label:
            #st.text("镶嵌方式")
            components.html(label_text_tmpl.format(LABEL_TEXT="镶嵌方式"), height=label_text_component_height)

        with crop_select:
            crop_type = st.selectbox(label="请选择镶嵌方式", options=image_collection_reduce_funcs, key="reduce_picker", label_visibility="collapsed")


        # 波段选择（默认填充前3个）
        band_label, band_select = st.columns([1.1, 3.9])
        with band_label:
            # st.text("波段选择")
            components.html(label_text_tmpl.format(LABEL_TEXT="波段选择"), height=label_text_component_height)
        
        with band_select:
            bands_option = []
            if dataset and dataset in dataset_meta:
                bands_option = [band_name for band_name in dataset_meta[dataset]['bands']]
            bands = st.multiselect("Select bands to display", options=bands_option, key="band_picker", label_visibility="collapsed", max_selections=3)


        minmax_label, min_label, min_select, max_label, max_select = st.columns([1.55, 1.22, 1.74, 1.23, 1.74])
        with min_label:
            # st.text("最小值")
            components.html(secondary_label_text_tmpl.format(LABEL_TEXT="最小值"), height=label_text_component_height)

        with min_select:
            default_min = 100
            if dataset and dataset in dataset_meta:
                default_min = dataset_meta[dataset]['min']
            min = st.text_input(label="Enter image min",value=str(default_min), key="min_input", label_visibility="collapsed")
            
        with max_label:
            #st.text("最大值")
            components.html(secondary_label_text_tmpl.format(LABEL_TEXT="最大值"), height=label_text_component_height)

        with max_select:
            default_max = 10000
            if dataset and dataset in dataset_meta:
                default_max = dataset_meta[dataset]['max']  
            max = st.text_input(label="Enter image max",value=str(default_max), key="max_input", label_visibility="collapsed")

        reset_btn, query_btn = st.columns([1, 2])
        with reset_btn:
            page_reset = st.button("重置", type='secondary', key='reset_btn', use_container_width=True, on_click=page_reset_callback)

        with query_btn:
            submit = st.button("检索", type='primary', key='submit_btn', use_container_width=True)

        # date_debug = str(dataset) + ", max_time = " + str(max_time) + ", min_time = " + str(min_time)
        # st.write(date_debug)

    if page_reset:
        with map_panel:
            components.html(default_map_html, height=780, scrolling=False)
        return 

    if submit:
        # 参数校验
        errMsg = None
        if not start_date or not end_date:
            errMsg = "请选择时间"
        elif start_date >= max_time.date():
            errMsg = "未检索到数据，请重新设置检索日期"
        elif not bands or len(bands) == 0:
            errMsg = "请选择波段"
        elif not min or not max:
            errMsg = "请输入最大最小值"
        else:
            try:
                ti = float(min)
                ta = float(max)
            except Exception as e:
                errMsg = "最大最小值只能为数字"


        if errMsg:
            aie_init()
            with ctr_panel:
                st.error(errMsg)

            with map_panel:
                components.html(default_map_html, height=780, scrolling=False)
                
            return

        if dataset:
            try:
                # 拼接AIE 数据查询SDK语句
                aie_init()
                image_collection = aie.ImageCollection(dataset)
                if start_date and end_date:
                    image_collection = image_collection.filterDate(start_date.strftime('%Y-%m-%d'), end_date.strftime('%Y-%m-%d'))
                
                if region_province or region_city:
                    fc = aie.FeatureCollection('China_City')

                    if region_province:
                        fc = fc.filter(aie.Filter.eq('province', region_province))

                    if region_city and region_city != '请选择':
                        fc = fc.filter(aie.Filter.eq('city', region_city))


                    # 用选择的数据重新初始化map组件
                    aie_map = aie.Map(
                        center=fc.getCenter(),
                        height=800,
                        zoom=7
                    )

                    region_vis_params = {
                        'color': '#00FF00'
                    }
                    aie_map.addLayer(
                        fc,
                        region_vis_params,
                        '行政区划边界',
                        bounds=fc.getBounds()
                    )
                    image_collection = image_collection.filterBounds(fc.geometry())

                if end_cloud:
                    end_cloud_val = end_cloud.replace('%','')
                    image_collection = image_collection.filter(aie.Filter.lte('eo:cloud_cover', int(end_cloud_val)))


                if crop_type == 'median':
                    image_collection = image_collection.median()
                elif crop_type == 'min':
                    image_collection = image_collection.min()
                elif crop_type == 'max':
                    image_collection = image_collection.max()
                elif crop_type == 'mosaic':
                    image_collection = image_collection.mosaic()
                elif crop_type == 'mean':
                    image_collection = image_collection.mean()
                
                if region_province or region_city:
                    image_collection = image_collection.clipToCollection(fc)

                vis_params = {}
                if bands:
                    vis_params['bands'] = list(bands)

                if min and max:
                    vis_params['min'] = float(min)
                    vis_params['max'] = float(max)

                aie_map.addLayer(
                    image_collection,
                    vis_params,
                    dataset,
                    bounds=image_collection.getBounds()
                )

            except Exception as e:
                traceback.print_exc()
                with ctr_panel:
                    # st.error(e)
                    st.error("未检索到数据集信息, 请重新设置查询条件")

                with map_panel:
                    components.html(default_map_html, height=780, scrolling=False)
                        
                return
    

    with map_panel:
        # 对于未点击submit的情况， 直接读取静态html字符串来加快load速度
        if submit:
            map_html_source = aie_map.to_html()
            st.session_state['render_map_html'] = map_html_source
            components.html(map_html_source, height=780, scrolling=False)        
        else:
            display_template = default_map_html
            if 'render_map_html' in st.session_state and st.session_state['render_map_html']:
                display_template = st.session_state['render_map_html']

            components.html(display_template, height=780, scrolling=False)
        # components.html(default_map_html, height=800, scrolling=False)


row1_col1, row1_col2 = st.columns([0.8, 2.2])
page_components_render(row1_col1, row1_col2)