Merge pull request #194 from antvis/fix_layer

Fix layer

docs/api/source/source.en.md

@@ -145,42 +145,42 @@ layer.source(data, {
 - targetField 关联的地理数据字段名称
 
 ```javascript
- const data = {
+const data = {
-  "type": "FeatureCollection",
+  type: 'FeatureCollection',
-  "features": [
+  features: [
     {
-      "type": "Feature",
+      type: 'Feature',
-      "properties": {
+      properties: {
-        "city":'北京'
+        city: '北京',
       },
-      "geometry": {
+      geometry: {},
-      }
+    },
-    }
+  ],
-  ]
+};
- }
 
 const data2 = [
   {
-    name:'北京',
+    name: '北京',
-    value: 13
+    value: 13,
   },
   {
-    name:'天津',
+    name: '天津',
-    value: 20
+    value: 20,
-  }
+  },
-]
+];
 // data 是地理数据
 // data2 属性数据或者业务数据
 
 // 通过join方法我们就可以将两个数据连接到一起
 
- layer.source(data,{
+layer
-   transforms:[
+  .source(data, {
-     type: 'join'
+    transforms: [
-     sourceField: 'name' //data1 对应字段名
+      (type: 'join'),
-     targetField: 'city' // data 对应字段名
+      (sourceField: 'name'), //data1 对应字段名
-     data: data2,
+      (targetField: 'city'), // data 对应字段名
-   ]
+      (data: data2),
- })
+    ],
- .color('value') // 可以采用data1的value字段进行数据到颜色的映射
+  })
+  .color('value'); // 可以采用data1的value字段进行数据到颜色的映射
 ```

docs/api/source/source.zh.md

@@ -147,42 +147,42 @@ layer.source(data, {
 - targetField 关联的地理数据字段名称
 
 ```javascript
- const data = {
+const data = {
-  "type": "FeatureCollection",
+  type: 'FeatureCollection',
-  "features": [
+  features: [
     {
-      "type": "Feature",
+      type: 'Feature',
-      "properties": {
+      properties: {
-        "city":'北京'
+        city: '北京',
       },
-      "geometry": {
+      geometry: {},
-      }
+    },
-    }
+  ],
-  ]
+};
- }
 
 const data2 = [
   {
-    name:'北京',
+    name: '北京',
-    value: 13
+    value: 13,
   },
   {
-    name:'天津',
+    name: '天津',
-    value: 20
+    value: 20,
-  }
+  },
-]
+];
 // data 是地理数据
 // data2 属性数据或者业务数据
 
 // 通过join方法我们就可以将两个数据连接到一起
 
- layer.source(data,{
+layer
-   transforms:[
+  .source(data, {
-     type: 'join'
+    transforms: [
-     sourceField: 'name' //data1 对应字段名
+      (type: 'join'),
-     targetField: 'city' // data 对应字段名
+      (sourceField: 'name'), //data1 对应字段名
-     data: data2,
+      (targetField: 'city'), // data 对应字段名
-   ]
+      (data: data2),
- })
+    ],
- .color('value') // 可以采用data1的value字段进行数据到颜色的映射
+  })
+  .color('value'); // 可以采用data1的value字段进行数据到颜色的映射
 ```

lerna.json

@@ -14,7 +14,7 @@
       "message": "chore: publish"
     }
   },
-  "version": "2.0.15",
+  "version": "2.0.16",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "publishConfig": {

package.json

@@ -62,7 +62,7 @@
     "eslint": "^6.6.0",
     "eslint-config-egg": "^7.5.1",
     "eslint-plugin-html": "^6.0.0",
-    "gatsby": "^2.17.7",
+    "gatsby": "2.19.5",
     "gatsby-plugin-google-analytics": "^2.1.27",
     "gatsby-remark-prettier": "^1.0.0",
     "geotiff": "^1.0.0-beta.6",
@@ -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",
+    "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths --no-uglify",
     "site:clean": "gatsby clean",
     "site:deploy": "yarn run site:build && gh-pages -d public",
     "site:publish": "gh-pages -d public",

packages/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,14 +24,14 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.15",
+    "@antv/l7-core": "^2.0.16",
-    "@antv/l7-utils": "^2.0.15",
+    "@antv/l7-utils": "^2.0.16",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",
     "load-styles": "^2.0.0"
   },
-  "gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
   "publishConfig": {
     "access": "public"
   }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-core",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-utils": "^2.0.15",
+    "@antv/l7-utils": "^2.0.16",
     "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",
@@ -46,7 +46,7 @@
     "@types/lodash": "^4.14.138",
     "@types/viewport-mercator-project": "^6.1.0"
   },
-  "gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
   "publishConfig": {
     "access": "public"
   }

packages/core/src/services/layer/LayerService.ts

@@ -72,6 +72,7 @@ export default class LayerService implements ILayerService {
     //
     this.alreadyInRendering = true;
     this.clear();
+    this.updateRenderOrder();
     this.layers
       .filter((layer) => layer.inited)
       .filter((layer) => layer.isVisible())

packages/core/src/services/renderer/passes/PixelPickingPass.ts

@@ -209,18 +209,18 @@ export default class PixelPickingPass<
         this.triggerHoverOnLayer(target);
         this.layer.setCurrentPickId(null);
       }
-    });
 
-    if (enableHighlight) {
+      if (enableHighlight) {
-      this.highlightPickedFeature(pickedColors);
+        this.highlightPickedFeature(pickedColors);
-    }
+      }
-    if (
+      if (
-      enableSelect &&
+        enableSelect &&
-      type === 'click' &&
+        type === 'click' &&
-      pickedColors?.toString() !== [0, 0, 0, 0].toString()
+        pickedColors?.toString() !== [0, 0, 0, 0].toString()
-    ) {
+      ) {
-      this.selectFeature(pickedColors);
+        this.selectFeature(pickedColors);
-    }
+      }
+    });
   };
 
   private triggerHoverOnLayer(target: {

packages/l7/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,14 +24,14 @@
   "author": "antv",
   "license": "MIT",
   "dependencies": {
-    "@antv/l7-component": "^2.0.15",
+    "@antv/l7-component": "^2.0.16",
-    "@antv/l7-core": "^2.0.15",
+    "@antv/l7-core": "^2.0.16",
-    "@antv/l7-layers": "^2.0.15",
+    "@antv/l7-layers": "^2.0.16",
-    "@antv/l7-maps": "^2.0.15",
+    "@antv/l7-maps": "^2.0.16",
-    "@antv/l7-scene": "^2.0.15",
+    "@antv/l7-scene": "^2.0.16",
     "@babel/runtime": "^7.7.7"
   },
-  "gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
   "publishConfig": {
     "access": "public"
   }

packages/layers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-layers",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "L7's collection of built-in layers",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,9 +22,9 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.15",
+    "@antv/l7-core": "^2.0.16",
-    "@antv/l7-source": "^2.0.15",
+    "@antv/l7-source": "^2.0.16",
-    "@antv/l7-utils": "^2.0.15",
+    "@antv/l7-utils": "^2.0.16",
     "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.1.0",
     "@turf/meta": "^6.0.2",
@@ -49,7 +49,7 @@
     "@types/gl-matrix": "^2.4.5",
     "@types/lodash": "^4.14.138"
   },
-  "gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
   "publishConfig": {
     "access": "public"
   }

packages/layers/src/core/BaseLayer.ts

@@ -173,6 +173,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
     super();
     this.name = config.name || this.id;
+    this.zIndex = config.zIndex || 0;
     this.rawConfig = config;
   }
 

packages/layers/src/line/shaders/line_frag.glsl

@@ -24,17 +24,17 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 void main() {
   gl_FragColor = v_color;
   // anti-alias
-  float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)) * u_opacity;
+  float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
-  // gl_FragColor.a *= blur;
+  gl_FragColor.a *= blur * 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;
-      gl_FragColor.a *= alpha * blur;
+      gl_FragColor.a *= alpha;
   }
  // dash line
   if(u_line_type == LineTypeDash) {
-    gl_FragColor.a *= blur  * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
+    gl_FragColor.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
   }
 
   gl_FragColor = filterColor(gl_FragColor);

packages/layers/src/plugins/PixelPickingPlugin.ts

@@ -49,9 +49,7 @@ export default class PixelPickingPlugin implements ILayerPlugin {
           update: (feature: IEncodeFeature, featureIdx: number) => {
             // 只有开启拾取才需要 encode
             const { id } = feature;
-            return enablePicking && layer.isVisible()
+            return enablePicking ? encodePickingColor(id as number) : [0, 0, 0];
-              ? encodePickingColor(id as number)
-              : [0, 0, 0];
           },
         },
       });

packages/layers/src/point/models/text.ts

@@ -89,13 +89,16 @@ export default class TextModel extends BaseModel {
     const {
       fontWeight = 800,
       fontFamily = 'sans-serif',
+      opacity = 1.0,
       stroke = '#fff',
       strokeWidth = 0,
+      strokeOpacity = 1,
     } = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;
     this.updateTexture();
     const { canvas } = this.fontService;
     return {
-      u_opacity: 1.0,
+      u_opacity: opacity,
+      u_stroke_opacity: strokeOpacity,
       u_sdf_map: this.texture,
       u_stroke: rgb2arr(stroke),
       u_halo_blur: 0.5,

packages/layers/src/point/shaders/text_frag.glsl

@@ -4,6 +4,7 @@ uniform sampler2D u_sdf_map;
 uniform float u_gamma_scale : 0.5;
 uniform float u_font_size : 24;
 uniform float u_opacity : 1.0;
+uniform float u_stroke_opacity: 1.0;
 uniform vec4 u_stroke : [0, 0, 0, 1];
 uniform float u_strokeWidth : 2.0;
 uniform float u_halo_blur : 0.5;
@@ -27,6 +28,6 @@ void main() {
 
   highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
 
-  gl_FragColor = mix(v_color * u_opacity, u_stroke, smoothstep(0., 0.5, 1. - dist)) * alpha;
+  gl_FragColor = mix(v_color * u_opacity, u_stroke * u_stroke_opacity, smoothstep(0., 0.5, 1. - dist)) * alpha;
   gl_FragColor = filterColor(gl_FragColor);
 }

packages/maps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-maps",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,8 +23,8 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.15",
+    "@antv/l7-core": "^2.0.16",
-    "@antv/l7-utils": "^2.0.15",
+    "@antv/l7-utils": "^2.0.16",
     "@babel/runtime": "^7.7.7",
     "gl-matrix": "^3.1.0",
     "inversify": "^5.0.1",
@@ -37,7 +37,7 @@
     "@types/mapbox-gl": "^0.54.3",
     "@types/viewport-mercator-project": "^6.1.0"
   },
-  "gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
   "publishConfig": {
     "access": "public"
   }

packages/renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-renderer",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,14 +25,14 @@
     "gl": "^4.4.0"
   },
   "dependencies": {
-    "@antv/l7-core": "^2.0.15",
+    "@antv/l7-core": "^2.0.16",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "lodash": "^4.17.15",
     "reflect-metadata": "^0.1.13",
     "regl": "^1.3.11"
   },
