p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 修改高德底图默认导出版本, 修复pointLayer/normal 的偏移失效:

This commit is contained in:
2912401452 2021-06-09 13:23:48 +08:00
parent 3d37240596
commit 04202c7595
23 changed files with 116 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/api/map.zh.md
View File

@ -15,8 +15,8 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管
### 引入 Map
```javascript
import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德2.0
import { GaodeMapV1 } from '@antv/l7-maps'; // 默认引入高德1.x 版本
import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德1.x
import { GaodeMapV2 } from '@antv/l7-maps'; // 默认引入高德2.0 版本
import { Mapbox } from '@antv/l7-maps';
```

12
packages/layers/src/core/interface.ts
View File

@ -8,10 +8,10 @@ export interface ILineLayerStyleOptions {
lineType?: keyof typeof lineStyleType; // 可选参数、线类型(all - dash/solid)
dashArray?: [number, number]; // 可选参数、虚线间隔
segmentNumber: number;
forward?: boolean; // 可选参数、是否反向(arcLine)
lineTexture?: boolean; // 可选参数、是否开启纹理贴图功能(all)
iconStep?: number; // 可选参数、纹理贴图步长(all)
textureBlend?: string; // 可选参数、供给纹理贴图使用(all)
sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
forward?: boolean; // 可选参数、是否反向(arcLine)
lineTexture?: boolean; // 可选参数、是否开启纹理贴图功能(all)
iconStep?: number; // 可选参数、纹理贴图步长(all)
textureBlend?: string; // 可选参数、供给纹理贴图使用(all)
sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
}

18
packages/layers/src/line/models/arc.ts
View File

