diff --git a/docs/api/draw/index.en.md b/docs/api/draw/index.en.md index 929dda972c..df24469f38 100644 --- a/docs/api/draw/index.en.md +++ b/docs/api/draw/index.en.md @@ -2,3 +2,273 @@ title: Draw Component order: 2 --- + +地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 + +# 使用 + +**using modules** + +```javascript +import { DrawControl } from '@antv/l7-draw'; +``` + +**CDN 版本引用** + +```html + + + + +``` + +### 参数 + +```javascript +const control = new DrawControl(scene, option); +``` + +#### scene + +scene 对象 + +#### options + +control 配置项 + +| name | Type | Default | Description | +| -------- | --------------------------------------------- | ---------- | ------------------------------- | +| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 | +| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 | +| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 | +| style | | | 地图绘制样式 | + +**controlOptions** +UI 组件配置项 + +- point `boolean | drawOption` 绘制点工具配置 +- line `boolean | drawOption` 绘制线工具配置 +- polygon `boolean | drawOption` 绘制面工具配置 +- circle `boolean | drawOption` 绘制圆工具配置 +- rect `boolean | drawOption` 绘制矩形工具配置 +- delete `boolean | drawOption` 添加删除工具 + +默认配置 + +``` + { + point: true, + line: true, + polygon: true, + rect: true, + circle: true, + delete: true + } +``` + +示例 + +``` +{ + point: false, + line: { + editEnable: false, + }, + polygon: true, + rect: true, + circle: true, + delete: false +``` + +### 添加到地图 + +```javascript +scene.addControl(control); +``` + +### 从地图中移除 + +```javascript +scene.removeControl(control); +``` + +### Draw Type + +可以不依赖 Draw UI 组件，独立的使用每一个 Draw + +#### DrawCircle + +绘制圆形 + +```javascript +import { DrawCircle } from '@antv/l7-draw'; +const drawCircle = new DrawCircle(scene); +drawCircle.enable(); +``` + +#### DrawRect + +绘制四边形 + +```javascript +import { DrawRect } from '@antv/l7-draw'; +const drawRect = new DrawRect(scene); +drawRect.enable(); +``` + +#### DrawLine + +绘制路径 + +```javascript +import { DrawLine } from '@antv/l7-draw'; +const drawLine = new DrawLine(scene); +drawLine.enable(); +``` + +#### DrawPoint + +绘制点 + +```javascript +import { DrawPoint } from '@antv/l7-draw'; +const drawPoint = new DrawPoint(scene); +drawPoint.enable(); +``` + +#### DrawPolygon + +绘制多边形 + +```javascript +import { DrawPolygon } from '@antv/l7-draw'; +const drawPoint = new DrawPolygon(scene); +drawPoint.enable(); +``` + +### 配置项 DrawOption + +- editEnable boolean 是否允许编辑 +- selectEnable boolean 是否允许选中 + +### 方法 + +#### enable + +开始编辑，绘制完成之后会自动结束。 + +#### disable + +结束编辑 + +### 事件 + +#### draw.create + +绘制完成时触发该事件 + +#### draw.delete + +图形删除时触发该事件 + +#### draw.update + +图形更新时触发该事件，图形的平移，顶点的编辑 + +### style + +- active 绘制过程中高亮颜色 +- normal 正常显示状态 + +```javascript +const style = { + active: { + point: { + type: 'PointLayer', + shape: 'circle', + color: '#fbb03b', + size: 5, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + line: { + type: 'LineLayer', + shape: 'line', + color: '#fbb03b', + size: 1, + style: { + opacity: 1, + lineType: 'dash', + dashArray: [2, 2], + }, + }, + polygon: { + shape: 'fill', + color: '#fbb03b', + style: { + opacity: 0.1, + stroke: '#fbb03b', + strokeWidth: 1, + strokeOpacity: 1, + lineType: 'dash', + dashArray: [2, 2], + }, + }, + }, + normal: { + polygon: { + type: 'PolygonLayer', + shape: 'fill', + color: '#3bb2d0', + style: { + opacity: 0.1, + stroke: '#3bb2d0', + strokeWidth: 1, + strokeOpacity: 1, + lineType: 'solid', + dashArray: [2, 2], + }, + }, + line: { + type: 'LineLayer', + shape: 'line', + size: 1, + color: '#3bb2d0', + style: { + opacity: 1, + }, + }, + point: { + type: 'PointLayer', + shape: 'circle', + color: '#3bb2d0', + size: 3, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + }, + normal_point: { + type: 'PointLayer', + shape: 'circle', + color: '#3bb2d0', + size: 3, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + mid_point: { + point: { + type: 'PointLayer', + shape: 'circle', + color: '#fbb03b', + size: 3, + style: {}, + }, + }, +}; +``` diff --git a/docs/tutorial/interactive/hightlight.en.md b/docs/tutorial/interactive/hightlight.en.md index e69de29bb2..d4bd4b7772 100644 --- a/docs/tutorial/interactive/hightlight.en.md +++ b/docs/tutorial/interactive/hightlight.en.md @@ -0,0 +1,67 @@ +--- +title: HightLight +order: 0 +--- +地理可视化除了数据展示，还需要用户交互，用户交互一般分为两种 +- 图层交互 +- 数据交互 + +### 图层交互 + +鼠标在可视化图层上进行相关操作，然后图层会有相应的响应。L7 Layer图层目前原生支持两种地图 +- active 鼠标滑过高亮 +- select 鼠标选中高亮 + +#### active + +[layer active](../../api/layer/layer/#图层交互方法) +```javascript +// 开启 Active 使用默认高亮颜色 +layer.active(true) + +// 开启 Active 自定义高亮颜色 + +layer.active({ + color: 'red' +}) + +// 关闭高亮效果 +layer.active(false) + +``` + +#### select +[layer active](../../api/layer/layer/#图层交互方法) + +```javascript +// 开启 Active 使用默认高亮颜色 +layer.select(true) + +// 开启 Active 自定义高亮颜色 + +layer.select({ + color: 'red' +}) + +// 关闭高亮效果 +layer.select(false) + +``` + +### 数据交互 + +有些时候我们可能需要直接指定某个数据高亮，比如鼠标点击数据面板的数据，我们需要高亮地图对应的元素 + +#### setActive + +```javascript +layer.setActive(id); +``` + +#### setSelect + +```javascript +layer.setSelect(id); +``` + + diff --git a/examples/draw/UI/API.en.md b/examples/draw/UI/API.en.md index 9af5745d94..9272b12b9c 100644 --- a/examples/draw/UI/API.en.md +++ b/examples/draw/UI/API.en.md @@ -1,3 +1,272 @@ --- title: API --- +地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 + +# 使用 + +**using modules** + +```javascript +import { DrawControl } from '@antv/l7-draw'; +``` + +**CDN 版本引用** + +```html + + + + +``` + +### 参数 + +```javascript +const control = new DrawControl(scene, option); +``` + +#### scene + +scene 对象 + +#### options + +control 配置项 + +| name | Type | Default | Description | +| -------- | --------------------------------------------- | ---------- | ------------------------------- | +| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 | +| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 | +| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 | +| style | | | 地图绘制样式 | + +**controlOptions** +UI 组件配置项 + +- point `boolean | drawOption` 绘制点工具配置 +- line `boolean | drawOption` 绘制线工具配置 +- polygon `boolean | drawOption` 绘制面工具配置 +- circle `boolean | drawOption` 绘制圆工具配置 +- rect `boolean | drawOption` 绘制矩形工具配置 +- delete `boolean | drawOption` 添加删除工具 + +默认配置 + +``` + { + point: true, + line: true, + polygon: true, + rect: true, + circle: true, + delete: true + } +``` + +示例 + +``` +{ + point: false, + line: { + editEnable: false, + }, + polygon: true, + rect: true, + circle: true, + delete: false +``` + +### 添加到地图 + +```javascript +scene.addControl(control); +``` + +### 从地图中移除 + +```javascript +scene.removeControl(control); +``` + +### Draw Type + +可以不依赖 Draw UI 组件，独立的使用每一个 Draw + +#### DrawCircle + +绘制圆形 + +```javascript +import { DrawCircle } from '@antv/l7-draw'; +const drawCircle = new DrawCircle(scene); +drawCircle.enable(); +``` + +#### DrawRect + +绘制四边形 + +```javascript +import { DrawRect } from '@antv/l7-draw'; +const drawRect = new DrawRect(scene); +drawRect.enable(); +``` + +#### DrawLine + +绘制路径 + +```javascript +import { DrawLine } from '@antv/l7-draw'; +const drawLine = new DrawLine(scene); +drawLine.enable(); +``` + +#### DrawPoint + +绘制点 + +```javascript +import { DrawPoint } from '@antv/l7-draw'; +const drawPoint = new DrawPoint(scene); +drawPoint.enable(); +``` + +#### DrawPolygon + +绘制多边形 + +```javascript +import { DrawPolygon } from '@antv/l7-draw'; +const drawPoint = new DrawPolygon(scene); +drawPoint.enable(); +``` + +### 配置项 DrawOption + +- editEnable boolean 是否允许编辑 +- selectEnable boolean 是否允许选中 + +### 方法 + +#### enable + +开始编辑，绘制完成之后会自动结束。 + +#### disable + +结束编辑 + +### 事件 + +#### draw.create + +绘制完成时触发该事件 + +#### draw.delete + +图形删除时触发该事件 + +#### draw.update + +图形更新时触发该事件，图形的平移，顶点的编辑 + +### style + +- active 绘制过程中高亮颜色 +- normal 正常显示状态 + +```javascript +const style = { + active: { + point: { + type: 'PointLayer', + shape: 'circle', + color: '#fbb03b', + size: 5, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + line: { + type: 'LineLayer', + shape: 'line', + color: '#fbb03b', + size: 1, + style: { + opacity: 1, + lineType: 'dash', + dashArray: [2, 2], + }, + }, + polygon: { + shape: 'fill', + color: '#fbb03b', + style: { + opacity: 0.1, + stroke: '#fbb03b', + strokeWidth: 1, + strokeOpacity: 1, + lineType: 'dash', + dashArray: [2, 2], + }, + }, + }, + normal: { + polygon: { + type: 'PolygonLayer', + shape: 'fill', + color: '#3bb2d0', + style: { + opacity: 0.1, + stroke: '#3bb2d0', + strokeWidth: 1, + strokeOpacity: 1, + lineType: 'solid', + dashArray: [2, 2], + }, + }, + line: { + type: 'LineLayer', + shape: 'line', + size: 1, + color: '#3bb2d0', + style: { + opacity: 1, + }, + }, + point: { + type: 'PointLayer', + shape: 'circle', + color: '#3bb2d0', + size: 3, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + }, + normal_point: { + type: 'PointLayer', + shape: 'circle', + color: '#3bb2d0', + size: 3, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + mid_point: { + point: { + type: 'PointLayer', + shape: 'circle', + color: '#fbb03b', + size: 3, + style: {}, + }, + }, +}; +``` diff --git a/examples/draw/UI/API.zh.md b/examples/draw/UI/API.zh.md index 9af5745d94..9272b12b9c 100644 --- a/examples/draw/UI/API.zh.md +++ b/examples/draw/UI/API.zh.md @@ -1,3 +1,272 @@ --- title: API --- +地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 + +# 使用 + +**using modules** + +```javascript +import { DrawControl } from '@antv/l7-draw'; +``` + +**CDN 版本引用** + +```html + + + + +``` + +### 参数 + +```javascript +const control = new DrawControl(scene, option); +``` + +#### scene + +scene 对象 + +#### options + +control 配置项 + +| name | Type | Default | Description | +| -------- | --------------------------------------------- | ---------- | ------------------------------- | +| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 | +| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 | +| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 | +| style | | | 地图绘制样式 | + +**controlOptions** +UI 组件配置项 + +- point `boolean | drawOption` 绘制点工具配置 +- line `boolean | drawOption` 绘制线工具配置 +- polygon `boolean | drawOption` 绘制面工具配置 +- circle `boolean | drawOption` 绘制圆工具配置 +- rect `boolean | drawOption` 绘制矩形工具配置 +- delete `boolean | drawOption` 添加删除工具 + +默认配置 + +``` + { + point: true, + line: true, + polygon: true, + rect: true, + circle: true, + delete: true + } +``` + +示例 + +``` +{ + point: false, + line: { + editEnable: false, + }, + polygon: true, + rect: true, + circle: true, + delete: false +``` + +### 添加到地图 + +```javascript +scene.addControl(control); +``` + +### 从地图中移除 + +```javascript +scene.removeControl(control); +``` + +### Draw Type + +可以不依赖 Draw UI 组件，独立的使用每一个 Draw + +#### DrawCircle + +绘制圆形 + +```javascript +import { DrawCircle } from '@antv/l7-draw'; +const drawCircle = new DrawCircle(scene); +drawCircle.enable(); +``` + +#### DrawRect + +绘制四边形 + +```javascript +import { DrawRect } from '@antv/l7-draw'; +const drawRect = new DrawRect(scene); +drawRect.enable(); +``` + +#### DrawLine + +绘制路径 + +```javascript +import { DrawLine } from '@antv/l7-draw'; +const drawLine = new DrawLine(scene); +drawLine.enable(); +``` + +#### DrawPoint + +绘制点 + +```javascript +import { DrawPoint } from '@antv/l7-draw'; +const drawPoint = new DrawPoint(scene); +drawPoint.enable(); +``` + +#### DrawPolygon + +绘制多边形 + +```javascript +import { DrawPolygon } from '@antv/l7-draw'; +const drawPoint = new DrawPolygon(scene); +drawPoint.enable(); +``` + +### 配置项 DrawOption + +- editEnable boolean 是否允许编辑 +- selectEnable boolean 是否允许选中 + +### 方法 + +#### enable + +开始编辑，绘制完成之后会自动结束。 + +#### disable + +结束编辑 + +### 事件 + +#### draw.create + +绘制完成时触发该事件 + +#### draw.delete + +图形删除时触发该事件 + +#### draw.update + +图形更新时触发该事件，图形的平移，顶点的编辑 + +### style + +- active 绘制过程中高亮颜色 +- normal 正常显示状态 + +```javascript +const style = { + active: { + point: { + type: 'PointLayer', + shape: 'circle', + color: '#fbb03b', + size: 5, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + line: { + type: 'LineLayer', + shape: 'line', + color: '#fbb03b', + size: 1, + style: { + opacity: 1, + lineType: 'dash', + dashArray: [2, 2], + }, + }, + polygon: { + shape: 'fill', + color: '#fbb03b', + style: { + opacity: 0.1, + stroke: '#fbb03b', + strokeWidth: 1, + strokeOpacity: 1, + lineType: 'dash', + dashArray: [2, 2], + }, + }, + }, + normal: { + polygon: { + type: 'PolygonLayer', + shape: 'fill', + color: '#3bb2d0', + style: { + opacity: 0.1, + stroke: '#3bb2d0', + strokeWidth: 1, + strokeOpacity: 1, + lineType: 'solid', + dashArray: [2, 2], + }, + }, + line: { + type: 'LineLayer', + shape: 'line', + size: 1, + color: '#3bb2d0', + style: { + opacity: 1, + }, + }, + point: { + type: 'PointLayer', + shape: 'circle', + color: '#3bb2d0', + size: 3, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + }, + normal_point: { + type: 'PointLayer', + shape: 'circle', + color: '#3bb2d0', + size: 3, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + mid_point: { + point: { + type: 'PointLayer', + shape: 'circle', + color: '#fbb03b', + size: 3, + style: {}, + }, + }, +}; +``` diff --git a/examples/react/control/API.en.md b/examples/react/control/API.en.md new file mode 100644 index 0000000000..efb86be3ba --- /dev/null +++ b/examples/react/control/API.en.md @@ -0,0 +1,64 @@ +--- +title: API +--- +## Popup Props + +| prop name | Type | Default | Description | +| --------- | ----------------- | ------- | ---------------- | +| option | `string` | `null` | popup 配置项 | +| lnglat | `Array | Object` | `null` | popup 经纬度位置 | +| children | `React.ReactNode` | `null` | 子组件 | + +### option + +| prop name | Type | Default | Description | +| ------------ | ------------ | ------- | ------------------------------------------------------------------------------ | +| closeButton | `string` | `true` | 是否显示关闭按钮 | +| closeOnClick | `string` | `blue` | 点击是否关闭 popup | +| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right | +| offsets | `Array[x,y]` | `null` | popup 位置偏移 | +| className | `string` | `null` | 样式名称 | + +```jsx +import { Popup } from '@antv/l7-react'; + +; +``` + +[popup 使用完整 demo](../../../examples/react/covid#covid_bubble) + +## Marker Props + +| prop name | Type | Default | Description | +| -------------- | ----------------- | ------- | ----------------- | +| option | `string` | `null` | marker 配置项 | +| lnglat | `Array | Object` | `null` | marker 经纬度位置 | +| onMarkerLoaded | `Function` | `null` | layer 回调函数 | +| children | `React.ReactNode` | `null` | 子组件 | + +### option + +| prop name | Type | Default | Description | +| --------- | ------------ | ------- | ------------------------------------------------------------------------------ | +| color | `string` | `blue` | marker 配置项 | +| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right | +| offsets | `Array[x,y]` | `null` | marker 位置偏移 | +| extData | `object` | `null` | marker 属性数据 | + +## Maker 事件 + +通过 onMarkerLoaded 方法获取 Marker 实例监听 + +## 实例 + +```jsx +import { Marker} from '@antv/l7-react' + + +``` + diff --git a/examples/react/control/API.zh.md b/examples/react/control/API.zh.md new file mode 100644 index 0000000000..efb86be3ba --- /dev/null +++ b/examples/react/control/API.zh.md @@ -0,0 +1,64 @@ +--- +title: API +--- +## Popup Props + +| prop name | Type | Default | Description | +| --------- | ----------------- | ------- | ---------------- | +| option | `string` | `null` | popup 配置项 | +| lnglat | `Array | Object` | `null` | popup 经纬度位置 | +| children | `React.ReactNode` | `null` | 子组件 | + +### option + +| prop name | Type | Default | Description | +| ------------ | ------------ | ------- | ------------------------------------------------------------------------------ | +| closeButton | `string` | `true` | 是否显示关闭按钮 | +| closeOnClick | `string` | `blue` | 点击是否关闭 popup | +| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right | +| offsets | `Array[x,y]` | `null` | popup 位置偏移 | +| className | `string` | `null` | 样式名称 | + +```jsx +import { Popup } from '@antv/l7-react'; + +; +``` + +[popup 使用完整 demo](../../../examples/react/covid#covid_bubble) + +## Marker Props + +| prop name | Type | Default | Description | +| -------------- | ----------------- | ------- | ----------------- | +| option | `string` | `null` | marker 配置项 | +| lnglat | `Array | Object` | `null` | marker 经纬度位置 | +| onMarkerLoaded | `Function` | `null` | layer 回调函数 | +| children | `React.ReactNode` | `null` | 子组件 | + +### option + +| prop name | Type | Default | Description | +| --------- | ------------ | ------- | ------------------------------------------------------------------------------ | +| color | `string` | `blue` | marker 配置项 | +| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right | +| offsets | `Array[x,y]` | `null` | marker 位置偏移 | +| extData | `object` | `null` | marker 属性数据 | + +## Maker 事件 + +通过 onMarkerLoaded 方法获取 Marker 实例监听 + +## 实例 + +```jsx +import { Marker} from '@antv/l7-react' + + +``` + diff --git a/examples/react/layer/API.en.md b/examples/react/layer/API.en.md new file mode 100644 index 0000000000..42c7dcdbf6 --- /dev/null +++ b/examples/react/layer/API.en.md @@ -0,0 +1,169 @@ +--- +title: API +--- +## Layer 类型 + +React 各个组件名称和 L7 名称保持一致 + +- PointLayer +- PolygonLayer +- LineLayer +- HeatmapLayer +- RasterLayer +- ImageLayer +- CityBuildingLayer + +### 使用方式 + +```jsx +import { PointLayer } '@antv/l7-react'; + +``` + +## Layer Props + +| prop name | Type | Default | Description | +| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- | +| options | `layer options` | | layer 配置项 | +| source | `sourceOption` | | 数据源配置项 | +| color | `attributeOption` | | 颜色通道 | +| shape | `attributeOption` | | 图层形状属性 | +| size | `attributeOption` | | 图层大小属性 | +| style | `Object` | | 图层样式 | +| scale | `scale Option` | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量 | +| filter | `Function` | | 图层数据过滤方法 | +| select | `boolean` `interaction option` | | 图层选中高亮 | +| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 | +| animate | `animate Option` | `null` | 图层动画配置 | +| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 | + +### layer options + +| prop name | Type | Default | Description | +| --------- | --------- | ----------------------- | ------------------------------------------------ | +| name | `string` | | 图层名字，可根据名称获取 layer | +| visible | `boolean` | `true` | 图层是否可见 | +| zIndex | `number` | 0 | 图层绘制顺序， | +| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 | +| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 | +| aotoFit | `boolean` | `false` | 是否缩放到图层范围 | +| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') | + +### attribute Option + +color, size, shape 等图形映射通道，通过下面参数配置 + +- field 映射字段，如果是常量设置为 null +- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段 + +详细[配置项](../layer/layer/#size) + +### source Option + +数据源配置项 + +- data 支持 geojson、csv、json +- parser 数据解析配置项 +- transforms 数据处理配置项 + +详细[配置项](../source/source/#parser-1) + +### scale Option + +度量配置项 + +- values scaleCfg + +**scaleCfg** + +- key 为字段名 fieldname | attributeName +- value scale 配置项 + +```javascript +const scales = { + values: { + name: { + type: 'cat', + }, + }, +}; +``` + +### interaction option + +active，select 配置项 + +**option** + +- color 设置交互的颜色，指滑过或者选中的 + +```jsx +<> +``` + +### 获取 layer 对象 + +#### onLayerLoaded + +回调函数获取 layer, scene 对象 + +```javascript +onLayerLoaded = (layer, scene) => {}; +``` + +#### Context API + +```jsx +import { LayerContext } from '@antv/l7-react'; + + {(layer, scene) => { + // use `scene` here + }} +; +``` + +### Layer 示例 + +```jsx +import { PolygonLayer } from '@antv/l7-react'; +; +``` + +## 子组件 + +### 事件组件 + +| prop name | Type | Default | Description | +| --------- | ---------- | ------- | ----------------------------------------- | +| type | `string` | `null` | 事件类型 [详情](../layer/layer/#鼠标事件) | +| handler | `Function` | `null` | layer 回调函数 | + +### 示例 + +```jsx +import { LayerEvent, PolygonLayer } from 'l7-react'; + + {}} /> + {}} /> +; +``` diff --git a/examples/react/layer/API.zh.md b/examples/react/layer/API.zh.md new file mode 100644 index 0000000000..42c7dcdbf6 --- /dev/null +++ b/examples/react/layer/API.zh.md @@ -0,0 +1,169 @@ +--- +title: API +--- +## Layer 类型 + +React 各个组件名称和 L7 名称保持一致 + +- PointLayer +- PolygonLayer +- LineLayer +- HeatmapLayer +- RasterLayer +- ImageLayer +- CityBuildingLayer + +### 使用方式 + +```jsx +import { PointLayer } '@antv/l7-react'; + +``` + +## Layer Props + +| prop name | Type | Default | Description | +| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- | +| options | `layer options` | | layer 配置项 | +| source | `sourceOption` | | 数据源配置项 | +| color | `attributeOption` | | 颜色通道 | +| shape | `attributeOption` | | 图层形状属性 | +| size | `attributeOption` | | 图层大小属性 | +| style | `Object` | | 图层样式 | +| scale | `scale Option` | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量 | +| filter | `Function` | | 图层数据过滤方法 | +| select | `boolean` `interaction option` | | 图层选中高亮 | +| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 | +| animate | `animate Option` | `null` | 图层动画配置 | +| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 | + +### layer options + +| prop name | Type | Default | Description | +| --------- | --------- | ----------------------- | ------------------------------------------------ | +| name | `string` | | 图层名字，可根据名称获取 layer | +| visible | `boolean` | `true` | 图层是否可见 | +| zIndex | `number` | 0 | 图层绘制顺序， | +| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 | +| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 | +| aotoFit | `boolean` | `false` | 是否缩放到图层范围 | +| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') | + +### attribute Option + +color, size, shape 等图形映射通道，通过下面参数配置 + +- field 映射字段，如果是常量设置为 null +- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段 + +详细[配置项](../layer/layer/#size) + +### source Option + +数据源配置项 + +- data 支持 geojson、csv、json +- parser 数据解析配置项 +- transforms 数据处理配置项 + +详细[配置项](../source/source/#parser-1) + +### scale Option + +度量配置项 + +- values scaleCfg + +**scaleCfg** + +- key 为字段名 fieldname | attributeName +- value scale 配置项 + +```javascript +const scales = { + values: { + name: { + type: 'cat', + }, + }, +}; +``` + +### interaction option + +active，select 配置项 + +**option** + +- color 设置交互的颜色，指滑过或者选中的 + +```jsx +<> +``` + +### 获取 layer 对象 + +#### onLayerLoaded + +回调函数获取 layer, scene 对象 + +```javascript +onLayerLoaded = (layer, scene) => {}; +``` + +#### Context API + +```jsx +import { LayerContext } from '@antv/l7-react'; + + {(layer, scene) => { + // use `scene` here + }} +; +``` + +### Layer 示例 + +```jsx +import { PolygonLayer } from '@antv/l7-react'; +; +``` + +## 子组件 + +### 事件组件 + +| prop name | Type | Default | Description | +| --------- | ---------- | ------- | ----------------------------------------- | +| type | `string` | `null` | 事件类型 [详情](../layer/layer/#鼠标事件) | +| handler | `Function` | `null` | layer 回调函数 | + +### 示例 + +```jsx +import { LayerEvent, PolygonLayer } from 'l7-react'; + + {}} /> + {}} /> +; +``` diff --git a/examples/react/scene/API.en.md b/examples/react/scene/API.en.md new file mode 100644 index 0000000000..f69881da9f --- /dev/null +++ b/examples/react/scene/API.en.md @@ -0,0 +1,131 @@ +--- +title: API +--- + +## 使用 + +在 React 版本中 Mapbox 和高德地图作为两个组件封装的。 + +```javascript +import { MapboxScene, AmapScene } from '@antv/l7-react'; +``` + +## Scene Props + +| prop name | Type | Default | Description | +| ------------- | -------------- | ---------- | -------------------------------------- | +| style | `Object` | `null` | scene css 样式 | +| className | `string` | `null` | 样式名称 | +| map | `map option` | `Required` | map option [地图配置项]() | +| option | `scene option` | `void` | scene option 配置项 [详情](#map-props) | +| onSceneLoaded | `Function` | `void` | scene 加载回调函数 | + +### 高德地图场景 + +```jsx +import { AMapScene } from '@antv/l7-react'; +; +``` + +### Mapbox 地图场景 + +```jsx +import { MapboxScene } from '@antv/l7-react'; +; +``` + +### map option + +地图配置项 + +| option | Type | Default | Description | +| -------- | ---------- | ------------------ | --------------------------------------------------------------------------------------------------------------- | +| style | `string` | `light` | 地图样式 `dark|light|normal|blank` L7 默认提供四种样式，同时也支持自定义样式 | +| token | `string` | `Required` | 地图密钥，需要平台申请 | +| plugin | `string[]` | `null` | 高德地图[API 插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']` | +| center | `number` | null | 地图中心点 | +| pitch | `number` | 0 | 地图倾角 | +| rotation | `number` | 0 | 地图旋转角 | +| zoom | `number` | null | 地图缩放等级 | +| maxZoom | `number` | 0 | 最大缩放等级 | +| minZoom | `number` | AMap 18 ,Mapbox 20 | 最小缩放等级 | + +其他配置项见地图文档 +高德地图 Map [配置项](https://lbs.amap.com/api/javascript-api/reference/map) + +Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/#map) + +其他配置项和底图一致 + +### scene option + +| option | Type | Default | Description | +| --------------------- | --------- | ------------ | --------------------------------------------------- | +| logoPosition | string | `bottomleft` | logo 位置 `bottomright|topright|bottomleft|topleft` | +| logoVisible | `boolean` | `true` | 是否显示 logo | +| antialias | `boolean` | `true` | 是否开启抗锯齿 | +| preserveDrawingBuffer | `boolean` | `false` | 是否保留缓冲区数据 | + +### 获取 scene 对象 + +#### onSceneLoaded + +onSceneLoaded 回调函数能够取到 scene 对象 + +#### Context API + +```jsx +import { SceneContext } from '@antv/l7-react'; + + {(scene) => { + // use `scene` here + }} +; +``` + +## 子组件 + +### LoadImage + +| prop name | Type | Default | Description | +| --------- | -------- | ------- | ----------- | +| name | `string` | `null` | 图标名称 | +| url | `string` | `null` | 图标 url | + +```jsx +import LoadImage from '@antv/l7-react'; +; +``` + +### Layer 组件 + +每个图层作为 scene 子组件添加 + +###  事件组件 + +| prop name | Type | Default | Description | +| --------- | ---------- | ------- | ----------------------------------- | +| type | `string` | `null` | 事件类型 [详情](../scene/#地图事件) | +| handler | `Function` | `null` | scene 回调函数 | + +```javascript +import { SceneEvent, MapboxScene } from '@antv/l7-react'; + + + {}} /> +; +``` diff --git a/examples/react/scene/API.zh.md b/examples/react/scene/API.zh.md new file mode 100644 index 0000000000..f69881da9f --- /dev/null +++ b/examples/react/scene/API.zh.md @@ -0,0 +1,131 @@ +--- +title: API +--- + +## 使用 + +在 React 版本中 Mapbox 和高德地图作为两个组件封装的。 + +```javascript +import { MapboxScene, AmapScene } from '@antv/l7-react'; +``` + +## Scene Props + +| prop name | Type | Default | Description | +| ------------- | -------------- | ---------- | -------------------------------------- | +| style | `Object` | `null` | scene css 样式 | +| className | `string` | `null` | 样式名称 | +| map | `map option` | `Required` | map option [地图配置项]() | +| option | `scene option` | `void` | scene option 配置项 [详情](#map-props) | +| onSceneLoaded | `Function` | `void` | scene 加载回调函数 | + +### 高德地图场景 + +```jsx +import { AMapScene } from '@antv/l7-react'; +; +``` + +### Mapbox 地图场景 + +```jsx +import { MapboxScene } from '@antv/l7-react'; +; +``` + +### map option + +地图配置项 + +| option | Type | Default | Description | +| -------- | ---------- | ------------------ | --------------------------------------------------------------------------------------------------------------- | +| style | `string` | `light` | 地图样式 `dark|light|normal|blank` L7 默认提供四种样式，同时也支持自定义样式 | +| token | `string` | `Required` | 地图密钥，需要平台申请 | +| plugin | `string[]` | `null` | 高德地图[API 插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']` | +| center | `number` | null | 地图中心点 | +| pitch | `number` | 0 | 地图倾角 | +| rotation | `number` | 0 | 地图旋转角 | +| zoom | `number` | null | 地图缩放等级 | +| maxZoom | `number` | 0 | 最大缩放等级 | +| minZoom | `number` | AMap 18 ,Mapbox 20 | 最小缩放等级 | + +其他配置项见地图文档 +高德地图 Map [配置项](https://lbs.amap.com/api/javascript-api/reference/map) + +Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/#map) + +其他配置项和底图一致 + +### scene option + +| option | Type | Default | Description | +| --------------------- | --------- | ------------ | --------------------------------------------------- | +| logoPosition | string | `bottomleft` | logo 位置 `bottomright|topright|bottomleft|topleft` | +| logoVisible | `boolean` | `true` | 是否显示 logo | +| antialias | `boolean` | `true` | 是否开启抗锯齿 | +| preserveDrawingBuffer | `boolean` | `false` | 是否保留缓冲区数据 | + +### 获取 scene 对象 + +#### onSceneLoaded + +onSceneLoaded 回调函数能够取到 scene 对象 + +#### Context API + +```jsx +import { SceneContext } from '@antv/l7-react'; + + {(scene) => { + // use `scene` here + }} +; +``` + +## 子组件 + +### LoadImage + +| prop name | Type | Default | Description | +| --------- | -------- | ------- | ----------- | +| name | `string` | `null` | 图标名称 | +| url | `string` | `null` | 图标 url | + +```jsx +import LoadImage from '@antv/l7-react'; +; +``` + +### Layer 组件 + +每个图层作为 scene 子组件添加 + +###  事件组件 + +| prop name | Type | Default | Description | +| --------- | ---------- | ------- | ----------------------------------- | +| type | `string` | `null` | 事件类型 [详情](../scene/#地图事件) | +| handler | `Function` | `null` | scene 回调函数 | + +```javascript +import { SceneEvent, MapboxScene } from '@antv/l7-react'; + + + {}} /> +; +```