mirror of https://gitee.com/antv-l7/antv-l7
Shihui (#995)
* style: lint style * feat: fillimage 增加旋转角度的控制 * style: lint style
This commit is contained in:
YiQianYao
GitHub
parent
5339b80450
commit
d43fe3ee9f
|
|
@ -73,6 +73,8 @@ export interface IPointLayerStyleOptions {
|
|||
mask?: boolean;
|
||||
maskInside?: boolean;
|
||||
|
||||
rotation?: number; // angle
|
||||
|
||||
animateOption: IAnimateOption;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
// 不以米为实际单位
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
let layer = new PointLayer({}) // blend: 'additive'
|
||||
.source(
|
||||
[
|
||||
{
|
||||
lng: 120.1019811630249,
|
||||
lat: 30.264701434772807,
|
||||
name: 'n3',
|
||||
},
|
||||
],
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
},
|
||||
)
|
||||
// .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')
|
||||
.shape('cylinder')
|
||||
// .color('#0f9')
|
||||
// .color('#4169E1')
|
||||
.color('#4cfd47')
|
||||
// .color('name', ['#f00', '#ff0'])
|
||||
// // .size([100, 100, 1000])
|
||||
// // .size([100, 100, 1000])
|
||||
// // .size(10)
|
||||
// .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: '#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({
|
||||
// .animate({
|
||||
// // enable: true,
|
||||
// // speed: 0.02,
|
||||
// // repeat: 1
|
||||
// // })
|
||||
// // .active({ color: '#00f' });
|
||||
// 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(
|
||||
// [
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue