Merge branch 'master' of https://github.com/antvis/L7

docs/api/layer/layer.zh.md

@@ -79,7 +79,7 @@ layer 初始化完成之后，是否自动缩放到图层范围 {bool } default
   - parser 数据解析，默认是解析层 geojson
   - transforms [transform，transform ]  数据处理转换 可设置多个
 
-parser 和  transforms [见 source 文档](../source/source)
+parser 和  transforms [见 source 文档](../../source/source)
 
 ```javascript
 layer.source(data, {

docs/common/layer/layer_encode.md

@@ -10,7 +10,7 @@
   - parser 数据解析，默认是解析层 geojson
   - transforms [transform，transform ]  数据处理转换 可设置多个
 
-parser 和  transforms [见 source 文档](../source/source)
+parser 和  transforms [见 source 文档](../../api/source/source)
 
 ```javascript
 layer.source(data, {

packages/component/src/marker.ts

@@ -230,6 +230,7 @@ export default class Marker extends EventEmitter {
 
     if (element) {
       element.style.display = 'block';
+      element.style.whiteSpace = 'nowrap';
       const container = this.mapsService.getContainer();
       let containerWidth = 0;
       let containerHeight = 0;

packages/component/src/popup.ts

@@ -238,6 +238,8 @@ export default class Popup extends EventEmitter implements IPopup {
           },
         );
       }
+
+      this.container.style.whiteSpace = 'nowrap';
     }
     if (maxWidth && this.container.style.maxWidth !== maxWidth) {
       this.container.style.maxWidth = maxWidth;

packages/core/src/services/layer/ILayerService.ts

@@ -393,6 +393,7 @@ export interface ILayerService {
   removeAllLayers(): void;
   updateLayerRenderList(): void;
   renderLayers(type?: string): void;
+  setEnableRender(flag: boolean): void;
   getOESTextureFloat(): boolean;
   isMapDragging(): boolean;
 

packages/core/src/services/layer/LayerService.ts

@@ -28,6 +28,8 @@ export default class LayerService implements ILayerService {
   // TODO: 是否开启 shader 中的颜色拾取计算
   private shaderPicking: boolean = true;
 
+  private enableRender: boolean = true;
+
   @inject(TYPES.IRendererService)
   private readonly renderService: IRendererService;
 
@@ -93,8 +95,12 @@ export default class LayerService implements ILayerService {
     this.destroy();
   }
 
+  public setEnableRender(flag: boolean) {
+    this.enableRender = flag;
+  }
+
   public renderLayers() {
-    if (this.alreadyInRendering) {
+    if (this.alreadyInRendering || !this.enableRender) {
       return;
     }
     this.alreadyInRendering = true;

packages/layers/src/citybuliding/models/build.ts

@@ -10,8 +10,17 @@ interface ICityBuildLayerStyleOptions {
   brightColor: string;
   windowColor: string;
   time: number;
+  sweep: {
+    enable: boolean;
+    sweepRadius: number;
+    sweepColor: string;
+    sweepSpeed: number;
+  };
 }
 export default class CityBuildModel extends BaseModel {
+  private cityCenter: [number, number];
+  private cityMinSize: number;
+
   public getUninforms() {
     const {
       opacity = 1,
@@ -19,8 +28,20 @@ export default class CityBuildModel extends BaseModel {
       brightColor = 'rgb(255,176,38)',
       windowColor = 'rgb(30,60,89)',
       time = 0,
+      sweep = {
+        enable: false,
+        sweepRadius: 1,
+        sweepColor: 'rgb(255, 255, 255)',
+        sweepSpeed: 0.4,
+      },
     } = this.layer.getLayerConfig() as ICityBuildLayerStyleOptions;
     return {
+      u_cityCenter: this.cityCenter,
+      u_cityMinSize: this.cityMinSize * sweep.sweepRadius,
+      u_circleSweep: sweep.enable ? 1.0 : 0.0,
+      u_circleSweepColor: rgb2arr(sweep.sweepColor).slice(0, 3),
+      u_circleSweepSpeed: sweep.sweepSpeed,
+
       u_opacity: opacity,
       u_baseColor: rgb2arr(baseColor),
       u_brightColor: rgb2arr(brightColor),
@@ -29,7 +50,32 @@ export default class CityBuildModel extends BaseModel {
     };
   }
 
+  public calCityGeo() {
+    // @ts-ignore
+    const [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
+    if (this.mapService.version === 'GAODE2.x') {
+      // @ts-ignore
+      this.cityCenter = this.mapService.lngLatToCoord([
+        (maxLng + minLng) / 2,
+        (maxLat + minLat) / 2,
+      ]);
+      // @ts-ignore
+      const l1 = this.mapService.lngLatToCoord([maxLng, maxLat]);
+      // @ts-ignore
+      const l2 = this.mapService.lngLatToCoord([minLng, minLat]);
+      this.cityMinSize =
+        Math.sqrt(Math.pow(l1[0] - l2[0], 2) + Math.pow(l1[1] - l2[1], 2)) / 4;
+    } else {
+      const w = maxLng - minLng;
+      const h = maxLat - minLat;
+      this.cityCenter = [(maxLng + minLng) / 2, (maxLat + minLat) / 2];
+      this.cityMinSize = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2)) / 4;
+    }
+  }
+
   public initModels(): IModel[] {
+    this.calCityGeo();
+
     this.startModelAnimate();
     return [
       this.layer.buildLayerModel({

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

@@ -9,6 +9,13 @@ varying vec2 v_texCoord;
 uniform float u_Zoom : 1;
 uniform float u_time;
 
+uniform float u_circleSweep;
+uniform float u_cityMinSize;
+uniform vec3 u_circleSweepColor;
+uniform float u_circleSweepSpeed;
+
+varying float v_worldDis;
+
 #pragma include "picking"
 
 vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {
@@ -98,6 +105,13 @@ void main() {
 
         gl_FragColor = vec4(foggedColor,1.0);
   }
+
+
+  if(u_circleSweep > 0.0 && v_worldDis < u_cityMinSize) {
+    float r = fract(((v_worldDis/u_cityMinSize) - u_time * u_circleSweepSpeed) * 2.0);
+    gl_FragColor.rgb += r * r * u_circleSweepColor;
+  }
+   
   gl_FragColor.a *= u_opacity;
   gl_FragColor = filterColor(gl_FragColor);
 }

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

@@ -16,15 +16,30 @@ varying vec2 v_texCoord;
 varying vec4 v_Color;
 uniform mat4 u_Mvp;
 
+uniform float u_circleSweep;
+uniform vec2 u_cityCenter;
+
+varying float v_worldDis;
+
 #pragma include "projection"
 #pragma include "light"
 #pragma include "picking"
 
+
 void main() {
   vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
   vec4 project_pos = project_position(pos);
+
    v_texCoord = a_Uv;
-  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+
+  if(u_circleSweep > 0.0) {
+     vec2 lnglatscale = vec2(0.0);
+    if(u_CoordinateSystem != COORDINATE_SYSTEM_P20_2) {
+      lnglatscale = (a_Position.xy - u_cityCenter) * vec2(0.0, 0.135);
+    }
+    v_worldDis = length(a_Position.xy + lnglatscale - u_cityCenter);
+  }
+ 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
   } else {

packages/scene/src/index.ts

@@ -193,6 +193,10 @@ class Scene
     this.sceneService.render();
   }
 
+  public setEnableRender(flag: boolean) {
+    this.layerService.setEnableRender(flag);
+  }
+
   // asset method
   /**
    * 为 layer/point/text 支持 iconfont 模式支持

stories/Components/components/Marker.tsx

@@ -18,7 +18,7 @@ export default class MarkerComponent extends React.Component {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
-        style: 'dark',
+        // style: 'dark',
         center: [120.184824, 30.248341],
         pitch: 0,
         zoom: 18,
@@ -27,7 +27,7 @@ export default class MarkerComponent extends React.Component {
 
     const popup = new Popup({
       offsets: [0, 20],
-    }).setHTML('<h1 onclick= alert("12223")>11111</h1>');
+    }).setHTML('<h1 onclick= alert("12223")>111111111111</h1>');
 
     const marker = new Marker({
       offsets: [0, -20],
@@ -41,7 +41,7 @@ export default class MarkerComponent extends React.Component {
     scene.addMarker(marker);
 
     const el = document.createElement('h1');
-    el.innerHTML = 'Marker';
+    el.innerHTML = '<h1>111111111111</h1>';
     marker.setElement(el);
 
     const arr = [

stories/Components/components/Popup.tsx

@@ -50,7 +50,7 @@ export default class PopupComponent extends React.Component {
         lng: 120.19382669582967,
         lat: 30.258134,
       })
-      .setText('hello');
+      .setText('hello this is test text');
     scene.addPopup(popup);
   }
 

stories/Map/components/amap2demo_citybuilding.tsx

@@ -1,5 +1,5 @@
 import { CityBuildingLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class Amap2demo_citybuilding extends React.Component {
@@ -30,13 +30,20 @@ export default class Amap2demo_citybuilding extends React.Component {
       .size('floor', [0, 500])
       .color('rgba(242,246,250,1.0)')
       .animate({
-        enable: false,
+        enable: true,
       })
+      .active(true)
       .style({
         opacity: 0.7,
         baseColor: 'rgb(16,16,16)',
         windowColor: 'rgb(30,60,89)',
         brightColor: 'rgb(255,176,38)',
+        // sweep: {
+        //   enable: true,
+        //   sweepRadius: 4,
+        //   sweepColor: 'rgb(0, 100, 100)',
+        //   sweepSpeed: 0.5
+        // }
       });
     scene.addLayer(pointLayer);
 

stories/Map/components/mapCenter.tsx

@@ -66,7 +66,12 @@ export default class GaodeMapComponent extends React.Component {
     scene.on('loaded', () => {
       scene.addLayer(layer);
     });
-    layer.on('click', () => console.log('point click'));
+    let c = 1;
+    layer.on('click', () => {
+      // @ts-ignore
+      c == 1 ? scene.setEnableRender(false) : scene.setEnableRender(true);
+      c = 0;
+    });
     layer.on('contextmenu', () => console.log('contextmenu'));
     // layer.on('mousemove', (e) => {
     //   console.log(e.feature);