diff --git a/docs/api/district/baselayer.en.md b/docs/api/district/baselayer.en.md index 989f30cb55..24c36cd853 100644 --- a/docs/api/district/baselayer.en.md +++ b/docs/api/district/baselayer.en.md @@ -1,126 +1,6 @@ --- -title: 标准地图 +title: Base Map order: 2 --- -`markdown:docs/common/style.md` - -## 五种地图类型 - -- WorldLayer 世界地图 -- CountryLayer 国家地图，目前只支持中国 -- ProvinceLayer 省级地图 -- CityLayer 市级地图 -- CountyLayer 县级地图 - -## 构造函数 - -参数： - -- scene L7 scene 对象 -- option 行政区划配置项 - - - zIndex 图层绘制顺序 - - data `Array` 属性数据用于可视化渲染 - - visible 地图是否可见 - - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 - 对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名 - - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级 - - showBorder `boolean` 是否显示国界线，默认显示，不建议不显示 - - simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01 - - 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 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer` - - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer` - - autoFit 是否自动缩放到图层范围 `boolean` - - popup 信息窗口 - - openTriggerEvent 触发事件 例如 'mousemove' | 'click'; - - closeTriggerEvent 触发事件 例如 'mousemove' | 'click'; - - enable 是否开启 `boolean` - - triggerEvent 触发事件 例如 'mousemove' | 'click'; - - Html popup html 字符串，支持回调函数 (properties: any) => string; - - - 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时生效` - -⛔ ProvinceLayer, CityLayer, CountyLayer 如需要设置描边颜色，宽度使用 storke,strokeWidth 配置。 - -### 数据 - -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 关联字段 可选，如果不设置保持和初始化一致。 - -### getFillData - -获取填充数据，可用于绘制独立的边界线 - -#### show - -显示图层 - -#### hide - -图层隐藏不显示 - -#### destroy - -移除并销毁图层 +`markdown:docs/api/district/style.md` diff --git a/docs/api/district/baselayer.zh.md b/docs/api/district/baselayer.zh.md index 013c319f34..657b5a814b 100644 --- a/docs/api/district/baselayer.zh.md +++ b/docs/api/district/baselayer.zh.md @@ -1,11 +1,31 @@ --- -title: 标准地图 -order: 2 +title: 基础地图 --- `markdown:docs/common/style.md` -## 五种地图类型 +地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 + +## 使用 + +**using modules** + +```javascript +import { WorldLayer } from '@antv/l7-district'; +``` + +**CDN 版本引用** + +```html + + + + +``` + +## 简介 + +District 支持下面几种图 - WorldLayer 世界地图 - CountryLayer 国家地图，目前只支持中国 @@ -13,77 +33,106 @@ order: 2 - CityLayer 市级地图 - CountyLayer 县级地图 -## 构造函数 +## 配置项 -参数： +### zIndex -- scene L7 scene 对象 -- option 行政区划配置项 +图层绘制顺序 - - zIndex 图层绘制顺序 - - data `Array` 属性数据用于可视化渲染 - - visible 地图是否可见 - - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 - - simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01 - 对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名 - - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级 - - label 标注配置项 支持常量，不支持数据映射 +### data `Array` - - enable `boolean` 是否显示标注 - - color 标注字体颜色 常量 - - field 标注字段 常量 - - size 标注大小 常量 - - stroke 文字描边颜色 - - strokeWidth 文字描边宽度 - - textAllowOverlap 是否允许文字压盖 - - opacity 标注透明度 - - spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - - padding: `[number, number]` 文本相对锚点的偏移量 [x, y] - 其他包括 text [style 的配置](../layer/point_layer/text#style) +属性数据用于可视化渲染 - - fill 填充配置项 支持数据映射 - - color 图层填充颜色，支持常量和数据映射 - 常量：统一设置成一样的颜色 - 数据映射 - - field 填充映射字段 - - values 映射值，同 color 方法第二个参数数组，回调函数 - - filter 图层过滤方法，支持常量和数据映射 同 layer.filter 方法 - 数据映射 - field 填充映射字段 - values 回调函数 `false` 返回值将会被过滤掉 - - style 同 polygonLayer 的 style 方法 - - activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮 - - bubble 气泡图 - - enable `boolean` 是否显示气泡 default false - - color 气泡颜色 支持常量、数据映射 - - size 气泡大小 支持常量、数据映射 - - shape 气泡形状 支持常量、数据映射 - - style 气泡图样式 同 PointLayer - - showBorder `boolean` 是否显示国界线，默认显示，不建议不显示 - - stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer` - - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer` - - autoFit 是否自动缩放到图层范围 `boolean` - - popup 信息窗口 +### visible - - enable 是否开启 `boolean` - - openTriggerEvent 触发事件 例如 'mousemove' | 'click'; - - closeTriggerEvent 触发事件 例如 'mousemove' | 'click'; - - Html popup html 字符串，支持回调函数 (properties: any) => string; +地图是否可见 - - 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时生效` +### joinBy -⛔ ProvinceLayer, CityLayer, CountyLayer 如需要设置描边颜色，宽度使用 storke,strokeWidth 配置。 +数据关联，属性数据如何内部空间数据关联绑定 目前支持 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 数据需要跟用户的属性数据，通过关系字段进行连接 @@ -95,17 +144,38 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字 - [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv) -### 属性 +## 方法 -行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等， +### updateLayerAttribute -#### fillLayer +更新图层渲染样式 +参数 -图层事件可以通过该属性进行设置 +- layerName + 'fill' | 'line' | 'label' | 'bubble' = 'fill', +- type: 'color' | 'size' | 'shape' | 'filter', +- attr: AttributeType | undefined, -### 方法 +```js +const layer = new CountryLayer(); +layer.updateLayerAttribute('fill', 'color', 'red'); +``` -#### updateData(data, joinBy) +### updateDistrict + +根据 adcode 更新 行政区块 + +参数 + +- adcode 行政区划编码 +- data 数据 +- joinByField 绑定字段 + +```javascript +citylayer.updateDistrict(['330100', '340100']); +``` + +### updateData(data, joinBy) 更新显示数据， @@ -118,14 +188,43 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字 获取填充数据，可用于绘制独立的边界线 -#### show +### show 显示图层 -#### hide +### hide 图层隐藏不显示 -#### destroy +### 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 index cbbe660b22..ed6fb53dac 100644 --- a/docs/api/district/drilldown.en.md +++ b/docs/api/district/drilldown.en.md @@ -3,162 +3,4 @@ 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 行政区划配置项 - - drillDepth `number` 下钻深度 `0 | 1 | 2` 1 市级 2，县级 - - 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` 县级图层配置，如果不设置等同全局配置 - -#### 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` -- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 -- padding: `[number, number]` 文本相对锚点的偏移量 [x, y] - 其他包括 text [style 的配置](../layer/point_layer/text#style) - -#### bubbleOption - -气泡图配置项 - -- enable `boolean` 是否显示气泡 `true` -- shape: AttributeType; 气泡形状支持数据映射 -- size: AttributeType; 气泡大小支持数据映射 -- color: AttributeType; 气泡颜色支持数据映射 -- scale: { // 数字度量 - field: string; 度量字段 - type: ScaleTypeName; 度量字段 - }; -- style: { - opacity: number; 透明度 - stroke: string; 填充色 - strokeWidth: number; 填充宽度 - }; - -#### fillOption - -填充图样式 - -- 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 - -移除并销毁图层 +`markdown:docs/api/district/drilldown.zh.md` diff --git a/docs/api/district/drilldown.zh.md b/docs/api/district/drilldown.zh.md index be2e956c62..5ef21e3bc4 100644 --- a/docs/api/district/drilldown.zh.md +++ b/docs/api/district/drilldown.zh.md @@ -20,37 +20,86 @@ import { DrillDownLayer } from '@antv/l7-district'; DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。 -### 构造函数 +## 构造函数 -- scene L7 scene 对象 -- option 行政区划配置项 - - drillDepth `number` 下钻深度 `0 | 1 | 2` 1 市级 2，县级 - - 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` 县级图层配置，如果不设置等同全局配置 +### scene L7 scene 对象 -#### layerOption +### 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`; - -⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性 - +- label: Partial; +- bubble: Partial; +- fill: Partial; + ⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性 - chinaNationalStroke 中国国界线颜色 - chinaNationalWidth 中国国界线宽度 - coastlineStroke 海岸线颜色 @@ -60,7 +109,7 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下 - provinceStroke 省界颜色 - provinceStrokeWidth 省界宽度 -#### labelOption +### labelOption 文本标注配置项，目前只支持常量配置，不支持数据映射 @@ -73,11 +122,13 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下 - textAllowOverlap: `boolean` 文字是否允许压盖 `true` - opacity `number` 透明度 `1` -#### bubbleOption +### bubbleOption 气泡图配置项 -- enable `boolean` 是否显示气泡 `true` +- enable + `boolean` 是否显示气泡 `true` + - shape: AttributeType; 气泡形状支持数据映射 - size: AttributeType; 气泡大小支持数据映射 - color: AttributeType; 气泡颜色支持数据映射 @@ -91,7 +142,7 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下 strokeWidth: number; 填充宽度 }; -#### fill +### fill 填充图样式 diff --git a/docs/api/district/start.en.md b/docs/api/district/start.en.md index 1ced895aa3..e3add16a59 100644 --- a/docs/api/district/start.en.md +++ b/docs/api/district/start.en.md @@ -61,8 +61,6 @@ new WorldLayer(scene, { }); ``` -⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整 - ## 简介 District 支持下面几种图 diff --git a/docs/api/draw/api.en.md b/docs/api/draw/api.en.md index 11a147a725..283c12185a 100644 --- a/docs/api/draw/api.en.md +++ b/docs/api/draw/api.en.md @@ -3,282 +3,4 @@ title: Draw Component order: 3 --- -`markdown:docs/common/style.md` - -地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 - -# 使用 - -**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 - -开始编辑，绘制完成之后会自动结束。 - -```javascript -draw.enable(); -``` - -#### disable - -结束编辑 - -```javascript -draw.enable(); -``` - -### 事件 - -#### 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: {}, - }, - }, -}; -``` +`markdown:docs/api/draw/api.zh.md` diff --git a/docs/api/draw/api.zh.md b/docs/api/draw/api.zh.md index ff72722dc9..4fb71de315 100644 --- a/docs/api/draw/api.zh.md +++ b/docs/api/draw/api.zh.md @@ -1,17 +1,26 @@ +--- +title: 绘制 API +order: 3 +--- + +`markdown:docs/common/style.md` + ## 钻取地图 + 钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。 钻取地图支持两种可视化类型 + - 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色 - 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小 - ## 使用 ```javascript import { DrillDownLayer } from '@antv/l7-district'; ``` -DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。 + +DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。 ## 构造函数 @@ -21,94 +30,129 @@ DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻 ## 配置项 - ### 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 - +### 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`; 用于定义下钻层级， + +### viewEnd + +结束下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级， #### layerOption - 下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致 - - joinBy: [string, string]; - - label: Partial; - - bubble: Partial; - - fill: Partial; - ⛔中国地图视角设置，省界，海岸线，宽度通过以下属性 - - chinaNationalStroke 中国国界线颜色 - - chinaNationalWidth 中国国界线宽度 - - coastlineStroke 海岸线颜色 - - coastlineWidth 海岸线宽度 - - nationalWidth 国界线 - - nationalStroke 国界线 - - provinceStroke 省界颜色 - - provinceStrokeWidth 省界宽度 +下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致 + +- 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` + +文本标注配置项，目前只支持常量配置，不支持数据映射 + +- 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; 度量字段 + +- enable `boolean` 是否显示气泡 `true` +- shape: AttributeType; 气泡形状支持数据映射 +- size: AttributeType; 气泡大小支持数据映射 +- color: AttributeType; 气泡颜色支持数据映射 +- scale: { // 数字度量 + field: string; 度量字段 + type: ScaleTypeName; 度量字段 }; - - style: { - opacity: number; 透明度 - stroke: string; 填充色 - strokeWidth: number; 填充宽度 +- style: { + opacity: number; 透明度 + stroke: string; 填充色 + strokeWidth: number; 填充宽度 }; #### fill - 填充图样式 - - scale: ScaleTypeName | null; 填充颜色度量类型 - - color: AttributeType; 填充颜色支持数据映射 - - style: any; 填充图样式 - - activeColor: string; 填充图高亮颜色 + +填充图样式 + +- scale: ScaleTypeName | null; 填充颜色度量类型 +- color: AttributeType; 填充颜色支持数据映射 +- style: any; 填充图样式 +- activeColor: string; 填充图高亮颜色 ## 属性 + 为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出 ### provinceLayer @@ -120,14 +164,17 @@ DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻 省级地图 ProvinceLayer ### countyLayer + 市级地图 CityLayer ## 方法 ### drillDown - 向下钻取 自定义钻取交互行为时使用 -** 参数 ** +向下钻取 自定义钻取交互行为时使用 + +** 参数 ** + - adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用 - data 下钻层级的数据，可选，如果不设置取全局配置 - joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置 @@ -137,16 +184,21 @@ DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻 ``` ### drillUp - 向上钻取 - ```javascirpt - drillLayer.drillUp(['110100']) +向上钻取 + +```javascirpt + drillLayer.drillUp(['110100']) ``` + ### updateData + 参数 - - layer 更新图层名称 `province|city|county` - - data 数据 - - joinBy 可选 + +- layer 更新图层名称 `province|city|county` +- data 数据 +- joinBy 可选 + ### show 显示图形 @@ -156,4 +208,5 @@ DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻 隐藏图层 ### destroy - 移除并销毁图层 + +移除并销毁图层 diff --git a/docs/api/draw/draw_control.en.md b/docs/api/draw/draw_control.en.md index a6d4058c17..aec803f323 100644 --- a/docs/api/draw/draw_control.en.md +++ b/docs/api/draw/draw_control.en.md @@ -3,245 +3,4 @@ title: Draw UI Component 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 对象, 绘制控件需要传入 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); -``` - -## 方法 - -### getDraw() - -参数： type 绘制实例 `point|line|polygon|rect| circle` - -```javascript -const pointDraw = drawcontrol.get('point'); -``` - -### getAllData() - -获取每个 Draw 实例绘制的结果数据 - -返回数据格式如下 - -```javascript -{ - point: []; - line: []; -} -``` - -### 事件 - -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: {}, - }, - }, -}; -``` +`markdown:docs/api/draw/draw_control.zh.md` diff --git a/docs/api/draw/start.en.md b/docs/api/draw/start.en.md index d37eb23089..64e8043920 100644 --- a/docs/api/draw/start.en.md +++ b/docs/api/draw/start.en.md @@ -2,3 +2,5 @@ title: QuickStart order: 1 --- + +`markdown:docs/api/draw/start.zh.md` diff --git a/docs/api/layer/cityBuilding.en.md b/docs/api/layer/cityBuilding.en.md index 590e22f051..b72ffb0dcf 100644 --- a/docs/api/layer/cityBuilding.en.md +++ b/docs/api/layer/cityBuilding.en.md @@ -3,61 +3,4 @@ title: CityBuild order: 6 --- -## 使用 - -```javascript -import { CityBuildingLayer } from '@antv/l7'; -``` - -### animate - -开启动画效果 - -```javascript -layer.animate(true); -``` - -### style - -- baseColor 楼房颜色, -- windowColor: 窗户颜色, -- brightColor: 点亮窗户颜色 - -其他 style 配置项同 - -[layer#style](./layer#style) - -## 自定义动画频率 - -自定义动画频率需要 关闭默认动画，通过 setLight 方法不断更新时间 - -```javascript -layer.animate(false); -``` - -### setLight(time) - -参数 -time : 时间 毫秒 - -#### 完整代码 - -```javascript -const pointLayer = new CityBuildingLayer(); -pointLayer - .source(await response.json()) - .size('floor', [0, 500]) - .color('rgba(242,246,250,1.0)') - .animate({ - enable: true, - }) - .style({ - opacity: 1.0, - baseColor: 'rgb(16,16,16)', - windowColor: 'rgb(30,60,89)', - brightColor: 'rgb(255,176,38)', - }); -scene.addLayer(pointLayer); -``` - -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/cityBuilding.zh.md` diff --git a/docs/api/layer/cityBuilding.zh.md b/docs/api/layer/cityBuilding.zh.md index f8996d601c..42c0cc40a7 100644 --- a/docs/api/layer/cityBuilding.zh.md +++ b/docs/api/layer/cityBuilding.zh.md @@ -3,6 +3,8 @@ title: 城市建筑 order: 6 --- +`markdown:docs/common/style.md` + ## 使用 ```javascript diff --git a/docs/api/layer/heatmap_layer/grid.en.md b/docs/api/layer/heatmap_layer/grid.en.md index cbef34a242..f43e02f74d 100644 --- a/docs/api/layer/heatmap_layer/grid.en.md +++ b/docs/api/layer/heatmap_layer/grid.en.md @@ -1,8 +1,8 @@ -```` --- title: GridHeatMapLayer order: 1 --- +`markdown:docs/common/style.md` 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 diff --git a/docs/api/layer/heatmap_layer/grid.zh.md b/docs/api/layer/heatmap_layer/grid.zh.md index 150a49d6ce..da0759dd08 100644 --- a/docs/api/layer/heatmap_layer/grid.zh.md +++ b/docs/api/layer/heatmap_layer/grid.zh.md @@ -2,6 +2,7 @@ title: 网格热力图 order: 1 --- +`markdown:docs/common/style.md` 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 diff --git a/docs/api/layer/heatmap_layer/hexagon.en.md b/docs/api/layer/heatmap_layer/hexagon.en.md index 46f0ca392e..0fc7d93d88 100644 --- a/docs/api/layer/heatmap_layer/hexagon.en.md +++ b/docs/api/layer/heatmap_layer/hexagon.en.md @@ -2,6 +2,7 @@ title: Hexagon HeatMap order: 1 --- +`markdown:docs/common/style.md` 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 diff --git a/docs/api/layer/heatmap_layer/hexagon.zh.md b/docs/api/layer/heatmap_layer/hexagon.zh.md index 0157280578..9aa21e01f6 100644 --- a/docs/api/layer/heatmap_layer/hexagon.zh.md +++ b/docs/api/layer/heatmap_layer/hexagon.zh.md @@ -2,6 +2,7 @@ title: 蜂窝热力图 order: 1 --- +`markdown:docs/common/style.md` 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 @@ -11,7 +12,7 @@ order: 1 import { HeatMapLayer } from '@antv/l7'; ``` -## source +### source 网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson. @@ -42,11 +43,11 @@ layer.source(data, { }); ``` -## shape +### shape 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量 -### 2d +#### 2d - circle, - triangle @@ -57,7 +58,7 @@ layer.source(data, { layer.shape('circle'); ``` -### 3d +#### 3d - cylinder - triangleColumn @@ -68,7 +69,7 @@ layer.shape('circle'); layer.shape('cylinder'); ``` -## size +### size ### 2D shape @@ -84,11 +85,11 @@ layer.size('value', [10, 50]); // 根据value 字段映射大小 layer.size('value', (value) => {}); // 回调函数设置高度 ``` -## color +### color 同 layer color 方法 -## style +### style - coverage 网格覆盖度 0 - 1 - angle 网格旋转角度 0 - 360 diff --git a/docs/api/layer/heatmap_layer/normal.en.md b/docs/api/layer/heatmap_layer/normal.en.md index adde058f2f..a0babda7cb 100644 --- a/docs/api/layer/heatmap_layer/normal.en.md +++ b/docs/api/layer/heatmap_layer/normal.en.md @@ -1,68 +1,7 @@ --- -title: 经典热力图 +title: normal order: 1 --- -## 使用 +`markdown:docs/api/layer/heatmap_layer/normal.zh.md` -```javascript -import { HeatMapLayer } from '@antv/l7'; -``` - -## shape - -常量 heatmap - -```javascript -layer.shape('heatmap'); -``` - -## size - -- field: 热力图权重字段 -- values: 数据映射区间 热力图显示 [0, 1] 效果最佳 - -```javascript -layer.size('weight', [0, 1]); -``` - -## color - -heatmap 需要设置 color 方法，样式通过 style 设置 - -## style - -- intensity    全局热力权重     推荐权重范围 1-5 -- radius   热力半径，单位像素 -- rampColors 色带参数 - - - colors  颜色数组 - - positions 数据区间 - - ⚠️ color, position 的长度要相同 - -## 完整代码 - -```javascript -heatmapLayer({ - zIndex: 2, -}) - .source(data) - .size('mag', [0, 1]) // weight映射通道 - .style({ - intensity: 3, - radius: 20, - rampColors: { - colors: [ - 'rgba(33,102,172,0.0)', - 'rgb(103,169,207)', - 'rgb(209,229,240)', - 'rgb(253,219,199)', - 'rgb(239,138,98)', - 'rgb(178,24,43,1.0)', - ], - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); -``` -`markdown:docs/common/layer/base.md` diff --git a/docs/api/layer/heatmap_layer/normal.zh.md b/docs/api/layer/heatmap_layer/normal.zh.md index 43b2fa1077..4a3e84cc89 100644 --- a/docs/api/layer/heatmap_layer/normal.zh.md +++ b/docs/api/layer/heatmap_layer/normal.zh.md @@ -2,6 +2,7 @@ title: 经典热力图 order: 1 --- +`markdown:docs/common/style.md` ## 使用 @@ -9,7 +10,7 @@ order: 1 import { HeatMapLayer } from '@antv/l7'; ``` -## shape +### shape 常量 heatmap @@ -17,7 +18,7 @@ import { HeatMapLayer } from '@antv/l7'; layer.shape('heatmap'); ``` -## size +### size - field: 热力图权重字段 - values: 数据映射区间 热力图显示 [0, 1] 效果最佳 @@ -26,11 +27,11 @@ layer.shape('heatmap'); layer.size('weight', [0, 1]); ``` -## color +### color heatmap 需要设置 color 方法，样式通过 style 设置 -## style +### style - intensity    全局热力权重     推荐权重范围 1-5 - radius   热力半径，单位像素 diff --git a/docs/api/layer/imagelayer.en.md b/docs/api/layer/imagelayer.en.md index 317d327110..13db05deff 100644 --- a/docs/api/layer/imagelayer.en.md +++ b/docs/api/layer/imagelayer.en.md @@ -3,29 +3,4 @@ title: ImageLayer order: 5 --- -`markdown:docs/common/style.md` - -## 简介 - -将图片添加到地图上，需要指定图片的经纬度范围 - -## 使用 - -```javascript -import { ImageLayer } from '@antv/l7'; -``` - -### 代码示例 - -```javascript -const layer = new ImageLayer({}); -layer.source( - 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', - { - parser: { - type: 'image', - extent: [121.168, 30.2828, 121.384, 30.4219], - }, - }, -); -``` +`markdown:docs/api/layer/imagelayer.zh.md` diff --git a/docs/api/layer/layer.en.md b/docs/api/layer/layer.en.md index 4ef0647dc0..136bd5fe07 100644 --- a/docs/api/layer/layer.en.md +++ b/docs/api/layer/layer.en.md @@ -3,583 +3,4 @@ title: Base Layer order: 0 --- -`markdown:docs/common/style.md` - -## 简介 - -L7 Layer 接口设计遵循图形语法，所有图层都继承于该基类。 - -语法示例 - -```javascript -const layer = new Layer(option) - .source() - .color() - .size() - .shape() - .style(); - -scene.addLayer(layer); -``` - -## 构造函数 - -## 配置项 - -### name - -设置图层名称,可根据 name 获取 layer; - -### visible - -图层是否可见   {bool } default true - -### zIndex - -图层绘制顺序，数值大绘制在上层，可以控制图层绘制的上下层级 {int}   default 0 - -### minZoom - -图层显示最小缩放等级，（0-18）   {number}  Mapbox （0-24） 高德 （3-18） - -### maxZoom - -图层显示最大缩放等级 （0-18）   {number}  Mapbox （0-24） 高德 （3-18） - -### autoFit - -layer 初始化完成之后，是否自动缩放到图层范围 {bool } default false - -### blend - -图层元素混合效果 - -- normal 正常效果 默认 -- additive 叠加模式 -- subtractive 相减模式 -- max 最大值 - -# 方法 - -### source - -数据源为 layer 设置数据 source(data,config) - -- data {geojson|json|csv} - -源数据 - -- config   可选   数据源配置项 - - parser 数据解析，默认是解析层 geojson - - transforms [transform，transform ]  数据处理转换 可设置多个 - -parser 和  transforms [见 source 文档](../source/source) - -```javascript -layer.source(data, { - parser: { - type: 'csv', - x: 'lng', - y: 'lat', - }, - transforms: [ - { - type: 'map', - callback: function(item) { - const [x, y] = item.coordinates; - item.lat = item.lat * 1; - item.lng = item.lng * 1; - item.v = item.v * 1; - item.coordinates = [x * 1, y * 1]; - return item; - }, - }, - { - type: 'hexagon', - size: 6000, - field: 'v', - method: 'sum', - }, - ], -}); -``` - -### scale - -设置数据字段映射方法 - -- `field` 字段名。 - -- `scaleConfig` 列定义配置，对象类型，可配置的属性如下： - -#### scale 类型 - -**连续型** - -- linear 线性 -- log -- pow 指数型 - -**连续分类型** - -- quantile 等分位 -- quantize 等间距 - -**枚举型** - -- cat 枚举 - -```javascript -layer.scale('name', { - type: 'cat', -}); - -// 设置多个scale - -// 字段名为 key, value 为scale配置项 - -layer.scale({ - name: { - type: 'cat', - }, - value: { - type: 'linear', - }, -}); -``` - -## 视觉编码方法 - -可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通道，你可以指定数据字段，为不同要素设置不同的图形属性。 - -### size - -将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档 - -```javascript -pointLayer.size(10); // 常量 -pointLayer.size('type'); // 使用字段映射到大小 -pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值 -pointLayer.size('type', (type) => { - // 回调函数 - if (type === 'a') { - return 10; - } - return 5; -}); -``` - -#### size(value） - -传入数字常量，如  `pointLayer.size(20)` - -#### size(field) - -根据 field 字段的值映射大小，使用默认的`最大值 max:10`  和`最小值 min: 1`。 - -#### size(field, callback) - -使用回调函数控制图形大小。 - -- `callback`: function 回调函数。 - -```javascript -pointLayer.size('age', (value) => { - if (value === 1) { - return 5; - } - return 10; -}); -``` - -### color - -将数据值映射到图形的颜色上的方法。 - -```javascript -layer.color('red'); // 常量颜色 -layer.color('type'); // 对 type 字段进行映射，使用内置的颜色 -layer.color('type', ['red', 'blue']); // 指定颜色 -layer.color('type', (type) => { - // 通过回调函数 - if (type === 'a') { - return 'red'; - } - return 'blue'; -}); -layer.color('type*value', (type, value) => { - //多个参数，通过回调函数 - if (type === 'a' && value > 100) { - return 'red'; - } - return 'blue'; -}); -``` - -#### color(value) - -参数：`value` ：string -只支持接收一个参数，value 可以是： - -- 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。 - -- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。 - -示例 - -```javascript -layer.color('name'); // 映射数据字段 -layer.color('white'); // 指定颜色 -``` - -#### color(field, colors) - -参数： - -- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。 - -- `colors`: string | array | function - -colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定. - -```javascript -layer.color('name'); // 使用默认的颜色 -layer.color('name', ['red', 'blue']); // 使用传入的指定颜色 -``` - -- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入： - -```javascript -layer.color('gender', (value) => { - if (value === 1) { - return 'red'; - } - return 'blue'; -}); -layer.color('gender*age', (gender, age) => { - if (age === 20 && gender == ' 男') { - return 'red'; - } - return 'blue'; -}); -``` - -### shape - -将数据值映射到图形的形状上的方法。 - -**shape(shape)** - -参数`shape` string - -只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状 - -| layer 类型 | shape 类型 | 备注 | -| ---------- | -------------------------------------------------------------------------------------- | ---- | -| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | | -| line | line,arc, arc3d, greatcircle | | -| polygon | fill,line, extrude | | - -**shape(field, shapes)** - -**shape(field, callback)** - -### style - -全局设置图形显示属性 - -- opacity   设置透明度 - -- stroke 线填充颜色 仅点图层支持 - -- strokeWidth 线的宽度 仅点图层支持 - -```javascript -layer.style({ - opacity: 0.8, - stroke: 'white', -}); -``` - -## 图层更新方法 - -如果已经添加了图层，需要修改图层显示样式可以再次调用图形映射方法，然后调用 `scene.render()`更新渲染即可 - -### 样式更新 - -```javascript -layer.color('blue'); -layer.size(10); -layer.style({}); -scene.render(); -``` - -### setData - -更新 Source 数据 - -参数: - -- data 数据 -- option 默认和初始配置项一致，如果数据格式相同可不设置 - -调用 setData 方法会自动更新图层渲染 - -```javascript -layer.setData(data); -``` - -### setBlend(type) - -设置图层叠加方法 -参数： - -- type blend 类型 - -## 图层控制方法 - -### show - -图层显示 - -```javascript -layer.show(); -``` - -### hide - -图层隐藏 - -```javascript -layer.hide(); -``` - -### isVisible - -图层是否可见 - -return `true | false` - -### setIndex - -设置图层绘制顺序 - -### fitBounds - -缩放到图层范围 - -```javascript -layer.fitBounds(); -``` - -### setMinZoom - -设置图层最小缩放等级 - -参数 - -- zoom {number} - -```javascript -layer.setMinZoom(zoom); -``` - -### setMaxZoom - -设置图层最大缩放等级 - -参数 - -- zoom {number} - -```javascript -layer.setMinZoom(zoom); -``` - -设置图层最大缩放等级 - -参数 - -- zoom {number} - -```javascript -layer.setMinZoom(zoom); -``` - -## 图层交互方法 - -### active - -开启或者关闭 mousehover 元素高亮效果 - -参数： activeOption | boolean - -activeOption --color 填充颜色 - -```javascript -// 开启 Active 使用默认高亮颜色 -layer.active(true); - -// 开启 Active 自定义高亮颜色 - -layer.active({ - color: 'red', -}); - -// 关闭高亮效果 -layer.active(false); -``` - -### setActive - -根据元素 ID 设置指定元素 hover 高亮 - -```javascript -layer.setActive(id); -``` - -### select - -开启或者关闭 mouseclick 元素选中高亮效果 - -参数： selectOption | boolean - -selectOption --color 填充颜色 - -```javascript -// 开启 Active 使用默认高亮颜色 -layer.select(true); - -// 开启 Active 自定义高亮颜色 - -layer.select({ - color: 'red', -}); - -// 关闭高亮效果 -layer.select(false); -``` - -### setSelect - -根据元素 ID 设置指定元素 click 选中 高亮 - -```javascript -layer.setSelect(id); -``` - -## 鼠标事件 - -鼠标事件回调参数 target - -```typescript -``` - -- x: number 鼠标  在地图位置 x 坐标 -- y: number 鼠标  在地图位置 y 坐标 -- type: string 鼠标事件类型 -- lngLat: 经度度对象 {lng:number, lat: number }; 鼠标所在位置经纬度 -- feature: any; 数据选中的地理要素信息 -- featureId: number | null; 数据选中的地理要素的 ID - -### click - -点击事件 - -### mousemove - -鼠标移动事件 - -### mouseout - -鼠标移除 - -### mouseup - -鼠标按下 - -### mousedown - -鼠标向下 - -### contextmenu - -鼠标右键 - -### unclick - -点击未拾取到元素 - -### unmousemove - -鼠标移动未拾取到元素 - -### unmouseup - -鼠标抬起未拾取到元素 - -### unmousedown - -鼠标按下未拾取到元素 - -### uncontextmenu - -鼠标右键位拾取到元素 - -### unpick - -所有鼠标事件未拾取到 - -使用示例 - -```javascript -layer.on('click', (ev) => {}); // 鼠标左键点击图层事件 -layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发 -layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发 -layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发 -layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发 -layer.on('contextmenu', (ev) => {}); // 图层要素点击右键菜单 - -// 鼠标在图层外的事件 -layer.on('unclick', (ev) => {}); // 图层外点击 -layer.on('unmousemove', (ev) => {}); // 图层外移动 -layer.on('unmouseup', (ev) => {}); // 图层外鼠标抬起 -layer.on('unmousedown', (ev) => {}); // 图层外单击按下时触发 -layer.on('uncontextmenu', (ev) => {}); // 图层外点击右键 -layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件 -``` - -## 图层事件 - -### inited - -参数 option - -- target 当前 layer -- type 事件类型 - -图层初始化完成后触发 - -```javascript -layer.on('inited', (option) => {}); -``` - -### add - -图层添加到 scene - -参数 option - -- target 当前 layer -- type 事件类型 - -### remove - -图层移除时触发 - -参数 option - -- target 当前 layer -- type 事件类型 +`markdown:docs/api/layer/layer.zh.md` diff --git a/docs/api/layer/line_layer/arc.en.md b/docs/api/layer/line_layer/arc.en.md index ded3c2f4a8..1bc891812d 100644 --- a/docs/api/layer/line_layer/arc.en.md +++ b/docs/api/layer/line_layer/arc.en.md @@ -2,83 +2,4 @@ title: ArcLayer order: 1 --- - -将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等 - -## 使用 - -### 数据 - -绘制弧线只需提供起止点坐标即可 - -```javascript -source(data, { - parser: { - type: 'csv', - x: 'lng1', - y: 'lat1', - x1: 'lng2', - y1: 'lat2', - }, -}); -``` - -### shape - -弧线支持三种弧线算法 - -- arc 绘制弧线 通过贝塞尔曲线算法技术弧线 -- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 -- arc3d 3d 弧线地图 3D 视角 - -### animate - -#### 开启关闭动画 - -```javascript -layer.animate(true); -layer.animate(false); -``` - -#### 设置动画参数 - -- duration 动画时间 单位(s)秒 -- interval 轨迹间隔, 取值区间 0 - 1 -- trailLength 轨迹长度 取值区间 0 - 1 - -```javascript -layer.animate({ - duration: 4, - interval: 0.2, - trailLength: 0.1, -}); -``` - -##### 参数动画介绍 - -L7 目前动画参数为相对单位，我们默认一条线段的长度为 1 -![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) - -如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。 - -### 示例代码 - -```javascript -const layer = new LineLayer({}) - .source(data, { - parser: { - type: 'csv', - x: 'lng1', - y: 'lat1', - x1: 'lng2', - y1: 'lat2', - }, - }) - .size(1) - .shape('arc') - .color('#8C1EB2') - .style({ - opacity: 0.8, - }); -``` -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/line_layer/arc.zh.md` diff --git a/docs/api/layer/line_layer/arc.zh.md b/docs/api/layer/line_layer/arc.zh.md index cf1eb64ce8..182b2dac6b 100644 --- a/docs/api/layer/line_layer/arc.zh.md +++ b/docs/api/layer/line_layer/arc.zh.md @@ -2,7 +2,7 @@ title: 弧线图 order: 1 --- - +`markdown:docs/common/style.md` 将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等 ## 使用 diff --git a/docs/api/layer/line_layer/linelayer.en.md b/docs/api/layer/line_layer/linelayer.en.md index be591c74e4..cc2a1241a7 100644 --- a/docs/api/layer/line_layer/linelayer.en.md +++ b/docs/api/layer/line_layer/linelayer.en.md @@ -2,7 +2,7 @@ title: LineLayer order: 2 --- - +`markdown:docs/common/style.md` ## 线图层 ### shape diff --git a/docs/api/layer/line_layer/linelayer.zh.md b/docs/api/layer/line_layer/linelayer.zh.md index 56f177c0e5..29a58ccfda 100644 --- a/docs/api/layer/line_layer/linelayer.zh.md +++ b/docs/api/layer/line_layer/linelayer.zh.md @@ -2,82 +2,4 @@ title: LineLayer order: 0 --- - -## 线图层 - -### shape - -线图层支持 4 种 shape - -- line 绘制路径图， -- arc 绘制弧线 通过贝塞尔曲线算法技术弧线 -- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 -- arc3d 3d 弧线地图 3D 视角 - -⚠️ 弧线只需要设置起止点坐标即可 - -``` - new LineLayer() - .source(data, { - parser: { - type: 'csv', - x: 'lng1', - y: 'lat1', - x1: 'lng2', - y1: 'lat2', - } - }) -``` - -如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点 - -``` -{ - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "LineString", - "coordinates": [ - [ - 106.5234375, - 57.51582286553883 - ], - [ - 136.40625, - 61.77312286453146 - ] - ] - } - } - ] -} - -``` - -### size - -线图层 可以设置高度 - -- size 类型为 number 则表示 line 的宽度 -- size 类型为 [number , number] 分别表示宽度和高度 - -```javascript -lineLayer.size(1); // 线的宽度为 1 -lineLayer.size([1, 2]); // 宽度为1，高度2 -``` - -### style - -- lineType dash | solid 线类型实线和虚线 -- dashArray 虚线配置项 `[ 5, 5]` - -```javascript -layer.style({ - lineType: 'dash', - dashArray: [5, 5], -}); -``` -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/line_layer/linelayer.zh.md` diff --git a/docs/api/layer/line_layer/path.en.md b/docs/api/layer/line_layer/path.en.md index a66c947d22..1eefe519c8 100644 --- a/docs/api/layer/line_layer/path.en.md +++ b/docs/api/layer/line_layer/path.en.md @@ -2,57 +2,4 @@ title: Path order: 1 --- - -用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等 - -## 使用 - -### shape - -shape 设置成 line 即可绘制路线图 - -- line - -### size - -路径图线的 size 支持两个维度 - -- width 宽度 -- height 高度 - -```javascript -layer.size([2, 10]); // 绘制宽度为2，高度为10的路径 - -layer.size('height', []); -``` - -### animate - -#### 开启关闭动画 - -```javascript -layer.animate(true); -layer.animate(false); -``` - -#### 设置动画参数 - -- duration 动画时间 单位(s)秒 -- interval 轨迹间隔, 取值区间 0 - 1 -- trailLength 轨迹长度 取值区间 0 - 1 - -```javascript -layer.animate({ - duration: 4, - interval: 0.2, - trailLength: 0.1, -}); -``` - -##### 参数动画介绍 - -L7 目前动画参数为相对单位，我们默认一条线段的长度为 1 -![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) - -如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。 -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/line_layer/path.zh.md` diff --git a/docs/api/layer/line_layer/path.zh.md b/docs/api/layer/line_layer/path.zh.md index b6049d9a1d..8665c70bff 100644 --- a/docs/api/layer/line_layer/path.zh.md +++ b/docs/api/layer/line_layer/path.zh.md @@ -2,7 +2,7 @@ title: 路径图 order: 1 --- - +`markdown:docs/common/style.md` 用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等 ## 使用 diff --git a/docs/api/layer/point_layer/bubble.en.md b/docs/api/layer/point_layer/bubble.en.md index f90825946e..9f8e6f9468 100644 --- a/docs/api/layer/point_layer/bubble.en.md +++ b/docs/api/layer/point_layer/bubble.en.md @@ -2,57 +2,4 @@ title: Bubble Map order: 1 --- - -气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。 - -## 使用 - -气泡图通过 PointLayer 对象实例化， - -```javascript -import { PointLayer } from '@antv/l7'; -``` - -### shape - -通常气泡图 shape 设置为 **circle** - -### size - -气泡图大小，需要指定数据映射字段 - -```javascript -const bubble = new PointLayer() - .source(data) - .shape(circle) - .size('mag', [0, 25]) - .color('red') - .style({ - opacity: 0.3, - strokeWidth: 1, - }); -``` - -### animate - -气泡图支持水波动画效果 - -#### 开启关闭动画 - -```javascript -layer.animate(true); -layer.animate(false); -``` - -#### 水波配置项 - -- speed 水波速度 -- rings 水波环数 - -## tips - -目前 style 的配置项只支持全局设置，不支持数据映射。 - -如果 opacity 设置为 0.3 则所有的气泡都是 0.3 - -style 方法如果没有设置 stroke, 默认于气泡的填充色相同 +`markdown:docs/api/layer/point_layer/bubble.zh.md` diff --git a/docs/api/layer/point_layer/bubble.zh.md b/docs/api/layer/point_layer/bubble.zh.md index 53c8197626..2c9e36b593 100644 --- a/docs/api/layer/point_layer/bubble.zh.md +++ b/docs/api/layer/point_layer/bubble.zh.md @@ -2,7 +2,7 @@ title: 气泡图 order: 1 --- - +`markdown:docs/common/style.md` 气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。 ## 基础使用 diff --git a/docs/api/layer/point_layer/chart.en.md b/docs/api/layer/point_layer/chart.en.md index c383633664..de6520a56f 100644 --- a/docs/api/layer/point_layer/chart.en.md +++ b/docs/api/layer/point_layer/chart.en.md @@ -3,8 +3,4 @@ title: Chart Map order: 6 --- -使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等 - -通过自定义 Marker 实现自定义图表 - -[demo 示例](../../../../examples/point/chart) +`markdown:docs/api/layer/point_layer/chart.zh.md` diff --git a/docs/api/layer/point_layer/chart.zh.md b/docs/api/layer/point_layer/chart.zh.md index b74d1b2b79..5676180ff8 100644 --- a/docs/api/layer/point_layer/chart.zh.md +++ b/docs/api/layer/point_layer/chart.zh.md @@ -2,6 +2,7 @@ title: 复合图表地图 order: 6 --- +`markdown:docs/common/style.md` 使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等 diff --git a/docs/api/layer/point_layer/cluster.en.md b/docs/api/layer/point_layer/cluster.en.md index 8f682ff9e6..5a800970e4 100644 --- a/docs/api/layer/point_layer/cluster.en.md +++ b/docs/api/layer/point_layer/cluster.en.md @@ -2,6 +2,7 @@ title: Cluster Map order: 5 --- +`markdown:docs/api/layer/point_layer/cluster.zh.md` ## 使用 diff --git a/docs/api/layer/point_layer/cluster.zh.md b/docs/api/layer/point_layer/cluster.zh.md index e1978483bf..89e57179c4 100644 --- a/docs/api/layer/point_layer/cluster.zh.md +++ b/docs/api/layer/point_layer/cluster.zh.md @@ -2,6 +2,7 @@ title: 聚合图 order: 5 --- +`markdown:docs/common/style.md` ## 使用 diff --git a/docs/api/layer/point_layer/column.en.md b/docs/api/layer/point_layer/column.en.md index a21d3098ee..9ffac5ec0e 100644 --- a/docs/api/layer/point_layer/column.en.md +++ b/docs/api/layer/point_layer/column.en.md @@ -3,58 +3,4 @@ title: 3D Column order: 5 --- -3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。 - -## 使用 - -3D 柱图通过 PointLayer 对象实例化，将 shape 设置成不同的 3Dshape - -### shape - -3D Shape 支持 - -- cylinder -- triangleColumn -- hexagonColumn -- squareColumn - -### size - -3D 柱图 size 需要设置三个维度 [w, l, z] - -- w 宽 -- l 长 -- z 高度 - -size 设置成常量 - -``` - layer.size([2,2,3]) -``` - -size 回调函数设置 - -``` - layer.size('unit_price', h => { - return [ 6, 6, h / 500 ]; - }) -``` - -```javascript -const column = new PointLayer({}) - .source(data) - .shape('name', [ - 'cylinder', - 'triangleColumn', - 'hexagonColumn', - 'squareColumn', - ]) - .size('unit_price', (h) => { - return [6, 6, h / 500]; - }) - .color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A']) - .style({ - opacity: 1.0, - }); -``` -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/point_layer/column.zh.md` diff --git a/docs/api/layer/point_layer/column.zh.md b/docs/api/layer/point_layer/column.zh.md index 13f66c9a71..8f8c073a05 100644 --- a/docs/api/layer/point_layer/column.zh.md +++ b/docs/api/layer/point_layer/column.zh.md @@ -2,6 +2,7 @@ title: 3D 柱图 order: 5 --- +`markdown:docs/common/style.md` 3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。 diff --git a/docs/api/layer/point_layer/dot.en.md b/docs/api/layer/point_layer/dot.en.md index 30a04b9cd5..b386ee0b45 100644 --- a/docs/api/layer/point_layer/dot.en.md +++ b/docs/api/layer/point_layer/dot.en.md @@ -3,47 +3,4 @@ title: Dot Density order: 3 --- -亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况 - -## 使用 - -### shape - -- dot 如果需要使用亮度图可以将 shape 设置为 dot,或者不设置 shape - -### color - -- 无权重 - 如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮 -- 有权重 - 如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。 - -```javascript -const pointLayer = new PointLayer() - .source(data) - .size(2) - .shape('dot') - .color('h8', [ - '#0A3663', - '#1558AC', - '#3771D9', - '#4D89E5', - '#64A5D3', - '#72BED6', - '#83CED6', - '#A6E1E0', - '#B8EFE2', - '#D7F9F0', - ]) - .style({ - opacity: 1, - }); - -scene.addLayer(pointLayer); -``` - -## 相关 demo - -[城市亮度图](../../../../examples/point/dot) - -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/point_layer/dot.zh.md` diff --git a/docs/api/layer/point_layer/dot.zh.md b/docs/api/layer/point_layer/dot.zh.md index 7958aec043..207152ff36 100644 --- a/docs/api/layer/point_layer/dot.zh.md +++ b/docs/api/layer/point_layer/dot.zh.md @@ -3,6 +3,8 @@ title: 亮度图 order: 3 --- +`markdown:docs/common/style.md` + 亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况 ## 使用 diff --git a/docs/api/layer/point_layer/marker.en.md b/docs/api/layer/point_layer/marker.en.md index 1422fe9278..33e78a6c10 100644 --- a/docs/api/layer/point_layer/marker.en.md +++ b/docs/api/layer/point_layer/marker.en.md @@ -3,10 +3,4 @@ title: Custom Marker order: 7 --- -可自定义点符号，通过自定义 dom 实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。 - -## 使用 - -[Marker 文档](../../component) - -[MarkerLayer 文档](../../component/markerLayer) +`markdown:docs/api/layer/point_layer/marker.zh.md` diff --git a/docs/api/layer/point_layer/marker.zh.md b/docs/api/layer/point_layer/marker.zh.md index bcd73813b7..5f764b3e05 100644 --- a/docs/api/layer/point_layer/marker.zh.md +++ b/docs/api/layer/point_layer/marker.zh.md @@ -3,6 +3,8 @@ title: 自定义 Marker order: 7 --- +`markdown:docs/common/style.md` + 可自定义点符号，通过自定义 dom 实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。 ## 使用 diff --git a/docs/api/layer/point_layer/pointlayer.en.md b/docs/api/layer/point_layer/pointlayer.en.md index 9fee09de7b..75399b9b5c 100644 --- a/docs/api/layer/point_layer/pointlayer.en.md +++ b/docs/api/layer/point_layer/pointlayer.en.md @@ -3,85 +3,4 @@ title: PointLayer order: 0 --- -## 简介 - -点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。 - -shape 支持 - -**3D 类型 柱图** - -``` -'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn' - -``` - -**2D 符号图** - -``` -'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica', - -``` - -## source - -点数据类型，根据经纬点绘制图形,目前支持三种数据结构 - -- [GeoJSON]('../../../../source/geojson/#point') -- [CSV](../../../../source/csv/#parser) -- [JSON](../../../../source/json/#点数据) - -**图片标注** - -通过 `Scene.addImage()` 可以添加图片资源， - -### 代码示例 - -#### 基本图形显示示例 - -```javascript -import { PointLayer } from '@antv/l7'; - -const layer = PointLayer({ - zIndex: 2, -}) - .source(data.list, { - type: 'array', - x: 'j', - y: 'w', - }) - .shape('cylinder') - .size('t', (level) => { - return [4, 4, level + 40]; - }) - .color('t', [ - '#002466', - '#105CB3', - '#2894E0', - '#CFF6FF', - '#FFF5B8', - '#FFAB5C', - '#F27049', - '#730D1C', - ]); -``` - -#### 符号图 - -使用图片添加地图标注 - -```javascript -scene.addImage( - 'local', - 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png', -); - -const layer = new PointLayer({ - zIndex: 4, -}) - .source(city) - .size(20.0) - .shape('local') - .color('#0D408C'); -``` -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/point_layer/pointlayer.zh.md` diff --git a/docs/api/layer/point_layer/pointlayer.zh.md b/docs/api/layer/point_layer/pointlayer.zh.md index 9fee09de7b..d26da1226e 100644 --- a/docs/api/layer/point_layer/pointlayer.zh.md +++ b/docs/api/layer/point_layer/pointlayer.zh.md @@ -2,6 +2,7 @@ title: PointLayer order: 0 --- +`markdown:docs/common/style.md` ## 简介 diff --git a/docs/api/layer/point_layer/scatter.en.md b/docs/api/layer/point_layer/scatter.en.md index a2fe784a9e..2b2a98679e 100644 --- a/docs/api/layer/point_layer/scatter.en.md +++ b/docs/api/layer/point_layer/scatter.en.md @@ -3,43 +3,4 @@ title: Scatter Map order: 2 --- -在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。 - -## 使用 - -散点图通过 PointLayer 对象实例化 - -### shape - -- circle -- square -- hexagon -- triangle -- pentagon -- octogon -- hexagram -- rhombus -- vesica - -散点图 shape 一般设置成常量 - -### color - -color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。 - -### size - -散点图一般等大小的图形,size 一般设置成常量 - -```javascript -const scatter = new PointLayer() - .source(data) - .shape(circle) - .size(5) - .color('red') - .style({ - opacity: 0.3, - strokeWidth: 1, - }); -``` -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/point_layer/scatter.zh.md` diff --git a/docs/api/layer/point_layer/scatter.zh.md b/docs/api/layer/point_layer/scatter.zh.md index 2ed4849f09..5858e174b2 100644 --- a/docs/api/layer/point_layer/scatter.zh.md +++ b/docs/api/layer/point_layer/scatter.zh.md @@ -2,6 +2,7 @@ title: 散点图 order: 2 --- +`markdown:docs/common/style.md` 在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。 diff --git a/docs/api/layer/point_layer/symbol.en.md b/docs/api/layer/point_layer/symbol.en.md index 8f1e493bac..e1bae20145 100644 --- a/docs/api/layer/point_layer/symbol.en.md +++ b/docs/api/layer/point_layer/symbol.en.md @@ -3,43 +3,4 @@ title: Symbol Map order: 4 --- -在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况 - -## 使用 - -符号图 通过 PointLayer 对象实例化，将 shape 设置成图片符号 - -### shape - -通过 scene addImage 方法 - -addImage() -参数： - -- id 图片的 id, -- url 图片的 url - -```javascript -scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', -); -``` - -⚠️ 符号图的 ID 不能与点图层已有 shape 名称相同，比如不能设置 circle - -符号图需要把 shape 设置成图片的 id，同样符号图 shape 也支持数据映射 - -```javascript -const scatter = new PointLayer() - .source(data) - .shape('00') - .size(5) - .color('red') - .style({ - opacity: 0.3, - strokeWidth: 1, - }); -``` - -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/point_layer/symbol.zh.md` diff --git a/docs/api/layer/point_layer/symbol.zh.md b/docs/api/layer/point_layer/symbol.zh.md index 2276f86140..85fcdbd1fe 100644 --- a/docs/api/layer/point_layer/symbol.zh.md +++ b/docs/api/layer/point_layer/symbol.zh.md @@ -2,6 +2,7 @@ title: 符号图 order: 4 --- +`markdown:docs/common/style.md` 在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况 diff --git a/docs/api/layer/point_layer/text.en.md b/docs/api/layer/point_layer/text.en.md index b99345aad0..8d20c2878a 100644 --- a/docs/api/layer/point_layer/text.en.md +++ b/docs/api/layer/point_layer/text.en.md @@ -3,45 +3,4 @@ title: Label order: 4 --- -为图层添加文本标注 - -## 使用 - -地图标注需要添加一个新的图层的实现 - -### shape - -- field 标注的字段名称 -- shapeType 'text' - -```javascript -layer.shape('name', 'text'); -``` - -### color - -同 layer - -### size - -同 layer - -### style - -- opacity `number` -- textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left -- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 -- padding: `[number, number]` 文本相对锚点的偏移量 [x, y] -- stroke: `string`; 描边颜色 -- strokeWidth `number` 描边宽度 -- strokeOpacity `number` 描边透明度 -- fontWeight `string` 字体粗细 -- fontFamily `string` 字号 -- textOffset `[number, number]` 文本偏移量 -- textAllowOverlap: `boolean` 是否允许文字遮盖 - -## 相关 demo - -[文本标注](../../../../examples/point/text) - -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/point_layer/text.zh.md` diff --git a/docs/api/layer/point_layer/text.zh.md b/docs/api/layer/point_layer/text.zh.md index 283ff45f86..45862b7794 100644 --- a/docs/api/layer/point_layer/text.zh.md +++ b/docs/api/layer/point_layer/text.zh.md @@ -2,6 +2,7 @@ title: 文本标注 order: 4 --- +`markdown:docs/common/style.md` 为图层添加文本标注 diff --git a/docs/api/layer/polygon_layer/extrude.en.md b/docs/api/layer/polygon_layer/extrude.en.md new file mode 100644 index 0000000000..3c6e2ca72e --- /dev/null +++ b/docs/api/layer/polygon_layer/extrude.en.md @@ -0,0 +1,6 @@ +--- +title: fill 3D +order: 1 +--- +`markdown:docs/api/layer/polygon_layer/extrude.zh.md` + diff --git a/docs/api/layer/polygon_layer/extrude.zh.md b/docs/api/layer/polygon_layer/extrude.zh.md index ddaa022f32..92ac841496 100644 --- a/docs/api/layer/polygon_layer/extrude.zh.md +++ b/docs/api/layer/polygon_layer/extrude.zh.md @@ -2,6 +2,7 @@ title: 3D填充图 order: 1 --- +`markdown:docs/common/style.md` ## 使用 diff --git a/docs/api/layer/polygon_layer/fill.en.md b/docs/api/layer/polygon_layer/fill.en.md new file mode 100644 index 0000000000..5209b29aac --- /dev/null +++ b/docs/api/layer/polygon_layer/fill.en.md @@ -0,0 +1,5 @@ +--- +title: fill +order: 1 +--- +`markdown:docs/api/layer/polygon_layer/fill.zh.md` diff --git a/docs/api/layer/polygon_layer/fill.zh.md b/docs/api/layer/polygon_layer/fill.zh.md index ace0dc7018..2efccbf3b0 100644 --- a/docs/api/layer/polygon_layer/fill.zh.md +++ b/docs/api/layer/polygon_layer/fill.zh.md @@ -2,6 +2,7 @@ title: 填充图 order: 1 --- +`markdown:docs/common/style.md` ## 使用 diff --git a/docs/api/layer/polygon_layer/polygonlayer.en.md b/docs/api/layer/polygon_layer/polygonlayer.en.md index 0820bb0bb0..010e693451 100644 --- a/docs/api/layer/polygon_layer/polygonlayer.en.md +++ b/docs/api/layer/polygon_layer/polygonlayer.en.md @@ -3,26 +3,4 @@ title: PolygonLayer order: 0 --- -绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 - -## 使用 - -```javascript -import { PolygonLayer } from '@antv/l7'; -``` - -## shape - -填充图支持 3 种 shape - -- fill 绘制填充面 不支持数据映射 -- line 绘制填充图描边 不支持数据映射 -- extrude 对填充图 3D 拉伸 不支持数据映射 - -```javascript -PolyonLayer.shape('fill'); -PolyonLayer.shape('line').size(1); // size 表示线宽度 -PolyonLayer.shape('extrude'); // size 表示高度 -``` - -`markdown:docs/common/layer/base.md` +`markdown:docs/api/layer/polygon_layer/polygonlayer.zh.md` diff --git a/docs/api/layer/polygon_layer/polygonlayer.zh.md b/docs/api/layer/polygon_layer/polygonlayer.zh.md index 1af85775e1..2f3520b9a6 100644 --- a/docs/api/layer/polygon_layer/polygonlayer.zh.md +++ b/docs/api/layer/polygon_layer/polygonlayer.zh.md @@ -2,6 +2,7 @@ title: PolygonLayer order: 0 --- +`markdown:docs/common/style.md` 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 diff --git a/docs/api/layer/raster_layer.en.md b/docs/api/layer/raster_layer.en.md index d028af7fca..94a334e16e 100644 --- a/docs/api/layer/raster_layer.en.md +++ b/docs/api/layer/raster_layer.en.md @@ -3,44 +3,4 @@ title: Raster order: 5 --- -`markdown:docs/common/style.md` - -Raster 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。 - -L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为 Source 传入。 - -## 使用 - -```javascript -import { RasterLayer } from '@antv/l7'; -``` - -## source - -见 [raster source](../source/raster) - -## shape - -`raster` - -## size - -无 - -## color - -无 - -## style - -- clampLow Boolean 默认 false, 设置为 true，低于 domain 的数据将不显示 -- clampHigh Boolean 默认 false, 设置为 true，高于 domain 的数据将不显示 -- opacity: 0.8 Number 透明度 -- domain: [ 0, 8000 ] 数据映射区间 -- noDataValue Number noDataValue 不会显示 -- rampColors: { - colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ], - positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] - } // 色带 - - ⚠️ color, position 的长度要相同 +`markdown:docs/api/layer/raster_layer.zh.md` diff --git a/docs/api/react/layer.en.md b/docs/api/react/layer.en.md index b36937d3f4..ffab297cbc 100644 --- a/docs/api/react/layer.en.md +++ b/docs/api/react/layer.en.md @@ -3,172 +3,4 @@ title: Layer Component 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 - -| 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) | -| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 | - -### 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'; - - {}} /> - {}} /> -; -``` +`markdown:docs/api/react/layer.zh.md` diff --git a/docs/api/react/layer.zh.md b/docs/api/react/layer.zh.md index 0ca6210655..a999f0a1c3 100644 --- a/docs/api/react/layer.zh.md +++ b/docs/api/react/layer.zh.md @@ -26,44 +26,15 @@ 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 对象 | +### options 图层 配置 -### layer options + _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) | -| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 | +`markdown:docs/common/layer/options.md` -### attribute Option +### source 图层数据 -color, size, shape 等图形映射通道，通过下面参数配置 - -- field 映射字段，如果是常量设置为 null -- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段 - -详细[配置项](../layer/layer/#size) - -### source Option + _sourceOption_ **必选** _default:_ `0` 数据源配置项 @@ -71,9 +42,51 @@ color, size, shape 等图形映射通道，通过下面参数配置 - parser 数据解析配置项 - transforms 数据处理配置项 -详细[配置项](../source/source/#parser-1) +```jsx + +``` -### scale Option +### 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_ **可选** 度量配置项 @@ -94,6 +107,21 @@ const scales = { }; ``` +### onLayerLoaded 图层回调 + + _Function_ **可选** + +获取图层对象方法 + +### attribute Option + +color, size, shape 等图形映射通道，通过下面参数配置 + +- field 映射字段，如果是常量设置为 null +- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段 + +### scale Option + ### interaction option active，select 配置项 @@ -103,12 +131,18 @@ active，select 配置项 - color 设置交互的颜色，指滑过或者选中的 ```jsx -<> + ``` -### 获取 layer 对象 +## 获取 layer 对象 -#### onLayerLoaded +### onLayerLoaded 回调函数获取 layer, scene 对象 @@ -116,7 +150,7 @@ active，select 配置项 onLayerLoaded = (layer, scene) => {}; ``` -#### Context API +### Context API ```jsx import { LayerContext } from '@antv/l7-react'; @@ -127,7 +161,7 @@ import { LayerContext } from '@antv/l7-react'; ; ``` -### Layer 示例 +## Layer 示例 ```jsx import { PolygonLayer } from '@antv/l7-react'; diff --git a/docs/api/source/csv.en.md b/docs/api/source/csv.en.md index a2579df960..87afdfb91f 100644 --- a/docs/api/source/csv.en.md +++ b/docs/api/source/csv.en.md @@ -3,49 +3,4 @@ title: CSV order: 3 --- -`markdown:docs/common/style.md` - -L7 支持 CSV 以逗号分隔的 CSV 数据加载。 - -CSV 是文本数据结构，很难表达复杂的地理数据结构，因此 CSV 仅支持两种数据结构 - -- 点数据 需要指定经度，纬度坐标 -- 线段，弧线数据 需要指定 起止点的 经度，纬度坐标 - -## parser - -- type string 必选 json -- x string 点数据表示 经度 -- y string 点数据表示 纬度 -- x1 string 经度 -- x2 string 纬度 - -### 点数据通过 CSV 加载 - -```javascript -layer.source(data, { - parser: { - type: 'csv', - x: 'lng', - y: 'lat', - }, -}); -``` - -[CSV 数据 demo 示例](../../../examples/point/bubble#scatter) - -### 线段弧线数据通过 CSV 加载 - -```javascript -layer.source(data, { - parser: { - type: 'csv', - x: 'lng1', - y: 'lat1', - x1: 'lng1', - y1: 'lat2', - }, -}); -``` - -[CSV 线段数据 demo 示例](../../../examples/gallery/basic#arcCircle) +`markdown: docs/api/source/csv.zh.md` diff --git a/docs/api/source/csv.zh.md b/docs/api/source/csv.zh.md index 409afbbed6..a2579df960 100644 --- a/docs/api/source/csv.zh.md +++ b/docs/api/source/csv.zh.md @@ -4,7 +4,7 @@ order: 3 --- `markdown:docs/common/style.md` -`markdown:docs/common/style.md` + L7 支持 CSV 以逗号分隔的 CSV 数据加载。 CSV 是文本数据结构，很难表达复杂的地理数据结构，因此 CSV 仅支持两种数据结构 diff --git a/docs/common/layer/base.md b/docs/common/layer/base.md index 7645f96e50..6cd398c20a 100644 --- a/docs/common/layer/base.md +++ b/docs/common/layer/base.md @@ -1,9 +1,13 @@ `markdown:docs/common/style.md` +## 配置项 + `markdown:docs/common/layer/options.md` `markdown:docs/common/layer/layer_encode.md` +`markdown:docs/common/layer/layer_style.md` + `markdown:docs/common/layer/layer_update.md` `markdown:docs/common/layer/layer_ctr.md` diff --git a/docs/common/layer/layer_encode.md b/docs/common/layer/layer_encode.md index b3fc9df6fe..3d52dc56f4 100644 --- a/docs/common/layer/layer_encode.md +++ b/docs/common/layer/layer_encode.md @@ -218,21 +218,3 @@ layer.color('gender*age', (gender, age) => { **shape(field, callback)** -### style 样式 - -全局设置图形显示属性 - -- opacity   设置透明度 - -- stroke 线填充颜色 仅点图层支持 - -- offsets 偏移量 [number, number] x 和 y 方向偏移 仅支持 pointLayer - -- strokeWidth 线的宽度 仅点图层支持 - -```javascript -layer.style({ - opacity: 0.8, - stroke: 'white', -}); -``` diff --git a/docs/common/layer/layer_style.md b/docs/common/layer/layer_style.md new file mode 100644 index 0000000000..c325b4c0d8 --- /dev/null +++ b/docs/common/layer/layer_style.md @@ -0,0 +1,18 @@ +### style 样式 + +全局设置图形显示属性 + +- opacity   设置透明度 + +- stroke 线填充颜色 仅点图层支持 + +- offsets 偏移量 [number, number] x 和 y 方向偏移 仅支持 pointLayer + +- strokeWidth 线的宽度 仅点图层支持 + +```javascript +layer.style({ + opacity: 0.8, + stroke: 'white', +}); +``` diff --git a/docs/common/layer/options.md b/docs/common/layer/options.md index c5fd5eefbb..02541dbca6 100644 --- a/docs/common/layer/options.md +++ b/docs/common/layer/options.md @@ -1,5 +1,3 @@ -## 配置项 - ### name _string_ **可选** _default:_ 自动数字编号 diff --git a/docs/tutorial/data.zh.md b/docs/tutorial/data.zh.md index 7494d59d0d..d557ed0aa8 100644 --- a/docs/tutorial/data.zh.md +++ b/docs/tutorial/data.zh.md @@ -2,75 +2,4 @@ title: 数据 order: 2 --- -`markdown:docs/common/style.md` -## 数据 - -目前L7支持的数据格式有GeoJson,CSV,JSon Image - -- GeoJSON 支持点、线、面等所有的标准空间数据格式。 -- CSV 支持点、线段、弧线等数据类型。 -- JSON 支持简单的点、线，面数据类型，不支持多点，多线的，多面数据格式。 - - -## GeoJSON - -> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 - - - -```json -{ - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Polygon", - "coordinates": [ - [ - [ - 110.478515625, - 32.76880048488168 - ], - [ - 117.68554687499999, - 32.76880048488168 - ], - [ - 117.68554687499999, - 37.64903402157866 - ], - [ - 110.478515625, - 37.64903402157866 - ], - [ - 110.478515625, - 32.76880048488168 - ] - ] - ] - } - } - ] -} -``` - -## 地理统计分析工具 -[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库 - -## 在线工具 - -[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据 - -[https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据 - -## 数据资源 - -#### 全国行政区划GeoJON 支持省市县维度  -[geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4) - -#### HighCharts 全球行政区划数据集 - -[https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/) +`markdown:docs/tutorial/data.zh.md` diff --git a/docs/tutorial/demo.en.md b/docs/tutorial/demo.en.md index e874792f6c..25d939590f 100644 --- a/docs/tutorial/demo.en.md +++ b/docs/tutorial/demo.en.md @@ -2,7 +2,7 @@ title: Local demo order: 1 --- -`markdown:docs/common/style.md` +`markdown:docs/tutorial/demo.zh.md` ### 一、打开L7demo页面 diff --git a/docs/tutorial/interactive/hightlight.en.md b/docs/tutorial/interactive/hightlight.en.md index d4bd4b7772..ea4a9b1b5e 100644 --- a/docs/tutorial/interactive/hightlight.en.md +++ b/docs/tutorial/interactive/hightlight.en.md @@ -2,66 +2,4 @@ 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); -``` - - +`markdown:docs/tutorial/interactive/hightlight.zh.md` diff --git a/docs/tutorial/interactive/hightlight.zh.md b/docs/tutorial/interactive/hightlight.zh.md index d9e664d835..e1ee578459 100644 --- a/docs/tutorial/interactive/hightlight.zh.md +++ b/docs/tutorial/interactive/hightlight.zh.md @@ -2,6 +2,8 @@ title: 图层高亮 order: 0 --- +`markdown:docs/common/style.md` + 地理可视化除了数据展示，还需要用户交互，用户交互一般分为两种 - 图层交互 - 数据交互 diff --git a/docs/tutorial/map/amap.en.md b/docs/tutorial/map/amap.en.md index d56337d177..7ee675c0df 100644 --- a/docs/tutorial/map/amap.en.md +++ b/docs/tutorial/map/amap.en.md @@ -2,166 +2,5 @@ title: GaodeMap order: 0 --- -`markdown:docs/common/style.md` -## 使用高德地图 -### 注册账号并申请Key - -1. 首先，[注册开发者账号](https://lbs.amap.com/dev/id/choose)，成为高德开放平台开发者 - -2. 登陆之后，在进入「应用管理」 页面「创建新应用」 - -3. 为应用[添加 Key](https://lbs.amap.com/dev/key/app)，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 - -### 引入 L7 - -2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token - - -```html - - - - - - - - -``` - -### 添加div 标签指定地图容器 - -同时需要为Div设置 高度和宽度 - -``` html -
-```` - -### 初始化 L7 Scene - - -```javascript - const scene = new L7.Scene({ - id: 'map', - map: new L7.GaodeMap({ - style: 'dark', // 样式URL - center: [120.19382669582967, 30.258134], - pitch: 0, - zoom: 12, - token: '高德地图token', - }), - }); - -``` - -这样我们就完成了通过L7 实例化高德地图 - - -### 添加可视化图层 - -- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 -- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 - -```javascript - -fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') - .then(res => res.json()) - .then(data => { - const pointLayer = new L7.PointLayer({}) - .source(data.list, { - parser: { - type: 'json', - x: 'j', - y: 'w' - } - }) - .shape('cylinder') - .size('t', function(level) { - return [ 1, 2, level * 2 + 20 ]; - }) - .color('t', [ - '#094D4A', - '#146968', - '#1D7F7E', - '#289899', - '#34B6B7', - '#4AC5AF', - '#5FD3A6', - '#7BE39E', - '#A1EDB8', - '#CEF8D6' - ]) - .style({ - opacity: 1.0 - }); - scene.addLayer(pointLayer); - }); - - ``` - - ### 完整demo代码 - -```html - - - - - 创建地图场景 - - - -
- - - - -``` +`markdown:docs/tutorial/map/amap.zh.md` diff --git a/docs/tutorial/map/blankmap.en.md b/docs/tutorial/map/blankmap.en.md index 5b4adf5a3a..704b09eb55 100644 --- a/docs/tutorial/map/blankmap.en.md +++ b/docs/tutorial/map/blankmap.en.md @@ -2,27 +2,4 @@ title: Blank BaseMap With Mapbox order: 2 --- -`markdown:docs/common/style.md` -很多情况下我们只是做些简单的地理可视化，不需要加载地图. -本教程就是告诉大家如果在L7中使用无底图模式。 - -L7 在地图样式层面增加了无底图样式```blank``` 无底图模式 - -😃不需要使用mapbox token，也不需要注册mapbox账户 - -```javascript -const scene = new Scene({ - id: 'map', - map: new Mapbox({ - style: 'blank', - center: [ 103.83735604457024, 1.360253881403068 ], - pitch: 4.00000000000001, - zoom: 10.210275860702593, - rotation: 19.313180925794313 - }) -}); -``` -如果你只是需要做个中国地图，世界地图这样填充图，建议你采用这样的模式 - - -离线，无token使用 +`markdown:docs/tutorial/map/blankmap.zh.md` diff --git a/docs/tutorial/map/mapbox.en.md b/docs/tutorial/map/mapbox.en.md index e2a694ef54..9529b2c926 100644 --- a/docs/tutorial/map/mapbox.en.md +++ b/docs/tutorial/map/mapbox.en.md @@ -2,173 +2,4 @@ title: MapBox BaseMap order: 0 --- -`markdown:docs/common/style.md` -## 使用Mapbox 地图 - -1、注册MapBox token - - 注册地址 [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens) - -2、引入mapbox.gl JS 和 css - -使用mapbox 需要单独引入 mapbox - -```html - - - -``` - - -### 引入 L7 - - -```html - -``` - - -#### 添加div 标签指定地图容器 - -同时需要为Div设置 高度和宽度 - -``` html -
-```` - -### 初始化 L7 Scene - - -```javascript - - const scene = new L7.Scene({ - id: 'map', - map: new L7.Mapbox({ - style: 'dark', // 样式URL - center: [120.19382669582967, 30.258134], - pitch: 0, - zoom: 12, - token: 'mapbox token', - }), - }); - -``` - -这样我们就完成了通过L7 实例化mapbox地图 - - -### 添加可视化图层 - - -- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 -- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 - -```javascript - -fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') - .then(res => res.json()) - .then(data => { - const pointLayer = new L7.PointLayer({}) - .source(data.list, { - parser: { - type: 'json', - x: 'j', - y: 'w' - } - }) - .shape('cylinder') - .size('t', function(level) { - return [ 1, 2, level * 2 + 20 ]; - }) - .color('t', [ - '#094D4A', - '#146968', - '#1D7F7E', - '#289899', - '#34B6B7', - '#4AC5AF', - '#5FD3A6', - '#7BE39E', - '#A1EDB8', - '#CEF8D6' - ]) - .style({ - opacity: 1.0 - }); - scene.addLayer(pointLayer); - }); - - ``` - - -### 完整demo 代码 - -```html - - - - - 创建地图场景 - - - -
- - - - - - - - -``` - - - +`markdown:docs/tutorial/map/mapbox.zh.md` diff --git a/docs/tutorial/map/offline.zh.md b/docs/tutorial/map/offline.zh.md index 9229f074ac..b57eb858bc 100644 --- a/docs/tutorial/map/offline.zh.md +++ b/docs/tutorial/map/offline.zh.md @@ -2,135 +2,4 @@ title: 离线使用 order: 0 --- -`markdown:docs/common/style.md` - -目前L7 支持高德和Mapbox两种底图，高德地图由于使用在线API不能做的离线部署，如果你有离线部署的需求可以采用MapBox做底图。L7 在接口层统一了不同底图直接的差异，一套可视化代码可以运行在L7 支持的任意底图上。本文主要介绍如何离线使用，国内加速使用MapBox，同时也提供了在线的字体服务，你也可也下载到本地使用。 - -### L7 如何引入Mapbox - -```javascript -import { Scene, LineLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; -const scene = new Scene({ - id: 'map', - map: new Mapbox({ - style: 'dark', - center: [ 103.83735604457024, 1.360253881403068 ], - pitch: 4.00000000000001, - zoom: 10.210275860702593, - rotation: 19.313180925794313, - token:'xxxx' - }) -}); - -``` - - -### 为什么离线化 - -- 离线部署 -- 国内加速 -- 不使用mapbox token - -### 如何离线化使用MapBox -你只要不使用MapBox的数据底图服务就可以离线使用，mapbox所有数据服务资源都是在style里面配置的。除了数据服务以外还有一些静态资源，这些主要是图片标注，文字标注的时候使用。 - -mapbox本身数据资源在国外如果在国内单独部署使用，加载速度体验还是很好的 - -我们先了解一下MapBox样式包含哪些配置项。 - -#### Mapbox样式参数 - -- version：JS SDK对应版本必须为8， -- name：样式的命名， -- sprite：雪碧图，将一个地图涉及到的所有零星图标图片都包含到一张大图中。 -- glyphs：.pbf格式的字体样式，例如微软雅黑等字体库。 -- sources：图层的资源文件，可以支持矢量切片、栅格、dem栅格、图片、geojson、视频等格式 -- layers：是对每个图层样式的描述，这里就是对地图样式渲染的关键，可以做定制化地图样式。 - -具体参数及其api可以参考mapbox官网 - -如果做到本地化只需要 sprite，glyphs 本地化就可以了，地图服务可以加载其他服务。 - -如果你不需要使用MapBox数据服务，可视化层完成用L7渲染那就更简单了 - -你只需要将MapBox的地图样式设置 `blank` - -```javascript -const scene = new Scene({ - id: 'map', - map: new Mapbox({ - style: 'blank', - center: [ 103.83735604457024, 1.360253881403068 ], - pitch: 4.00000000000001, - zoom: 10.210275860702593, - rotation: 19.313180925794313 - }) -}); -``` - -blank 样式以为无底图样式，这种样式下就不需要使用mapbox服务，也不需要使用mapbox的token了 - -#### 本地化雪碧图 -如果你需要使用mapbox字段的图片标注，你需要本地化雪碧图资源
只需要下载两个文件即可
sprite.json 主要记录每个图表在大图上位置
sprite.png  每个小图标组成的大图 - -在线雪碧图服务地址:
[https://lzxue.github.io/font-glyphs/sprite/sprite](https://lzxue.github.io/font-glyphs/sprite/sprite) - - -#### 本地化字体 - 如果需要使用mapbox文章标注功能需要本地化，如果你的渲染能力都是用L7实现的，这个过程也是不需要的。 - -L7 提供了在线字体服务
 目前支持4种字 - -- 阿里巴巴普惠体 -- noto -- opensan -- roboto - -_如果你有新的字体需求可提PR，帮你自动生成在线可用的字体服务，你可以在线使用，也可以下载到本地使用。_ - -字体服务下载：[gh-pages分支](https://github.com/lzxue/font-glyphs/tree/gh-pages) 你可以clone下来直接使用。 - -**你也可以使用在线服务**
**
github服务
[https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf](https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf)
蚂蚁CDN：
[https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf](https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf) - -#### 地图服务本地化 -1.加载[第三方底图](https://github.com/htoooth/Leaflet.ChineseTmsProviders)，栅格瓦片图层做底图，如天地图，高德，google的栅格瓦片都可以
2.下载[opensteetmap ](https://openmaptiles.com/downloads/planet/)矢量瓦片地图做底图
3.自己业务数据发布底图服务，或者矢量瓦片服务。 - -**这里还有个更完备的解决方案**
 [https://jingsam.github.io/foxgis-server-lite/#/](https://jingsam.github.io/foxgis-server-lite/#/) - -#### -所有的服务资源已经准备好了，这样我们就可以独立使用mapbox服务，不需要再申请mapbox的token了 - -```javascript - -import { Scene, LineLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; -const scene = new Scene({ - id: 'map', - map: new Mapbox({ - style: { - "version": 8, - "name": "blank", - "sprite": "https://lzxue.github.io/font-glyphs/sprite/sprite", - "glyphs": "https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf", - "sources": {}, - "layers": [ - { - id: 'background', - type: 'background', - paint: { - 'background-color': 'white', - }, - }, - ] - }, - center: [ 103.83735604457024, 1.360253881403068 ], - pitch: 4.00000000000001, - zoom: 10.210275860702593, - rotation: 19.313180925794313, - token:'xxxx' - }) -}); -``` - -离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark) +`markdown:docs/tutorial/map/offline.zh.md` diff --git a/docs/tutorial/quickstart.en.md b/docs/tutorial/quickstart.en.md index 944bbdf1dd..e3fdbb54ff 100644 --- a/docs/tutorial/quickstart.en.md +++ b/docs/tutorial/quickstart.en.md @@ -4,7 +4,7 @@ order: 0 redirect_from: - /en/docs/tutorial --- -`markdown:docs/common/style.md` +`markdown:docs/tutorial/quickstart.zh.md` ## L7 Current version: ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7) diff --git a/examples/district/basic/API.en.md b/examples/district/basic/API.en.md index bc697712fe..3e8b07eff2 100644 --- a/examples/district/basic/API.en.md +++ b/examples/district/basic/API.en.md @@ -1,136 +1,4 @@ --- title: API --- -地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 - -## 使用 - -**using modules** - -```javascript -import { WorldLayer } from '@antv/l7-district'; -``` - -**CDN 版本引用** - -```html - - - - -``` -⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整 - -## 简介 - -District 支持下面几种图 - -- WorldLayer 世界地图 -- CountryLayer 国家地图，目前只支持中国 -- ProvinceLayer 省级地图 -- CityLayer 市级地图 -- CountyLayer 县级地图 -- DrillDownLayer 上钻下取地图 - - -## 构造函数 -参数： -- scene L7 scene 对象 -- option 行政区划配置项 - - zIndex 图层绘制顺序 - - data `Array` 属性数据用于可视化渲染 - - visible 地图是否可见 - - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 - 对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名 - - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级 - - showBorder `boolean` 是否显示国界线，默认显示，不建议不显示 - - simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01 - - label 标注配置项 支持常量，不支持数据映射 - - enable `boolean` 是否显示标注 - - color 标注字体颜色 常量 - - field 标注字段 常量 - - size 标注大小 常量 - - stroke 文字描边颜色 - - strokeWidth 文字描边宽度 - - textAllowOverlap 是否允许文字压盖 - - opacity 标注透明度 - - spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - - padding: `[number, number]` 文本相对锚点的偏移量 [x, y] - 其他包括 text [style 的配置](../layer/point_layer/text#style) - - 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 关联字段 可选，如果不设置保持和初始化一致。 - -### getFillData - -获取填充数据，可用于绘制独立的边界线 - -#### show - -显示图层 - -#### hide -图层隐藏不显示 - -#### destroy - -移除并销毁图层 - +`markdown:docs/api/district/baselayer.zh.md` diff --git a/examples/district/basic/API.zh.md b/examples/district/basic/API.zh.md index 7d695d496c..19fa5e5ef6 100644 --- a/examples/district/basic/API.zh.md +++ b/examples/district/basic/API.zh.md @@ -1,182 +1,5 @@ --- title: API --- -`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 - 更新图层渲染样式 - -### 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` +`markdown:docs/api/district/baselayer.zh.md` diff --git a/examples/district/basic/demo/attach_map.js b/examples/district/basic/demo/attach_map.js index 377bb52273..284bebcf20 100644 --- a/examples/district/basic/demo/attach_map.js +++ b/examples/district/basic/demo/attach_map.js @@ -1,7 +1,7 @@ import { Scene } from '@antv/l7'; import { CountryLayer } from '@antv/l7-district'; import { Mapbox } from '@antv/l7-maps'; -const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70'] +const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ]; const scene = new Scene({ id: 'map', map: new Mapbox({ diff --git a/examples/district/basic/demo/china_map_2.js b/examples/district/basic/demo/china_map_2.js index 1dd694ec9d..61884937ff 100644 --- a/examples/district/basic/demo/china_map_2.js +++ b/examples/district/basic/demo/china_map_2.js @@ -1,7 +1,7 @@ import { Scene } from '@antv/l7'; import { CountryLayer } from '@antv/l7-district'; import { Mapbox } from '@antv/l7-maps'; -const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70'] +const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ]; const ProvinceData = [ { name: '云南省', @@ -197,7 +197,7 @@ scene.on('loaded', () => { fill: { color: { field: 'NAME_CHN', - values: colors, + values: colors } }, popup: { diff --git a/examples/district/basic/demo/city.js b/examples/district/basic/demo/city.js index cafd1b48f0..ec31b9bff8 100644 --- a/examples/district/basic/demo/city.js +++ b/examples/district/basic/demo/city.js @@ -1,7 +1,7 @@ import { Scene } from '@antv/l7'; import { CityLayer } from '@antv/l7-district'; import { Mapbox } from '@antv/l7-maps'; -const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70'] +const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ]; async function initMap() { const response = await fetch( diff --git a/examples/district/basic/demo/county.js b/examples/district/basic/demo/county.js index d022dfbc27..fb4381f1eb 100644 --- a/examples/district/basic/demo/county.js +++ b/examples/district/basic/demo/county.js @@ -1,7 +1,7 @@ import { Scene } from '@antv/l7'; import { CountyLayer } from '@antv/l7-district'; import { Mapbox } from '@antv/l7-maps'; -const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70'] +const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ]; const scene = new Scene({ id: 'map', map: new Mapbox({ diff --git a/examples/district/basic/demo/province.js b/examples/district/basic/demo/province.js index 74d68f1e00..92c6b65b55 100644 --- a/examples/district/basic/demo/province.js +++ b/examples/district/basic/demo/province.js @@ -1,7 +1,7 @@ import { Scene } from '@antv/l7'; import { ProvinceLayer } from '@antv/l7-district'; import { Mapbox } from '@antv/l7-maps'; -const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70'] +const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ]; async function initMap() { const response = await fetch( 'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json' diff --git a/examples/district/bubble/API.en.md b/examples/district/bubble/API.en.md index ee66df11ca..3e8b07eff2 100644 --- a/examples/district/bubble/API.en.md +++ b/examples/district/bubble/API.en.md @@ -1,118 +1,4 @@ --- title: API --- -`markdown:docs/common/style.md` -地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 - -## 使用 - -**using modules** - -```javascript -import { WorldLayer } from '@antv/l7-district'; -``` - -**CDN 版本引用** - -```html - - - - -``` -⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整 - -## 简介 - -District 支持下面几种图 - -- WorldLayer 世界地图 -- CountryLayer 国家地图，目前只支持中国 -- ProvinceLayer 省级地图 -- CityLayer 市级地图 -- CountyLayer 县级地图 -- DrillDownLayer 上钻下取地图 - - -## 构造函数 -参数： -- scene L7 scene 对象 -- option 行政区划配置项 - - zIndex 图层绘制顺序 - - data `Array` 属性数据用于可视化渲染 - - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 - 对照表 - - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级 - - label 标注配置项 支持常量，不支持数据映射 - - enable `boolean` 是否显示标注 - - color 标注字体颜色 常量 - - field 标注字段 常量 - - size 标注大小 常量 - - stroke 文字描边颜色 - - strokeWidth 文字描边宽度 - - textAllowOverlap 是否允许文字压盖 - - opacity 标注透明度 - - fill 填充配置项 支持数据映射 - - color 图层填充颜色，支持常量和数据映射 - 常量：统一设置成一样的颜色 - 数据映射 - - field 填充映射字段 - - values 映射值，同color方法第二个参数数组，回调函数 - - style 同 polygonLayer的style方法 - - activeColor 鼠标滑过高亮颜色 - - 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/baselayer.zh.md` diff --git a/examples/district/bubble/API.zh.md b/examples/district/bubble/API.zh.md index acd6f9e87b..3e8b07eff2 100644 --- a/examples/district/bubble/API.zh.md +++ b/examples/district/bubble/API.zh.md @@ -1,118 +1,4 @@ --- title: API --- -`markdown:docs/common/style.md` -地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 - -## 使用 - -**using modules** - -```javascript -import { WorldLayer } from '@antv/l7-district'; -``` - -**CDN 版本引用** - -```html - - - - -``` -⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整 - -## 简介 - -District 支持下面几种图 - -- WorldLayer 世界地图 -- CountryLayer 国家地图，目前只支持中国 -- ProvinceLayer 省级地图 -- CityLayer 市级地图 -- CountyLayer 县级地图 -- DrillDownLayer 上钻下取地图 - - -## 构造函数 -参数： -- scene L7 scene 对象 -- option 行政区划配置项 - - zIndex 图层绘制顺序 - - data `Array` 属性数据用于可视化渲染 - - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 - 对照表 - - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级 - - label 标注配置项 支持常量，不支持数据映射 - - enable `boolean` 是否显示标注 - - color 标注字体颜色 常量 - - field 标注字段 常量 - - size 标注大小 常量 - - stroke 文字描边颜色 - - strokeWidth 文字描边宽度 - - textAllowOverlap 是否允许文字压盖 - - opacity 标注透明度 - - fill 填充配置项 支持数据映射 - - color 图层填充颜色，支持常量和数据映射 - 常量：统一设置成一样的颜色 - 数据映射 - - field 填充映射字段 - - values 映射值，同color方法第二个参数数组，回调函数 - - style 同 polygonLayer的style方法 - - activeColor 鼠标滑过高亮颜色 - - 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/baselayer.zh.md` diff --git a/examples/district/drill/API.en.md b/examples/district/drill/API.en.md index e69de29bb2..d53551f9b8 100644 --- a/examples/district/drill/API.en.md +++ b/examples/district/drill/API.en.md @@ -0,0 +1 @@ +`markdown:docs/api/district/drilldown.en.md` diff --git a/examples/district/drill/API.zh.md b/examples/district/drill/API.zh.md index fb3c4f0c27..f1b61107e8 100644 --- a/examples/district/drill/API.zh.md +++ b/examples/district/drill/API.zh.md @@ -1,3 +1,3 @@ `markdown:docs/common/style.md` -`markdown:docs/api/draw/api.zh.md` +`markdown:docs/api/district/drilldown.zh.md` diff --git a/examples/district/drill/demo/drill_down.js b/examples/district/drill/demo/drill_down.js index 9708d2259a..1782c26eed 100644 --- a/examples/district/drill/demo/drill_down.js +++ b/examples/district/drill/demo/drill_down.js @@ -1,7 +1,7 @@ import { Scene } from '@antv/l7'; import { DrillDownLayer } from '@antv/l7-district'; import { Mapbox } from '@antv/l7-maps'; -const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70'] +const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ]; const scene = new Scene({ id: 'map', map: new Mapbox({ diff --git a/examples/district/drill/demo/drill_down_bubble.js b/examples/district/drill/demo/drill_down_bubble.js index 7fb45ef5fa..e50674d91c 100644 --- a/examples/district/drill/demo/drill_down_bubble.js +++ b/examples/district/drill/demo/drill_down_bubble.js @@ -1,7 +1,7 @@ import { Scene } from '@antv/l7'; import { DrillDownLayer } from '@antv/l7-district'; import { Mapbox } from '@antv/l7-maps'; -const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70'] +const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ]; const scene = new Scene({ id: 'map', map: new Mapbox({ diff --git a/examples/district/drill/demo/drill_down_province.js b/examples/district/drill/demo/drill_down_province.js index f7702f94ea..27d1e40792 100644 --- a/examples/district/drill/demo/drill_down_province.js +++ b/examples/district/drill/demo/drill_down_province.js @@ -1,7 +1,7 @@ import { Scene } from '@antv/l7'; import { DrillDownLayer } from '@antv/l7-district'; import { Mapbox } from '@antv/l7-maps'; -const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70'] +const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ]; const scene = new Scene({ id: 'map', map: new Mapbox({ @@ -24,8 +24,8 @@ scene.on('loaded', () => { values: colors } }, - city:{ - adcode:[330000] + city: { + adcode: [ 330000 ] }, popup: { enable: true, diff --git a/examples/district/drill/demo/drill_down_view.js b/examples/district/drill/demo/drill_down_view.js index e4a6cdba3a..439693e603 100644 --- a/examples/district/drill/demo/drill_down_view.js +++ b/examples/district/drill/demo/drill_down_view.js @@ -1,7 +1,7 @@ import { Scene } from '@antv/l7'; import { DrillDownLayer } from '@antv/l7-district'; import { Mapbox } from '@antv/l7-maps'; -const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70'] +const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ]; const scene = new Scene({ id: 'map', map: new Mapbox({ diff --git a/examples/draw/basic/design.en.md b/examples/draw/basic/design.en.md index 7f99ea18d5..de1a936ad3 100644 --- a/examples/draw/basic/design.en.md +++ b/examples/draw/basic/design.en.md @@ -1,3 +1,5 @@ --- title: introduction --- + +`markdown:examples/draw/basic/design.zh.md` diff --git a/examples/line/animate/API.en.md b/examples/line/animate/API.en.md index 840aebab0a..deec723ffa 100644 --- a/examples/line/animate/API.en.md +++ b/examples/line/animate/API.en.md @@ -1 +1 @@ -`markdown:docs/api/layer/line_layer/linelayer.en.md` +`markdown:docs/api/layer/line_layer/arc.en.md` diff --git a/examples/line/animate/API.zh.md b/examples/line/animate/API.zh.md index fd0b3080b6..2a46a487bd 100644 --- a/examples/line/animate/API.zh.md +++ b/examples/line/animate/API.zh.md @@ -1,2 +1,2 @@ -`markdown:docs/api/layer/line_layer/linelayer.zh.md` +`markdown:docs/api/layer/line_layer/arc.zh.md` diff --git a/examples/react/layer/API.zh.md b/examples/react/layer/API.zh.md index 25d4d32080..87b11f6443 100644 --- a/examples/react/layer/API.zh.md +++ b/examples/react/layer/API.zh.md @@ -1,170 +1,4 @@ --- title: API --- -`markdown:docs/common/style.md` -## 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'; - - {}} /> - {}} /> -; -``` +`markdown:docs/api/react/layer.zh.md` diff --git a/examples/react/layer/demo/Point_image.tsx b/examples/react/layer/demo/Point_image.tsx index c207688d08..87db3ae535 100644 --- a/examples/react/layer/demo/Point_image.tsx +++ b/examples/react/layer/demo/Point_image.tsx @@ -10,6 +10,9 @@ const World = React.memo(function Map() { 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', ); const data = await response.json(); + + + setData(data); }; fetchData(); diff --git a/examples/react/layer/demo/index.less b/examples/react/layer/demo/index.less new file mode 100644 index 0000000000..e2992d4dd5 --- /dev/null +++ b/examples/react/layer/demo/index.less @@ -0,0 +1,32 @@ +.markerContent { + z-index: 2; + font-size: 10px; + .info { + display: flex; + align-items: center; + height: 32px; + padding: 0.05rem; + background: #1677ff; + border-radius: 44px; + img { + width: 16px; + margin: 4px 10px 4px 4px; + background: #d8d8d8; + border: 1px solid #fff; + border-radius: 50%; + } + .text { + color: #fff; + font-size: 12px; + font-family: PingFangSC-Regular; + } + } + .marker-pin { + display: flex; + justify-content: center; + img { + width: 20px; + height: 30px; + } + } +} diff --git a/examples/react/layer/demo/marker.tsx b/examples/react/layer/demo/marker.tsx new file mode 100644 index 0000000000..f4e1740b5e --- /dev/null +++ b/examples/react/layer/demo/marker.tsx @@ -0,0 +1,93 @@ +import { AMapScene, Marker, PointLayer } from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; +import './index.less'; + +const MarkerPinImg = { + green: + 'https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*JhBbT4LvHpQAAAAAAAAAAAAAARQnAQ', + blue: + 'https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*n6cXTb8R7iUAAAAAAAAAAAAAARQnAQ', +}; +const MarkerInfo = ({ title }) => { + return ( +
+
+
+ {title} +
+
+
+ marker +
+
+ ); +}; + +const World = 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/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', + ); + const data = await response.json(); + setData(data); + }; + fetchData(); + }, []); + return ( + + {data && + data.map((item: any) => { + return ( + + + + ); + })} + + ); +}); + +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/react/layer/demo/meta.json b/examples/react/layer/demo/meta.json index 98d378945c..4c4a4c1f8d 100644 --- a/examples/react/layer/demo/meta.json +++ b/examples/react/layer/demo/meta.json @@ -4,16 +4,20 @@ "en": "Layer Component" }, "demos": [ - - { - "filename": "world.jsx", - "title": "世界地图", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*SPnxSLCgZ7IAAAAAAAAAAABkARQnAQ" - }, { "filename": "Point_image.tsx", "title": "点标注图", "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ" - } + }, + { + "filename": "marker.tsx", + "title": "点标注图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*9sibTJP-FIMAAAAAAAAAAAAAARQnAQ" + }, + { + "filename": "popup.tsx", + "title": "信息窗", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*RWngRL7rZKQAAAAAAAAAAAAAARQnAQ" + }, ] } diff --git a/examples/react/layer/demo/popup.tsx b/examples/react/layer/demo/popup.tsx new file mode 100644 index 0000000000..a5ff066d93 --- /dev/null +++ b/examples/react/layer/demo/popup.tsx @@ -0,0 +1,109 @@ +import { + AMapScene, + LayerEvent, + LineLayer, + MapboxScene, + PolygonLayer, + Popup, +} from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; + +const World = React.memo(function Map() { + const [popupInfo, setPopInfo] = React.useState(); + const hoverHandle = (e) => { + console.log(e); + setPopInfo(e); + }; + const hoverOutHandle = () => { + setPopInfo(undefined); + }; + const data = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [111.9287109375, 28.22697003891834], + [115.6640625, 28.22697003891834], + [115.6640625, 31.015278981711266], + [111.9287109375, 31.015278981711266], + [111.9287109375, 28.22697003891834], + ], + ], + }, + }, + ], + }; + return ( + + {data && [ + + + + , + , + ]} + {popupInfo && ( + + 这是个信息框 + + )} + + ); +}); + +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/react/layer/demo/world.jsx b/examples/react/layer/demo/world.jsx deleted file mode 100644 index 7523384758..0000000000 --- a/examples/react/layer/demo/world.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import { AMapScene, LineLayer, MapboxScene, PolygonLayer } from '@antv/l7-react'; -import * as React from 'react'; -import ReactDOM from 'react-dom'; - -const World = React.memo(function Map() { - const [ data, setData ] = React.useState(); - React.useEffect(() => { - const fetchData = async () => { - const response = await fetch( - 'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json' - ); - const data = await response.json(); - setData(data); - }; - fetchData(); - }, []); - return ( - - {data && [ - , - - ]} - - ); -}); - -ReactDOM.render(, document.getElementById('map')); diff --git a/gatsby-config.js b/gatsby-config.js index c41e14047c..0e1cdc8230 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -268,7 +268,7 @@ module.exports = { } ], playground: { - container: '
', + container: '
', dependencies: { '@antv/l7': 'latest', '@antv/l7-maps': 'latest' diff --git a/package.json b/package.json index a1f3a420c5..afd5cae1a6 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "@antv/l7-district": "^2.2.46", "@antv/l7-draw": "^2.3.40", "@antv/l7-react": "^2.2.37", - "@antv/gatsby-theme-antv": "^1.0.0-beta.15", + "@antv/gatsby-theme-antv": "^1.0.0-beta.18", "@babel/cli": "^7.6.4", "@babel/core": "^7.6.4", "@babel/plugin-proposal-decorators": "^7.6.0", diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index d771f5aebe..409fea1810 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.2.42'; +const version = '2.2.43'; export { version }; diff --git a/packages/layers/src/image/shaders/image_frag.glsl b/packages/layers/src/image/shaders/image_frag.glsl index 91901e16b2..ed617c17e3 100644 --- a/packages/layers/src/image/shaders/image_frag.glsl +++ b/packages/layers/src/image/shaders/image_frag.glsl @@ -5,4 +5,5 @@ varying vec2 v_texCoord; void main() { vec4 color = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y)); gl_FragColor = color; + gl_FragColor.a *= u_opacity; } diff --git a/packages/layers/src/line/shaders/line_frag.glsl b/packages/layers/src/line/shaders/line_frag.glsl index 545413161e..3d820ca113 100644 --- a/packages/layers/src/line/shaders/line_frag.glsl +++ b/packages/layers/src/line/shaders/line_frag.glsl @@ -25,7 +25,7 @@ void main() { gl_FragColor = v_color; // anti-alias // float blur = 1.0 - smoothstep(u_blur, 1., length(v_normal.xy)); - // gl_FragColor.a *= u_opacity * blur ; + gl_FragColor.a *= u_opacity; if(u_aimate.x == Animate) { float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y); alpha = (alpha + u_aimate.w -1.0) / u_aimate.w; diff --git a/stories/Layers/components/Line.tsx b/stories/Layers/components/Line.tsx index 59b30974b2..c13b48295f 100644 --- a/stories/Layers/components/Line.tsx +++ b/stories/Layers/components/Line.tsx @@ -41,7 +41,7 @@ export default class LineDemo extends React.Component { .shape('line') .color('#f00') .style({ - opacity: 1.0, + opacity: 0.5, }); scene.addLayer(polygonLayer); diff --git a/yarn.lock b/yarn.lock index 0e961092a1..e3e9c94087 100644 --- a/yarn.lock +++ b/yarn.lock @@ -139,10 +139,10 @@ d3-timer "~1.0.6" detect-browser "^5.1.0" -"@antv/gatsby-theme-antv@^1.0.0-beta.15": - version "1.0.0-beta.15" - resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-1.0.0-beta.15.tgz#016ec25e2c5476b6a79fd176db27732deb904cea" - integrity sha512-vIeEgZqCLbQLsMPdQlBhjD1bBTxMhiVzu2sSqQ9mMDOSiTGwJjsDTVEnDdokMk/Q2w5UhF4cKLBDdRPdIVPUUA== +"@antv/gatsby-theme-antv@^1.0.0-beta.18": + version "1.0.0-beta.19" + resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-1.0.0-beta.19.tgz#16386abdede265802d8549c381485baf244d8a82" + integrity sha512-Ha4w0sMjx1gg2ikohJ293nTuuviXtmxhaq761UIRMuLCMCVdxNffC/KpViewU42xJXYvB7KRKKim+zHsFmC0nA== dependencies: "@ant-design/icons" "^4.1.0" "@babel/plugin-transform-modules-umd" "^7.2.0"