Merge pull request #189 from antvis/travis

fix: many bugs

.travis.yml

@@ -33,3 +33,6 @@ script:
   - yarn lint
   - yarn test
   - yarn build
+
+notifications:
+   webhooks: https://oapi.dingtalk.com/robot/send?access_token=2dacc76d8b1ea8bcdc792b50f103d13efdba9ef53ec0caeb70631bc3add56118

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
 

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 属性信息
 
 ## 方法

docs/api/source/source.en.md

@@ -128,7 +128,59 @@ 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字段进行数据到颜色的映射
+```

docs/api/source/source.zh.md

@@ -134,3 +134,55 @@ 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字段进行数据到颜色的映射
+```

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",

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';
     }
   }
 

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;
     }>;
   };

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];
       }

packages/layers/src/core/BaseLayer.ts

@@ -259,13 +259,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> 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<ChildLayerStyleOptions = {}> extends EventEmitter
                 // @ts-ignore
                 attributeValues,
                 // @ts-ignore
-                this.getLayerConfig()[defaultName || attributeName],
+                this.getLayerConfig()[attributeName],
               ),
             },
           },
@@ -338,13 +332,15 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ) {
     // 设置 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<ChildLayerStyleOptions = {}> extends EventEmitter
     values?: StyleAttributeOption,
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ) {
-    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<ChildLayerStyleOptions = {}> extends EventEmitter
     values?: StyleAttributeOption,
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ) {
-    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<ChildLayerStyleOptions = {}> extends EventEmitter
     values?: StyleAttributeOption,
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ) {
-    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<ChildLayerStyleOptions = {}> extends EventEmitter
       callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined,
     };
   }
+
+  private updateStyleAttribute(
+    type: string,
+    field: StyleAttributeField,
+    values?: StyleAttributeOption,
+    updateOptions?: Partial<IStyleAttributeUpdateOptions>,
+  ) {
+    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,
+      );
+    }
+  }
 }

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]);
       }
     });

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 = {

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);
 
 }

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;
 }

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,

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]})`;
       })

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;
   }

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) => {