diff --git a/packages/site/docs/api/line_layer/source.zh.md b/packages/site/docs/api/line_layer/source.zh.md index 757553774f..5532c0f1b0 100644 --- a/packages/site/docs/api/line_layer/source.zh.md +++ b/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 diff --git a/packages/site/docs/api/polygon_layer/source.zh.md b/packages/site/docs/api/polygon_layer/source.zh.md index 8814cafaf7..05268a4b68 100644 --- a/packages/site/docs/api/polygon_layer/source.zh.md +++ b/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); ``` diff --git a/packages/site/examples/tutorial/layer/demo/layer_boxselect.js b/packages/site/examples/tutorial/layer/demo/layer_boxselect.js new file mode 100644 index 0000000000..9f80479083 --- /dev/null +++ b/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); + }); +}); diff --git a/packages/site/examples/tutorial/layer/demo/meta.json b/packages/site/examples/tutorial/layer/demo/meta.json index 5865f9fd63..c2a6ff2bf7 100644 --- a/packages/site/examples/tutorial/layer/demo/meta.json +++ b/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" } ] } diff --git a/packages/site/package.json b/packages/site/package.json index 6e00ddd684..cf495926d1 100644 --- a/packages/site/package.json +++ b/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",