Spaces:

zhanggrace
/

ImageSearch

Runtime error

App Files Files Community

zhanggrace commited on Jul 19, 2023

Commit

3c83daf

1 Parent(s): 21e03ae

Create app.py

Browse files

Files changed (1) hide show

app.py +515 -0

app.py ADDED Viewed

	@@ -0,0 +1,515 @@

+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)