-  "gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
   "publishConfig": {
     "access": "public"
   }

packages/scene/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-scene",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,17 +22,17 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-component": "^2.0.15",
+    "@antv/l7-component": "^2.0.16",
-    "@antv/l7-core": "^2.0.15",
+    "@antv/l7-core": "^2.0.16",
-    "@antv/l7-maps": "^2.0.15",
+    "@antv/l7-maps": "^2.0.16",
-    "@antv/l7-renderer": "^2.0.15",
+    "@antv/l7-renderer": "^2.0.16",
-    "@antv/l7-utils": "^2.0.15",
+    "@antv/l7-utils": "^2.0.16",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",
     "reflect-metadata": "^0.1.13"
   },
-  "gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
   "publishConfig": {
     "access": "public"
   }

packages/source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-source",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,8 +24,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.15",
+    "@antv/l7-core": "^2.0.16",
-    "@antv/l7-utils": "^2.0.15",
+    "@antv/l7-utils": "^2.0.16",
     "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",
@@ -44,7 +44,7 @@
     "@types/d3-hexbin": "^0.2.3",
     "@types/lodash": "^4.14.138"
   },
-  "gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
   "publishConfig": {
     "access": "public"
   }

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-utils",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@types/d3-color": "^1.2.2"
   },
-  "gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
   "publishConfig": {
     "access": "public"
   }

stories/Layers/components/Arc2DLine.tsx

@@ -42,7 +42,7 @@ export default class Arc2DLineDemo extends React.Component {
         trailLength: 0.4,
       })
       .style({
-        opacity: 0.6,
+        opacity: 0.1,
       });
     scene.addLayer(lineLayer);
     scene.render();

stories/Layers/components/Arcline.tsx

@@ -53,6 +53,7 @@ export default class ArcLineDemo extends React.Component {
       })
       .style({
         lineType: 'dash',
+        opacity: 0.5,
       });
     scene.addLayer(lineLayer);
     scene.render();

stories/Layers/components/Line.tsx

@@ -36,15 +36,21 @@ export default class LineDemo extends React.Component {
       .shape('line')
       .active(true)
       .color('color', (v) => {
-        return `rgb(${v[0]})`;
+        return `rgb(${v})`;
       })
       .animate({
         enable: true,
         interval: 0.5,
         trailLength: 0.4,
         duration: 4,
+      })
+      .style({
+        opacity: 1.0,
       });
 
+    lineLayer.on('click',(e)=> {
+      console.log(e);
+    })
     scene.addLayer(lineLayer);
     this.scene = scene;
   }

stories/Layers/components/Text.tsx

@@ -65,8 +65,9 @@ export default class TextLayerDemo extends React.Component {
     const styleOptions = {
       textAnchor: 'center',
       strokeWidth: 1,
+      opacity: 1,
     };
-    const rasterFolder = gui.addFolder('栅格可视化');
+    const rasterFolder = gui.addFolder('文本可视化');
     rasterFolder
       .add(styleOptions, 'textAnchor', [
         'center',
@@ -85,6 +86,23 @@ export default class TextLayerDemo extends React.Component {
         });
         scene.render();
       });
+
+    rasterFolder
+      .add(styleOptions, 'strokeWidth', 0, 10)
+      .onChange((strokeWidth: number) => {
+        pointLayer.style({
+          strokeWidth,
+        });
+        scene.render();
+      });
+    rasterFolder
+      .add(styleOptions, 'opacity', 0, 1)
+      .onChange((opacity: number) => {
+        pointLayer.style({
+          opacity,
+        });
+        scene.render();
+      });
     // });
   }
 

stories/Layers/components/dash.tsx

@@ -43,7 +43,8 @@ export default class DashLineDemo extends React.Component {
         ].reverse(),
       )
       .style({
-        lineType: 'dash',
+        // lineType: 'dash',
+        opacity: 0.5,
       });
 
     scene.addLayer(lineLayer);