初步完成

src/components/Guide/Guide.tsx

@@ -32,6 +32,13 @@ const Guide: React.FC<Props> = (props) => {
         center: [110, 34],
         zoom: 3,
       })
+    })
+    scene.setMapStatus({
+      dragEnable: false, // 是否允许地图拖拽
+      keyboardEnable: false, // 是否允许形键盘事件
+      doubleClickZoom: false, // 双击放大
+      zoomEnable: false, // 滚动缩放
+      rotateEnable: false // 旋转
     });
     scene.on('loaded', () => {
       setScene(scene);
@@ -62,12 +69,23 @@ const Guide: React.FC<Props> = (props) => {
   let showAdStatisticsData = (layerId: string) => {
     if (layerId) {
       getAdStatisticsData({ adLevel: 0, adcode: 100000, layerId: layerId }).then((e) => {
-        // const data = areaList
+        // 模拟数据
+        const data = areaList.filter(({ level }) => level === 'province')
+          .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+        const cityData = areaList
+          .filter(({ level }) => level === 'city')
+          .map((item) => Object.assign({}, item, { value: Math.random() * 2000 }));
+
+        const districtData = areaList
+          .filter(({ level }) => level === 'district')
+          .map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
         // // .filter(({ level, parent }) => level === 'city' && parent === 330000)
         // .map((item) => ({ ...item, value: Math.random() * 5000 }));
-        const data = e.data//.map((item: any) => ({ ...item, value: item.statisticsLevel }));
+        // const data = e.data//.map((item: any) => ({ ...item, value: item.statisticsLevel }));
-    
+        console.log('data', data);
+        data[4].value = 0;
         const choropleth = new Choropleth({
+          map: scene,
           source: {
             data,
             joinBy: {
@@ -96,7 +114,7 @@ const Guide: React.FC<Props> = (props) => {
             //   if (statisticsLevel == 10) return '#570303';
             // },
             value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
-            scale: { type: 'quantize' },
+            scale: { type: 'cat' },
           },
           style: {
             opacity: 1,
@@ -134,7 +152,22 @@ const Guide: React.FC<Props> = (props) => {
             position: 'bottomleft',
           },
           drill: {
-            steps: ['province', 'city', 'district'],
+            steps: [
+              {
+                level: 'province',
+                source: { data: cityData },
+              },
+              {
+                level: 'city',
+                source: { data: districtData },
+              },
+              {
+                level: 'district',
+                source: { data: districtData },
+                // color: 'green',
+                // style: { opacity: 0.5 },
+              },
+            ],
             onDown(from, to, callback) {
               const { level, adcode, granularity } = to;
               let adLevel = 0;

src/pages/BaseMap/index.js

@@ -8,7 +8,7 @@ import Header from '../../components/Header/index.js';
 import { createPoint, updatePoint, getDetailByIdApi, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi, deletePoint } from '../../api';
 import Pop from './pop'
 
-import { GaodeMap, Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation, CanvasLayer, Scale } from '@antv/l7';
+import { GaodeMap, Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation, CanvasLayer, Scale, MapTheme, Zoom } from '@antv/l7';
 const { confirm } = Modal;
 // import { DrawPoint, DrawEvent } from '@antv/l7-draw';
 import icon04 from '../../assets/icon/icon04.svg'
@@ -125,16 +125,7 @@ class BaseMap extends React.Component {
         this.setState({
             map: scene,
         }, () => {
-            // 根据省市区码加载地图
+
-            if (ProvinceAdcode) {
-                this.onProvinceChange(ProvinceAdcode, ProvinceData);
-            }
-            if (CityAdcode) {
-                this.onCityChange(CityAdcode, CityData);
-            }
-            if (DistrictAdcode) {
-                this.onDistrictChange(DistrictAdcode, DistrictData);
-            }
             // 地图拖拽鼠标图标更改
             let can = document.getElementsByClassName('amap-layer')[0];
             can.addEventListener('mousedown', (e) => {
@@ -152,6 +143,70 @@ class BaseMap extends React.Component {
             // 比例尺插件
             const scale = new Scale();
             scene.addControl(scale);
+            // 地图主题插件
+            const mapTheme = new MapTheme({
+                position: 'bottomright',   // 控件的位置
+                options: [
+                    {
+                        "text": "",
+                        "value": "amap://styles/normal",
+                        "img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*-nqiT6Vu948AAAAAAAAAAAAAARQnAQ",
+                        "key": "normal"
+                    },
+                    {
+                        "text": "",
+                        "value": "amap://styles/c422f5c0cfced5be9fe3a83f05f28a68?isPublic=true",
+                        "img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*J_wYQL_PaUEAAAAAAAAAAAAAARQnAQ",
+                        "key": "light"
+                    },
+                    {
+                        "text": "",
+                        "value": "amap://styles/c9f1d10cae34f8ab05e425462c5a58d7?isPublic=true",
+                        "img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*U7M9QI1yat4AAAAAAAAAAAAAARQnAQ",
+                        "key": "dark"
+                    },
+                    {
+                        "text": "",
+                        "value": "amap://styles/fresh",
+                        "img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*T-oBT4hB5ucAAAAAAAAAAAAAARQnAQ",
+                        "key": "fresh"
+                    },
+                    {
+                        "text": "",
+                        "value": "amap://styles/grey",
+                        "img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*OREXQ4vgQRIAAAAAAAAAAAAAARQnAQ",
+                        "key": "grey"
+                    },
+                    {
+                        "text": "",
+                        "value": "amap://styles/graffiti",
+                        "img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4UApTKmeiy4AAAAAAAAAAAAAARQnAQ",
+                        "key": "graffiti"
+                    },
+                    {
+                        "text": "",
+                        "value": "amap://styles/macaron",
+                        "img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0GrCQLtDjNcAAAAAAAAAAAAAARQnAQ",
+                        "key": "macaron"
+                    },
+                    {
+                        "text": "",
+                        "value": "amap://styles/darkblue",
+                        "img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*uWxqSZQlPkkAAAAAAAAAAAAAARQnAQ",
+                        "key": "darkblue"
+                    },
+                    {
+                        "text": "",
+                        "value": "amap://styles/wine",
+                        "img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*OFPrTbg3an0AAAAAAAAAAAAAARQnAQ",
+                        "key": "wine"
+                    }
+                ]
+            });
+            scene.addControl(mapTheme);
+            let op = mapTheme.getOptions();
+            console.log('op', op);
+
 
             // AutoComplete(输入框提示) 插件
             window.AMap.plugin(['AMap.AutoComplete', 'AMap.PlaceSearch'], () => {
@@ -159,6 +214,8 @@ class BaseMap extends React.Component {
                 const autoOptions = {
                     city: '全国', //城市，默认全国
                     input: "tipinput", //使用联想输入的input的id
+                    citylimit: true,
+                    // closeResultOnScroll: false
                 };
                 // 创建Autocomplete对象
                 const autoComplete = new AMap.AutoComplete(autoOptions);
@@ -170,21 +227,30 @@ class BaseMap extends React.Component {
                     });
                 });
                 this.state.autoComplete = autoComplete;
-                // 监听选中事件，将选中的地址信息显示在输入框中
+                // 监听选中事件，将选中的地址信息显示在输入框中，暂时不需要，注解掉了
                 autoComplete.on('select', (e) => {
                     let adcode = e.poi.adcode;
 
                     console.log('select', e);
                     this.setState({
-                        inputContent: e.poi.name,
+                        inputContent: e.poi.name,   // 将选中的地址信息显示在输入框中
-                        provinceAdcode: adcode.substr(0, 2) + '0000',
+                        // provinceAdcode: adcode.substr(0, 2) + '0000',
                     }, () => {
                         // 改变adcode后不自动触发onProvinceChange函数，手动触发
-                        let data = this.state.provinceList.find(o => o.value === this.state.provinceAdcode);
+                        // let data = this.state.provinceList.find(o => o.value === this.state.provinceAdcode);
-                        this.onProvinceChange(this.state.provinceAdcode, data);
+                        // this.onProvinceChange(this.state.provinceAdcode, data);
                     })
                 })
-
+                // 根据省市区码加载地图
+                if (ProvinceAdcode) {
+                    this.onProvinceChange(ProvinceAdcode, ProvinceData);
+                }
+                if (CityAdcode) {
+                    this.onCityChange(CityAdcode, CityData);
+                }
+                if (DistrictAdcode) {
+                    this.onDistrictChange(DistrictAdcode, DistrictData);
+                }
             });
 
             // scene.map.plugin(['AMap.Autocomplete'], () => {
@@ -199,6 +265,9 @@ class BaseMap extends React.Component {
         })
     }
 
+    // 关闭点位窗口的提示界面
+    // Elmessage
+
     //设置地图省份级别位置
     gotoProvince = (data) => {
         let zoom = data.zoom || 6;
@@ -578,6 +647,9 @@ class BaseMap extends React.Component {
         data && this.gotoProvince(data)
         // 根据所选省获取市
         this.getCityByProvince(`${provinceAdcode}`);
+        // 根据所选省限制输入框的提示内容
+        data && this.state.autoComplete.setCity(data.value);
+        console.log("this.state.autoComplete", this.state.autoComplete.opt.city)
 
         this.hideHeatMap();
         this.setState({
@@ -644,6 +716,10 @@ class BaseMap extends React.Component {
             self.stopLoading();
         });
         data && this.gotoCity(data);
+        // 根据所选省限制输入框的提示内容
+        data && this.state.autoComplete.setCity(data.value);
+        console.log("this.state.autoComplete", this.state.autoComplete.opt.city)
+
         this.hideHeatMap();
         this.setState({
             cityAdcode: cityAdcode ? `${cityAdcode}` : '',
@@ -702,6 +778,10 @@ class BaseMap extends React.Component {
             self.stopLoading();
         });
         data && this.gotoCity(data);
+        // 根据所选省限制输入框的提示内容
+        data && this.state.autoComplete.setCity(data.label);
+        console.log("this.state.autoComplete", this.state.autoComplete.opt.city)
+
         this.hideHeatMap();
         this.setState({
             districtAdcode: provinceAdcode ? `${provinceAdcode}` : '',
@@ -1213,6 +1293,7 @@ class BaseMap extends React.Component {
                                 <Input name='note' value={this.state.pointAdd.note} onChange={this.onLayerNoteChange} />
                             </Form.Item>
                         </Form>
+                        <Alert message="退出将丢失已填信息" type="warning" showIcon />
                     </Modal>
                     <Modal title="点位修改"
                         open={this.state.isEditModalOpen}
@@ -1268,6 +1349,7 @@ class BaseMap extends React.Component {
                                 <Input name='note' value={this.state.pointEdit.note} onChange={this.onEditLayerNoteChange} />
                             </Form.Item>
                         </Form>
+                        <Alert message="退出将丢失已填信息" type="warning" showIcon />
                     </Modal>
                     <Button disabled className={styles.btnRight}>点位导入</Button>
                 </div>