diff --git a/docs/api/layer/layer.zh.md b/docs/api/layer/layer.zh.md index 78ca4aa56d..3ea3ffe1f9 100644 --- a/docs/api/layer/layer.zh.md +++ b/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, { diff --git a/docs/common/layer/layer_encode.md b/docs/common/layer/layer_encode.md index 3d52dc56f4..bf46709607 100644 --- a/docs/common/layer/layer_encode.md +++ b/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, { diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index 9f04045e68..d5301e1a6d 100644 --- a/packages/component/src/marker.ts +++ b/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; diff --git a/packages/component/src/popup.ts b/packages/component/src/popup.ts index 9209fe8127..db599fc64c 100644 --- a/packages/component/src/popup.ts +++ b/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; diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 700c52d805..acdb9ad46b 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/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; diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 7fdf418bc4..6e27203b6d 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/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; diff --git a/packages/layers/src/citybuliding/models/build.ts b/packages/layers/src/citybuliding/models/build.ts index 0f433dbcc2..d7c4861dc5 100644 --- a/packages/layers/src/citybuliding/models/build.ts +++ b/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({ diff --git a/packages/layers/src/citybuliding/shaders/build_frag.glsl b/packages/layers/src/citybuliding/shaders/build_frag.glsl index 049c9b7c8f..f643a89019 100644 --- a/packages/layers/src/citybuliding/shaders/build_frag.glsl +++ b/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); } diff --git a/packages/layers/src/citybuliding/shaders/build_vert.glsl b/packages/layers/src/citybuliding/shaders/build_vert.glsl index f561a14ca2..413abdd42b 100644 --- a/packages/layers/src/citybuliding/shaders/build_vert.glsl +++ b/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 { diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 972c0433bb..d577f321d6 100644 --- a/packages/scene/src/index.ts +++ b/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 模式支持 diff --git a/stories/Components/components/Marker.tsx b/stories/Components/components/Marker.tsx index 0ae7a3a898..6c9fec6a55 100644 --- a/stories/Components/components/Marker.tsx +++ b/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('

11111

'); + }).setHTML('

111111111111

'); 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 = '

111111111111

'; marker.setElement(el); const arr = [ diff --git a/stories/Components/components/Popup.tsx b/stories/Components/components/Popup.tsx index 0266cca851..aeb9b6d27c 100644 --- a/stories/Components/components/Popup.tsx +++ b/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); } diff --git a/stories/Map/components/amap2demo_citybuilding.tsx b/stories/Map/components/amap2demo_citybuilding.tsx index dbac79a6a5..8690bf1b3c 100644 --- a/stories/Map/components/amap2demo_citybuilding.tsx +++ b/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); diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index e2930a4f92..4720872eab 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/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);