diff --git a/packages/layers/src/core/interface.ts b/packages/layers/src/core/interface.ts index 7c029fec89..72497a530d 100644 --- a/packages/layers/src/core/interface.ts +++ b/packages/layers/src/core/interface.ts @@ -73,6 +73,8 @@ export interface IPointLayerStyleOptions { mask?: boolean; maskInside?: boolean; + rotation?: number; // angle + animateOption: IAnimateOption; } diff --git a/packages/layers/src/point/models/fillmage.ts b/packages/layers/src/point/models/fillmage.ts index 0fcdcf431a..7237de3b36 100644 --- a/packages/layers/src/point/models/fillmage.ts +++ b/packages/layers/src/point/models/fillmage.ts @@ -24,6 +24,7 @@ export default class FillImageModel extends BaseModel { public meter2coord: number = 1; private texture: ITexture2D; private isMeter: boolean = false; + private radian: number = 0; // 旋转的弧度 public getUninforms(): IModelUniform { const { opacity = 1, @@ -32,12 +33,32 @@ export default class FillImageModel extends BaseModel { stroke = 'rgba(0,0,0,0)', offsets = [0, 0], blend, + rotation, } = this.layer.getLayerConfig() as IPointLayerStyleOptions; if (this.rendererService.getDirty()) { this.texture.bind(); } + /** + * rotateFlag + * L7MAP 1 + * MAPBOX 1 + * GAODE2.x -1 + * GAODE1.x -1 + */ + let rotateFlag = 1; + if ( + this.mapService.version === 'GAODE2.x' || + this.mapService.version === 'GAODE1.x' + ) { + rotateFlag = -1; + } + // 控制图标的旋转角度（绕 Z 轴旋转） + this.radian = rotation + ? (rotateFlag * Math.PI * rotation) / 180 + : (rotateFlag * Math.PI * (this.mapService.getRotation() % 360)) / 180; + if ( this.dataTextureTest && this.dataTextureNeedUpdate({ @@ -86,7 +107,12 @@ export default class FillImageModel extends BaseModel { } return { u_isMeter: Number(this.isMeter), - + u_RotateMatrix: new Float32Array([ + Math.cos(this.radian), + Math.sin(this.radian), + -Math.sin(this.radian), + Math.cos(this.radian), + ]), u_additive: blend === 'additive' ? 1.0 : 0.0, u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1] diff --git a/packages/layers/src/point/shaders/image/fillImage_vert.glsl b/packages/layers/src/point/shaders/image/fillImage_vert.glsl index 178b4e2057..38ccefb6e5 100644 --- a/packages/layers/src/point/shaders/image/fillImage_vert.glsl +++ b/packages/layers/src/point/shaders/image/fillImage_vert.glsl @@ -8,6 +8,7 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样 uniform mat4 u_ModelMatrix; uniform mat4 u_Mvp; +uniform mat2 u_RotateMatrix; uniform float u_isMeter; varying float v_radius; @@ -78,7 +79,7 @@ void main() { // anti-alias - vec2 offset = (extrude.xy * (a_Size) + textrueOffsets); + vec2 offset = (u_RotateMatrix * extrude.xy * (a_Size) + textrueOffsets); vec3 aPosition = a_Position; if(u_isMeter < 1.0) { // 不以米为实际单位 diff --git a/stories/Map/components/bugfix.tsx b/stories/Map/components/bugfix.tsx index d34c0cf4d8..eb32ec1f84 100644 --- a/stories/Map/components/bugfix.tsx +++ b/stories/Map/components/bugfix.tsx @@ -1,6 +1,6 @@ // @ts-nocheck import React from 'react'; -import { Scene, GaodeMap, GaodeMapV2, PointLayer } from '@antv/l7'; +import { Scene, GaodeMap, GaodeMapV2, Mapbox, Map, PointLayer } from '@antv/l7'; const data = { type: 'FeatureCollection', features: [ @@ -139,6 +139,9 @@ export default class Amap2demo extends React.Component { color: '#f00', mix: 0.5, }) + .style({ + // rotation: 90 + }) .fitBounds(); scene.addLayer(imageLayer); diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index 0cde40ae1d..b504c9918b 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -56,94 +56,60 @@ export default class GaodeMapComponent extends React.Component { // .size(2) // .color('#000'); - // let text = new PointLayer({ zIndex: 2 }) - // .source( - // [ - // { - // lng: aspaceLnglat[0] + 0.0002, - // lat: aspaceLnglat[1], - // }, - // ], - // { - // parser: { - // type: 'json', - // x: 'lng', - // y: 'lat', - // }, - // }, - // ) - // // .shape('100m', 'text') - // .shape('circle') - // .size(25) - // .color('#0f0') - // .style({ - // textOffset: [50, 20], - // }); - - // let layer = new PointLayer({}) // blend: 'additive' - // .source( - // [ - // // { - // // lng: 120, - // // lat: 30.267069, - // // name: 'n1' - // // }, - // // { - // // lng: 120.1025, - // // lat: 30.264701434772807, - // // name: 'n2', - // // }, - // { - // lng: 120.1019811630249, - // lat: 30.264701434772807, - // name: 'n3', - // }, - // ], - // { - // parser: { - // type: 'json', - // x: 'lng', - // y: 'lat', - // }, - // }, - // ) - // .shape('circle') - // // .shape('cylinder') - // // .color('#0f9') - // // .color('#4169E1') - // // .color('#4cfd47') - // .color('name', ['#f00', '#ff0']) - // // .size([100, 100, 1000]) - // // .size([100, 100, 1000]) - // // .size(10) - // .size('name', [20, 40]) - // // .animate({ - // // // enable: true, - // // enable: false, - // // // type: 'www' - // // }) - // // .animate(true) - // .select(true) - // .active({ color: '#00f' }) - // .style({ - // heightfixed: true, - // // pickLight: false, - // pickLight: true, - // // lightEnable: true, - // // opacity: 0.5, - // stroke: '#f00', - // // strokeWidth: 10, - // strokeWidth: 0, - // strokeOpacity: 1, - // // unit: 'meter', - // }); - // // .animate(true) - // // .animate({ - // // enable: true, - // // speed: 0.02, - // // repeat: 1 - // // }) - // // .active({ color: '#00f' }); + let layer = new PointLayer({}) // blend: 'additive' + .source( + [ + { + lng: 120.1019811630249, + lat: 30.264701434772807, + name: 'n3', + }, + ], + { + parser: { + type: 'json', + x: 'lng', + y: 'lat', + }, + }, + ) + // .shape('circle') + .shape('cylinder') + // .color('#0f9') + // .color('#4169E1') + .color('#4cfd47') + // .color('name', ['#f00', '#ff0']) + // .size([100, 100, 1000]) + .size([20, 20, 200]) + // .size(10) + // .size('name', [20, 40]) + // .animate({ + // // enable: true, + // enable: false, + // // type: 'www' + // }) + // .animate(true) + .select(true) + .active({ color: '#ff0' }) + .style({ + // heightfixed: true, + // pickLight: false, + // pickLight: true, + // lightEnable: true, + // opacity: 0.5, + stroke: '#f00', + // strokeWidth: 10, + strokeWidth: 0, + strokeOpacity: 1, + // unit: 'meter', + }); + // .animate(true) + // .animate({ + // enable: true, + // speed: 0.02, + // repeat: 1 + // }) + // .active({ color: '#00f' }); this.scene = scene; @@ -176,58 +142,12 @@ export default class GaodeMapComponent extends React.Component { // ); scene.on('loaded', () => { - // scene.addLayer(layer); + scene.addLayer(layer); // let scale = layer.getScale('size'); // console.log('scale n2', scale('n2')); // console.log('scale n3', scale('n3')); - let layer = new PointLayer({}) // blend: 'additive' - .source( - [ - { - lng: 120.1019811630249, - lat: 30.264701434772807, - name: 'n3', - }, - ], - { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }, - ) - .shape('circle') - .color('#ff0') - .animate(true) - .size(20); - scene.addLayer(layer); - - let layer2 = new PointLayer({}) // blend: 'additive' - .source( - [ - { - lng: 120.1019811630249 + 0.0001, - lat: 30.264701434772807, - name: 'n3', - }, - ], - { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }, - ) - .shape('circle') - .color('#ff0') - .animate(true) - .size(20); - scene.addLayer(layer2); - // let text = new PointLayer({ zIndex: 2 }) // .source( // [ diff --git a/stories/MultiPassRenderer/components/Bloom.tsx b/stories/MultiPassRenderer/components/Bloom.tsx index ff2014e018..e6e5c99883 100644 --- a/stories/MultiPassRenderer/components/Bloom.tsx +++ b/stories/MultiPassRenderer/components/Bloom.tsx @@ -35,9 +35,6 @@ export default class Bloom extends React.Component { }); // scene.setBgColor('#000'); const layer = new PolygonLayer({ - zIndex: 0, - // enablePicking: true, - // enableHighlight: true, enableMultiPassRenderer: true, passes: [ [ @@ -95,20 +92,20 @@ export default class Bloom extends React.Component { .color('red'); scene.addLayer(pointLayer); - setTimeout(() => { - layer.setMultiPass(false); - pointLayer.setMultiPass(true, [ - [ - 'bloom', - { - bloomRadius: 10, - bloomIntensity: 1, - }, - ], - ]); + // setTimeout(() => { + // layer.setMultiPass(false); + // pointLayer.setMultiPass(true, [ + // [ + // 'bloom', + // { + // bloomRadius: 10, + // bloomIntensity: 1, + // }, + // ], + // ]); - scene.render(); - }, 1000); + // scene.render(); + // }, 1000); this.scene = scene; }