fix: pointlayer image 模糊&事件& marker add some new method

.storybook/main.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+// Export a function. Accept the base config as the only param.
+module.exports = {
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.stories\**.svg$/,
+      loader: 'svg-inline-loader'
+    }
+    );
+    return config;
+  },
+};

docs/api/component/marker.zh.md

@@ -15,7 +15,7 @@ Marker
 
 - color        `string`   ![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
+- anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right
 - offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
 - extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息
 
@@ -37,6 +37,12 @@ Marker
 
 获取 marker dom Element
 
+### setElement
+
+- element `dom`
+
+设置 element 通过此方法更新 Marker 样式
+
 #### getLngLat
 
 获取 marker 经纬度坐标
@@ -45,6 +51,14 @@ Marker
 
 开启或者关闭 marker 弹出框
 
+#### openPopup
+
+打开 Popup
+
+### closePopup
+
+关闭 popup
+
 #### setPopup
 
 为 marker 设置 popup

docs/api/component/markerLayer.zh.md

@@ -33,11 +33,10 @@ scene.addMarkerLayer(markerLayer);
 
 #### option
 
-- cluster 是部分聚合 `boolean` 默认 `false`
+- cluster 聚合 `boolean` 默认 `false`
 
 - clusterOption 聚合配置
-- cluster 是部分聚合
-  - element `function`
+  - element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
 
 后续会增加更多配置项目
 
@@ -47,7 +46,7 @@ scene.addMarkerLayer(markerLayer);
 
 参数
 
-- marker `Marker` 需要添加的 Marker
+- marker `IMarker` 需要添加的 Marker
 
 添加 Marker
 

docs/api/component/popup.zh.md

@@ -60,6 +60,14 @@ var html =
 popup.setHtml(html);
 ```
 
+#### setDOMContent
+
+- 参数 htmlNode dom 对象
+  区别于 setHtml 对象只能传字符串
+
+**tips**
+如果需要将 react 组件渲染到 popup 可以用此方法。
+
 #### setText
 
 设置 popup 显示文本内容

docs/api/layer/point_layer/cluster.zh.md

@@ -73,6 +73,13 @@ const pointLayer = new PointLayer({})
           strokeWidth: 1,
         });
 ```
+[聚合图使用案例](../../../examples/point/cluster)
+
+### FAQ
+PointLayer的聚合图采用WebGL绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用MarkerLayer的聚合功能，你可以通过Dom完全自定义样式。
+
+[MarkerLayer聚合](../../component/markerLayer)
+
 
 
 

docs/api/source/source.en.md

@@ -7,6 +7,13 @@ order: 0
 
 source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
 
+- data
+- option
+  - cluster **boolean** 是否聚合
+  - clusterOption 聚合配置项
+  - parser 数据解析配置
+  - transforms 数据处理配置
+
 ### parser
 
 不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json 等不同数据格式，栅格数据，包括 Raster，Image 数据。将来还会支持瓦片格式数据。
@@ -23,6 +30,14 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 
 ## API
 
+### cluster `boolean` 可选 可以只设置
+
+### clusterOption 可选
+
+- radius 聚合半径 **number** default 40
+- minZoom: 最小聚合缩放等级 **number** default 0
+- maxZoom: 最大聚合缩放等级 **number** default 16
+
 ### parser
 
 **配置项**
@@ -38,6 +53,17 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 layer.source(data);
 ```
 
+### Source 更新
+
+如果数据发生改变，可以需要更新数据
+可以通过调用 layer 的 setData 方法实现数据的更新
+
+具体见 [Layer](../layer/layer/#setdata)
+
+```javascript
+layer.setData(data);
+```
+
 #### JSON
 
 [JSON 数据格式解析](./json)
@@ -54,6 +80,23 @@ layer.source(data);
 
 ### transforms
 
+tranforms 处理的是的标准化之后的数据
+标准化之后的数据结构包括 coordinates 地理坐标字段，以及其他属性字段。
+
+处理完之后返回的也是标准数据
+
+```json
+[
+  {
+    "coordinates": [[]], // 地理坐标字段
+    "_id": "122", // 标准化之后新增字段
+    "name": "test",
+    "value": 1
+    // ....
+  }
+]
+```
+
 目前支持两种热力图使用的数据处理方法 grid，hexagon transform 配置项
 
 - type 数据处理类型

docs/api/source/source.zh.md

@@ -30,7 +30,7 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 
 ## API
 
-### cluster ``boolean` 可选 可以只设置
+### cluster `boolean` 可选 可以只设置
 
 ### clusterOption 可选
 
@@ -38,6 +38,8 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 - minZoom: 最小聚合缩放等级 **number** default 0
 - maxZoom: 最大聚合缩放等级 **number** default 16
 
+[聚合图使用案例](../../../examples/point/cluster)
+
 ### parser
 
 **配置项**

examples/point/marker/demo/clustermarker.js

@@ -31,6 +31,5 @@ function addMarkers() {
         markerLayer.addMarker(marker);
       }
       scene.addMarkerLayer(markerLayer);
-      scene.addMarkerLayer(markerLayer);
     });
 }

