首页地图

src/components/Guide/Guide.tsx

@@ -1,9 +1,11 @@
-import { Layout, Row, Col, Typography, Select } from 'antd';
+import { Layout, Row, Col, Select } from 'antd';
 import React, { useEffect } from 'react';
 import styles from './Guide.less';
 
-import { Scene, PointLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap ,Scene } from '@antv/l7';
+import { Choropleth } from '@antv/l7plot';
+import areaList from '../../assets/localData/area-list.json'
+
 
 interface Props {
   name: string;
@@ -16,32 +18,73 @@ const Guide: React.FC<Props> = (props) => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
-        pitch: 20,
+        // pitch: 20,
         style: 'light',
         center: [ 120, 20 ],
         zoom: 3
       })
     });
     scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
-      )
-        .then(res => res.json())
-        .then(data => {
-          const pointLayer = new PointLayer({})
-            .source(data)
-            .shape('simple')
-            .size(15)
-            .color('mag', mag => {
-              return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
-            })
-            .active(true)
-            .style({
-              opacity: 0.6,
-              strokeWidth: 3
-            });
-          scene.addLayer(pointLayer);
-        });
+      const areadata = areaList;
+      const data = areaList
+        // .filter(({ level, parent }) => level === 'city' && parent === 330000)
+        .map((item) => ({ ...item, value: Math.random() * 5000 }));
+
+      const choropleth = new Choropleth({
+        source: {
+          data,
+          joinBy: {
+            sourceField: 'adcode',
+            geoField: 'adcode',
+          },
+        },
+        viewLevel: {
+          level: 'country',
+          adcode: 100000,
+        },
+        autoFit: true,
+        color: {
+          field: 'value',
+          value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+          scale: { type: 'quantize' },
+        },
+        style: {
+          opacity: 1,
+          stroke: '#ccc',
+          lineWidth: 0.6,
+          lineOpacity: 1,
+        },
+        label: {
+          visible: true,
+          field: 'name',
+          style: {
+            fill: '#000',
+            opacity: 0.8,
+            fontSize: 10,
+            stroke: '#fff',
+            strokeWidth: 1.5,
+            textAllowOverlap: false,
+            padding: [5, 5],
+          },
+        },
+        state: {
+          active: { stroke: 'white', lineWidth: 1 },
+        },
+        tooltip: {
+          items: ['name', 'adcode', 'value'],
+        },
+        zoom: {
+          position: 'bottomright',
+        },
+        legend: {
+          position: 'bottomleft',
+        },
+        drill: {
+          steps: ['province', 'city', 'district'],
+        },
+      });
+
+      choropleth.addToScene(scene);
     });
   }, []);