feat: marker 支持鼠标事件

examples/raster/basic/demo/dem.js

@@ -44,7 +44,8 @@ async function addLayer() {
       }
     })
     .style({
-      heightRatio: 100,
+      clampLow: false,
+      clampHigh: false,
       opacity: 0.8,
       domain: [ 0, 8000 ],
       rampColors: {

examples/raster/basic/demo/light.js

@@ -0,0 +1,58 @@
+// https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tif
+import { RasterLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as GeoTIFF from 'geotiff';
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'dark',
+    center: [ 115.5268, 34.3628 ],
+    zoom: 3
+  })
+});
+addLayer();
+async function getTiffData() {
+  const response = await fetch(
+    'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF141999.tiff'
+  );
+  const arrayBuffer = await response.arrayBuffer();
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image = await tiff.getImage();
+  const width = image.getWidth();
+  const height = image.getHeight();
+  const values = await image.readRasters();
+  return {
+    data: values[0],
+    width,
+    height
+  };
+}
+
+async function addLayer() {
+  const tiffdata = await getTiffData();
+
+  const layer = new RasterLayer({});
+  layer
+    .source(tiffdata.data, {
+      parser: {
+        type: 'raster',
+        width: tiffdata.width,
+        height: tiffdata.height,
+        extent: [ 73.4821902409999979, 3.8150178409999995, 135.1066187319999869, 57.6300459959999998 ]
+      }
+    })
+    .style({
+      opacity: 1.0,
+      clampLow: false,
+      clampHigh: false,
+      domain: [ 0, 90 ],
+      nodataValue: 0,
+      rampColors: {
+        colors: [ 'rgb(166,97,26)', 'rgb(223,194,125)', 'rgb(245,245,245)', 'rgb(128,205,193)', 'rgb(1,133,113)' ],
+        positions: [ 0, 0.25, 0.5, 0.75, 1.0 ]
+      }
+    });
+
+  scene.addLayer(layer);
+}

examples/raster/basic/demo/meta.json

@@ -11,12 +11,22 @@
     },
     {
       "filename": "radar.js",
-      "title": "地形",
+      "title": "雷达图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "dem.js",
+      "title": "地形图",
       "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "light.js",
       "title": "夜光图"
+    },
+    {
+      "filename": "ndvi.js",
+      "title": "NDVI",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6BQSTI51T_UAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/raster/basic/demo/ndvi.js

@@ -0,0 +1,59 @@
+// https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tif
+import { RasterLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as GeoTIFF from 'geotiff';
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'dark',
+    center: [ 115.5268, 34.3628 ],
+    zoom: 3
+  })
+});
+addLayer();
+async function getTiffData() {
+  const response = await fetch(
+    'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff'
+  );
+  const arrayBuffer = await response.arrayBuffer();
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image = await tiff.getImage();
+  const width = image.getWidth();
+  const height = image.getHeight();
+  const values = await image.readRasters();
+  return {
+    data: values[0],
+    width,
+    height,
+    min: 0,
+    max: 8000
+  };
+}
+
+async function addLayer() {
+  const tiffdata = await getTiffData();
+
+  const layer = new RasterLayer({});
+  layer
+    .source(tiffdata.data, {
+      parser: {
+        type: 'raster',
+        width: tiffdata.width,
+        height: tiffdata.height,
+        extent: [ 73.4766000000000048, 18.1054999999999993, 135.1066187, 57.6300460 ]
+      }
+    })
+    .style({
+      opacity: 0.8,
+      clampLow: false,
+      clampHigh: false,
+      domain: [ -3000, 9000 ],
+      rampColors: {
+        colors: [ 'rgb(166,97,26)', 'rgb(223,194,125)', 'rgb(245,245,245)', 'rgb(128,205,193)', 'rgb(1,133,113)' ],
+        positions: [ 0, 0.25, 0.5, 0.75, 1.0 ]
+      }
+    });
+
+  scene.addLayer(layer);
+}

packages/component/src/css/l7.css

@@ -1,5 +1,4 @@
 .l7-marker-container {
-  position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -10,7 +9,7 @@
 	top: 0;
 	left: 0;
   z-index: 5;
-
+  cursor: pointer;
 }
 .l7-popup-anchor-top,
 .l7-popup-anchor-top-left,
@@ -363,12 +362,6 @@
 	width: 36px;
 	height: 36px;
 	}
