fix: gird heatmap position fix #273

packages/core/src/services/interaction/InteractionService.ts

@@ -100,7 +100,7 @@ export default class InteractionService extends EventEmitter
       // this.hammertime.off('dblclick click', this.onHammer);
       this.hammertime.off('panstart panmove panend pancancel', this.onDrag);
       $containter.removeEventListener('touchstart', this.onTouch);
-      $containter.removeEventListener('click', this.onHover);
+      // $containter.removeEventListener('click', this.onHover);
       $containter.removeEventListener('mousedown', this.onHover);
       $containter.removeEventListener('mouseup', this.onHover);
       // $containter.removeEventListener('dblclick', this.onHover);

packages/draw/src/draw_control.ts

@@ -1,6 +1,5 @@
 import { Control, IControlOption, PositionType, Scene } from '@antv/l7';
 import { DOM } from '@antv/l7-utils';
-import Hammer from 'hammerjs';
 import './css/draw.less';
 import {
   DrawCircle,
@@ -11,6 +10,7 @@ import {
   DrawPolygon,
   DrawRect,
 } from './modes';
+import { DrawEvent, DrawModes } from './util/constant';
 export interface IControls {
   [key: string]: boolean;
 }
@@ -102,6 +102,7 @@ export class DrawControl extends Control {
         this.onDeleteMode.bind(null, 'delete'),
       );
     }
+    // 监听组件 选中, 编辑
     return container;
   }
 
