From ea2f3350fec624173474d479038c671dd01ae7c1 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 18 Nov 2020 19:53:54 +0800 Subject: [PATCH 1/2] chore: update version 2.2.42 --- packages/l7/src/version.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index 62eb81310c..d771f5aebe 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.2.41'; +const version = '2.2.42'; export { version }; From 70ec75bcd47614f84f150835b41eef08cdd1157c Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Thu, 19 Nov 2020 10:03:54 +0800 Subject: [PATCH 2/2] fix(layer): image layer shader --- docs/api/draw/api.zh.md | 223 ++++++++++++------ docs/api/layer/point_layer/text.zh.md | 4 +- docs/common/district/bubble.zh.md | 14 +- docs/common/district/label.zh.md | 36 ++- docs/common/layer/layer_encode.md | 2 + examples/district/basic/API.zh.md | 6 +- examples/district/basic/demo/attach_map.js | 12 +- examples/district/basic/demo/china_map_2.js | 12 +- examples/district/basic/demo/city.js | 10 +- examples/district/basic/demo/county.js | 10 +- examples/district/basic/demo/province.js | 10 +- examples/district/drill/API.zh.md | 159 +------------ examples/district/drill/demo/drill_down.js | 12 +- .../district/drill/demo/drill_down_bubble.js | 10 +- .../drill/demo/drill_down_province.js | 37 +++ .../district/drill/demo/drill_down_view.js | 34 +++ examples/draw/basic/API.en.md | 30 +-- gatsby-config.js | 2 +- package.json | 2 +- .../layers/src/point/shaders/image_vert.glsl | 2 +- stories/Layers/components/PointImage.tsx | 22 +- yarn.lock | 15 +- 22 files changed, 328 insertions(+), 336 deletions(-) create mode 100644 examples/district/drill/demo/drill_down_province.js create mode 100644 examples/district/drill/demo/drill_down_view.js diff --git a/docs/api/draw/api.zh.md b/docs/api/draw/api.zh.md index 77e84f48d6..ff72722dc9 100644 --- a/docs/api/draw/api.zh.md +++ b/docs/api/draw/api.zh.md @@ -1,90 +1,159 @@ ---- -title: Draw 实例 -order: 3 ---- +## 钻取地图 +钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。 -`markdown:docs/common/style.md` +钻取地图支持两种可视化类型 +- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色 +- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小 -### Draw Type -可以不依赖 Draw UI 组件，独立的使用每一个 Draw - -#### DrawCircle - -绘制圆形 +## 使用 ```javascript -import { DrawCircle } from '@antv/l7-draw'; -const drawCircle = new DrawCircle(scene); -drawCircle.enable(); +import { DrillDownLayer } from '@antv/l7-district'; +``` +DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。 + +## 构造函数 + +### scene L7 scene 对象 + +### option 行政区划配置项 + +## 配置项 + + ### customTrigger + 是否自定义下钻交互，默认 `false` + ### drillDownTriggerEvent + 向下钻取的触发事件 ⛔customTrigger为 true 时不生效 + ### drillUpTriggleEvent + 向上钻取的触发事件 ⛔customTrigger为 true 时不生效 + ### provinceData + 省级数据 + ### cityData + 市级数据 可以是全量的数据，下钻时可以不需要重新设置数据 + ### countyData + 县级数据 可以是全量的数据，下钻时可以不需要重新设置数据 + ### joinBy + 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 + 对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名 + ### label + 文本配置项 `labelOption` + ### bubble + 气泡配置项 `bubbleOption` + ### fill + 填充配置项 `fillOption` + ### province + `layerOption` 省级图层配置，如果不设置等同全局配置 + ### city + `layerOption` 市级图层配置，如果不设置等同全局配置 + ### county + `layerOption` 县级图层配置，如果不设置等同全局配置 + ### viewStart + + 起始下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级， + 如果 viewStart 设置为 Province 需要为city 设置 adcode 初值 + 同理如果 viewStart 设置为 City 需要为 county 设置 adcode 初值 + ### viewEnd + 结束下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级， + +#### layerOption + + 下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致 + - joinBy: [string, string]; + - label: Partial; + - bubble: Partial; + - fill: Partial; + ⛔中国地图视角设置，省界，海岸线，宽度通过以下属性 + - chinaNationalStroke 中国国界线颜色 + - chinaNationalWidth 中国国界线宽度 + - coastlineStroke 海岸线颜色 + - coastlineWidth 海岸线宽度 + - nationalWidth 国界线 + - nationalStroke 国界线 + - provinceStroke 省界颜色 + - provinceStrokeWidth 省界宽度 + +#### labelOption + 文本标注配置项，目前只支持常量配置，不支持数据映射 + - enable `boolean` 是否开启标注 `true` + - color `string` 标注颜色 + - field `string` 标注字段名 默认 `NAME_CHN` + - size `number` 文本大小 默认 `8` + - stroke `string` 描边颜色 `#fff` + - strokeWidth `number` 描边宽度 `2` + - textAllowOverlap: `boolean` 文字是否允许压盖 `true` + - opacity `number` 透明度 `1` + +#### bubbleOption + +气泡图配置项 + - enable `boolean` 是否显示气泡 `true` + - shape: AttributeType; 气泡形状支持数据映射 + - size: AttributeType; 气泡大小支持数据映射 + - color: AttributeType; 气泡颜色支持数据映射 + - scale: { // 数字度量 + field: string; 度量字段 + type: ScaleTypeName; 度量字段 + }; + - style: { + opacity: number; 透明度 + stroke: string; 填充色 + strokeWidth: number; 填充宽度 + }; + +#### fill + 填充图样式 + - scale: ScaleTypeName | null; 填充颜色度量类型 + - color: AttributeType; 填充颜色支持数据映射 + - style: any; 填充图样式 + - activeColor: string; 填充图高亮颜色 + +## 属性 +为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出 + +### provinceLayer + +全国地图 CountyLayer + +### cityLayer + +省级地图 ProvinceLayer + +### countyLayer +市级地图 CityLayer + +## 方法 + +### drillDown + 向下钻取 自定义钻取交互行为时使用 + +** 参数 ** +- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用 +- data 下钻层级的数据，可选，如果不设置取全局配置 +- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置 + +```javascirpt + drillLayer.drillDown(['110100']) ``` -#### DrawRect +### drillUp + 向上钻取 -绘制四边形 - -```javascript -import { DrawRect } from '@antv/l7-draw'; -const drawRect = new DrawRect(scene); -drawRect.enable(); + ```javascirpt + drillLayer.drillUp(['110100']) ``` +### updateData +参数 + - layer 更新图层名称 `province|city|county` + - data 数据 + - joinBy 可选 +### show -#### DrawLine +显示图形 -绘制路径 +### hide -```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` 是否允许选中 -- data `geojson` 传入数据 - -### 方法 - -#### enable - -开始编辑，绘制完成之后会自动结束。 - -#### disable - -结束编辑 - -### 事件 - -#### draw.create - -绘制完成时触发该事件 - -#### draw.delete - -图形删除时触发该事件 - -#### draw.update - -图形更新时触发该事件，图形的平移，顶点的编辑 +### destroy + 移除并销毁图层 diff --git a/docs/api/layer/point_layer/text.zh.md b/docs/api/layer/point_layer/text.zh.md index 70ca75eda3..283ff45f86 100644 --- a/docs/api/layer/point_layer/text.zh.md +++ b/docs/api/layer/point_layer/text.zh.md @@ -23,8 +23,8 @@ layer.shape('name', 'text'); - opacity `number` - textAnchor `string` 文本相对锚点的位置 `'right' | 'top-right' | 'left' | 'bottom-right' | 'left' | 'top-left' | 'bottom-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';` -- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 -- padding: `[number, number]` 文本相对锚点的偏移量 [x, y] +- padding: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 +- spacing: number 文本间隔 - stroke: `string`; 描边颜色 - strokeWidth `number` 描边宽度 - strokeOpacity `number` 描边透明度 diff --git a/docs/common/district/bubble.zh.md b/docs/common/district/bubble.zh.md index c1aded7461..469bf543a0 100644 --- a/docs/common/district/bubble.zh.md +++ b/docs/common/district/bubble.zh.md @@ -1,8 +1,12 @@ -### bubbleOption 气泡配置项 - - enable `boolean` 是否显示气泡 `true` - - shape: AttributeType; 气泡形状支持数据映射 - - size: AttributeType; 气泡大小支持数据映射 - - color: AttributeType; 气泡颜色支持数据映射 +### bubble 气泡配置项 + - enable + `boolean` 是否显示气泡 `true` + - shape: + AttributeType; 气泡形状支持数据映射 + - size: + AttributeType; 气泡大小支持数据映射 + - color: + AttributeType; 气泡颜色支持数据映射 - scale: { // 数字度量 field: string; 度量字段 type: ScaleTypeName; 度量字段 diff --git a/docs/common/district/label.zh.md b/docs/common/district/label.zh.md index 4f8e4f9727..4afd80b568 100644 --- a/docs/common/district/label.zh.md +++ b/docs/common/district/label.zh.md @@ -1,13 +1,27 @@ -### labelOption 标注配置项 +### 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) + - color + 标注字体颜色 常量 + - field + 标注字段 常量 + - size + 标注大小 常量 + - stroke + 文字描边颜色 + - strokeWidth + 文字描边宽度 + - textAllowOverlap + 是否允许文字压盖 + - opacity + 标注透明度 + - spacing: + `number` 文本间隔 + - strokeOpacity + `number` 描边透明度 + - fontWeight + `string` 字体粗细 + - fontFamily + `string` 字号 + - textOffset + `[number, number]` 文本偏移量 diff --git a/docs/common/layer/layer_encode.md b/docs/common/layer/layer_encode.md index fb9a2d8c1b..b3fc9df6fe 100644 --- a/docs/common/layer/layer_encode.md +++ b/docs/common/layer/layer_encode.md @@ -226,6 +226,8 @@ layer.color('gender*age', (gender, age) => { - stroke 线填充颜色 仅点图层支持 +- offsets 偏移量 [number, number] x 和 y 方向偏移 仅支持 pointLayer + - strokeWidth 线的宽度 仅点图层支持 ```javascript diff --git a/examples/district/basic/API.zh.md b/examples/district/basic/API.zh.md index 1ae01abd07..7d695d496c 100644 --- a/examples/district/basic/API.zh.md +++ b/examples/district/basic/API.zh.md @@ -33,7 +33,7 @@ District 支持下面几种图 - CountyLayer 县级地图 -## option 行政区划配置项 +## 配置项 ### zIndex @@ -92,9 +92,11 @@ District 支持下面几种图 县级边界宽度 `CountryLayer depth =2时生效` -`markdown:docs/common/district/label.md` +`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` diff --git a/examples/district/basic/demo/attach_map.js b/examples/district/basic/demo/attach_map.js index 3d99a68f5c..377bb52273 100644 --- a/examples/district/basic/demo/attach_map.js +++ b/examples/district/basic/demo/attach_map.js @@ -1,6 +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 scene = new Scene({ id: 'map', map: new Mapbox({ @@ -27,7 +28,7 @@ scene.on('loaded', () => { data: [], joinBy: [ 'NAME_CHN', 'name' ], depth: 1, - provinceStroke: '#783D2D', + provinceStroke: '#fff', cityStroke: '#EBCCB4', cityStrokeWidth: 1, label: { @@ -36,14 +37,7 @@ scene.on('loaded', () => { fill: { color: { field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + values: colors } }, popup: { diff --git a/examples/district/basic/demo/china_map_2.js b/examples/district/basic/demo/china_map_2.js index ccc3affe28..1dd694ec9d 100644 --- a/examples/district/basic/demo/china_map_2.js +++ b/examples/district/basic/demo/china_map_2.js @@ -1,6 +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 ProvinceData = [ { name: '云南省', @@ -190,20 +191,13 @@ scene.on('loaded', () => { data: ProvinceData, joinBy: [ 'NAME_CHN', 'name' ], depth: 1, - provinceStroke: '#783D2D', + provinceStroke: '#fff', cityStroke: '#EBCCB4', cityStrokeWidth: 1, fill: { color: { field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + values: colors, } }, popup: { diff --git a/examples/district/basic/demo/city.js b/examples/district/basic/demo/city.js index 21a132c2e7..cafd1b48f0 100644 --- a/examples/district/basic/demo/city.js +++ b/examples/district/basic/demo/city.js @@ -1,6 +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'] async function initMap() { const response = await fetch( @@ -38,14 +39,7 @@ async function initMap() { }, fill: { color: { field: 'pop', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + values: colors } }, popup: { diff --git a/examples/district/basic/demo/county.js b/examples/district/basic/demo/county.js index d0ee582125..d022dfbc27 100644 --- a/examples/district/basic/demo/county.js +++ b/examples/district/basic/demo/county.js @@ -1,6 +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 scene = new Scene({ id: 'map', map: new Mapbox({ @@ -23,14 +24,7 @@ scene.on('loaded', () => { fill: { color: { field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + values: colors } }, popup: { diff --git a/examples/district/basic/demo/province.js b/examples/district/basic/demo/province.js index 41804b897f..74d68f1e00 100644 --- a/examples/district/basic/demo/province.js +++ b/examples/district/basic/demo/province.js @@ -1,6 +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'] async function initMap() { const response = await fetch( 'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json' @@ -39,14 +40,7 @@ async function initMap() { fill: { color: { field: 'pop', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + values: colors } }, popup: { diff --git a/examples/district/drill/API.zh.md b/examples/district/drill/API.zh.md index fcb152e23c..fb3c4f0c27 100644 --- a/examples/district/drill/API.zh.md +++ b/examples/district/drill/API.zh.md @@ -1,158 +1,3 @@ -## 钻取地图 -钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。 - -钻取地图支持两种可视化类型 -- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色 -- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小 - - -## 使用 - -```javascript -import { DrillDownLayer } from '@antv/l7-district'; -``` -DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。 - -## 构造函数 - -### scene L7 scene 对象 - -### option 行政区划配置项 - -## 配置项 - - ### customTrigger - 是否自定义下钻交互，默认 `false` - ### drillDownTriggerEvent - 向下钻取的触发事件 ⛔customTrigger为 true 时不生效 - ### drillUpTriggleEvent - 向上钻取的触发事件 ⛔customTrigger为 true 时不生效 - ### provinceData - 省级数据 - ### cityData - 市级数据 可以是全量的数据，下钻时可以不需要重新设置数据 - ### countyData - 县级数据 可以是全量的数据，下钻时可以不需要重新设置数据 - ### joinBy - 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 - 对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名 - ### label - 文本配置项 `labelOption` - ### bubble - 气泡配置项 `bubbleOption` - ### fill - 填充配置项 `fillOption` - ### province - `layerOption` 省级图层配置，如果不设置等同全局配置 - ### city - `layerOption` 市级图层配置，如果不设置等同全局配置 - ### county - `layerOption` 县级图层配置，如果不设置等同全局配置 - ### viewStart - 起始下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级， - ### viewEnd - 结束下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级， - -#### layerOption - - 下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致 - - joinBy: [string, string]; - - label: Partial; - - bubble: Partial; - - fill: Partial; - ⛔中国地图视角设置，省界，海岸线，宽度通过以下属性 - - chinaNationalStroke 中国国界线颜色 - - chinaNationalWidth 中国国界线宽度 - - coastlineStroke 海岸线颜色 - - coastlineWidth 海岸线宽度 - - nationalWidth 国界线 - - nationalStroke 国界线 - - provinceStroke 省界颜色 - - provinceStrokeWidth 省界宽度 - -#### labelOption - 文本标注配置项，目前只支持常量配置，不支持数据映射 - - enable `boolean` 是否开启标注 `true` - - color `string` 标注颜色 - - field `string` 标注字段名 默认 `NAME_CHN` - - size `number` 文本大小 默认 `8` - - stroke `string` 描边颜色 `#fff` - - strokeWidth `number` 描边宽度 `2` - - textAllowOverlap: `boolean` 文字是否允许压盖 `true` - - opacity `number` 透明度 `1` - -#### bubbleOption - -气泡图配置项 - - enable `boolean` 是否显示气泡 `true` - - shape: AttributeType; 气泡形状支持数据映射 - - size: AttributeType; 气泡大小支持数据映射 - - color: AttributeType; 气泡颜色支持数据映射 - - scale: { // 数字度量 - field: string; 度量字段 - type: ScaleTypeName; 度量字段 - }; - - style: { - opacity: number; 透明度 - stroke: string; 填充色 - strokeWidth: number; 填充宽度 - }; - -#### fill - 填充图样式 - - scale: ScaleTypeName | null; 填充颜色度量类型 - - color: AttributeType; 填充颜色支持数据映射 - - style: any; 填充图样式 - - activeColor: string; 填充图高亮颜色 - -## 属性 -为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出 - -### provinceLayer - -全国地图 CountyLayer - -### cityLayer - -省级地图 ProvinceLayer - -### countyLayer -市级地图 CityLayer - -## 方法 - -### drillDown - 向下钻取 自定义钻取交互行为时使用 - -** 参数 ** -- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用 -- data 下钻层级的数据，可选，如果不设置取全局配置 -- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置 - -```javascirpt - drillLayer.drillDown(['110100']) -``` - -### drillUp - 向上钻取 - - ```javascirpt - drillLayer.drillUp(['110100']) -``` -### updateData -参数 - - layer 更新图层名称 `province|city|county` - - data 数据 - - joinBy 可选 -### show - -显示图形 - -### hide - -隐藏图层 - -### destroy - 移除并销毁图层 - +`markdown:docs/common/style.md` +`markdown:docs/api/draw/api.zh.md` diff --git a/examples/district/drill/demo/drill_down.js b/examples/district/drill/demo/drill_down.js index 0e0fabdc9c..9708d2259a 100644 --- a/examples/district/drill/demo/drill_down.js +++ b/examples/district/drill/demo/drill_down.js @@ -1,6 +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 scene = new Scene({ id: 'map', map: new Mapbox({ @@ -16,18 +17,11 @@ scene.on('loaded', () => { new DrillDownLayer(scene, { data: [], viewStart: 'Country', - viewEnd: 'County', + viewEnd: 'City', fill: { color: { field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + values: colors } }, popup: { diff --git a/examples/district/drill/demo/drill_down_bubble.js b/examples/district/drill/demo/drill_down_bubble.js index 16d7c34157..7fb45ef5fa 100644 --- a/examples/district/drill/demo/drill_down_bubble.js +++ b/examples/district/drill/demo/drill_down_bubble.js @@ -1,6 +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 scene = new Scene({ id: 'map', map: new Mapbox({ @@ -20,14 +21,7 @@ scene.on('loaded', () => { enable: true, color: { field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + values: colors } }, popup: { diff --git a/examples/district/drill/demo/drill_down_province.js b/examples/district/drill/demo/drill_down_province.js new file mode 100644 index 0000000000..f7702f94ea --- /dev/null +++ b/examples/district/drill/demo/drill_down_province.js @@ -0,0 +1,37 @@ +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 scene = new Scene({ + id: 'map', + map: new Mapbox({ + center: [ 116.2825, 39.9 ], + pitch: 0, + style: 'blank', + zoom: 3, + minZoom: 3, + maxZoom: 10 + }) +}); +scene.on('loaded', () => { + new DrillDownLayer(scene, { + data: [], + viewStart: 'Province', + viewEnd: 'County', + fill: { + color: { + field: 'NAME_CHN', + values: colors + } + }, + city:{ + adcode:[330000] + }, + popup: { + enable: true, + Html: props => { + return `${props.NAME_CHN}`; + } + } + }); +}); diff --git a/examples/district/drill/demo/drill_down_view.js b/examples/district/drill/demo/drill_down_view.js new file mode 100644 index 0000000000..e4a6cdba3a --- /dev/null +++ b/examples/district/drill/demo/drill_down_view.js @@ -0,0 +1,34 @@ +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 scene = new Scene({ + id: 'map', + map: new Mapbox({ + center: [ 116.2825, 39.9 ], + pitch: 0, + style: 'blank', + zoom: 3, + minZoom: 3, + maxZoom: 10 + }) +}); +scene.on('loaded', () => { + new DrillDownLayer(scene, { + data: [], + viewStart: 'Country', + viewEnd: 'Province', + fill: { + color: { + field: 'NAME_CHN', + values: colors + } + }, + popup: { + enable: true, + Html: props => { + return `${props.NAME_CHN}`; + } + } + }); +}); diff --git a/examples/draw/basic/API.en.md b/examples/draw/basic/API.en.md index 9272b12b9c..c0c0cefda4 100644 --- a/examples/draw/basic/API.en.md +++ b/examples/draw/basic/API.en.md @@ -3,7 +3,7 @@ title: API --- 地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 -# 使用 +## 使用 **using modules** @@ -20,7 +20,7 @@ import { DrawControl } from '@antv/l7-draw'; ``` -### 参数 +## 参数 ```javascript const control = new DrawControl(scene, option); @@ -90,11 +90,11 @@ scene.addControl(control); scene.removeControl(control); ``` -### Draw Type +## Draw Type 可以不依赖 Draw UI 组件，独立的使用每一个 Draw -#### DrawCircle +### DrawCircle 绘制圆形 @@ -104,7 +104,7 @@ const drawCircle = new DrawCircle(scene); drawCircle.enable(); ``` -#### DrawRect +### DrawRect 绘制四边形 @@ -114,7 +114,7 @@ const drawRect = new DrawRect(scene); drawRect.enable(); ``` -#### DrawLine +### DrawLine 绘制路径 @@ -124,7 +124,7 @@ const drawLine = new DrawLine(scene); drawLine.enable(); ``` -#### DrawPoint +### DrawPoint 绘制点 @@ -134,7 +134,7 @@ const drawPoint = new DrawPoint(scene); drawPoint.enable(); ``` -#### DrawPolygon +### DrawPolygon 绘制多边形 @@ -149,27 +149,27 @@ drawPoint.enable(); - editEnable boolean 是否允许编辑 - selectEnable boolean 是否允许选中 -### 方法 +## 方法 -#### enable +### enable 开始编辑，绘制完成之后会自动结束。 -#### disable +### disable 结束编辑 -### 事件 +## 事件 -#### draw.create +### draw.create 绘制完成时触发该事件 -#### draw.delete +### draw.delete 图形删除时触发该事件 -#### draw.update +### draw.update 图形更新时触发该事件，图形的平移，顶点的编辑 diff --git a/gatsby-config.js b/gatsby-config.js index 43ac071d76..c41e14047c 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 bddf1cc3e0..a1f3a420c5 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.11", + "@antv/gatsby-theme-antv": "^1.0.0-beta.15", "@babel/cli": "^7.6.4", "@babel/core": "^7.6.4", "@babel/plugin-proposal-decorators": "^7.6.0", diff --git a/packages/layers/src/point/shaders/image_vert.glsl b/packages/layers/src/point/shaders/image_vert.glsl index 593328a9ee..dd55e41724 100644 --- a/packages/layers/src/point/shaders/image_vert.glsl +++ b/packages/layers/src/point/shaders/image_vert.glsl @@ -19,7 +19,7 @@ void main() { vec4 project_pos = project_position(vec4(a_Position, 1.0)); v_size = a_Size; vec2 offset = project_pixel(u_offsets); - gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy + offset) project_pos.z, 1.0)); + gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy + offset),project_pos.z, 1.0)); gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio; setPickingColor(a_PickingColor); diff --git a/stories/Layers/components/PointImage.tsx b/stories/Layers/components/PointImage.tsx index c92e44bcd0..8f44c52bf6 100644 --- a/stories/Layers/components/PointImage.tsx +++ b/stories/Layers/components/PointImage.tsx @@ -55,11 +55,31 @@ export default class PointImage extends React.Component { // .shape('triangle') // .color('red') .active(true) - .size(20); + .size(20) + .style({ + offsets: [40, 40], + }); // imageLayer.on('click', (e) => { // console.log(e); // }); + + const imageLayer2 = new PointLayer() + .source(newData, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + }, + }) + .shape('type', (v: any) => { + return v; + }) + // .shape('triangle') + // .color('red') + .active(true) + .size(10); scene.addLayer(imageLayer); + scene.addLayer(imageLayer2); } public render() { diff --git a/yarn.lock b/yarn.lock index 5f576f19cd..0e961092a1 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.11": - version "1.0.0-beta.11" - resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-1.0.0-beta.11.tgz#c67186de937101e8092e3010a0374c780f691186" - integrity sha512-btbHO9pIQOcii//2SPEYaC25XtnO686+UDZ0j0bqYK508Irx2LuZMTSs0vVim0ZC/2myKjc/AKqaKNnPTjYugg== +"@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== dependencies: "@ant-design/icons" "^4.1.0" "@babel/plugin-transform-modules-umd" "^7.2.0" @@ -205,6 +205,7 @@ gatsby-source-github "^0.0.2" gatsby-transformer-remark "^2.8.8" git-url-parse "^11.1.2" + html-to-image "^1.3.20" i18next "^19.4.4" indent-string "^4.0.0" insert-css "^2.0.0" @@ -217,6 +218,7 @@ monaco-editor "^0.21.0" monaco-editor-webpack-plugin "^2.0.0" normalize.css "^8.0.1" + omit.js "^2.0.2" parse-github-url "^1.0.2" prism-themes "^1.2.0" prismjs "^1.17.1" @@ -14799,6 +14801,11 @@ html-tags@^2.0.0: resolved "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b" integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos= +html-to-image@^1.3.20: + version "1.3.20" + resolved "https://registry.npmjs.org/html-to-image/-/html-to-image-1.3.20.tgz#15d89bb82e50d16e45a72dce245d8d52a637edf2" + integrity sha512-Pkc4rzqml0/VDPi81Y+ljQH+eko87FzwZpNfoEmj2urWdAiu2u9LxSoOJpWI/++I9uaR3tPe1xLq/VZmwOqVSw== + html-void-elements@^1.0.0, html-void-elements@^1.0.1: version "1.0.5" resolved "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"