Merge pull request #146 from antvis/demo

feat: marker 支持鼠标事件

docs/api/component/marker.zh.md

@@ -11,10 +11,11 @@ Marker<br />`const Marker = new L7.Marker(option)`
 
 #### option
 
-- color        `string`   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32)  设置默认 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
 - offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
+- extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息
 
 ## 方法
 
@@ -50,11 +51,19 @@ Marker<br />`const Marker = new L7.Marker(option)`
 
 获取 marker 弹出框
 
+#### getExtData()
+
+获取用户自定义数据
+
+#### setExtData(data)
+
+设置用户自定义数据
+
 ## 示例代码
 
 #### 默认 Marker
 
-\*\*<br />`const marker = new L7.Marker({color:'blue'})`
+`const marker = new L7.Marker({color:'blue'})`
 
 #### 自定义 Marker
 
@@ -84,3 +93,26 @@ new L7.Marker({
   .setPopup(popup)
   .addTo(scene);
 ```
+
+## 事件
+
+### 鼠标事件
+
+- mousemove
+- click
+- mousedown
+- mouseup
+- dblclick
+- contextmenu
+- mouseover
+- mouseout
+
+事件返回数据
+
+- target 事件触发源
+- data extData 用户自定义数据
+- lnglat marker 经纬度
+
+```javascript
+marker.on('click', (e) => {});
+```

docs/api/layer/line_layer/linelayer.zh.md

@@ -68,3 +68,14 @@ order: 0
 lineLayer.size(1); // 线的宽度为 1
 lineLayer.size([1, 2]); // 宽度为1，高度2
 ```
+### style
+
+- lineType  dash | solid  线类型实线和虚线
+- dashArray 虚线配置项 ```[ 5, 5]``` 
+
+```javascript
+  layer .style({
+      lineType: 'dash',
+      dashArray: [ 5, 5 ]
+    })
+```

examples/gallery/basic/demo/animate.js

@@ -0,0 +1,43 @@
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    center: [ 110.19382669582967, 40.258134 ],
+    pitch: 0,
+    zoom: 3,
+    style: 'dark'
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    data.features = data.features.map(function(fe) {
+      if (fe.properties.saldo < 0) {
+        fe.geometry.coordinates = fe.geometry.coordinates.reverse();
+      }
+      return fe;
+    });
+    const layer = new LineLayer({
+      autoFit: true
+    })
+      .source(data)
+      .shape('line')
+      .size('saldo', [ 1, 2 ])
+      .color('saldo', function(v) {
+        return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)';
+      })
+      .animate({
+        enable: true,
+        interval: 0.1,
+        duration: 3,
+        trailLength: 1
+      })
+      .style({
+        opacity: 0.8
+      });
+    scene.addLayer(layer);
+  });

examples/gallery/basic/demo/build.js

@@ -0,0 +1,36 @@
+import { Scene, CityBuildingLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'dark',
+    center: [ 121.507674, 31.223043 ],
+    pitch: 65.59312320916906,
+    zoom: 15.4,
+    minZoom: 15,
+    maxZoom: 18
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    const layer = new CityBuildingLayer();
+    layer
+      .source(data)
+      .size('floor', [ 0, 500 ])
+      .color('rgba(242,246,250,1.0)')
+      .animate({
+        enable: true
+      })
+      .style({
+        opacity: 1.0,
+        baseColor: 'rgb(16,16,16)',
+        windowColor: 'rgb(30,60,89)',
+        brightColor: 'rgb(255,176,38)'
+      });
+    scene.addLayer(layer);
+  });

examples/gallery/basic/demo/meta.json

