Shihuidev (#891)

* feat: 增加着色器的拾取计算控制、完善 arcmini * feat: 完善 enableShaderPick/disableShaderPick 功能 * style: lint style * feat: 补充调用高德地图公交线路查询 demo * style: lint style * feat: 优化弧线的纹理动画 * style: lint style * feat: 去除greatCircle 的纹理动画优化 * feat: 扩展点图层圆柱效果 * feat: 增加几何体的径向渐变配置 * style: lint style * fix: 修复bug 图层触发的事件跟图层设置的zIndex无关，只跟插入图层先后顺序有关 * style: lint style * feat: 补全挤出几何体拾取颜色的光照配置 * style: lint style * fix: 修复圆柱 cull 问题 mapbox amap 不同 * feat: 图层销毁时的内存泄漏 * style: lint style * feat: 平面弧线新增弧线偏移量的数据映射能力 * style: lint style * fix: 修复重复销毁bug * style: lint style * feat: 修复 texture 重复销毁问题 * style: lint style * fix: 修复图层叠加模式下的拾取失效问题 * style: lint style * fix: 修复纹理贴图在 zoom 大于 12 时存在的问题 * fix: 修复水波点颜色偏暗 * feat: 优化点图层的渲染效果，叠加渲染效果 * style: lint style * fix: 修复 layer contextmenu 事件丢失 * fix: 修复 map 类型 resize 失效 * style: lint style * feat: 增加瓦片地图的请求节流 * style: lint style * feat: 优化热力图在 radius 数值比较大时热力点边缘发生裁剪的现象 * style: lint style * fix: 修复resize 后 picking shiqu 拾取失败的问题 * feat: 优化 marker/popup 在容器边缘的表现 * feat: 增加 setEnableRender 方法 * style: lint style * feat: 增加城市图层扫光特效 * style: lint style * feat: 补全拾取色混合配置 * style: lint style * feat: 增加高德地图的面积大小点 * style: lint style * feat: 点优化边缘锯齿 * fix: 修复pointLayer stroke 变暗问题 * fix: 修复混合导致的拾取错误 * feat: add simple point 1.0 * style: lint style * feat: simple point support stroke * style: lint style * feat: 优化 simple point 边缘的锯齿 * style: lint style
2021-12-22 16:07:22 +08:00 · 2021-12-22 16:07:22 +08:00 · f6771f4c54
parent 28ebfefea8
commit f6771f4c54
8 changed files with 24 additions and 128 deletions
--- a/packages/core/src/services/renderer/IRendererService.ts
+++ b/packages/core/src/services/renderer/IRendererService.ts
@ -64,6 +64,7 @@ export interface IRendererService {
  getContainer(): HTMLElement | null;
  getCanvas(): HTMLCanvasElement | null;
  getGLContext(): WebGLRenderingContext;
+  getPointSizeRange(): Float32Array;
  viewport(size: { x: number; y: number; width: number; height: number }): void;
  readPixels(options: IReadPixelsOptions): Uint8Array;
  setState(): void;
--- a/packages/core/src/services/scene/ISceneService.ts
+++ b/packages/core/src/services/scene/ISceneService.ts
@ -15,6 +15,7 @@ export interface ISceneService {
  initMiniScene(config: IMapConfig & IRenderConfig): void;
  addLayer(layer: ILayer): void;
  getSceneConfig(): Partial<ISceneConfig>;
+  getPointSizeRange(): Float32Array;
  render(): void;
  getSceneContainer(): HTMLDivElement;
  getMarkerContainer(): HTMLElement;
--- a/packages/core/src/services/scene/SceneService.ts
+++ b/packages/core/src/services/scene/SceneService.ts
@ -376,6 +376,11 @@ export default class Scene extends EventEmitter implements ISceneService {
    return this.configService.getSceneConfig(this.id as string);
  }

+  // get point size info
+  public getPointSizeRange() {
+    return this.rendererService.getPointSizeRange();
+  }
+
  public addMarkerContainer(): void {
    // @ts-ignore
    const mapContainer = this.$container.parentElement as HTMLElement;
--- a/packages/layers/src/point/shaders/simplePoint_vert.glsl
+++ b/packages/layers/src/point/shaders/simplePoint_vert.glsl
@ -22,7 +22,7 @@ varying float v_innerRadius;
 #pragma include "project"
 void main() {
  v_color = a_Color;
-  v_blur = 1.0 - 0.05;
+  v_blur = 1.0 - max(2.0/a_Size, 0.05);
  v_innerRadius = max((a_Size - u_stroke_width) / a_Size, 0.0);

  // cal style mapping - 数据纹理映射部分的计算
--- a/packages/renderer/src/regl/index.ts
+++ b/packages/renderer/src/regl/index.ts
@ -92,6 +92,10 @@ export default class ReglRendererService implements IRendererService {
    };
  }

+  public getPointSizeRange() {
+    return this.gl._gl.getParameter(this.gl._gl.ALIASED_POINT_SIZE_RANGE);
+  }
+
  public testExtension(name: string) {
    // OES_texture_float
    return !!this.getGLContext().getExtension(name);
--- a/packages/scene/src/index.ts
+++ b/packages/scene/src/index.ts
@ -404,7 +404,6 @@ class Scene
      .to(constructor)
      .whenTargetNamed(name);
  }
-  // 资源管理

  // 控制 shader pick 计算
  public enableShaderPick() {
@ -415,6 +414,11 @@ class Scene
    this.layerService.disableShaderPick();
  }

+  // get current point size info
+  public getPointSizeRange() {
+    return this.sceneService.getPointSizeRange();
+  }
+
  private initComponent(id: string | HTMLDivElement) {
    this.controlService.init(
      {
--- a/stories/Map/components/simplePoint.tsx
+++ b/stories/Map/components/simplePoint.tsx
@ -51,12 +51,12 @@ export default class SimplePoint extends React.Component {
      )
      .shape('simple')
      .color('#800')
-      .size(50)
+      .size(15)
      .style({
        stroke: '#f00',
        strokeOpacity: 0.5,
-        strokeWidth: 10,
-        opacity: 0.5,
+        // strokeWidth: 10,
+        // opacity: 0.5,
      })
      .active({ color: '#00f' });

@ -64,6 +64,7 @@ export default class SimplePoint extends React.Component {

    scene.on('loaded', () => {
      scene.addLayer(layer);
+      console.log(scene.getPointSizeRange());
    });
  }

--- a/stories/MapPerformance/components/Map.tsx
+++ b/stories/MapPerformance/components/Map.tsx
@ -22,126 +22,6 @@ export default class PointTest extends React.Component {
      }),
    });

-    // // @ts-ignore
-    // var Stats = function() {
-    //   function h(a) {
-    //     c.appendChild(a.dom);
-    //     return a;
-    //   }
-    //   function k(a) {
-    //     for (var d = 0; d < c.children.length; d++)
-    //       // @ts-ignore
-    //       c.children[d].style.display = d === a ? 'block' : 'none';
-    //     l = a;
-    //   }
-    //   var l = 0,
-    //     c = document.createElement('div');
-    //   c.style.cssText =
-    //     'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
-    //   c.addEventListener(
-    //     'click',
-    //     function(a) {
-    //       a.preventDefault();
-    //       k(++l % c.children.length);
-    //     },
-    //     !1,
-    //   );
-    //   var g = (performance || Date).now(),
-    //     e = g,
-    //     a = 0,
-    //     // @ts-ignore
-    //     r = h(new Stats.Panel('FPS', '#0ff', '#002')),
-    //     // @ts-ignore
-    //     f = h(new Stats.Panel('MS', '#0f0', '#020'));
-    //   // @ts-ignore
-    //   if (self.performance && self.performance.memory)
-    //     // @ts-ignore
-    //     var t = h(new Stats.Panel('MB', '#f08', '#201'));
-    //   k(0);
-    //   return {
-    //     REVISION: 16,
-    //     dom: c,
-    //     addPanel: h,
-    //     showPanel: k,
-    //     begin: function() {
-    //       g = (performance || Date).now();
-    //     },
-    //     end: function() {
-    //       a++;
-    //       var c = (performance || Date).now();
-    //       f.update(c - g, 200);
-    //       // @ts-ignore
-    //       if (
-    //         c > e + 1e3 &&
-    //         (r.update((1e3 * a) / (c - e), 100), (e = c), (a = 0), t)
-    //       ) {
-    //         // @ts-ignore
-    //         var d = performance.memory;
-    //         t.update(d.usedJSHeapSize / 1048576, d.jsHeapSizeLimit / 1048576);
-    //       }
-    //       return c;
-    //     },
-    //     update: function() {
-    //       g = this.end();
-    //     },
-    //     domElement: c,
-    //     setMode: k,
-    //   };
-    // };
-    // // @ts-ignore
-    // Stats.Panel = function(h, k, l) {
-    //   var c = Infinity,
-    //     g = 0,
-    //     e = Math.round,
-    //     a = e(window.devicePixelRatio || 1),
-    //     r = 80 * a,
-    //     f = 48 * a,
-    //     t = 3 * a,
-    //     u = 2 * a,
-    //     d = 3 * a,
-    //     m = 15 * a,
-    //     n = 74 * a,
-    //     p = 30 * a,
-    //     q = document.createElement('canvas');
-    //   q.width = r;
-    //   q.height = f;
-    //   q.style.cssText = 'width:80px;height:48px';
-    //   var b = q.getContext('2d');
-    //   b.font = 'bold ' + 9 * a + 'px Helvetica,Arial,sans-serif';
-    //   b.textBaseline = 'top';
-    //   b.fillStyle = l;
-    //   b.fillRect(0, 0, r, f);
-    //   b.fillStyle = k;
-    //   b.fillText(h, t, u);
-    //   b.fillRect(d, m, n, p);
-    //   b.fillStyle = l;
-    //   b.globalAlpha = 0.9;
-    //   b.fillRect(d, m, n, p);
-    //   // @ts-ignore
-    //   return {
-    //     dom: q,
-    //     update: function(f, v) {
-    //       c = Math.min(c, f);
-    //       g = Math.max(g, f);
-    //       b.fillStyle = l;
-    //       b.globalAlpha = 1;
-    //       b.fillRect(0, 0, r, m);
-    //       b.fillStyle = k;
-    //       b.fillText(e(f) + ' ' + h + ' (' + e(c) + '-' + e(g) + ')', t, u);
-    //       // @ts-ignore
-    //       b.drawImage(q, d + a, m, n - a, p, d, m, n - a, p);
-    //       b.fillRect(d + n - a, m, a, p);
-    //       b.fillStyle = l;
-    //       b.globalAlpha = 0.9;
-    //       b.fillRect(d + n - a, m, a, e((1 - f / v) * p));
-    //     },
-    //   };
-    // };
-    // 'object' === typeof module && (module.exports = Stats);
-    // // @ts-ignore
-    // var stats = new Stats();
-    // document.body.appendChild(stats.dom);
-
    // let address = 'https://gw.alipayobjects.com/os/bmw-prod/e76d89f4-aa69-4974-90b7-b236904a43b1.json' // 100
    // let address = 'https://gw.alipayobjects.com/os/bmw-prod/edc8219a-b095-4451-98e9-3e387e290087.json' // 10000
    // let address = 'https://gw.alipayobjects.com/os/bmw-prod/2c37f08b-3fe6-4c68-a699-dc15cfc217f1.json' // 50000
@ -161,16 +41,16 @@ export default class PointTest extends React.Component {
          })
          .size(10)
          .color('#f00')
-          .shape('circle')
+          // .shape('circle') // circle simple
+          .shape('simple')
          .style({
            opacity: 1.0,
          })
          .select(true);
        // .animate(true)
        // .active(true);
-
-        scene.diasbleShaderPick();
        scene.on('loaded', () => {
+          console.log('loaded');
          scene.addLayer(layer);
        });
      });