packages/component/src/marker.ts

@@ -20,6 +20,7 @@ export default class Marker extends EventEmitter {
   private mapsService: IMapService<unknown>;
   private lngLat: ILngLat;
   private scene: Container;
+  private added: boolean = false;
   constructor(option?: Partial<IMarkerOption>) {
     super();
     this.markerOption = {
@@ -49,6 +50,8 @@ export default class Marker extends EventEmitter {
     this.registerMarkerEvent(element as HTMLElement);
     this.mapsService.on('camerachange', this.update);
     this.update();
+    this.added = true;
+    this.emit('added');
     return this;
   }
 
@@ -97,6 +100,55 @@ export default class Marker extends EventEmitter {
     return this.markerOption.element as HTMLElement;
   }
 
+  public setElement(el: HTMLElement): this {
+    if (!this.added) {
+      this.once('added', () => {
+        this.setElement(el);
+      });
+      return this;
+    }
+    const { element } = this.markerOption;
+    if (element) {
+      DOM.remove(element);
+    }
+    this.markerOption.element = el;
+    this.init();
+    this.mapsService.getMarkerContainer().appendChild(el as HTMLElement);
+    this.registerMarkerEvent(el as HTMLElement);
+    this.update();
+    return this;
+  }
+
+  public openPopup(): this {
+    if (!this.added) {
+      this.once('added', () => {
+        this.openPopup();
+      });
+      return this;
+    }
+    const popup = this.popup;
+    if (!popup) {
+      return this;
+    }
+    if (!popup.isOpen()) {
+      popup.addTo(this.scene);
+    }
+    return this;
+  }
+
+  public closePopup(): this {
+    if (!this.added) {
+      this.once('added', () => {
+        this.closePopup();
+      });
+    }
+    const popup = this.popup;
+    if (popup) {
+      popup.remove();
+    }
+    return this;
+  }
+
   public setPopup(popup: IPopup) {
     this.popup = popup;
     if (this.lngLat) {

packages/component/src/popup.ts

@@ -23,6 +23,7 @@ export default class Popup extends EventEmitter implements IPopup {
   private timeoutInstance: any;
   private container: HTMLElement;
   private tip: HTMLElement;
+  private scene: Container;
 
   constructor(cfg?: Partial<IPopupOption>) {
     super();
@@ -36,6 +37,7 @@ export default class Popup extends EventEmitter implements IPopup {
   public addTo(scene: Container) {
     this.mapsService = scene.get<IMapService>(TYPES.IMapService);
     this.mapsService.on('camerachange', this.update);
+    this.scene = scene;
     this.update();
     if (this.popupOption.closeOnClick) {
       this.timeoutInstance = setTimeout(() => {
@@ -45,6 +47,14 @@ export default class Popup extends EventEmitter implements IPopup {
     return this;
   }
 
+  public close(): void {
+    this.remove();
+  }
+
+  public open(): void {
+    this.addTo(this.scene);
+  }
+
   public setHTML(html: string) {
     const frag = window.document.createDocumentFragment();
     const temp = window.document.createElement('body');

packages/core/src/services/component/IMarkerService.ts

@@ -19,6 +19,9 @@ export interface IMarker {
   setExtData(data: any): void;
   setPopup(popup: IPopup): void;
   togglePopup(): this;
+  openPopup(): this;
+  closePopup(): this;
+  setElement(el: HTMLElement): this;
 }
 export interface IMarkerService {
   container: HTMLElement;

packages/core/src/services/component/IPopupService.ts

@@ -10,6 +10,8 @@ export interface IPopup {
   setText(text: string): this;
   setMaxWidth(maxWidth: string): this;
   isOpen(): boolean;
+  open(): void;
+  close(): void;
 }
 export interface IPopupService {
   addPopup(popup: IPopup): void;

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

@@ -106,6 +106,8 @@ export default class ImageModel extends BaseModel {
     const { createTexture2D } = this.rendererService;
     this.texture = createTexture2D({
       data: this.iconService.getCanvas(),
+      mag: gl.LINEAR,
+      min: gl.LINEAR,
       width: 1024,
       height: this.iconService.canvasHeight || 128,
     });

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

@@ -9,6 +9,7 @@ uniform float u_stroke_opacity : 1;
 uniform float u_opacity : 1;
 
 varying float v_size;
+#pragma include "picking"
 void main(){
 vec2 pos= v_uv / u_textSize + gl_PointCoord / u_textSize * 64.;
 vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
@@ -24,5 +25,5 @@ float r = 1.0 - smoothstep(radius-(radius*0.01),
   }else {
         gl_FragColor= step(0.01, textureColor.x) * v_color;
   }
-  return;
+  gl_FragColor = filterColor(gl_FragColor);
 }

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

@@ -11,6 +11,7 @@ uniform float u_stroke_width : 1;
 varying float v_size;
 
 #pragma include "projection"
+#pragma include "picking"
 
 void main() {
    v_color = a_Color;
@@ -20,5 +21,6 @@ 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/layers/src/point/shaders/text_frag.glsl

@@ -13,6 +13,7 @@ varying vec4 v_color;
 varying vec2 v_uv;
 varying float v_gamma_scale;
 
+#pragma include "picking"
 void main() {
   // get sdf from atlas
   float dist = texture2D(u_sdf_map, v_uv).a;
@@ -27,4 +28,5 @@ 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 = filterColor(gl_FragColor);
 }

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

@@ -14,6 +14,7 @@ varying float v_gamma_scale;
 varying vec4 v_color;
 
 #pragma include "projection"
+#pragma include "picking"
 
 void main() {
   v_color = a_Color;
@@ -29,6 +30,6 @@ void main() {
   gl_Position = vec4(projected_position.xy / projected_position.w
     + a_textOffsets * fontScale / u_ViewportSize * 2. * u_DevicePixelRatio, 0.0, 1.0);
   v_gamma_scale = gl_Position.w;
-
+  setPickingColor(a_PickingColor);
 
 }

packages/utils/src/dom.ts

@@ -142,3 +142,13 @@ export function triggerResize() {
     window.dispatchEvent(evt);
   }
 }
+
+export function printCanvas(canvas: HTMLCanvasElement) {
+  const css = [
+    'padding: ' + (canvas.height / 2 - 8) + 'px ' + canvas.width / 2 + 'px;',
+    'line-height: ' + canvas.height + 'px;',
+    'background-image: url(' + canvas.toDataURL() + ');',
+  ];
+  // tslint:disable-next-line:no-console
+  console.log('%c\n', css.join(''));
+}

stories/Components/components/Marker.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { Marker, PointLayer, PolygonLayer, Scene } from '@antv/l7';
+import { Marker, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
 import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -26,10 +26,22 @@ export default class MarkerComponent extends React.Component {
     });
     this.scene = scene;
 
-    const marker = new Marker().setLnglat({
-      lng: 120.184824,
-      lat: 30.248341,
-    });
+    const popup = new Popup({
+      offsets: [0, 20],
+    }).setText('hello');
+
+    const marker = new Marker()
+      .setLnglat({
+        lng: 120.184824,
+        lat: 30.248341,
+      })
+      .setPopup(popup);
+
+    scene.addMarker(marker);
+
+    const el = document.createElement('h1');
+    el.innerHTML = 'Marker';
+    marker.setElement(el);
 
     const arr = [
       {
@@ -54,6 +66,7 @@ export default class MarkerComponent extends React.Component {
       .style({
         opacity: 1,
       });
+
     scene.addLayer(pointLayer);
     scene.addMarker(marker);
 

stories/Layers/components/PointImage.tsx

@@ -47,6 +47,9 @@ export default class PointImage extends React.Component {
       .shape('name', ['00', '01', '02'])
       .size(30);
     scene.addLayer(imageLayer);
+    imageLayer.on('click', (e) => {
+      console.log(e);
+    });
   }
 
   public render() {

stories/Layers/components/Text.tsx

@@ -53,6 +53,9 @@ export default class TextLayerDemo extends React.Component {
         // strokeOpacity: 1.0,
       });
     scene.addLayer(pointLayer);
+    pointLayer.on('click', (e) => {
+      console.log(e);
+    });
 
     this.scene = scene;
 

stories/MapAdaptor/components/multiMaptest.tsx

@@ -2,8 +2,6 @@
 import { PointLayer, Scene } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
-// import imageIcon from './image/icon.svg';
-
 export default class MultiGaodeMap extends React.Component {
   private scene1: Scene;
   private scene2: Scene;