-.l7-cont.l7-marker {
-	position: absolute !important;
-	top: 0;
-	left: 0;
-	z-index: 5;
-}
 .l7-popup-anchor-top,
 .l7-popup-anchor-top-left,
 .l7-popup-anchor-top-right {

packages/component/src/marker.ts

@@ -1,5 +1,6 @@
 import { ILngLat, IMapService, IPoint, IPopup, TYPES } from '@antv/l7-core';
 import { bindAll, DOM } from '@antv/l7-utils';
+import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
 import { anchorTranslate, anchorType, applyAnchorClass } from './utils/anchor';
 //  marker 支持 dragger 未完成
@@ -10,8 +11,9 @@ export interface IMarkerOption {
   color: string;
   offset: number[];
   draggable: boolean;
+  extData?: any;
 }
-export default class Marker {
+export default class Marker extends EventEmitter {
   private markerOption: IMarkerOption;
   private defaultMarker: boolean;
   private popup: IPopup; // TODO: POPup
@@ -19,6 +21,7 @@ export default class Marker {
   private lngLat: ILngLat;
   private scene: Container;
   constructor(option?: Partial<IMarkerOption>) {
+    super();
     this.markerOption = {
       ...this.getDefault(),
       ...option,
@@ -38,13 +41,13 @@ export default class Marker {
   }
 
   public addTo(scene: Container) {
-    this.remove();
+    // this.remove();
     this.scene = scene;
     this.mapsService = scene.get<IMapService>(TYPES.IMapService);
     const { element, draggable } = this.markerOption;
     this.mapsService.getMarkerContainer().appendChild(element as HTMLElement);
+    this.registerMarkerEvent(element as HTMLElement);
     this.mapsService.on('camerachange', this.update);
-    // this.setDraggable(draggable);
     this.update();
     return this;
   }
@@ -59,6 +62,8 @@ export default class Marker {
       this.mapsService.off('mouseup', this.onUp);
       this.mapsService.off('touchend', this.onUp);
     }
+    this.unRegisterMarkerEvent();
+    this.removeAllListeners();
     const { element } = this.markerOption;
     if (element) {
       DOM.remove(element);
@@ -187,9 +192,38 @@ export default class Marker {
     element.addEventListener('click', (e: MouseEvent) => {
       this.onMapClick(e);
     });
+    element.addEventListener('click', this.eventHander);
     applyAnchorClass(element, anchor, 'marker');
   }
+  private registerMarkerEvent(element: HTMLElement) {
+    element.addEventListener('mousemove', this.eventHander);
+    element.addEventListener('click', this.eventHander);
+    element.addEventListener('mousedown', this.eventHander);
+    element.addEventListener('mouseup', this.eventHander);
+    element.addEventListener('dblclick', this.eventHander);
+    element.addEventListener('contextmenu', this.eventHander);
+    element.addEventListener('mouseover', this.eventHander);
+    element.addEventListener('mouseout', this.eventHander);
+  }
+  private unRegisterMarkerEvent() {
+    const element = this.getElement();
+    element.removeEventListener('mousemove', this.eventHander);
+    element.removeEventListener('click', this.eventHander);
+    element.removeEventListener('mousedown', this.eventHander);
+    element.removeEventListener('mouseup', this.eventHander);
+    element.removeEventListener('dblclick', this.eventHander);
+    element.removeEventListener('contextmenu', this.eventHander);
+    element.removeEventListener('mouseover', this.eventHander);
+    element.removeEventListener('mouseout', this.eventHander);
+  }
 
+  private eventHander = (e: MouseEvent) => {
+    this.emit(e.type, {
+      target: e,
+      data: this.markerOption.extData,
+      lngLat: this.lngLat,
+    });
+  };
   private addDragHandler(e: MouseEvent) {
     throw new Error('Method not implemented.');
   }

stories/Components/components/Marker.tsx

@@ -17,7 +17,7 @@ export default class MarkerComponent extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         style: 'dark',
         center: [110.19382669582967, 30.258134],
         pitch: 0,
@@ -30,6 +30,7 @@ export default class MarkerComponent extends React.Component {
     layer
       .source(data)
       .size('name', [0, 10000, 50000, 30000, 100000])
+      .active(true)
       .color('name', [
         '#2E8AE6',
         '#69D1AB',
@@ -40,15 +41,34 @@ export default class MarkerComponent extends React.Component {
       ])
       .shape('fill')
       .style({
-        opacity: 0.3,
+        opacity: 0.8,
       });
     scene.addLayer(layer);
     const marker = new Marker().setLnglat({
       lng: 120.19382669582967,
       lat: 30.258134,
     });
+    marker.on('click', (e) => {
+      console.log(e);
+    });
 
     scene.addMarker(marker);
+    scene.on('loaded', () => {
+      // @ts-ignore
+      const marker1 = new AMap.Marker({
+        map: scene.map,
+        position: [113.800646, 34.796227],
+        shadow: '#000',
+        label: {
+          content: '站点',
+          direction: 'top',
+        },
+      });
+      marker1.on('click', () => {
+        alert(1111);
+        console.log('选中的点', 1111);
+      });
+    });
   }
 
   public render() {