fix(layers): heatmap 3d effect

.cache/caches/gatsby-transformer-remark/diskstore-2b8cd1df4f8a6941bff4108301b5d6a9.json

@@ -0,0 +1 @@
+{"expireTime":9007200828184475000,"key":"transformer-remark-markdown-html-99b5b2f90b0432fb92044e231041ffca-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""}

.cache/caches/gatsby-transformer-remark/diskstore-308215140d91d466921fde8b44e96c70.json

@@ -0,0 +1 @@
+{"expireTime":9007200828184475000,"key":"transformer-remark-markdown-html-b627c832a1f77c6bd67b3f67116e04eb-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""}

.cache/caches/gatsby-transformer-remark/diskstore-3cf9cbd2e002119e2f428dfed8eb94da.json

@@ -0,0 +1 @@
+{"expireTime":9007200828184475000,"key":"transformer-remark-markdown-html-30a51869612bca077eda87f35f662bad-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""}

.cache/caches/gatsby-transformer-remark/diskstore-57199a69f7efd5decc9f72929e6eaab6.json

@@ -0,0 +1 @@
+{"expireTime":9007200828184475000,"key":"transformer-remark-markdown-html-0b8b19ff19f6a64f7b2cae67200ccd88-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""}

.cache/caches/gatsby-transformer-remark/diskstore-8a657829abac5ed5e9e205e519d6ded0.json

@@ -0,0 +1 @@
+{"expireTime":9007200828139761000,"key":"transformer-remark-markdown-toc-99b5b2f90b0432fb92044e231041ffca-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""}

.cache/caches/gatsby-transformer-remark/diskstore-9cf731425f928d78c08a41fa53dbea26.json

@@ -0,0 +1 @@
+{"expireTime":9007200828184475000,"key":"transformer-remark-markdown-html-6e9c5aea4f7ea7c85d806fb35a09a394-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""}

.cache/caches/gatsby-transformer-remark/diskstore-b196fbb424293a9c110515c8e22586c7.json

@@ -0,0 +1 @@
+{"expireTime":9007200828184475000,"key":"transformer-remark-markdown-html-e0eda26454f7aaeda47989e111060318-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""}

.cache/caches/gatsby-transformer-remark/diskstore-bed602677090371493b02b2541d3b187.json

@@ -0,0 +1 @@
+{"expireTime":9007200828184475000,"key":"transformer-remark-markdown-html-51cffb57f20c685f94203902c79f04c6-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""}

.cache/caches/gatsby-transformer-remark/diskstore-bfa695e84c9fbd040b43c6cebb35a0a8.json

@@ -0,0 +1 @@
+{"expireTime":9007200828184475000,"key":"transformer-remark-markdown-html-94a83b1b7402a40717e5c1b92c85015a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""}

.cache/caches/gatsby-transformer-remark/diskstore-dc1901f7f1baf243df1556f52717b2ba.json

@@ -0,0 +1 @@
+{"expireTime":9007200828139769000,"key":"transformer-remark-markdown-toc-57531815410aa78dc10e42270cb201dd-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""}

.cache/caches/gatsby-transformer-remark/diskstore-fbddf0de549e59cfa8bf242898a85984.json

@@ -0,0 +1 @@
+{"expireTime":9007200828139770000,"key":"transformer-remark-markdown-toc-51dbb367647851670b43ae45a9e937df-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""}

examples/heatmap/heatmap/demo/meta.json

@@ -5,7 +5,7 @@
   },
   "demos": [
     {
-      "filename": "grid.js",
+      "filename": "world3d.js",
       "title": "网格热力图"
     },
     {

examples/heatmap/heatmap/demo/world.js

@@ -16,7 +16,9 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64
       new HeatMapLayer({
       })
       .source(data)
-      .size('capacity', [0, 1]) // weight映射通道
+      .size('capacity', [0, 1])
+      .shape('heatmap')
+       // weight映射通道
       .style({
         intensity: 10,
         radius: 5,

examples/heatmap/heatmap/demo/world3d.js

@@ -0,0 +1,41 @@
+import { Scene } from '@l7/scene';
+import { HeatMapLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 0,
+  center: [116.49434030056, 39.868073421167621],
+  type: 'mapbox',
+  zoom: 3,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapLayer({
+      })
+      .source(data)
+      .size('capacity', [0, 1])
+      .shape('heatmap3D')
+       // weight映射通道
+      .style({
+        intensity: 10,
+        radius: 5,
+        opacity: 1.0,
+        rampColors: {
+          colors: [
+            '#2E8AE6',
+            '#69D1AB',
+            '#DAF291',
+            '#FFD591',
+            '#FF7A45',
+            '#CF1D49',
+          ],
+          positions: [0,0.2, 0.4, 0.6, 0.8, 1.0],
+        },
+      });
+    scene.addLayer(layer);
+
+
+  });

examples/point/basic/demo/meta.json

@@ -13,6 +13,11 @@
       "filename": "world.js",
       "title": "气泡图 - 电厂装机量"
 
+    },
+    {
+      "filename": "text.js",
+      "title": "文本"
+
     }
   ]
 }

examples/point/basic/demo/text.js

@@ -0,0 +1,41 @@
+import { Scene } from '@l7/scene';
+import { PointLayer, PointImageLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.40, 31.258134],
+  zoom: 15,
+  minZoom: 10
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer({
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('circle')
+        .size('unit_price', [5, 25])
+        .color('#5B8FF9')
+        .label('name')
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1,
+          strokeColor: "#5B8FF9",
+
+        })
+
+        scene.addLayer(pointLayer);
+        console.log(pointLayer);
+
+  });
+
+

examples/point/image/demo/size.js

@@ -34,7 +34,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
         }
       })
       .shape('name', ['00', '01','02'])
-      .size('unit_price', [30, 100])
+      .size('unit_price', [5, 15])
        scene.addLayer(imageLayer);
   });
 

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

@@ -61,6 +61,7 @@ export interface ILayer {
   size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   color(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
+  label(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   // pattern(field: string, value: StyleAttributeOption): ILayer;
   // filter(field: string, value: StyleAttributeOption): ILayer;
   // active(option: ActiveOption): ILayer;

packages/layers/src/core/BaseLayer.ts

@@ -128,6 +128,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   @lazyInject(TYPES.ILayerService)
   protected readonly layerService: ILayerService;
 
+  protected enodeOptions: {
+    [type: string]: {
+      field: StyleAttributeField;
+      values?: StyleAttributeOption;
+    };
+  } = {};
+
   private encodedData: IEncodeFeature[];
 
   private configSchema: object;
@@ -228,6 +235,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     values?: StyleAttributeOption,
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ) {
+    this.enodeOptions.shape = {
+      field,
+      values,
+    };
     this.styleAttributeService.updateStyleAttribute(
       'shape',
       {
@@ -246,6 +257,29 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     );
     return this;
   }
+  public label(
+    field: StyleAttributeField,
+    values?: StyleAttributeOption,
+    updateOptions?: Partial<IStyleAttributeUpdateOptions>,
+  ) {
+    this.styleAttributeService.updateStyleAttribute(
+      'label',
+      {
+        // @ts-ignore
+        scale: {
+          field,
+          ...this.splitValuesAndCallbackInAttribute(
+            // @ts-ignore
+            values,
+            null,
+          ),
+        },
+      },
+      // @ts-ignore
+      updateOptions,
+    );
+    return this;
+  }
 
   public source(data: any, options?: ISourceCFG): ILayer {
     this.sourceOption = {

packages/layers/src/heatmap/heatmap.ts

@@ -56,7 +56,8 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
 
   protected renderModels() {
     const { clear, useFramebuffer } = this.rendererService;
-
+    const shapeAttr = this.styleAttributeService.getLayerStyleAttribute('shape');
+    const shapeType = shapeAttr?.scale?.field || 'heatmap';
     useFramebuffer(this.heatmapFramerBuffer, () => {
       clear({
         color: [0, 0, 0, 0],
@@ -66,17 +67,19 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
       });
       this.drawIntensityMode();
     });
-    this.draw3DHeatMap();
+    // this.draw3DHeatMap();
+    shapeType === 'heatmap' ? this.drawColorMode(): this.draw3DHeatMap();
     // this.drawIntensityMode();
     return this;
   }
 
   protected buildModels() {
+    const shapeAttr = this.styleAttributeService.getLayerStyleAttribute('shape');
+    const shapeType = shapeAttr?.scale?.field || 'heatmap';
     this.registerBuiltinAttributes(this);
     this.intensityModel = this.buildHeatMapIntensity();
     this.models = [this.intensityModel];
-    // this.colorModel = this.buildHeatmapColor();
-    this.colorModel = this.build3dHeatMap();
+    this.colorModel = shapeType === 'heatmap' ? this.buildHeatmapColor(): this.build3dHeatMap();
     this.models.push(this.colorModel);
     const { rampColors } = this.getStyleOptions();
     const imageData = generateColorRamp(rampColors as IColorRamp);
@@ -95,8 +98,8 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
         height,
         wrapS: gl.CLAMP_TO_EDGE,
         wrapT: gl.CLAMP_TO_EDGE,
-        min: gl.NEAREST,
-        mag: gl.NEAREST,
+        min: gl.LINEAR,
+        mag: gl.LINEAR,
       }),
     });
 
@@ -175,9 +178,9 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
         enable: true,
         func: {
           srcRGB: gl.ONE,
-          srcAlpha: 1,
+          srcAlpha: gl.ONE_MINUS_SRC_ALPHA,
           dstRGB: gl.ONE,
-          dstAlpha: 1,
+          dstAlpha: gl.ONE_MINUS_SRC_ALPHA,
         },
       },
     });
@@ -280,7 +283,7 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
   private build3dHeatMap() {
     const { getViewportSize } = this.rendererService;
     const { width, height } = getViewportSize();
-    const triangulation = heatMap3DTriangulation(width / 4.0, height / 4.0);
+    const triangulation = heatMap3DTriangulation(width / 2.0, height / 2.0);
     this.shaderModuleService.registerModule('heatmap3dColor', {
       vs: heatmap3DVert,
       fs: heatmap3DFrag,

packages/layers/src/heatmap/shaders/heatmap_3d_frag.glsl

@@ -5,14 +5,13 @@ varying vec2 v_texCoord;
 varying float v_intensity;
 
 void main(){
-    float intensity = texture2D(u_texture, v_texCoord).r;
+
+     float intensity = texture2D(u_texture, v_texCoord).r;
      vec2 ramp_pos = vec2(
         fract(16.0 * (1.0 - v_intensity)),
         floor(16.0 * (1.0 - v_intensity)) / 16.0);
     // vec4 color = texture2D(u_colorTexture,vec2(0.5,1.0-intensity));
     vec4 color = texture2D(u_colorTexture,ramp_pos);
     gl_FragColor = color;
-    // gl_FragColor.a = color.a * smoothstep(0.0, 0.01, v_intensity) * u_opacity;
-    // gl_FragColor.a = 0.2;
-
+    gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;
 }

packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl

@@ -40,6 +40,6 @@ void main() {
 
   v_intensity = texture2D(u_texture, v_texCoord).r;
   fh = toBezier(v_intensity, b).y;
-  gl_Position = project_common_position_to_clipspace(vec4(position.xy, v_intensity * 50., 1.0));
+  gl_Position = project_common_position_to_clipspace(vec4(position.xy, fh * 50., 1.0));
 
 }

packages/layers/src/heatmap/shaders/heatmap_frag.glsl

@@ -2,15 +2,16 @@ uniform sampler2D u_texture;
 uniform sampler2D u_colorTexture;
 uniform float u_opacity;
 varying vec2 v_texCoord;
+varying float v_intensity;
 
 void main(){
-    float intensity = texture2D(u_texture, v_texCoord).r;
+     float intensity = texture2D(u_texture, v_texCoord).r;
      vec2 ramp_pos = vec2(
         fract(16.0 * (1.0 - intensity)),
         floor(16.0 * (1.0 - intensity)) / 16.0);
     // vec4 color = texture2D(u_colorTexture,vec2(0.5,1.0-intensity));
     vec4 color = texture2D(u_colorTexture,ramp_pos);
     gl_FragColor = color;
-    gl_FragColor.a = color.a * smoothstep(0.,0.01,intensity) * u_opacity;
+    gl_FragColor.a = color.a * smoothstep(0.,0.05,intensity) * u_opacity;
 
 }

packages/layers/src/heatmap/shaders/heatmap_vert.glsl

@@ -3,8 +3,9 @@ attribute vec3 a_Position;
 attribute vec2 a_Uv;
 uniform sampler2D u_texture;
 varying vec2 v_texCoord;
+varying float v_intensity;
 void main() {
    v_texCoord = a_Uv;
-   float intensity = texture2D(u_texture, v_texCoord).r;
-   gl_Position = vec4(a_Position.xy,intensity -0.5, 1.);
+  v_intensity = texture2D(u_texture, v_texCoord).r;
+   gl_Position = vec4(a_Position.xy, 0, 1.);
 }