@ -9,12 +9,12 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
import line_arc_frag from '../shaders/line_arc_frag.glsl';
import line_arc2d_vert from '../shaders/line_arc_vert.glsl';
import { rgb2arr } from '@antv/l7-utils'
const lineStyleObj: { [key: string]: number } = {
solid: 0.0,
dash: 1.0,
@ -39,13 +39,13 @@ export default class ArcModel extends BaseModel {
}
// 转化渐变色
let useLinearColor = 0 // 默认不生效
let sourceColorArr = [0, 0, 0, 0]
let targetColorArr = [0, 0, 0, 0]
if(sourceColor && targetColor) {
sourceColorArr = rgb2arr(sourceColor)
targetColorArr = rgb2arr(targetColor)
useLinearColor = 1
let useLinearColor = 0; // 默认不生效
let sourceColorArr = [0, 0, 0, 0];
let targetColorArr = [0, 0, 0, 0];
if (sourceColor && targetColor) {
sourceColorArr = rgb2arr(sourceColor);
targetColorArr = rgb2arr(targetColor);
useLinearColor = 1;
}
if (this.rendererService.getDirty()) {
@ -70,7 +70,7 @@ export default class ArcModel extends BaseModel {
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr
u_targetColor: targetColorArr,
};
}

28
packages/layers/src/line/models/arc_3d.ts
View File

@ -8,12 +8,12 @@ import {
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
import line_arc_frag from '../shaders/line_arc_3d_frag.glsl';
import line_arc_vert from '../shaders/line_arc_3d_vert.glsl';
import { rgb2arr } from '@antv/l7-utils'
const lineStyleObj: { [key: string]: number } = {
solid: 0.0,
dash: 1.0,
@ -36,15 +36,15 @@ export default class Arc3DModel extends BaseModel {
dashArray.push(0, 0);
}
// 转化渐变色
let useLinearColor = 0 // 默认不生效
let sourceColorArr = [0, 0, 0, 0]
let targetColorArr = [0, 0, 0, 0]
if(sourceColor && targetColor) {
sourceColorArr = rgb2arr(sourceColor)
targetColorArr = rgb2arr(targetColor)
useLinearColor = 1
}
// 转化渐变色
let useLinearColor = 0; // 默认不生效
let sourceColorArr = [0, 0, 0, 0];
let targetColorArr = [0, 0, 0, 0];
if (sourceColor && targetColor) {
sourceColorArr = rgb2arr(sourceColor);
targetColorArr = rgb2arr(targetColor);
useLinearColor = 1;
}
if (this.rendererService.getDirty()) {
this.texture.bind();
@ -63,10 +63,10 @@ export default class Arc3DModel extends BaseModel {
u_icon_step: iconStep,
u_textSize: [1024, this.iconService.canvasHeight || 128],
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr,
};
}

18
packages/layers/src/line/models/great_circle.ts
View File

@ -9,13 +9,13 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
// import line_arc_frag from '../shaders/line_arc_frag.glsl';
import line_arc_frag from '../shaders/line_arc_great_circle_frag.glsl';
import line_arc2d_vert from '../shaders/line_arc_great_circle_vert.glsl';
import { rgb2arr } from '@antv/l7-utils'
const lineStyleObj: { [key: string]: number } = {
solid: 0.0,
dash: 1.0,
@ -44,13 +44,13 @@ export default class GreatCircleModel extends BaseModel {
}
// 转化渐变色
let useLinearColor = 0 // 默认不生效
let sourceColorArr = [0, 0, 0, 0]
let targetColorArr = [0, 0, 0, 0]
if(sourceColor && targetColor) {
sourceColorArr = rgb2arr(sourceColor)
targetColorArr = rgb2arr(targetColor)
useLinearColor = 1
let useLinearColor = 0; // 默认不生效
let sourceColorArr = [0, 0, 0, 0];
let targetColorArr = [0, 0, 0, 0];
if (sourceColor && targetColor) {
sourceColorArr = rgb2arr(sourceColor);
targetColorArr = rgb2arr(targetColor);
useLinearColor = 1;
}
return {
@ -69,7 +69,7 @@ export default class GreatCircleModel extends BaseModel {
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr
u_targetColor: targetColorArr,
};
}
public getAnimateUniforms(): IModelUniform {

28
packages/layers/src/line/models/line.ts
View File

@ -10,12 +10,12 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineTriangulation } from '../../core/triangulation';
import line_frag from '../shaders/line_frag.glsl';
import line_vert from '../shaders/line_vert.glsl';
import { rgb2arr } from '@antv/l7-utils'
const lineStyleObj: { [key: string]: number } = {
solid: 0.0,
dash: 1.0,
@ -41,15 +41,15 @@ export default class LineModel extends BaseModel {
this.texture.bind();
}
// 转化渐变色
let useLinearColor = 0 // 默认不生效
let sourceColorArr = [0, 0, 0, 0]
let targetColorArr = [0, 0, 0, 0]
if(sourceColor && targetColor) {
sourceColorArr = rgb2arr(sourceColor)
targetColorArr = rgb2arr(targetColor)
useLinearColor = 1
}
// 转化渐变色
let useLinearColor = 0; // 默认不生效
let sourceColorArr = [0, 0, 0, 0];
let targetColorArr = [0, 0, 0, 0];
if (sourceColor && targetColor) {
sourceColorArr = rgb2arr(sourceColor);
targetColorArr = rgb2arr(targetColor);
useLinearColor = 1;
}
return {
u_opacity: opacity === undefined ? 1 : opacity,
@ -63,10 +63,10 @@ export default class LineModel extends BaseModel {
u_icon_step: iconStep,
u_textSize: [1024, this.iconService.canvasHeight || 128],
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr,
};
}
public getAnimateUniforms(): IModelUniform {

3
packages/layers/src/line/shaders/line_arc_frag.glsl
View File

@ -67,6 +67,7 @@ void main() {
if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / segmentNumber));
// float arcRadio = smoothstep( 0.0, 1.0, v_distance_ratio);
// float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
float count = floor(v_arcDistrance/v_pixelLen);
@ -90,7 +91,7 @@ void main() {
}
gl_FragColor = filterColor(pattern);
}
// gl_FragColor = vec4(arcRadio, 0.0, 0.0, 1.0);
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
// gl_FragColor = filterColor(texture2D(u_texture, uv));

4
packages/layers/src/line/shaders/line_arc_vert.glsl
View File

@ -104,13 +104,15 @@ void main() {
float total_Distance = pixelDistance(s, t) / 2.0 * PI;
// float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex);
}
}
if(u_aimate.x == Animate) {
v_distance_ratio = segmentIndex / segmentNumber;
if(u_lineDir != 1.0) {
v_distance_ratio = 1.0 - v_distance_ratio;
}
}
vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio), 0.0, 1.0));
vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio), 0.0, 1.0));
v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);

4
packages/layers/src/point/shaders/normal_vert.glsl
View File

