From 869827a7f0b4b5f4e88d76d18447753c62aa277e Mon Sep 17 00:00:00 2001 From: shihui Date: Wed, 5 Jan 2022 19:58:43 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=AE=98=E7=BD=91?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E3=80=81=E6=9B=B4=E6=96=B0=20l7react=20l7dra?= =?UTF-8?q?w=20l7boundary=20=E7=AD=89=E6=96=87=E6=A1=A3=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/district/baselayer.en.md | 6 - docs/api/district/baselayer.zh.md | 230 -------------------------- docs/api/district/drilldown.en.md | 6 - docs/api/district/drilldown.zh.md | 249 ----------------------------- docs/api/district/start.en.md | 168 +------------------ docs/api/district/start.zh.md | 37 +---- docs/api/draw/api.en.md | 6 - docs/api/draw/api.zh.md | 212 ------------------------ docs/api/draw/draw_control.en.md | 6 - docs/api/draw/draw_control.zh.md | 257 ------------------------------ docs/api/draw/start.en.md | 4 +- docs/api/draw/start.zh.md | 38 +---- docs/api/react/layer.en.md | 6 - docs/api/react/layer.zh.md | 208 ------------------------ docs/api/react/marker.en.md | 37 ----- docs/api/react/marker.zh.md | 35 ---- docs/api/react/popup.en.md | 31 ---- docs/api/react/popup.zh.md | 34 ---- docs/api/react/scene.en.md | 134 ---------------- docs/api/react/scene.zh.md | 134 ---------------- docs/api/react/start.en.md | 70 +------- docs/api/react/start.zh.md | 69 +------- 22 files changed, 15 insertions(+), 1962 deletions(-) delete mode 100644 docs/api/district/baselayer.en.md delete mode 100644 docs/api/district/baselayer.zh.md delete mode 100644 docs/api/district/drilldown.en.md delete mode 100644 docs/api/district/drilldown.zh.md delete mode 100644 docs/api/draw/api.en.md delete mode 100644 docs/api/draw/api.zh.md delete mode 100644 docs/api/draw/draw_control.en.md delete mode 100644 docs/api/draw/draw_control.zh.md delete mode 100644 docs/api/react/layer.en.md delete mode 100644 docs/api/react/layer.zh.md delete mode 100644 docs/api/react/marker.en.md delete mode 100644 docs/api/react/marker.zh.md delete mode 100644 docs/api/react/popup.en.md delete mode 100644 docs/api/react/popup.zh.md delete mode 100644 docs/api/react/scene.en.md delete mode 100644 docs/api/react/scene.zh.md diff --git a/docs/api/district/baselayer.en.md b/docs/api/district/baselayer.en.md deleted file mode 100644 index 24c36cd853..0000000000 --- a/docs/api/district/baselayer.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Base Map -order: 2 ---- - -`markdown:docs/api/district/style.md` diff --git a/docs/api/district/baselayer.zh.md b/docs/api/district/baselayer.zh.md deleted file mode 100644 index 657b5a814b..0000000000 --- a/docs/api/district/baselayer.zh.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: 基础地图 ---- - -`markdown:docs/common/style.md` - -地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 - -## 使用 - -**using modules** - -```javascript -import { WorldLayer } from '@antv/l7-district'; -``` - -**CDN 版本引用** - -```html - - - - -``` - -## 简介 - -District 支持下面几种图 - -- WorldLayer 世界地图 -- CountryLayer 国家地图，目前只支持中国 -- ProvinceLayer 省级地图 -- CityLayer 市级地图 -- CountyLayer 县级地图 - -## 配置项 - -### zIndex - -图层绘制顺序 - -### data `Array` - -属性数据用于可视化渲染 - -### visible - -地图是否可见 - -### joinBy - -数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 -对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名 - -### showBorder `boolean` - -是否显示国界线，默认显示，不建议不显示 - -### simplifyTolerance - -数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01 - -### depth - -数据显示层级 0：国家级，1:省级，2: 市级，3：县级 - -### stroke 填充描边颜色 - -`ProvinceLayer, CityLayer, CountyLayer` - -### strokeWidth 填充描边宽度 - -`ProvinceLayer, CityLayer, CountyLayer` - -### autoFit - -是否自动缩放到图层范围 `boolean` - -### chinaNationalStroke - -中国国界线颜色 `CountryLayer` - -### chinaNationalWidth - -中国国界线宽度 `CountryLayer` - -### coastlineStroke - -海岸线颜色 `CountryLayer` - -### coastlineWidth - -海岸线宽度 `WorldLayer` `CountryLayer` - -### nationalWidth - -国界线 `WorldLayer` `CountryLayer` - -### nationalStroke - -国界线 `WorldLayer` `CountryLayer` - -### provinceStroke - -省界颜色 `CountryLayer depth= 0，1，2时生效` - -### provinceStrokeWidth - -省界宽度 `CountryLayer depth = 0，1，2时生效` - -### cityStroke 市级边界颜色 - -`CountryLayer depth =1，2时生效` - -### cityStrokeWidth 市级边界宽度 - -`CountryLayer depth =1，2 时生效` - -### countyStroke - -县级边界颜色 `CountryLayer depth =2时生效` - -### countyStrokeWidth - -县级边界宽度 `CountryLayer depth =2时生效` - -`markdown:docs/common/district/label.zh.md` - -`markdown:docs/common/district/fill.zh.md` - -`markdown:docs/common/district/popup.zh.md` - -`markdown:docs/common/district/bubble.zh.md` - -## 数据 - -District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接 - -- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv) - -- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv) - -- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv) - -- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv) - -## 方法 - -### updateLayerAttribute - -更新图层渲染样式 -参数 - -- layerName - 'fill' | 'line' | 'label' | 'bubble' = 'fill', -- type: 'color' | 'size' | 'shape' | 'filter', -- attr: AttributeType | undefined, - -```js -const layer = new CountryLayer(); -layer.updateLayerAttribute('fill', 'color', 'red'); -``` - -### updateDistrict - -根据 adcode 更新 行政区块 - -参数 - -- adcode 行政区划编码 -- data 数据 -- joinByField 绑定字段 - -```javascript -citylayer.updateDistrict(['330100', '340100']); -``` - -### updateData(data, joinBy) - -更新显示数据， - -参数： - -- data 需要更新的数据 -- joinBy 关联字段 可选，如果不设置保持和初始化一致。 - -### getFillData - -获取填充数据，可用于绘制独立的边界线 - -### show - -显示图层 - -### hide - -图层隐藏不显示 - -### destroy - -移除并销毁图层 - -## 事件 - - 行政区划图事件监听默认添加在 fillLayer 上，你点击填充的色块才能接收到事件响应。 - -支持的事件类型同 - -### on 添加事件 - -参数 - -- type -- handle -- layerType 可选 `'fill' | 'line' | 'label' | 'bubble'` 默认值 `fill` - -```javascript -const layer = new CountryLayer(); -layer.on('click', (e) => { - console.log(e); -}); -``` - -### off 移除事件 - -参数 - -- type -- handle -- layerType 可选 `'fill' | 'line' | 'label' | 'bubble'` 默认值 `fill` diff --git a/docs/api/district/drilldown.en.md b/docs/api/district/drilldown.en.md deleted file mode 100644 index ed6fb53dac..0000000000 --- a/docs/api/district/drilldown.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 钻取地图 -order: 2 ---- - -`markdown:docs/api/district/drilldown.zh.md` diff --git a/docs/api/district/drilldown.zh.md b/docs/api/district/drilldown.zh.md deleted file mode 100644 index 07d537378f..0000000000 --- a/docs/api/district/drilldown.zh.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: 钻取地图 -order: 2 ---- - -`markdown:docs/common/style.md` - -钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。 - -钻取地图支持两种可视化类型 - -- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色 -- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小 - -## 使用 - -```javascript -import { DrillDownLayer } from '@antv/l7-district'; -``` - -DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。 - -## 构造函数 - -### scene L7 scene 对象 - -### option 行政区划配置项 - -## 配置项 - -### customTrigger - -是否自定义下钻交互，默认 `false` - -### drillDownTriggerEvent - -向下钻取的触发事件 ⛔customTrigger 为 true 时不生效 - -### drillDownEvent - -根据 drillDownTriggerEvent 类型下钻触发的回调事件 属性 - -### drillUpEvent - -根据 drillUpTriggleEvent 类型上钻触发的回调事件 属性 - -### drillUpTriggleEvent - -向上钻取的触发事件 ⛔customTrigger 为 true 时不生效 - -### provinceData - -省级数据 - -### cityData - -市级数据 可以是全量的数据，下钻时可以不需要重新设置数据 - -### countyData - -县级数据 可以是全量的数据，下钻时可以不需要重新设置数据 - -### joinBy - -数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 -对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名。 - -- 主要使用场景 - -```javascript - popup: { - enable: true, - Html: props => { // props 是我们拿到的数据 customValue 是我们的业务数据 - return `${props.customValue}`; - } - } - -``` - -- 空间数据字段是 l7-district 内部自己定义的字段 NAME_CHN, adcode -- joinBy 第二个值是我们传入的数据中的字段 - -```javascript - const data = [ - { - customValue: '34.5', // 自定义的值 - adcode: '330102', // 用于与空间数据字段对应 - }, - { - customValue: '52.6', - adcode: '330103', - }, - ... - ] -``` - -### label - -文本配置项 `labelOption` - -### bubble - -气泡配置项 `bubbleOption` - -### fill - -填充配置项 `fillOption` - -### province - -`layerOption` 省级图层配置，如果不设置等同全局配置 - -### city - -`layerOption` 市级图层配置，如果不设置等同全局配置 - -### county - -`layerOption` 县级图层配置，如果不设置等同全局配置 - -### viewStart - - 起始下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级， - 如果 viewStart 设置为 Province 需要为city 设置 adcode 初值 - 同理如果 viewStart 设置为 City 需要为 county 设置 adcode 初值 - -### viewEnd - -结束下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级， - -### layerOption - -下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致 - -- joinBy: [string, string]; -- label: Partial; -- bubble: Partial; -- fill: Partial; - ⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性 -- chinaNationalStroke 中国国界线颜色 -- chinaNationalWidth 中国国界线宽度 -- coastlineStroke 海岸线颜色 -- coastlineWidth 海岸线宽度 -- nationalWidth 国界线 -- nationalStroke 国界线 -- provinceStroke 省界颜色 -- provinceStrokeWidth 省界宽度 - -### labelOption - -文本标注配置项，目前只支持常量配置，不支持数据映射 - -- enable `boolean` 是否开启标注 `true` -- color `string` 标注颜色 -- field `string` 标注字段名 默认 `NAME_CHN` -- size `number` 文本大小 默认 `8` -- stroke `string` 描边颜色 `#fff` -- strokeWidth `number` 描边宽度 `2` -- textAllowOverlap: `boolean` 文字是否允许压盖 `true` -- opacity `number` 透明度 `1` - -### bubbleOption - -气泡图配置项 - -- enable - `boolean` 是否显示气泡 `true` - -- shape: AttributeType; 气泡形状支持数据映射 -- size: AttributeType; 气泡大小支持数据映射 -- color: AttributeType; 气泡颜色支持数据映射 -- scale: { // 数字度量 - field: string; 度量字段 - type: ScaleTypeName; 度量字段 - }; -- style: { - opacity: number; 透明度 - stroke: string; 填充色 - strokeWidth: number; 填充宽度 - }; - -### fill - -填充图样式 - -- scale: ScaleTypeName | null; 填充颜色度量类型 -- color: AttributeType; 填充颜色支持数据映射 -- style: any; 填充图样式 -- activeColor: string; 填充图高亮颜色 - -## 属性 - -为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出 - -### provinceLayer - -全国地图 CountyLayer - -### cityLayer - -省级地图 ProvinceLayer - -### countyLayer - -市级地图 CityLayer - -## 方法 - -### drillDown - -向下钻取 自定义钻取交互行为时使用 - -** 参数 ** - -- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用 -- data 下钻层级的数据，可选，如果不设置取全局配置 -- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置 - -```javascirpt - drillLayer.drillDown(['110100']) -``` - -### drillUp - -向上钻取 - -```javascirpt - drillLayer.drillUp(['110100']) -``` - -### updateData - -参数 - -- layer 更新图层名称 `province|city|county` -- data 数据 -- joinBy 可选 - -### show - -显示图形 - -### hide - -隐藏图层 - -### destroy - -移除并销毁图层 diff --git a/docs/api/district/start.en.md b/docs/api/district/start.en.md index e3add16a59..11ad6ff148 100644 --- a/docs/api/district/start.en.md +++ b/docs/api/district/start.en.md @@ -1,171 +1,7 @@ --- -title: 快速开始 +title: Docs order: 0 --- -`markdown:docs/common/style.md` -地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 - -## 使用 - -**using modules** - -```javascript -import { WorldLayer } from '@antv/l7-district'; -``` - -**CDN 版本引用** - -CDN 引用所有的方法都在 L7.District 命名空间下。 - -```html - - - - -``` - -```javascript -import { WorldLayer } from '@antv/l7-district'; -/** - * L7.District.WorldLayer()// CDN 引用 - * */ -new WorldLayer(scene, { - data: [], - fill: { - color: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], - }, - }, - stroke: '#ccc', - label: { - enable: true, - textAllowOverlap: false, - field: 'Short_Name_ZH', - }, - popup: { - enable: false, - Html: (props) => { - return `${props.Short_Name_ZH}`; - }, - }, -}); -``` - -## 简介 - -District 支持下面几种图 - -- WorldLayer 世界地图 -- CountryLayer 国家地图，目前只支持中国 -- ProvinceLayer 省级地图 -- CityLayer 市级地图 -- CountyLayer 县级地图 -- DrillDownLayer 上钻下取地图 - -## 构造函数 - -参数： - -- scene L7 scene 对象 -- option 行政区划配置项 - - - zIndex 图层绘制顺序 - - data `Array` 属性数据用于可视化渲染 - - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 - 对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名 - - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级 - - label 标注配置项 支持常量，不支持数据映射 - - enable `boolean` 是否显示标注 - - color 标注字体颜色 常量 - - field 标注字段 常量 - - size 标注大小 常量 - - stroke 文字描边颜色 - - strokeWidth 文字描边宽度 - - textAllowOverlap 是否允许文字压盖 - - opacity 标注透明度 - - fill 填充配置项 支持数据映射 - - color 图层填充颜色，支持常量和数据映射 - 常量：统一设置成一样的颜色 - 数据映射 - - field 填充映射字段 - - values 映射值，同 color 方法第二个参数数组，回调函数 - - style 同 polygonLayer 的 style 方法 - - activeColor 鼠标滑过高亮颜色 - - bubble 气泡图 - - enable `boolean` 是否显示气泡 default false - - color 气泡颜色 支持常量、数据映射 - - size 气泡大小 支持常量、数据映射 - - shape 气泡形状 支持常量、数据映射 - - style 气泡图样式 同 PointLayer - - stroke 填充描边颜色 - - strokeWidth 填充描边宽度 - - autoFit 是否自动缩放到图层范围 `boolean` - - popup 信息窗口 - - - enable 是否开启 `boolean` - - triggerEvent 触发事件 例如 'mousemove' | 'click'; - - Html popup html 字符串，支持回调函数 (properties: any) => string; - - - chinaNationalStroke 中国国界线颜色 - - chinaNationalWidth 中国国界线宽度 - - coastlineStroke 海岸线颜色 - - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer` - - nationalWidth 国界线 `WorldLayer` `CountryLayer` - - nationalStroke 国界线 `WorldLayer` `CountryLayer` - - provinceStroke 省界颜色 `CountryLayer` - - provinceStrokeWidth 省界宽度 `CountryLayer` - - cityStroke 市级边界颜色 `CountryLayer` - - cityStrokeWidth 市级边界宽度 `CountryLayer` - - countyStroke 县级边界颜色 `CountryLayer` - - countyStrokeWidth 县级边界宽度 `CountryLayer` - -### 数据 - -District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接 - -- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv) - -- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv) - -- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv) - -- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv) - -### 属性 - -行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等， - -#### fillLayer - -### 方法 - -#### updateData(data, joinBy) - -更新显示数据， - -参数： - -- data 需要更新的数据 -- joinBy 关联字段 可选，如果不设置保持和初始化一致。 - -#### show - -显示图层 - -#### hide - -图层隐藏不显示 - -#### destroy - -移除并销毁图层 +`markdown:docs/api/district/start.zh.md` \ No newline at end of file diff --git a/docs/api/district/start.zh.md b/docs/api/district/start.zh.md index 5a2ac81690..f084df546c 100644 --- a/docs/api/district/start.zh.md +++ b/docs/api/district/start.zh.md @@ -1,39 +1,10 @@ --- -title: 快速开始 +title: 文档链接 order: 0 --- -`markdown:docs/common/style.md` +[旧版地图行政区划组件](https://antv.vision/L7-boundary/) -地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 +[新版地图行政区划组件](https://l7plot.antv.vision/zh/docs/api/plots/choropleth) -## 使用 - -**using modules** - -```javascript -import { WorldLayer } from '@antv/l7-district'; -``` - -**CDN 版本引用** - -```html - - - - -``` - -⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整 - -### 数据 - -District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接 - -- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv) - -- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv) - -- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv) - -- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv) +🌟 旧版本行政区划组件库不再继续维护，推荐使用 L7Plot 的行政区划图表 diff --git a/docs/api/draw/api.en.md b/docs/api/draw/api.en.md deleted file mode 100644 index 283c12185a..0000000000 --- a/docs/api/draw/api.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Draw Component -order: 3 ---- - -`markdown:docs/api/draw/api.zh.md` diff --git a/docs/api/draw/api.zh.md b/docs/api/draw/api.zh.md deleted file mode 100644 index 4fb71de315..0000000000 --- a/docs/api/draw/api.zh.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: 绘制 API -order: 3 ---- - -`markdown:docs/common/style.md` - -## 钻取地图 - -钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。 - -钻取地图支持两种可视化类型 - -- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色 -- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小 - -## 使用 - -```javascript -import { DrillDownLayer } from '@antv/l7-district'; -``` - -DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。 - -## 构造函数 - -### scene L7 scene 对象 - -### option 行政区划配置项 - -## 配置项 - -### customTrigger - -是否自定义下钻交互，默认 `false` - -### drillDownTriggerEvent - -向下钻取的触发事件 ⛔customTrigger 为 true 时不生效 - -### drillUpTriggleEvent - -向上钻取的触发事件 ⛔customTrigger 为 true 时不生效 - -### provinceData - -省级数据 - -### cityData - -市级数据 可以是全量的数据，下钻时可以不需要重新设置数据 - -### countyData - -县级数据 可以是全量的数据，下钻时可以不需要重新设置数据 - -### joinBy - -数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 -对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名 - -### label - -文本配置项 `labelOption` - -### bubble - -气泡配置项 `bubbleOption` - -### fill - -填充配置项 `fillOption` - -### province - -`layerOption` 省级图层配置，如果不设置等同全局配置 - -### city - -`layerOption` 市级图层配置，如果不设置等同全局配置 - -### county - -`layerOption` 县级图层配置，如果不设置等同全局配置 - -### viewStart - - 起始下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级， - 如果 viewStart 设置为 Province 需要为city 设置 adcode 初值 - 同理如果 viewStart 设置为 City 需要为 county 设置 adcode 初值 - -### viewEnd - -结束下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级， - -#### layerOption - -下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致 - -- joinBy: [string, string]; -- label: Partial; -- bubble: Partial; -- fill: Partial; - ⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性 -- chinaNationalStroke 中国国界线颜色 -- chinaNationalWidth 中国国界线宽度 -- coastlineStroke 海岸线颜色 -- coastlineWidth 海岸线宽度 -- nationalWidth 国界线 -- nationalStroke 国界线 -- provinceStroke 省界颜色 -- provinceStrokeWidth 省界宽度 - -#### labelOption - -文本标注配置项，目前只支持常量配置，不支持数据映射 - -- enable `boolean` 是否开启标注 `true` -- color `string` 标注颜色 -- field `string` 标注字段名 默认 `NAME_CHN` -- size `number` 文本大小 默认 `8` -- stroke `string` 描边颜色 `#fff` -- strokeWidth `number` 描边宽度 `2` -- textAllowOverlap: `boolean` 文字是否允许压盖 `true` -- opacity `number` 透明度 `1` - -#### bubbleOption - -气泡图配置项 - -- enable `boolean` 是否显示气泡 `true` -- shape: AttributeType; 气泡形状支持数据映射 -- size: AttributeType; 气泡大小支持数据映射 -- color: AttributeType; 气泡颜色支持数据映射 -- scale: { // 数字度量 - field: string; 度量字段 - type: ScaleTypeName; 度量字段 - }; -- style: { - opacity: number; 透明度 - stroke: string; 填充色 - strokeWidth: number; 填充宽度 - }; - -#### fill - -填充图样式 - -- scale: ScaleTypeName | null; 填充颜色度量类型 -- color: AttributeType; 填充颜色支持数据映射 -- style: any; 填充图样式 -- activeColor: string; 填充图高亮颜色 - -## 属性 - -为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出 - -### provinceLayer - -全国地图 CountyLayer - -### cityLayer - -省级地图 ProvinceLayer - -### countyLayer - -市级地图 CityLayer - -## 方法 - -### drillDown - -向下钻取 自定义钻取交互行为时使用 - -** 参数 ** - -- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用 -- data 下钻层级的数据，可选，如果不设置取全局配置 -- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置 - -```javascirpt - drillLayer.drillDown(['110100']) -``` - -### drillUp - -向上钻取 - -```javascirpt - drillLayer.drillUp(['110100']) -``` - -### updateData - -参数 - -- layer 更新图层名称 `province|city|county` -- data 数据 -- joinBy 可选 - -### show - -显示图形 - -### hide - -隐藏图层 - -### destroy - -移除并销毁图层 diff --git a/docs/api/draw/draw_control.en.md b/docs/api/draw/draw_control.en.md deleted file mode 100644 index aec803f323..0000000000 --- a/docs/api/draw/draw_control.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Draw UI Component -order: 2 ---- - -`markdown:docs/api/draw/draw_control.zh.md` diff --git a/docs/api/draw/draw_control.zh.md b/docs/api/draw/draw_control.zh.md deleted file mode 100644 index e35fd2d059..0000000000 --- a/docs/api/draw/draw_control.zh.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: 绘制 UI 组件 -order: 2 ---- - -`markdown:docs/common/style.md` - -地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 - -# 使用 - -**using modules** - -```javascript -import { DrawControl } from '@antv/l7-draw'; -``` - -**CDN 版本引用** - -```html - - - - -``` - -### 参数 - -```javascript -const control = new DrawControl(scene, option); -``` - -```javascript -// CDN 引用 -const control = new L7.Draw.DrawControl(scene, option); -``` - -#### scene - -scene 对象 - -#### options - -control 配置项 - -| name | Type | Default | Description | -| -------- | ------------------------------------------------------------------------------------------------- | ---------- | ------------------------------- | -| position | `bottomright、topright、 bottomleft 、topleft、 topcenter、bottomcenter、leftcenter、rightcenter` | `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); -``` - -## 方法 - -### getDraw(type) - -获取 draw 实例 - -参数： type 绘制实例 `point|line|polygon|rect| circle` - -```javascript -const pointDraw = drawcontrol.get('point'); -``` - -### getAllData() - -获取每个 Draw 实例绘制的结果数据 - -返回数据格式如下 - -```javascript -{ - point: []; // geojson数据格式 - line: []; -} -``` - -### removeAllData() - -移除绘制的的所有数据 - -```javascript -drawcontrol.removeAllData(); -``` - -### 事件 - -drawControl 的事件类型和每个 Draw 的事件一致，如果在 drawControl 监听事件会为每个 draw 增加事件监听。 - -- drawType: Draw 类型 -- feature: 对应的数据 - -#### draw.create - -绘制完成时触发该事件 - -#### draw.delete - -图形删除时触发该事件 - -#### draw.update - -图形更新时触发该事件，图形的平移，顶点的编辑 - -```javascript -drawControl.on('draw.delete', (e) => {}); -``` - -### style - -style 配置项可以按需配置，内部会和默认值进行 merge - -- 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/api/draw/start.en.md b/docs/api/draw/start.en.md index 64e8043920..b5914c5467 100644 --- a/docs/api/draw/start.en.md +++ b/docs/api/draw/start.en.md @@ -1,6 +1,6 @@ --- -title: QuickStart -order: 1 +title: Docs +order: 0 --- `markdown:docs/api/draw/start.zh.md` diff --git a/docs/api/draw/start.zh.md b/docs/api/draw/start.zh.md index e03e15f35d..5f05b69029 100644 --- a/docs/api/draw/start.zh.md +++ b/docs/api/draw/start.zh.md @@ -1,38 +1,6 @@ --- -title: 快速使用 -order: 1 +title: 文档链接 +order: 0 --- -`markdown:docs/common/style.md` - -地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 - -# 使用 - -**using modules** - -```javascript -import { DrawControl } from '@antv/l7-draw'; -``` - -**CDN 版本引用** - -```html - - - - -``` - -## 实例化 - -```javascript -const control = new DrawControl(scene, option); -scene.addControl(control); -``` - -```javascript -// CDN 引用 -const control = new L7.Draw.DrawControl(scene, option); -scene.addControl(control); -``` +[新站点](https://antv.vision/L7-draw/) \ No newline at end of file diff --git a/docs/api/react/layer.en.md b/docs/api/react/layer.en.md deleted file mode 100644 index ffab297cbc..0000000000 --- a/docs/api/react/layer.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Layer Component -order: 2 ---- - -`markdown:docs/api/react/layer.zh.md` diff --git a/docs/api/react/layer.zh.md b/docs/api/react/layer.zh.md deleted file mode 100644 index a999f0a1c3..0000000000 --- a/docs/api/react/layer.zh.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: Layer 组件 -order: 2 ---- - -`markdown:docs/common/style.md` - -## Layer 类型 - -React 各个组件名称和 L7 名称保持一致 - -- PointLayer -- PolygonLayer -- LineLayer -- HeatmapLayer -- RasterLayer -- ImageLayer -- CityBuildingLayer - -### 使用方式 - -```jsx -import { PointLayer } '@antv/l7-react'; - -``` - -## Layer Props - -### options 图层 配置 - - _layer options_ \_ **可选** - -`markdown:docs/common/layer/options.md` - -### source 图层数据 - - _sourceOption_ **必选** _default:_ `0` - -数据源配置项 - -- data 支持 geojson、csv、json -- parser 数据解析配置项 -- transforms 数据处理配置项 - -```jsx - -``` - -### color 图层颜色 - - _attributeOption_ **必选** _default:_ `0` - -### shape 图形形状 - - _attributeOption_ **必选** _default:_ `0` - -### size 图形大小 - - _attributeOption_ **必选** - -### select 选中高亮 - - _interaction option_ **可选** - -### active 滑过高亮 - - _interaction option_ **可选** - -### animate 动画 - - _animate Option_ **可选** - -### style 样式 - - _styleOption_ **可选** - -`markdown:docs/common/layer/layer_style.md` - -### scale 度量 - - _scale Option_ **可选** - -度量配置项 - -- values scaleCfg - -**scaleCfg** - -- key 为字段名 fieldname | attributeName -- value scale 配置项 - -```javascript -const scales = { - values: { - name: { - type: 'cat', - }, - }, -}; -``` - -### onLayerLoaded 图层回调 - - _Function_ **可选** - -获取图层对象方法 - -### attribute Option - -color, size, shape 等图形映射通道，通过下面参数配置 - -- field 映射字段，如果是常量设置为 null -- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段 - -### scale Option - -### 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/docs/api/react/marker.en.md b/docs/api/react/marker.en.md deleted file mode 100644 index 97f63a8c7b..0000000000 --- a/docs/api/react/marker.en.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Marker -order: 3 ---- - -`markdown:docs/common/style.md` - -## 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 属性数据 | - -## 实例 - -```jsx -import { Marker} from '@antv/l7-react' - - -``` diff --git a/docs/api/react/marker.zh.md b/docs/api/react/marker.zh.md deleted file mode 100644 index 6bac5b550e..0000000000 --- a/docs/api/react/marker.zh.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Marker 组件 -order: 3 ---- - -`markdown:docs/common/style.md` - -## 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/docs/api/react/popup.en.md b/docs/api/react/popup.en.md deleted file mode 100644 index 2dd3ab91ca..0000000000 --- a/docs/api/react/popup.en.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Popup Component -order: 4 ---- - -`markdown:docs/common/style.md` - -## 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) diff --git a/docs/api/react/popup.zh.md b/docs/api/react/popup.zh.md deleted file mode 100644 index 008a708e23..0000000000 --- a/docs/api/react/popup.zh.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Popup 组件 -order: 4 ---- - -`markdown:docs/common/style.md` - -## 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) diff --git a/docs/api/react/scene.en.md b/docs/api/react/scene.en.md deleted file mode 100644 index b77a2a949b..0000000000 --- a/docs/api/react/scene.en.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Scene -order: 1 ---- - -`markdown:docs/common/style.md` - -## 使用 - -在 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 [地图配置项](#map-option) | -| option | `scene option` | `void` | scene option 配置项 [详情](#scene-option) | -| 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 | topcenter | bottomcenter | leftcenter | rightcenter` | -| 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/docs/api/react/scene.zh.md b/docs/api/react/scene.zh.md deleted file mode 100644 index 1891a0a20a..0000000000 --- a/docs/api/react/scene.zh.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Scene 组件 -order: 1 ---- - -`markdown:docs/common/style.md` - -## 使用 - -在 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 [地图配置项](#map-option) | -| option | `scene option` | `void` | scene option 配置项 [详情](#scene-option) | -| 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 | topcenter | bottomcenter | leftcenter | rightcenter` | -| 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/docs/api/react/start.en.md b/docs/api/react/start.en.md index 3d955e7244..2f28bafda5 100644 --- a/docs/api/react/start.en.md +++ b/docs/api/react/start.en.md @@ -1,72 +1,6 @@ --- -title: Get Started +title: Docs order: 0 --- -`markdown:docs/common/style.md` - -### 安装 - -```bash - npm i @antv/l7-react -``` - -### 示例 - -```javascript -import { LineLayer, AMapScene } from '@antv/l7-react'; - -export default React.memo(function Map() { - const [data, setData] = React.useState(); - React.useEffect(() => { - const fetchData = async () => { - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json', - ); - const raw = await response.json(); - setData(raw); - }; - fetchData(); - }, []); - return ( - <> - - {data && ( - - )} - - - ); -}); -``` +[New WebSite](https://antv.vision/L7-react/) \ No newline at end of file diff --git a/docs/api/react/start.zh.md b/docs/api/react/start.zh.md index 74c8c8aab6..1257fb8c6f 100644 --- a/docs/api/react/start.zh.md +++ b/docs/api/react/start.zh.md @@ -1,71 +1,6 @@ --- -title: 快速开始 +title: 文档链接 order: 0 --- -`markdown:docs/common/style.md` - -### 安装 - -```bash - npm i @antv/l7-react -``` - -### 示例 - -```javascript -import { LineLayer, AMapScene } from '@antv/l7-react'; -export default React.memo(function Map() { - const [data, setData] = React.useState(); - React.useEffect(() => { - const fetchData = async () => { - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json', - ); - const raw = await response.json(); - setData(raw); - }; - fetchData(); - }, []); - return ( - <> - - {data && ( - - )} - - - ); -}); -``` +[新站点](https://antv.vision/L7-react/) \ No newline at end of file