@@ -114,11 +115,12 @@ export class DrawControl extends Control {
     const link = DOM.create('a', className, container) as HTMLLinkElement;
     link.href = 'javascript:void(0)';
     link.title = tile;
-    link.addEventListener('click', fn, false);
+    link.addEventListener('mousedown', fn, true);
     return link;
   }
 
   private onButtonClick = (type: string, e: MouseEvent) => {
+    e.stopPropagation();
     for (const draw in this.draw) {
       if (draw === type) {
         this.draw[draw].enable();
@@ -130,10 +132,11 @@ export class DrawControl extends Control {
   };
 
   private onDeleteMode = (type: string, e: MouseEvent) => {
-    // e.stopPropagation();
+    e.stopPropagation();
     if (!this.currentDraw) {
       return;
     }
+    this.currentDraw.deleteMode.enable();
     return false;
   };
 }

packages/draw/src/modes/draw_feature.ts

@@ -76,6 +76,17 @@ export default abstract class DrawFeature extends DrawMode {
   public enableLayer() {
     this.drawRender.enableDrag();
   }
+  public clear() {
+    this.drawRender.hide();
+    this.drawVertexLayer.hide();
+    this.hideOtherLayer();
+    this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
+  }
+  public reset() {
+    this.drawRender.show();
+    this.drawVertexLayer.show();
+    this.showOtherLayer();
+  }
 
   public addVertex(feature: Feature): void {
     throw new Error('子类未实现该方法');
@@ -177,8 +188,12 @@ export default abstract class DrawFeature extends DrawMode {
 
   private onDrawDelete = () => {
     if (this.drawStatus === 'DrawSelected') {
+      this.clear();
       this.source.removeFeature(this.currentFeature as Feature);
-      this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
+      this.renderLayer.update(this.source.data);
+      // this.reset();
     }
+
+    // this.source.removeFeature(this.currentFeature as Feature
   };
 }

packages/draw/src/render/draw.ts

@@ -24,7 +24,7 @@ export default class DrawLayer extends BaseRender {
     layer.on('mouseenter', this.onMouseMove);
     layer.on('mouseout', this.onUnMouseMove);
     layer.on('click', this.onClick);
-    layer.on('unclick', this.onUnClick);
+    layer.on('unmousedown', this.onUnClick);
     this.isEnableDrag = true;
   }
   public disableDrag() {
@@ -35,7 +35,7 @@ export default class DrawLayer extends BaseRender {
     layer.off('mouseenter', this.onMouseMove);
     layer.off('mouseout', this.onUnMouseMove);
     layer.off('click', this.onClick);
-    layer.off('unclick', this.onUnClick);
+    layer.off('unmousedown', this.onUnClick);
     this.isEnableDrag = false;
   }
 

packages/layers/src/core/BaseLayer.ts

@@ -849,13 +849,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
       enableSelect = true,
     } = this.getLayerConfig();
     // 判断layer是否监听事件;
-    let isPick = this.eventNames().indexOf(type) !== -1;
+    let isPick =
+      this.eventNames().indexOf(type) !== -1 ||
+      this.eventNames().indexOf('un' + type) !== -1;
     if ((type === 'click' || type === 'dblclick') && enableSelect) {
       isPick = true;
     }
-    if (type === 'click' && this.eventNames().indexOf('unclick') !== -1) {
-      isPick = true;
-    }
     if (
       type === 'mousemove' &&
       (enableHighlight ||

packages/source/src/transform/grid.ts

@@ -19,8 +19,8 @@ export function aggregatorToGrid(data: IParserData, option: ITransform) {
   const { gridHash, gridOffset } = _pointsGridHash(dataArray, size);
   const layerData = _getGridLayerDataFromGridHash(gridHash, gridOffset, option);
   return {
-    yOffset: gridOffset.yOffset / 1.8,
-    xOffset: gridOffset.xOffset / 1.8,
+    yOffset: gridOffset.yOffset / 2,
+    xOffset: gridOffset.xOffset / 2,
     radius: gridOffset.xOffset,
     type: 'grid',
     dataArray: layerData,
@@ -31,6 +31,7 @@ function _pointsGridHash(dataArray: any[], size: number) {
   let latMin = Infinity;
   let latMax = -Infinity;
   let pLat;
+
   for (const point of dataArray) {
     pLat = point.coordinates[1];
     if (Number.isFinite(pLat)) {
@@ -38,8 +39,8 @@ function _pointsGridHash(dataArray: any[], size: number) {
       latMax = pLat > latMax ? pLat : latMax;
     }
   }
-  // const centerLat = (latMin + latMax) / 2;
-  const centerLat = 34.54083;
+  const centerLat = (latMin + latMax) / 2;
+  // const centerLat = 34.54083;
   const gridOffset = _calculateGridLatLonOffset(size, centerLat);
   if (gridOffset.xOffset <= 0 || gridOffset.yOffset <= 0) {
     return { gridHash: {}, gridOffset };
@@ -95,8 +96,8 @@ function _getGridLayerDataFromGridHash(
     Object.assign(item, {
       _id: i,
       coordinates: [
-        -180 + gridOffset.xOffset * lonIdx,
-        -90 + gridOffset.yOffset * latIdx,
+        -180 + gridOffset.xOffset * (lonIdx + 0.5),
+        -90 + gridOffset.yOffset * (latIdx + 0.5),
       ],
       rawData: gridHash[key].points,
       count: gridHash[key].count,

stories/Layers/Layers.stories.tsx

@@ -21,6 +21,7 @@ import WorldDemo from './components/polygon_line';
 import ImageLayerDemo from './components/RasterImage';
 import RasterLayerDemo from './components/RasterLayer';
 import TextLayerDemo from './components/Text';
+import GridTest from './components/gridtest';
 
 // @ts-ignore
 storiesOf('图层', module)
@@ -44,4 +45,5 @@ storiesOf('图层', module)
   .add('网格热力图', () => <HexagonLayerDemo />)
   .add('栅格', () => <RasterLayerDemo />)
   .add('图片', () => <ImageLayerDemo />)
+  .add('网格测试', () => <GridTest />)
   .add('世界地图', () => <WorldDemo />);

stories/Layers/components/gridtest.tsx

@@ -0,0 +1,76 @@
+import { HeatmapLayer, Marker, PointLayer, Scene, IPoint } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import * as dat from 'dat.gui';
+import * as React from 'react';
+export default class HexagonLayerDemo extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+  private gui: dat.GUI;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+    if (this.gui) {
+      this.gui.destroy();
+    }
+  }
+  public async componentDidMount() {
+    const testPoint: [number, number] = [113.868222, 22.506306];
+
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: testPoint,
+        pitch: 0,
+        zoom: 17,
+        token: '8e2254ff173dbf7ff5029e9c9df20bc3',
+      }),
+    });
+
+    scene.on('loaded', () => {
+      // 网格热力图
+      const testList = [{ lng: testPoint[0], lat: testPoint[1], lev: 1 }];
+      const layer = new HeatmapLayer({})
+        .source(testList, {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+          transforms: [
+            {
+              type: 'grid',
+              size: 100,
+              field: 'lev',
+              method: 'sum',
+            },
+          ],
+        })
+        .shape('circle')
+        .style({
+          coverage: 1,
+        })
+        .color('count', ['#0B0030', '#6BD5A0'].reverse());
+      scene.addLayer(layer);
+
+      // marker
+      // @ts-ignore
+      const marker = new Marker().setLnglat(testPoint);
+      scene.addMarker(marker);
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/Layers/components/hexagon.tsx

@@ -36,14 +36,14 @@ export default class HexagonLayerDemo extends React.Component {
             .source(data, {
               transforms: [
                 {
-                  type: 'hexagon',
+                  type: 'grid',
                   size: 500000,
                   field: 'name',
                   method: 'mode',
                 },
               ],
             })
-            .shape('hexagon') // 支持 circle, hexagon,triangle
+            .shape('square') // 支持 circle, hexagon,triangle
             .color('mode', [
               '#ffffe5',
               '#fff7bc',