@ -10,6 +10,7 @@ uniform vec2 u_offsets;
#pragma include "projection"
#pragma include "picking"
#pragma include "project"
void main() {
v_color = a_Color;
// vec2 offset = project_pixel(u_offsets);
@ -17,7 +18,8 @@ void main() {
// gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));\
//
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * vec4(a_Position, 1.0);
vec2 offset = project_pixel((u_offsets));
gl_Position = u_Mvp * vec4(a_Position.xy + offset, a_Position.z, 1.0);
} else { // else
vec2 offset = project_pixel(u_offsets);
vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2.,-a_Size /2.,0.,0.);

7
packages/maps/src/index.ts
View File

@ -1,7 +1,8 @@
// import GaodeMap from './amap/';
import GaodeMapV1 from './amap/';
import GaodeMap from './amap2/';
import GaodeMap from './amap/';
// import GaodeMapV1 from './amap/';
import GaodeMapV2 from './amap2/';
import Map from './map/';
import Mapbox from './mapbox/';
export { GaodeMap, GaodeMapV1, Mapbox, Map };
export { GaodeMap, GaodeMapV2, Mapbox, Map };

5
stories/3D_Model/Components/amap_three.tsx
View File

@ -1,5 +1,5 @@
import { Scene } from '@antv/l7';
import { GaodeMap, Mapbox, GaodeMapV1 } from '@antv/l7-maps';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
import * as React from 'react';
// import { DirectionalLight, Scene as ThreeScene } from 'three';
@ -23,8 +23,7 @@ export default class GlTFThreeJSDemo extends React.Component {
const scene = new Scene({
id: 'map',
// map: new GaodeMap({
map: new GaodeMapV1({
map: new GaodeMap({
center: [111.4453125, 32.84267363195431],
pitch: 45,
rotation: 30,

10
stories/Map/components/amap2demo.tsx
View File

@ -42,11 +42,11 @@ export default class Amap2demo extends React.Component {
this.scene = scene;
scene.on('loaded', () => {
console.log('event test');
// console.log('event test');
// @ts-ignore
console.log(scene.map.getProjection().project);
// console.log(scene.map.getProjection().project);
// @ts-ignore
console.log(scene.map.customCoords.lngLatToCoord);
// console.log(scene.map.customCoords.lngLatToCoord);
const layer = new PointLayer()
.source(originData, {
parser: {
@ -55,13 +55,15 @@ export default class Amap2demo extends React.Component {
y: 'lat',
},
})
.shape('circle')
// .shape('circle')
// .shape('normal')
.shape('fill')
.color('rgba(255, 0, 0, 0.9)')
.size(10)
.style({
stroke: '#fff',
storkeWidth: 2,
offsets: [100, 100],
})
.active(true);
scene.addLayer(layer);

7
stories/Map/components/amap2demo_arcLine3DTex.tsx
View File

@ -25,6 +25,9 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
this.scene = scene;
scene.on('loaded', () => {
setTimeout(() => {
scene.setPitch(0);
}, 4000);
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
@ -65,8 +68,8 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
// dashArray: [5, 5],
// textureBlend: 'replace',
// textureBlend: 'normal',
sourceColor: "#f00",
targetColor: "#0f0"
sourceColor: '#f00',
targetColor: '#0f0',
});
// .animate({
// duration: 50,

19
stories/Map/components/amap2demo_arcLineLinear.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_arcLineLinear extends React.Component {
@ -14,7 +14,6 @@ export default class Amap2demo_arcLineLinear extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
// map: new GaodeMapV1({
map: new GaodeMap({
pitch: 40,
center: [107.77791556935472, 35.443286920228644],
@ -65,14 +64,14 @@ export default class Amap2demo_arcLineLinear extends React.Component {
// dashArray: [5, 5],
// textureBlend: 'replace',
// textureBlend: 'normal',
sourceColor: "#f00",
targetColor: "#0f0"
})
// .animate({
// duration: 50,
// interval: 0.3,
// trailLength: 0.1,
// });
sourceColor: '#f00',
targetColor: '#0f0',
});
// .animate({
// duration: 50,
// interval: 0.3,
// trailLength: 0.1,
// });
scene.addLayer(layer);
});
}

18
stories/Map/components/amap2demo_arcLineTex.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_arcLineTex extends React.Component {
@ -14,7 +14,7 @@ export default class Amap2demo_arcLineTex extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
// map: new GaodeMapV1({
// map: new GaodeMapV2({
map: new GaodeMap({
pitch: 40,
center: [107.77791556935472, 35.443286920228644],
@ -52,7 +52,7 @@ export default class Amap2demo_arcLineTex extends React.Component {
y1: 'lat2',
},
})
.size(20)
.size(25)
.shape('arc')
.texture('02')
.color('#8C1EB2')
@ -66,12 +66,12 @@ export default class Amap2demo_arcLineTex extends React.Component {
// dashArray: [5, 5],
// textureBlend: 'replace',
// textureBlend: 'normal',
})
// .animate({
// duration: 50,
// interval: 0.3,
// trailLength: 0.1,
// });
});
// .animate({
// duration: 50,
// interval: 0.3,
// trailLength: 0.1,
// })
scene.addLayer(layer);
});
}

6
stories/Map/components/amap2demo_arcLine_greatCircleTex.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_arcLine_greatCircle extends React.Component {
@ -72,8 +72,8 @@ export default class Amap2demo_arcLine_greatCircle extends React.Component {
// lineType: 'dash',
// dashArray: [5, 5],
sourceColor: "#f00",
targetColor: "#0f0"
sourceColor: '#f00',
targetColor: '#0f0',
});
// .animate({
// duration: 5,

2
stories/Map/components/amap2demo_clustermarker.tsx
View File

@ -1,6 +1,6 @@
//@ts-ignore
import { MarkerLayer, Marker, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_clustermarker extends React.Component {
// @ts-ignore

4
stories/Map/components/amap2demo_drawControl.tsx
View File

@ -1,6 +1,6 @@
//@ts-ignore
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMapV1 } from '@antv/l7-maps';
import { GaodeMap } from '@antv/l7-maps';
import { DrawControl } from '@antv/l7-draw';
import * as React from 'react';
export default class Amap2demo_drawControl extends React.Component {
@ -14,7 +14,7 @@ export default class Amap2demo_drawControl extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMapV1({
map: new GaodeMap({
pitch: 0,
style: 'light',
layers: [],

4
stories/Map/components/amap2demo_heatmap_hexagon.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_heatmap_hexagon extends React.Component {
@ -47,7 +47,7 @@ export default class Amap2demo_heatmap_hexagon extends React.Component {
],
})
.size('sum', (sum) => {
return sum * 200;
return sum * 20000;
})
.shape('hexagonColumn')
.style({

10
stories/Map/components/amap2demo_instance.tsx
View File

@ -1,6 +1,6 @@
//@ts-ignore
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps';
import AMapLoader from '@amap/amap-jsapi-loader';
import * as React from 'react';
export default class Amap2demo_instance extends React.Component {
@ -12,10 +12,10 @@ export default class Amap2demo_instance extends React.Component {
}
public async componentDidMount() {
// const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200';
// const AMAP_VERSION: string = '1.4.15';
const AMAP_API_KEY: string = 'ff533602d57df6f8ab3b0fea226ae52f';
const AMAP_VERSION: string = '2.0';
const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200';
const AMAP_VERSION: string = '1.4.15';
// const AMAP_API_KEY: string = 'ff533602d57df6f8ab3b0fea226ae52f';
// const AMAP_VERSION: string = '2.0';
AMapLoader.load({
key: AMAP_API_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填

4
stories/Map/components/amap2demo_lineLinear.tsx
View File

@ -62,8 +62,8 @@ export default class Amap2demo_lineLinear extends React.Component {
// dashArray: [5, 5],
// textureBlend: 'replace',
// textureBlend: 'normal',
sourceColor: "#f00",
targetColor: "#0f0"
sourceColor: '#f00',
targetColor: '#0f0',
});
scene.addLayer(layer);
});

2
stories/Map/components/amap2demo_markerlayer.tsx
View File

@ -1,6 +1,6 @@
//@ts-ignore
import { MarkerLayer, Marker, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_markerlayer extends React.Component {
// @ts-ignore

5
stories/Map/components/mapCenter.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class GaodeMapComponent extends React.Component {
@ -14,7 +14,7 @@ export default class GaodeMapComponent extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMapV1({
map: new GaodeMap({
center: [121.107846, 30.267069],
pitch: 0,
style: 'normal',
@ -58,6 +58,7 @@ export default class GaodeMapComponent extends React.Component {
.style({
stroke: '#fff',
storkeWidth: 2,
offsets: [100, 100],
});
scene.addLayer(layer);
scene.render();