From d384494cc9608d44b7b061de1eec89b0b5612e99 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 5 Feb 2020 17:24:19 +0800 Subject: [PATCH 1/4] =?UTF-8?q?ci:=20=E6=96=B0=E5=A2=9E=E9=92=89=E9=92=89C?= =?UTF-8?q?I=E6=9C=BA=E5=99=A8=E4=BA=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .travis.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.travis.yml b/.travis.yml index 21c75bf9e4..2a624602e3 100644 --- a/.travis.yml +++ b/.travis.yml @@ -33,3 +33,6 @@ script: - yarn lint - yarn test - yarn build + +notifications: + webhooks: https://oapi.dingtalk.com/robot/send?access_token=2dacc76d8b1ea8bcdc792b50f103d13efdba9ef53ec0caeb70631bc3add56118 From 6008d30416f258ec7f01cc467dab1e8cc154dc63 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 5 Feb 2020 21:36:29 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20source=20data=20join=20=E5=8A=9F?= =?UTF-8?q?=E8=83=BD&=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/source/source.en.md | 55 ++++++++++++++++++++++++++- docs/api/source/source.zh.md | 54 ++++++++++++++++++++++++++ packages/source/src/transform/join.ts | 13 ++++--- 3 files changed, 115 insertions(+), 7 deletions(-) diff --git a/docs/api/source/source.en.md b/docs/api/source/source.en.md index 539b9ff61f..8759e014de 100644 --- a/docs/api/source/source.en.md +++ b/docs/api/source/source.en.md @@ -128,7 +128,60 @@ layer.source(data, { 生成六边形网格布局，根据数据字段统计 -- type: 'hexagon', +- type: hexagon, - size: 网格半径 - field: 数据统计字段 - method: 聚合方法   count,max,min,sum,mean 5 个统计维度 + +#### join +数据连接，业务中跟多情况是地理数据和业务数据分开的两套数据，我们可与通过join 方法将地理数据和业务数据进行关联。 + +**配置项** + +- type: join +- sourceField 需要连接的业务数据字段名称 +- data 需要连接的数据源 仅支持json 格式 +- targetField 关联的地理数据字段名称 + + +```javascript + const data = { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "city":'北京' + }, + "geometry": { + } + } + ] + + } + +const data2 = [ + { + name:'北京', + value: 13 + }, + { + name:'天津', + value: 20 + } +] +// data 是地理数据 +// data2 属性数据或者业务数据 + +// 通过join方法我们就可以将两个数据连接到一起 + + layer.source(data,{ + transforms:[ + type: 'join' + sourceField: 'name' //data1 对应字段名 + targetField: 'city' // data 对应字段名 + data: data2, + ] + }) + .color('value') // 可以采用data1的value字段进行数据到颜色的映射 +``` diff --git a/docs/api/source/source.zh.md b/docs/api/source/source.zh.md index bb4df7f2ce..5cf52f7b42 100644 --- a/docs/api/source/source.zh.md +++ b/docs/api/source/source.zh.md @@ -134,3 +134,57 @@ layer.source(data, { - size: 网格半径 - field: 数据统计字段 - method:聚合方法   count,max,min,sum,mean 5 个统计维度 + +#### join +数据连接，业务中跟多情况是地理数据和业务数据分开的两套数据，我们可与通过join 方法将地理数据和业务数据进行关联。 + +**配置项** + +- type: join +- sourceField 需要连接的业务数据字段名称 +- data 需要连接的数据源 仅支持json 格式 +- targetField 关联的地理数据字段名称 + + +```javascript + const data = { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "city":'北京' + }, + "geometry": { + } + } + ] + + } + +const data2 = [ + { + name:'北京', + value: 13 + }, + { + name:'天津', + value: 20 + } +] +// data 是地理数据 +// data2 属性数据或者业务数据 + +// 通过join方法我们就可以将两个数据连接到一起 + + layer.source(data,{ + transforms:[ + type: 'join' + sourceField: 'name' //data1 对应字段名 + targetField: 'city' // data 对应字段名 + data: data2, + ] + }) + .color('value') // 可以采用data1的value字段进行数据到颜色的映射 +``` + diff --git a/packages/source/src/transform/join.ts b/packages/source/src/transform/join.ts index f5846a1156..65665327f8 100644 --- a/packages/source/src/transform/join.ts +++ b/packages/source/src/transform/join.ts @@ -1,7 +1,8 @@ import { IParseDataItem, IParserData } from '@antv/l7-core'; interface IJoinOption { - field: 'string'; + sourceField: string; + targetField: string; data: any[]; } @@ -10,14 +11,14 @@ interface IJoinOption { * @param data * @param options */ -export function join(geoData: IParserData, options: { [key: string]: any }) { - const { field, data } = options; +export function join(geoData: IParserData, options: IJoinOption) { + const { sourceField, targetField, data } = options; const dataObj: { [key: string]: any } = {}; data.forEach((element: { [key: string]: any }) => { - dataObj[element[field]] = element; + dataObj[element[sourceField]] = element; }); - geoData.dataArray = data.dataArray.map((item: IParseDataItem) => { - const joinName = item[field]; + geoData.dataArray = geoData.dataArray.map((item: IParseDataItem) => { + const joinName = item[targetField]; return { ...dataObj[joinName], ...item, From fd494b48f869b5c79c152441329a37498f4f1ed2 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 5 Feb 2020 21:36:29 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20source=20data=20join=20=E5=8A=9F?= =?UTF-8?q?=E8=83=BD&=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/source/source.en.md | 55 ++++++++++++++++++++++++++- docs/api/source/source.zh.md | 53 ++++++++++++++++++++++++++ packages/source/src/transform/join.ts | 15 ++++---- 3 files changed, 115 insertions(+), 8 deletions(-) diff --git a/docs/api/source/source.en.md b/docs/api/source/source.en.md index 539b9ff61f..e7605b22f2 100644 --- a/docs/api/source/source.en.md +++ b/docs/api/source/source.en.md @@ -128,7 +128,60 @@ layer.source(data, { 生成六边形网格布局，根据数据字段统计 -- type: 'hexagon', +- type: hexagon, - size: 网格半径 - field: 数据统计字段 - method: 聚合方法   count,max,min,sum,mean 5 个统计维度 + +#### join + +数据连接，业务中跟多情况是地理数据和业务数据分开的两套数据，我们可与通过 join 方法将地理数据和业务数据进行关联。 + +**配置项** + +- type: join +- sourceField 需要连接的业务数据字段名称 +- data 需要连接的数据源 仅支持 json 格式 +- targetField 关联的地理数据字段名称 + +```javascript + const data = { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "city":'北京' + }, + "geometry": { + } + } + ] + + } + +const data2 = [ + { + name:'北京', + value: 13 + }, + { + name:'天津', + value: 20 + } +] +// data 是地理数据 +// data2 属性数据或者业务数据 + +// 通过join方法我们就可以将两个数据连接到一起 + + layer.source(data,{ + transforms:[ + type: 'join' + sourceField: 'name' //data1 对应字段名 + targetField: 'city' // data 对应字段名 + data: data2, + ] + }) + .color('value') // 可以采用data1的value字段进行数据到颜色的映射 +``` diff --git a/docs/api/source/source.zh.md b/docs/api/source/source.zh.md index bb4df7f2ce..0c9e44eadb 100644 --- a/docs/api/source/source.zh.md +++ b/docs/api/source/source.zh.md @@ -134,3 +134,56 @@ layer.source(data, { - size: 网格半径 - field: 数据统计字段 - method:聚合方法   count,max,min,sum,mean 5 个统计维度 + +#### join + +数据连接，业务中跟多情况是地理数据和业务数据分开的两套数据，我们可与通过 join 方法将地理数据和业务数据进行关联。 + +**配置项** + +- type: join +- sourceField 需要连接的业务数据字段名称 +- data 需要连接的数据源 仅支持 json 格式 +- targetField 关联的地理数据字段名称 + +```javascript + const data = { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "city":'北京' + }, + "geometry": { + } + } + ] + + } + +const data2 = [ + { + name:'北京', + value: 13 + }, + { + name:'天津', + value: 20 + } +] +// data 是地理数据 +// data2 属性数据或者业务数据 + +// 通过join方法我们就可以将两个数据连接到一起 + + layer.source(data,{ + transforms:[ + type: 'join' + sourceField: 'name' //data1 对应字段名 + targetField: 'city' // data 对应字段名 + data: data2, + ] + }) + .color('value') // 可以采用data1的value字段进行数据到颜色的映射 +``` diff --git a/packages/source/src/transform/join.ts b/packages/source/src/transform/join.ts index f5846a1156..0e84ffbd06 100644 --- a/packages/source/src/transform/join.ts +++ b/packages/source/src/transform/join.ts @@ -1,7 +1,8 @@ import { IParseDataItem, IParserData } from '@antv/l7-core'; interface IJoinOption { - field: 'string'; + sourceField: string; + targetField: string; data: any[]; } @@ -10,19 +11,19 @@ interface IJoinOption { * @param data * @param options */ -export function join(geoData: IParserData, options: { [key: string]: any }) { - const { field, data } = options; +export function join(geoData: IParserData, options: IJoinOption) { + const { sourceField, targetField, data } = options; const dataObj: { [key: string]: any } = {}; data.forEach((element: { [key: string]: any }) => { - dataObj[element[field]] = element; + dataObj[element[sourceField]] = element; }); - geoData.dataArray = data.dataArray.map((item: IParseDataItem) => { - const joinName = item[field]; + geoData.dataArray = geoData.dataArray.map((item: IParseDataItem) => { + const joinName = item[targetField]; return { ...dataObj[joinName], ...item, }; }); - return data; + return geoData; } From bca202d331277fcb089f8b7ecc0bff4fab34ec3a Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Thu, 6 Feb 2020 21:05:49 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20many=20bugs=20-=20marker=20offsets?= =?UTF-8?q?=20-=20layer=20update=20color,size,shape=20-=20=E5=AE=98?= =?UTF-8?q?=E7=BD=91=E5=8E=8B=E7=BC=A9=20-=20=E6=95=B0=E6=8D=AE=E6=98=A0?= =?UTF-8?q?=E5=B0=84=20=E5=9B=9E=E8=B0=83=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/component/marker.en.md | 2 +- docs/api/component/marker.zh.md | 2 +- package.json | 2 +- packages/component/src/marker.ts | 12 +-- .../services/layer/IStyleAttributeService.ts | 8 +- .../core/src/services/layer/StyleAttribute.ts | 2 +- packages/layers/src/core/BaseLayer.ts | 81 +++++++++++-------- .../layers/src/plugins/DataMappingPlugin.ts | 1 + .../layers/src/plugins/FeatureScalePlugin.ts | 19 ++--- .../layers/src/point/shaders/image_vert.glsl | 4 +- stories/Components/components/Marker.tsx | 4 +- stories/Layers/components/Line.tsx | 8 +- stories/Layers/components/Point3D.tsx | 5 ++ stories/Layers/components/PointImage.tsx | 1 + 14 files changed, 90 insertions(+), 61 deletions(-) diff --git a/docs/api/component/marker.en.md b/docs/api/component/marker.en.md index e9c1eb5398..900d2f9f62 100644 --- a/docs/api/component/marker.en.md +++ b/docs/api/component/marker.en.md @@ -16,7 +16,7 @@ Marker - color        `string` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认 marker 的颜色 - element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id - anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right -- offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量 +- offsets    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量 ### 添加到 Scene diff --git a/docs/api/component/marker.zh.md b/docs/api/component/marker.zh.md index c9e7830b65..906d969635 100644 --- a/docs/api/component/marker.zh.md +++ b/docs/api/component/marker.zh.md @@ -17,7 +17,7 @@ Marker ![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ)  设置默认 marker 的颜色 - element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id - anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right -- offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量 +- offsets    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量 - extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息 ## 方法 diff --git a/package.json b/package.json index 78e7ccf6a1..f765a1277f 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "scripts": { "start": "yarn run site:clean && yarn run site:develop", "site:develop": "cross-env BABEL_ENV=site gatsby develop --open -H 0.0.0.0", - "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths --no-uglify", + "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths", "site:clean": "gatsby clean", "site:deploy": "yarn run site:build && gh-pages -d public", "site:publish": "gh-pages -d public", diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index 50fac01e2f..20e9f82e2e 100644 --- a/packages/component/src/marker.ts +++ b/packages/component/src/marker.ts @@ -9,7 +9,7 @@ export interface IMarkerOption { element: HTMLElement | undefined; anchor: anchorType; color: string; - offset: number[]; + offsets: number[]; draggable: boolean; extData?: any; } @@ -35,7 +35,7 @@ export default class Marker extends EventEmitter { return { element: undefined, // DOM element anchor: anchorType.BOTTOM, - offset: [0, 0], + offsets: [0, 0], color: '#5B8FF9', draggable: false, }; @@ -174,7 +174,7 @@ export default class Marker extends EventEmitter { } public getOffset(): number[] { - return this.markerOption.offset; + return this.markerOption.offsets; } public setDraggable(draggable: boolean) { @@ -213,12 +213,12 @@ export default class Marker extends EventEmitter { if (!this.mapsService) { return; } - const { element } = this.markerOption; + const { element, offsets } = this.markerOption; const { lng, lat } = this.lngLat; const pos = this.mapsService.lngLatToContainer([lng, lat]); if (element) { - element.style.left = pos.x + 'px'; - element.style.top = pos.y + 'px'; + element.style.left = pos.x + offsets[0] + 'px'; + element.style.top = pos.y - offsets[1] + 'px'; } } diff --git a/packages/core/src/services/layer/IStyleAttributeService.ts b/packages/core/src/services/layer/IStyleAttributeService.ts index 37609ffea4..d8a65e6f9c 100644 --- a/packages/core/src/services/layer/IStyleAttributeService.ts +++ b/packages/core/src/services/layer/IStyleAttributeService.ts @@ -60,7 +60,7 @@ export interface IScaleOptions { } export interface IStyleScale { scale: any; - field: string; + field: string | number; type: StyleScaleType; option: IScaleOption | undefined; } @@ -112,7 +112,7 @@ export interface IVertexAttributeDescriptor type Position = number[]; type Color = [number, number, number, number]; type CallBack = (...args: any[]) => any; -export type StyleAttributeField = string | string[]; +export type StyleAttributeField = string | string[] | number[]; export type StyleAttributeOption = string | number | boolean | any[] | CallBack; export type StyleAttrField = string | string[] | number | number[]; @@ -122,11 +122,11 @@ export interface IStyleAttributeInitializationOptions { scale?: { field: StyleAttributeField; values: unknown[] | string; - names: string[]; + names: string[] | number[]; type: StyleScaleType; callback?: (...args: any[]) => []; scalers?: Array<{ - field: string; + field: string | number; func: unknown; }>; }; diff --git a/packages/core/src/services/layer/StyleAttribute.ts b/packages/core/src/services/layer/StyleAttribute.ts index a9d0317e27..0e61044104 100644 --- a/packages/core/src/services/layer/StyleAttribute.ts +++ b/packages/core/src/services/layer/StyleAttribute.ts @@ -58,7 +58,7 @@ export default class StyleAttribute implements IStyleAttribute { */ if (this.scale?.callback) { // 使用用户返回的值处理 - const ret = this.scale?.callback(params); + const ret = this.scale?.callback(...params); if (!isNil(ret)) { return [ret]; } diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index bae6d16c98..6dea49ede9 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -259,13 +259,7 @@ export default class BaseLayer extends EventEmitter // 完成样式服务注册完成前添加的属性 this.pendingStyleAttributes.forEach( - ({ - attributeName, - attributeField, - attributeValues, - defaultName, - updateOptions, - }) => { + ({ attributeName, attributeField, attributeValues, updateOptions }) => { this.styleAttributeService.updateStyleAttribute( attributeName, { @@ -276,7 +270,7 @@ export default class BaseLayer extends EventEmitter // @ts-ignore attributeValues, // @ts-ignore - this.getLayerConfig()[defaultName || attributeName], + this.getLayerConfig()[attributeName], ), }, }, @@ -338,13 +332,15 @@ export default class BaseLayer extends EventEmitter updateOptions?: Partial, ) { // 设置 color、size、shape、style 时由于场景服务尚未完成（并没有调用 scene.addLayer），因此暂时加入待更新属性列表 - this.pendingStyleAttributes.push({ - attributeName: 'color', - attributeField: field, - attributeValues: values, - defaultName: 'colors', - updateOptions, - }); + this.updateStyleAttribute('color', field, values, updateOptions); + + // this.pendingStyleAttributes.push({ + // attributeName: 'color', + // attributeField: field, + // attributeValues: values, + // defaultName: 'colors', + // updateOptions, + // }); return this; } @@ -353,12 +349,7 @@ export default class BaseLayer extends EventEmitter values?: StyleAttributeOption, updateOptions?: Partial, ) { - this.pendingStyleAttributes.push({ - attributeName: 'size', - attributeField: field, - attributeValues: values, - updateOptions, - }); + this.updateStyleAttribute('size', field, values, updateOptions); return this; } // 对mapping后的数据过滤，scale保持不变 @@ -367,12 +358,7 @@ export default class BaseLayer extends EventEmitter values?: StyleAttributeOption, updateOptions?: Partial, ) { - this.pendingStyleAttributes.push({ - attributeName: 'filter', - attributeField: field, - attributeValues: values, - updateOptions, - }); + this.updateStyleAttribute('filter', field, values, updateOptions); this.dataState.dataMappingNeedUpdate = true; return this; } @@ -382,12 +368,7 @@ export default class BaseLayer extends EventEmitter values?: StyleAttributeOption, updateOptions?: Partial, ) { - this.pendingStyleAttributes.push({ - attributeName: 'shape', - attributeField: field, - attributeValues: values, - updateOptions, - }); + this.updateStyleAttribute('shape', field, values, updateOptions); return this; } public label( @@ -856,4 +837,38 @@ export default class BaseLayer extends EventEmitter callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined, }; } + + private updateStyleAttribute( + type: string, + field: StyleAttributeField, + values?: StyleAttributeOption, + updateOptions?: Partial, + ) { + if (!this.inited) { + this.pendingStyleAttributes.push({ + attributeName: type, + attributeField: field, + attributeValues: values, + updateOptions, + }); + } else { + this.styleAttributeService.updateStyleAttribute( + type, + { + // @ts-ignore + scale: { + field, + ...this.splitValuesAndCallbackInAttribute( + // @ts-ignore + values, + // @ts-ignore + this.getLayerConfig()[field], + ), + }, + }, + // @ts-ignore + updateOptions, + ); + } + } } diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index 25fa07b7c6..6bb80d4c98 100644 --- a/packages/layers/src/plugins/DataMappingPlugin.ts +++ b/packages/layers/src/plugins/DataMappingPlugin.ts @@ -121,6 +121,7 @@ export default class DataMappingPlugin implements ILayerPlugin { record.hasOwnProperty(field) || attribute.scale?.type === 'variable' ) { + // TODO:多字段，常量 params.push(record[field]); } }); diff --git a/packages/layers/src/plugins/FeatureScalePlugin.ts b/packages/layers/src/plugins/FeatureScalePlugin.ts index 955f904afd..a4f136a26c 100644 --- a/packages/layers/src/plugins/FeatureScalePlugin.ts +++ b/packages/layers/src/plugins/FeatureScalePlugin.ts @@ -106,11 +106,10 @@ export default class FeatureScalePlugin implements ILayerPlugin { const attributeScale = attribute.scale; const type = attribute.name; attributeScale.names = this.parseFields(attribute!.scale!.field || []); - const scales: IStyleScale[] = attributeScale.names.map( - (field: string) => { - return this.getOrCreateScale(field, attribute, dataArray); - }, - ); + const scales: IStyleScale[] = []; + attributeScale.names.forEach((field: string | number) => { + scales.push(this.getOrCreateScale(field, attribute, dataArray)); + }); // 为scales 设置值区间 if (scales.some((scale) => scale.type === StyleScaleType.VARIABLE)) { @@ -155,7 +154,7 @@ export default class FeatureScalePlugin implements ILayerPlugin { }); } private getOrCreateScale( - field: string, + field: string | number, attribute: IStyleAttribute, dataArray: IParseDataItem[], ) { @@ -175,7 +174,9 @@ export default class FeatureScalePlugin implements ILayerPlugin { * 'w*h' => ['w', 'h'] * 'w' => ['w'] */ - private parseFields(field: string[] | string): string[] { + private parseFields( + field: string[] | string | number[], + ): string[] | number[] { if (Array.isArray(field)) { return field; } @@ -186,7 +187,7 @@ export default class FeatureScalePlugin implements ILayerPlugin { } private createScale( - field: string, + field: string | number, values: unknown[] | string | undefined, data?: IParseDataItem[], ): IStyleScale { @@ -239,7 +240,7 @@ export default class FeatureScalePlugin implements ILayerPlugin { private createDefaultScaleConfig( type: ScaleTypeName, - field: string, + field: string | number, data?: IParseDataItem[], ) { const cfg: IScale = { diff --git a/packages/layers/src/point/shaders/image_vert.glsl b/packages/layers/src/point/shaders/image_vert.glsl index f8f7356d7f..da16dff456 100644 --- a/packages/layers/src/point/shaders/image_vert.glsl +++ b/packages/layers/src/point/shaders/image_vert.glsl @@ -1,4 +1,3 @@ - precision highp float; attribute vec3 a_Position; attribute vec4 a_Color; @@ -21,6 +20,7 @@ void main() { gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0)); gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio; - setPickingColor(a_PickingColor); + + setPickingColor(a_PickingColor); } diff --git a/stories/Components/components/Marker.tsx b/stories/Components/components/Marker.tsx index bfeeaca8f7..5343266a94 100644 --- a/stories/Components/components/Marker.tsx +++ b/stories/Components/components/Marker.tsx @@ -30,7 +30,9 @@ export default class MarkerComponent extends React.Component { offsets: [0, 20], }).setText('hello'); - const marker = new Marker() + const marker = new Marker({ + offsets: [0, -20], + }) .setLnglat({ lng: 120.184824, lat: 30.248341, diff --git a/stories/Layers/components/Line.tsx b/stories/Layers/components/Line.tsx index 9d8bea4e18..3149c5ca12 100644 --- a/stories/Layers/components/Line.tsx +++ b/stories/Layers/components/Line.tsx @@ -18,11 +18,14 @@ export default class LineDemo extends React.Component { id: 'map', map: new Mapbox({ center: [-74.006, 40.7128], - zoom: 15, + zoom: 11.5, style: 'dark', }), }); - const lineLayer = new LineLayer() + const lineLayer = new LineLayer({ + minZoom: 12, + maxZoom: 15, + }) .source(await response.json(), { parser: { type: 'json', @@ -31,6 +34,7 @@ export default class LineDemo extends React.Component { }) .size(3) .shape('line') + .active(true) .color('color', (v) => { return `rgb(${v[0]})`; }) diff --git a/stories/Layers/components/Point3D.tsx b/stories/Layers/components/Point3D.tsx index 8861432e01..bc5bd68af7 100644 --- a/stories/Layers/components/Point3D.tsx +++ b/stories/Layers/components/Point3D.tsx @@ -31,6 +31,11 @@ export default class Point3D extends React.Component { .active({ color: 'blue' }) .size([15, 10]); scene.addLayer(pointLayer); + setTimeout(() => { + pointLayer.size([20, 100]); + scene.render(); + console.log('update size'); + }, 2000); scene.render(); this.scene = scene; } diff --git a/stories/Layers/components/PointImage.tsx b/stories/Layers/components/PointImage.tsx index a6db650ed9..4af0192c04 100644 --- a/stories/Layers/components/PointImage.tsx +++ b/stories/Layers/components/PointImage.tsx @@ -45,6 +45,7 @@ export default class PointImage extends React.Component { }, }) .shape('name', ['00', '01', '02']) + .active(true) .size(30); scene.addLayer(imageLayer); imageLayer.on('click', (e) => {