@@ -4,6 +4,16 @@
     "en": "Gallery"
   },
   "demos": [
+    {
+      "filename": "animate.js",
+      "title": "轨迹动画",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-x3uRY5G_4sAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "build.js",
+      "title": "点亮城市",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*InPpTbVN-yUAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "column_dark.js",
       "title": "3D柱图深色",

examples/line/path/demo/meta.json

@@ -23,6 +23,11 @@
       "filename": "road_dark.js",
       "title": "路径",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DDjQRLEnwpoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "road_dark_dash.js",
+      "title": "路径虚线",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cGw3T4LPx7YAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/line/path/demo/road_dark_dash.js

@@ -0,0 +1,31 @@
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    center: [ 116.3956, 39.9392 ],
+    pitch: 0,
+    zoom: 10,
+    rotation: 0,
+    style: 'dark'
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    const layer = new LineLayer({})
+      .source(data)
+      .size(1.5)
+      .shape('line')
+      .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ])
+      .style({
+        lineType: 'dash',
+        dashArray: [ 5, 5 ]
+      })
+      ;
+    scene.addLayer(layer);
+  });

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: true,
+      clampHigh: true,
+      domain: [ 0, 90 ],
+      nodataValue: 0,
+      rampColors: {
+        colors: [ 'rgba(166,97,26,0)', '#c3aa00', '#fadb14', '#fef346', '#ffff96' ],
+        positions: [ 0, 0.1, 0.25, 0.5, 1.0 ]
+      }
+    });
+
+  scene.addLayer(layer);
+}

examples/raster/basic/demo/meta.json

@@ -11,12 +11,23 @@
     },
     {
       "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*oinmTJIlmbMAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "light.js",
-      "title": "夜光图"
+      "title": "夜光图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*nvP2R6ZbSSgAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "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);
@@ -128,6 +133,14 @@ export default class Marker {
     return this.markerOption.draggable;
   }
 
+  public getExtData() {
+    return this.markerOption.extData;
+  }
+
+  public setExtData(data: any) {
+    this.markerOption.extData = data;
+  }
+
   private update() {
     if (!this.mapsService) {
       return;
@@ -187,9 +200,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.');
   }

packages/core/src/services/scene/ISceneService.ts

@@ -10,6 +10,7 @@ export interface ISceneService {
   addLayer(layer: ILayer): void;
   render(): void;
   getSceneContainer(): HTMLDivElement;
+  ExportMap2Png(): string;
   destroy(): void;
 }
 // scene 事件

packages/core/src/services/scene/SceneService.ts

@@ -218,6 +218,13 @@ export default class Scene extends EventEmitter implements ISceneService {
     return this.$container as HTMLDivElement;
   }
 
+  public ExportMap2Png(): string {
+    const renderCanvas = this.$container?.getElementsByTagName('canvas')[0];
+    this.render();
+    const layersPng = renderCanvas?.toDataURL() as string;
+    return layersPng;
+  }
+
   public destroy() {
     this.emit('destroy');
     this.inited = false;

packages/layers/src/citybuliding/shaders/build_frag.glsl

@@ -82,7 +82,7 @@ void main() {
         if(ux == targetColId){
             n =0.;
         }
-        float timeP = min(0.75, abs ( sin(u_time/6.0) ) );
+        float timeP = min(0.75, abs ( sin(u_time/3.0) ) );
         float hot = smoothstep(1.0,0.0,timeP);
         vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), s);
         //vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), 1.0);

packages/layers/src/core/BaseLayer.ts

@@ -300,13 +300,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     // 触发 init 生命周期插件
     this.hooks.init.call();
     this.inited = true;
-
-    this.hooks.afterInit.call();
     // 更新 model 样式
     this.updateLayerConfig({
       ...(this.getDefaultConfig() as object),
       ...this.rawConfig,
     });
+    this.hooks.afterInit.call();
     // 启动动画
     const { animateOption } = this.getLayerConfig();
     if (animateOption?.enable) {

packages/layers/src/line/shaders/line_frag.glsl

@@ -31,8 +31,8 @@ void main() {
       float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
       alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
       alpha = smoothstep(0., 1., alpha);
-      float alpha2 = exp(-abs(v_side));
-      gl_FragColor.a *= alpha * blur * alpha2;
+      // float alpha2 = exp(-abs(v_side));
+      gl_FragColor.a *= alpha * blur;
       // gl_FragColor.a = fract(u_time);
   }
  // dash line

packages/scene/src/index.ts

@@ -99,6 +99,9 @@ class Scene
   public getMapService(): IMapService<unknown> {
     return this.mapService;
   }
+  public ExportMap2Png(): string {
+    return this.sceneService.ExportMap2Png();
+  }
 
   public get map() {
     return this.mapService.map;

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() {