docs: 修复文档部分问题 (#1569)

* docs: 1.修复文档对 dumi 版本的依赖问题  2.修复图层 Source 示例代码问题

* docs: 新增面图层框选示例

Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com>

packages/site/docs/api/line_layer/source.zh.md

@@ -11,7 +11,7 @@ order: 2
 
 ```js
 // 传入 GeoJSON 类型数据 *** L7 默认支持，不需要 parser 解析
-var data = {
+const data = {
   type: 'FeatureCollection',
   features: [
     {
@@ -28,7 +28,7 @@ var data = {
   ],
 };
 
-var layer = new PointLayer().source(data);
+const layer = new LineLayer().source(data);
 ```
 
 ### CSV

packages/site/docs/api/polygon_layer/source.zh.md

@@ -13,7 +13,7 @@ order: 2
 
 ```js
 // 传入 GeoJSON 类型数据 *** L7 默认支持，不需要 parser 解析
-var data = {
+const data = {
   type: 'FeatureCollection',
   features: [
     {
@@ -34,5 +34,5 @@ var data = {
   ],
 };
 
-var layer = new PointLayer().source(data);
+const layer = new PolygonLayer().source(data);
 ```

packages/site/examples/tutorial/layer/demo/layer_boxselect.js

@@ -0,0 +1,77 @@
+import { PolygonLayer, LineLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    center: [120.13618469238281, 30.247352897833554],
+    zoom: 9,
+  }),
+});
+scene.on('loaded', () => {
+  fetch('https://geo.datav.aliyun.com/areas_v3/bound/330100_full.json')
+    .then((res) => res.json())
+    .then((data) => {
+      const fillLayer = new PolygonLayer({
+        name: 'fill',
+        autoFit: true,
+      })
+        .source(data)
+        .shape('fill')
+        .color('adcode', [
+          '#f0f9e8',
+          '#ccebc5',
+          '#a8ddb5',
+          '#7bccc4',
+          '#43a2ca',
+          '#0868ac',
+        ]);
+
+      const lineLayer = new LineLayer({
+        zIndex: 1,
+        name: 'line',
+      })
+        .source(data)
+        .shape('line')
+        .size(1)
+        .color('#fff');
+
+      const selectLayer = new LineLayer({
+        zIndex: 2,
+        name: 'select',
+      })
+        .source([])
+        .shape('line')
+        .size(2)
+        .color('#f00');
+
+      scene.addLayer(fillLayer);
+      scene.addLayer(lineLayer);
+      scene.addLayer(selectLayer);
+
+      scene.enableBoxSelect(false);
+
+      const onBoxSelect = (bbox, startEvent, endEvent) => {
+        const { x: x1, y: y1 } = startEvent;
+        const { x: x2, y: y2 } = endEvent;
+        fillLayer.boxSelect(
+          [
+            Math.min(x1, x2),
+            Math.min(y1, y2),
+            Math.max(x1, x2),
+            Math.max(y1, y2),
+          ],
+          (features) => {
+            selectLayer.setData({
+              type: 'FeatureCollection',
+              features: features ?? [],
+            });
+          },
+        );
+      };
+
+      scene.on('selecting', onBoxSelect);
+      scene.on('selectend', onBoxSelect);
+    });
+});

packages/site/examples/tutorial/layer/demo/meta.json

@@ -8,6 +8,11 @@
       "filename": "layer_highlight.js",
       "title": "交互高亮图层",
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CnSaSaPwyX8AAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "layer_boxselect.js",
+      "title": "框选图层",
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*5kzJQYS_N20AAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }

packages/site/package.json

@@ -44,7 +44,7 @@
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-transform-import-css-l7": "^0.0.6",
     "cross-env": "^7.0.3",
-    "dumi": "^2.0.3",
+    "dumi": "^2.1.3",
     "gcoord": "^0.3.2",
     "geotiff": "^2.0.7",
     "gh-pages": "^2.1.1",