数据检索
;
+};
diff --git a/src/components/data-retrieval/data-panel/index.module.less b/src/components/data-retrieval/data-panel/index.module.less
new file mode 100644
index 0000000..a1be66d
--- /dev/null
+++ b/src/components/data-retrieval/data-panel/index.module.less
@@ -0,0 +1,27 @@
+.dataPanel {
+ height: calc(100vh - 64px);
+ width: 380px;
+ color: #000;
+ padding: 10px;
+ border-right: 1px solid #e4e1e1;
+ overflow-y: scroll;
+
+ :global {
+ .ant-tree .ant-tree-node-content-wrapper {
+ display: flex;
+ align-items: center;
+ }
+
+ .ant-tree-iconEle {
+ width: 40px !important;
+ }
+ }
+}
+
+.dataPanel {
+ overflow: auto;
+}
+
+.dataPanel::-webkit-scrollbar {
+ width: 0.5em;
+}
diff --git a/src/components/data-retrieval/data-panel/index.tsx b/src/components/data-retrieval/data-panel/index.tsx
new file mode 100644
index 0000000..af187ec
--- /dev/null
+++ b/src/components/data-retrieval/data-panel/index.tsx
@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Button, Tree } from "antd";
+import styles from "./index.module.less";
+import { DataNode } from "rc-tree/lib/interface";
+
+const treeData: DataNode[] = [];
+
+export const DataPanel = () => {
+ const onSelect = (keys: any, info: any) => {
+ console.log("key", keys, info);
+ };
+
+ return (
+
+
+ );
+};
diff --git a/src/components/data-retrieval/index.module.less b/src/components/data-retrieval/index.module.less
new file mode 100644
index 0000000..8512556
--- /dev/null
+++ b/src/components/data-retrieval/index.module.less
@@ -0,0 +1,11 @@
+.dataRetrieval {
+ display: flex;
+ align-items: center;
+ background-color: #fff;
+
+ .larkMapContainer {
+ width: calc(100vw - 380px);
+ height: calc(100vh - 64px);
+ color: #000;
+ }
+}
diff --git a/src/components/data-retrieval/index.tsx b/src/components/data-retrieval/index.tsx
new file mode 100644
index 0000000..9ed6d8e
--- /dev/null
+++ b/src/components/data-retrieval/index.tsx
@@ -0,0 +1,33 @@
+import { IMapConfig } from "@antv/l7";
+import {
+ LarkMap,
+ MapThemeControl,
+ ScaleControl,
+ ZoomControl,
+} from "@antv/larkmap";
+import styles from "./index.module.less";
+import { MapLayer } from "./map-layer";
+import { DataPanel } from "./data-panel";
+import { LocationSelect } from "./location-select";
+
+const mapOptions: Partial
+
+ 数据选择:
+
+
+ 下载数据:
+
+
+
+
+
+ );
+};
diff --git a/src/components/data-retrieval/location-select/constants.ts b/src/components/data-retrieval/location-select/constants.ts
new file mode 100644
index 0000000..92d5447
--- /dev/null
+++ b/src/components/data-retrieval/location-select/constants.ts
@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { getSingleColorStyle } from "@antv/l7-draw";
+import {
+ ChoroplethLayerProps,
+ LineLayerProps,
+ PointLayerProps,
+} from "@antv/larkmap";
+import { message } from "antd";
+import { getEnv } from "../../../utils";
+
+export const enum CoordType {
+ Point = "Point",
+ LineString = "LineString",
+ Polygon = "Polygon",
+ MultiPolygon = "MultiPolygon",
+ MultiLineString = "MultiLineString",
+}
+
+export const CITY_LIST =
+ "https://mdn.alipayobjects.com/afts/file/A*1t_pTZauqCIAAAAAAAAAAAAADrd2AQ/city.json";
+
+export const ICON =
+ "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*CHCXT7F_3YkAAAAAAAAAAAAADmJ7AQ/original";
+
+export const layerOptions: Omit
+
+ 请上传矢量文件（支持上传shp、geojson和kml格式） +
+
+
+
+ {controlRender}
+
+ {layerRender}
+
+ );
+};
diff --git a/src/components/data-retrieval/map-layer/constants.ts b/src/components/data-retrieval/map-layer/constants.ts
new file mode 100644
index 0000000..d8ce97b
--- /dev/null
+++ b/src/components/data-retrieval/map-layer/constants.ts
@@ -0,0 +1,38 @@
+export const GOOGLE_TILE_MAP_URL =
+ "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&gl=CN&x={x}&y={y}&z={z}";
+
+export const GOOGLE_TILE_MAP_ROUTER_URL =
+ "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=h&gl=CN&x={x}&y={y}&z={z}";
+
+export const GEO_VIS_EARTH =
+ "https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788";
+
+export enum OfficeLayerEnum {
+ GoogleSatellite = "googleSatellite",
+ VectorMap = "vectorMap",
+ GeoVisEarth = "geoVisEarth",
+}
+
+export const BASE_LAYER_GROUP = [
+ {
+ type: OfficeLayerEnum.VectorMap,
+ title: "矢量地图",
+ image:
+ "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qdFDSbvIalgAAAAAAAAAAAAADmJ7AQ/original",
+ layers: undefined,
+ },
+ {
+ type: OfficeLayerEnum.GoogleSatellite,
+ title: "谷歌遥感地图",
+ image:
+ "https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*zi2jSqqZ2-8AAAAAAAAAAAAADjWqAQ/original",
+ layers: [GOOGLE_TILE_MAP_URL, GOOGLE_TILE_MAP_ROUTER_URL],
+ },
+ {
+ type: OfficeLayerEnum.GeoVisEarth,
+ title: "星图地图",
+ image:
+ "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Gg87TbHRYNcAAAAAAAAAAAAADmJ7AQ/original",
+ layers: [GEO_VIS_EARTH],
+ },
+];
diff --git a/src/components/data-retrieval/map-layer/index.module.less b/src/components/data-retrieval/map-layer/index.module.less
new file mode 100644
index 0000000..f1efc68
--- /dev/null
+++ b/src/components/data-retrieval/map-layer/index.module.less
@@ -0,0 +1,75 @@
+.mapTab {
+ background-color: rgb(255, 255, 255);
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ box-shadow:
+ rgba(0, 0, 0, 0.08) 0px 6px 16px 0px,
+ rgba(0, 0, 0, 0.12) 0px 3px 6px -4px,
+ rgba(0, 0, 0, 0.05) 0px 9px 28px 8px;
+
+ &:hover .add-map {
+ display: block;
+ }
+
+ .add-map {
+ display: none;
+ text-align: center;
+
+ &:hover {
+ display: block;
+ color: #1677ff;
+ }
+ }
+
+ .hideOfficeLayerBtn {
+ width: 28px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgb(255, 255, 255);
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+ z-index: 2;
+ transition: all 0.1s 0.1s ease-in-out;
+
+ .anticon {
+ transition: all 0.2s;
+ }
+
+ color: rgba(0, 0, 0, 1);
+ }
+
+ .amapInfo {
+ display: flex;
+ cursor: pointer;
+ padding: 10px;
+
+ .amapInfoItem {
+ width: 142px;
+ margin-left: 10px;
+ }
+
+ .itemBorderActive {
+ border-radius: 4px;
+ border: solid 2px #1677ff;
+ }
+
+ .itemBorder {
+ border: 1px solid #f1f1f1;
+ }
+
+ .amapInfoItemImage {
+ width: 138px;
+ height: 80px;
+ overflow: hidden;
+ }
+
+ .amapInfoItemTitle {
+ text-align: center;
+ color: rgba(0, 0, 0, 0.8);
+ }
+ }
+}
diff --git a/src/components/data-retrieval/map-layer/index.tsx b/src/components/data-retrieval/map-layer/index.tsx
new file mode 100644
index 0000000..25b7583
--- /dev/null
+++ b/src/components/data-retrieval/map-layer/index.tsx
@@ -0,0 +1,113 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CaretRightOutlined } from "@ant-design/icons";
+import { CustomControl, RasterLayer, useScene } from "@antv/larkmap";
+import classNames from "classnames";
+import { useEffect, useState } from "react";
+import { BASE_LAYER_GROUP, OfficeLayerEnum } from "./constants";
+import styles from "./index.module.less";
+
+export function MapLayer() {
+ const scene = useScene();
+ const [layerType, setLayerType] = useState
+
+ {
+ setHideOfficeLayer(!hideOfficeLayer);
+ }}
+ >
+
+ {hideOfficeLayer && (
+
+ {BASE_LAYER_GROUP.map((item, index) => {
+ return (
+
+ )}
+ {
+ onItemClick(item as any);
+ }}
+ >
+ 
+
+ );
+ })}
+ {item.title}
+ {rasterLayer()}
+
+
+ );
+ };
+
+ return (
+
+ 
+ 遥感产品数据云
+
+
+
+ 遥感产品数据云
+
+
+