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

Merge pull request #707 from antvis/shihui_dev 

Shihui dev
This commit is contained in:
YiQianYao 2021-06-09 13:29:22 +08:00 committed by GitHub
parent 3aecfd6545 04202c7595
commit 868c8b60d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 1094 additions and 118 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';
```

2
packages/component/package.json
View File

@ -32,7 +32,7 @@
"inversify": "^5.0.1",
"load-styles": "^2.0.0"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
"publishConfig": {
"access": "public"
}

21
packages/component/src/markerlayer.ts
View File

@ -77,7 +77,8 @@ export default class MarkerLayer extends EventEmitter {
this.initCluster();
this.update();
// 地图视野变化时，重新计算视野内的聚合点。
this.mapsService.on('camerachange', this.update);
this.mapsService.on('camerachange', this.update); // amap1.x 更新事件
this.mapsService.on('viewchange', this.update); // amap2.0 更新事件
}
this.addMarkers();
return this;
@ -98,6 +99,24 @@ export default class MarkerLayer extends EventEmitter {
}
}
/**
* 隐藏 marker 在每个 marker 上单独修改属性而不是在 markerContainer 上修改（在 markerContainer 修改会有用户在场景加载完之前调用失败的问题）
*/
public hide() {
this.markers.map((m) => {
m.getElement().style.opacity = '0';
});
}
/**
* 显示 marker
*/
public show() {
this.markers.map((m) => {
m.getElement().style.opacity = '1';
});
}
public getMarkers() {
const cluster = this.markerLayerOption.cluster;
return cluster ? this.clusterMarkers : this.markers;

2
packages/core/package.json
View File

@ -47,7 +47,7 @@
"@types/lodash": "^4.14.138",
"@types/viewport-mercator-project": "^6.1.0"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
"publishConfig": {
"access": "public"
}

24
packages/core/src/services/interaction/PickingService.ts
View File

@ -321,7 +321,29 @@ export default class PickingService implements IPickingService {
featureId: number | null;
},
) {
layer.emit(target.type, target);
// 判断是否发生事件冲突
if (this.isEventCrash(target)) {
layer.emit(target.type, target);
}
}
/**
* 检测触发事件是否是在 marker/popup 上发生，若是则会发生冲突（发生冲突时 marker/popup 事件优先）
* @param obj
* @returns
*/
private isEventCrash(obj: any) {
let notCrash = true;
obj.target.path.map((p: HTMLElement) => {
if (p.classList) {
p.classList.forEach((n: any) => {
if (n === 'l7-marker' || n === 'l7-popup') {
notCrash = false;
}
});
}
});
return notCrash;
}
/**

2
packages/core/src/services/layer/ILayerService.ts
View File

@ -130,7 +130,7 @@ export interface ILayer {
scale(field: string | number | IScaleOptions, cfg?: IScale): ILayer;
size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
color(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
texture?(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
texture(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
label(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
animate(option: Partial<IAnimateOption> | boolean): ILayer;

2
packages/core/src/services/layer/StyleAttributeService.ts
View File

@ -1,4 +1,4 @@
import { inject, injectable } from 'inversify';
import { inject, injectable, optional } from 'inversify';
import { TYPES } from '../../types';
import { gl } from '../renderer/gl';
import { IAttribute } from '../renderer/IAttribute';

2
packages/l7/package.json
View File

@ -33,7 +33,7 @@
"@antv/l7-utils": "^2.4.1",
"@babel/runtime": "^7.7.7"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
"publishConfig": {
"access": "public"
}

2
packages/layers/package.json
View File

@ -53,7 +53,7 @@
"@types/gl-matrix": "^2.4.5",
"@types/lodash": "^4.14.138"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
"publishConfig": {
"access": "public"
}

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

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

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

@ -9,6 +9,7 @@ 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';
@ -23,6 +24,9 @@ export default class ArcModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
opacity,
sourceColor,
targetColor,
textureBlend = 'normal',
lineType = 'solid',
dashArray = [10, 5],
forward = true,
@ -34,22 +38,39 @@ export default class ArcModel 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;
}
if (this.rendererService.getDirty()) {
this.texture.bind();
}
return {
u_opacity: opacity || 1,
u_opacity: opacity === undefined ? 1 : opacity,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber: 30,
u_line_type: lineStyleObj[lineType || 'solid'],
u_dash_array: dashArray,
u_blur: 0.9,
u_lineDir: forward ? 1 : -1,
// 纹理支持参数
u_texture: this.texture, // 贴图
u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
u_icon_step: iconStep,
u_textSize: [1024, this.iconService.canvasHeight || 128],
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr,
};
}

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

@ -6,7 +6,9 @@ import {
ILayerConfig,
IModel,
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';
@ -17,22 +19,57 @@ const lineStyleObj: { [key: string]: number } = {
dash: 1.0,
};
export default class Arc3DModel extends BaseModel {
protected texture: ITexture2D;
public getUninforms(): IModelUniform {
const {
opacity,
sourceColor,
targetColor,
textureBlend = 'normal',
lineType = 'solid',
dashArray = [10, 5],
lineTexture = false,
iconStep = 100,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (dashArray.length === 2) {
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;
}
if (this.rendererService.getDirty()) {
this.texture.bind();
}
return {
u_opacity: opacity || 1,
u_opacity: opacity === undefined ? 1 : opacity,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber: 30,
u_line_type: lineStyleObj[lineType as string] || 0.0,
u_dash_array: dashArray,
// 纹理支持参数
u_texture: this.texture, // 贴图
u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
u_icon_step: iconStep,
u_textSize: [1024, this.iconService.canvasHeight || 128],
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr,
};
}
public getAnimateUniforms(): IModelUniform {
const { animateOption } = this.layer.getLayerConfig() as ILayerConfig;
return {
@ -42,9 +79,19 @@ export default class Arc3DModel extends BaseModel {
}
public initModels(): IModel[] {
this.updateTexture();
this.iconService.on('imageUpdate', this.updateTexture);
return this.buildModels();
}
public clearModels() {
if (this.texture) {
this.texture.destroy();
}
this.iconService.off('imageUpdate', this.updateTexture);
}
public buildModels(): IModel[] {
return [
this.layer.buildLayerModel({
@ -103,5 +150,50 @@ export default class Arc3DModel extends BaseModel {
},
},
});
this.styleAttributeService.registerStyleAttribute({
name: 'uv',
type: AttributeType.Attribute,
descriptor: {
name: 'a_iconMapUV',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 2,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
const iconMap = this.iconService.getIconMap();
const { texture } = feature;
const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };
return [x, y];
},
},
});
}
private updateTexture = () => {
const { createTexture2D } = this.rendererService;
if (this.texture) {
this.texture.update({
data: this.iconService.getCanvas(),
});
this.layer.render();
return;
}
this.texture = createTexture2D({
data: this.iconService.getCanvas(),
mag: gl.NEAREST,
min: gl.NEAREST,
premultiplyAlpha: false,
width: 1024,
height: this.iconService.canvasHeight || 128,
});
};
}

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

@ -6,12 +6,15 @@ import {
ILayerConfig,
IModel,
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_frag.glsl';
// 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';
const lineStyleObj: { [key: string]: number } = {
solid: 0.0,
@ -19,20 +22,54 @@ const lineStyleObj: { [key: string]: number } = {
};
export default class GreatCircleModel extends BaseModel {
protected texture: ITexture2D;
public getUninforms(): IModelUniform {
const {
opacity,
sourceColor,
targetColor,
textureBlend = 'normal',
lineType = 'solid',
dashArray = [10, 5],
lineTexture = false,
iconStep = 100,
} = this.layer.getLayerConfig() as Partial<ILineLayerStyleOptions>;
// console.log('opacity', opacity)
if (dashArray.length === 2) {
dashArray.push(0, 0);
}
if (this.rendererService.getDirty()) {
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;
}
return {
u_opacity: opacity || 1,
u_opacity: opacity === undefined ? 1 : opacity,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber: 30,
u_line_type: lineStyleObj[lineType as string] || 0.0,
u_dash_array: dashArray,
// 纹理支持参数
u_texture: this.texture, // 贴图
u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
u_icon_step: iconStep,
u_textSize: [1024, this.iconService.canvasHeight || 128],
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr,
};
}
public getAnimateUniforms(): IModelUniform {
@ -44,9 +81,19 @@ export default class GreatCircleModel extends BaseModel {
}
public initModels(): IModel[] {
this.updateTexture();
this.iconService.on('imageUpdate', this.updateTexture);
return this.buildModels();
}
public clearModels() {
if (this.texture) {
this.texture.destroy();
}
this.iconService.off('imageUpdate', this.updateTexture);
}
public buildModels(): IModel[] {
return [
this.layer.buildLayerModel({
@ -105,5 +152,51 @@ export default class GreatCircleModel extends BaseModel {
},
},
});
this.styleAttributeService.registerStyleAttribute({
name: 'uv',
type: AttributeType.Attribute,
descriptor: {
name: 'a_iconMapUV',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 2,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
const iconMap = this.iconService.getIconMap();
const { texture } = feature;
// console.log('icon feature', feature)
const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };
return [x, y];
},
},
});
}
private updateTexture = () => {
const { createTexture2D } = this.rendererService;
if (this.texture) {
this.texture.update({
data: this.iconService.getCanvas(),
});
this.layer.render();
return;
}
this.texture = createTexture2D({
data: this.iconService.getCanvas(),
mag: gl.NEAREST,
min: gl.NEAREST,
premultiplyAlpha: false,
width: 1024,
height: this.iconService.canvasHeight || 128,
});
};
}

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

@ -10,6 +10,7 @@ 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';
@ -24,6 +25,9 @@ export default class LineModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
opacity,
sourceColor,
targetColor,
textureBlend = 'normal',
lineType = 'solid',
dashArray = [10, 5, 0, 0],
lineTexture = false,
@ -37,15 +41,32 @@ 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;
}
return {
u_opacity: opacity || 1.0,
u_opacity: opacity === undefined ? 1 : opacity,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
u_line_type: lineStyleObj[lineType],
u_dash_array: dashArray,
// 纹理支持参数
u_texture: this.texture, // 贴图
u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
u_icon_step: iconStep,
u_textSize: [1024, this.iconService.canvasHeight || 128],
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr,
};
}
public getAnimateUniforms(): IModelUniform {

77
packages/layers/src/line/shaders/line_arc_3d_frag.glsl
View File

@ -1,8 +1,10 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
#define LineTexture 1.0
uniform float u_opacity;
uniform float u_textureBlend;
uniform float u_blur : 0.9;
uniform float u_line_type: 0.0;
varying vec2 v_normal;
@ -10,13 +12,36 @@ varying vec4 v_dash_array;
varying float v_distance_ratio;
varying vec4 v_color;
uniform float u_line_texture: 0.0;
uniform sampler2D u_texture;
uniform vec2 u_textSize;
varying float v_segmentIndex;
uniform float segmentNumber;
varying float v_arcDistrance;
varying float v_pixelLen;
varying float v_a;
varying vec2 v_offset;
varying vec2 v_iconMapUV;
uniform float u_time;
uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
uniform float u_linearColor: 0;
uniform vec4 u_sourceColor;
uniform vec4 u_targetColor;
#pragma include "picking"
void main() {
gl_FragColor = v_color;
float animateSpeed = 0.0; // 运动速度
// gl_FragColor = v_color;
if(u_linearColor == 1.0) { // 使用渐变颜色
gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber);
} else { // 使用 color 方法传入的颜色
gl_FragColor = v_color;
}
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
// float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
gl_FragColor.a *= u_opacity;
@ -30,21 +55,47 @@ void main() {
}
if(u_aimate.x == Animate) {
animateSpeed = u_time / u_aimate.y;
float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
alpha = smoothstep(0., 1., alpha);
// alpha = smoothstep(0., 1., alpha);
alpha = clamp(alpha, 0.0, 1.0);
gl_FragColor.a *= alpha;
}
// if(u_line_texture == LineTexture) { // while load texture
// //v_u; // 水平
// float v = length(v_offset)/(v_a); // 横向
// vec2 uv= v_iconMapUV / u_textSize + vec2(v_u, v) / u_textSize * 64.;
// // gl_FragColor = vec4(v_u, v, 0.0, 1.0);
// // gl_FragColor = vec4(1.0, 0.0, 0.0, v_u);
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
// } else {
// gl_FragColor = filterColor(gl_FragColor);
// }
gl_FragColor = filterColor(gl_FragColor);
if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
// float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / segmentNumber));
float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
float count = floor(v_arcDistrance/v_pixelLen);
float u = fract(arcRadio * count - animateSpeed * count);
if(u_aimate.x == Animate) {
u = gl_FragColor.a/u_opacity;
}
float v = length(v_offset)/(v_a); // 横向
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
vec4 pattern = texture2D(u_texture, uv);
if(u_textureBlend == 0.0) { // normal
pattern.a = 0.0;
gl_FragColor = filterColor(gl_FragColor + pattern);
} else { // replace
pattern.a *= u_opacity;
if(gl_FragColor.a <= 0.0) {
pattern.a = 0.0;
}
gl_FragColor = filterColor(pattern);
}
// gl_FragColor = filterColor(gl_FragColor + pattern);
} else {
gl_FragColor = filterColor(gl_FragColor);
}
// gl_FragColor = filterColor(gl_FragColor);
}

34
packages/layers/src/line/shaders/line_arc_3d_vert.glsl
View File

@ -1,6 +1,7 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
#define LineTexture 1.0
attribute vec3 a_Position;
attribute vec4 a_Instance;
attribute vec4 a_Color;
@ -17,6 +18,16 @@ uniform float u_line_type: 0.0;
uniform vec4 u_dash_array: [10.0, 5., 0, 0];
varying vec4 v_dash_array;
uniform float u_icon_step: 100;
uniform float u_line_texture: 0.0;
varying float v_segmentIndex;
varying float v_arcDistrance;
varying float v_pixelLen;
varying float v_a;
varying vec2 v_offset;
attribute vec2 a_iconMapUV;
varying vec2 v_iconMapUV;
#pragma include "projection"
#pragma include "project"
#pragma include "picking"
@ -73,7 +84,15 @@ void main() {
if(u_line_type == LineTypeDash) {
v_distance_ratio = segmentIndex / segmentNumber;
float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
// float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
vec2 s = source;
vec2 t = target;
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
s = unProjCustomCoord(source);
t = unProjCustomCoord(target);
}
float total_Distance = pixelDistance(s, t) / 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) {
@ -86,6 +105,19 @@ void main() {
vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y);
v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
v_segmentIndex = a_Position.x;
if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式
v_arcDistrance = length(source - target);
v_pixelLen = project_pixel(u_icon_step);
vec2 projectOffset = project_pixel(offset);
v_offset = projectOffset + projectOffset * sign(a_Position.y);
v_a = project_pixel(a_Size);
v_iconMapUV = a_iconMapUV;
}
// gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0));
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * (vec4(curr.xy + project_pixel(offset), curr.z, 1.0));

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

@ -4,6 +4,7 @@
#define LineTexture 1.0
uniform float u_opacity;
uniform float u_textureBlend;
uniform float u_blur : 0.9;
uniform float u_line_type: 0.0;
varying vec2 v_normal;
@ -26,12 +27,23 @@ varying float v_a;
varying vec2 v_offset;
varying vec2 v_iconMapUV;
uniform float u_linearColor: 0;
uniform vec4 u_sourceColor;
uniform vec4 u_targetColor;
#pragma include "picking"
void main() {
float animateSpeed = 0.0; // 运动速度
gl_FragColor = v_color;
if(u_linearColor == 1.0) { // 使用渐变颜色
gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber);
} else { // 使用 color 方法传入的颜色
gl_FragColor = v_color;
}
// gl_FragColor = v_color;
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
// float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
gl_FragColor.a *= u_opacity;
@ -48,25 +60,40 @@ void main() {
animateSpeed = u_time / u_aimate.y;
float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
alpha = smoothstep(0., 1., alpha);
// alpha = smoothstep(0., 1., alpha);
alpha = clamp(alpha, 0.0, 1.0);
gl_FragColor.a *= alpha;
}
if(u_line_texture == LineTexture) { // while load texture
float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
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);
float u = 1.0 - fract(arcRadio * count + animateSpeed);
float alpha = 1.0;
if(u_aimate.x == Animate) {
u = gl_FragColor.a;
alpha = gl_FragColor.a;
u = gl_FragColor.a/u_opacity;
}
float v = length(v_offset)/(v_a); // 横向
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
gl_FragColor.a *= alpha;
vec4 pattern = texture2D(u_texture, uv);
if(u_textureBlend == 0.0) { // normal
pattern.a = 0.0;
gl_FragColor = filterColor(gl_FragColor + pattern);
} else { // replace
pattern.a *= u_opacity;
if(gl_FragColor.a <= 0.0) {
pattern.a = 0.0;
}
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));
} else {
gl_FragColor = filterColor(gl_FragColor);

102
packages/layers/src/line/shaders/line_arc_great_circle_frag.glsl Normal file
View File

@ -0,0 +1,102 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
#define LineTexture 1.0
uniform float u_opacity;
uniform float u_textureBlend;
uniform float u_blur : 0.9;
uniform float u_line_type: 0.0;
varying vec2 v_normal;
varying vec4 v_dash_array;
varying float v_distance_ratio;
varying vec4 v_color;
uniform float u_time;
uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
uniform float u_line_texture: 0.0;
uniform sampler2D u_texture;
uniform vec2 u_textSize;
uniform float segmentNumber;
varying float v_segmentIndex;
varying float v_arcDistrance;
varying float v_pixelLen;
varying vec2 v_offset;
varying float v_a;
varying vec2 v_iconMapUV;
uniform float u_linearColor: 0;
uniform vec4 u_sourceColor;
uniform vec4 u_targetColor;
#pragma include "picking"
void main() {
float animateSpeed = 0.0;
// gl_FragColor = v_color;
if(u_linearColor == 1.0) { // 使用渐变颜色
gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber);
} else { // 使用 color 方法传入的颜色
gl_FragColor = v_color;
}
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
// float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
gl_FragColor.a *= u_opacity;
if(u_line_type == LineTypeDash) {
float flag = 0.;
float dashLength = mod(v_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength < v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
flag = 1.;
}
gl_FragColor.a *=flag;
}
if(u_aimate.x == Animate) {
animateSpeed = u_time / u_aimate.y;
// float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
// float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
float alpha =1.0 - fract( mod(1.0- smoothstep(0.0, 1.0, v_distance_ratio), u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
alpha = smoothstep(0., 1., alpha);
// alpha = clamp(alpha, 0.1, 1.0);
// if(alpha < 0.01) alpha = 0.0;
gl_FragColor.a *= alpha;
}
if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式
float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
// float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
float count = floor(v_arcDistrance/v_pixelLen);
// float u = fract(arcRadio * count);
float u = fract(arcRadio * count - animateSpeed * count);
// float u = fract(arcRadio * count - animateSpeed);
if(u_aimate.x == Animate) {
u = gl_FragColor.a;
}
float v = length(v_offset)/(v_a); // 横向
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
vec4 pattern = texture2D(u_texture, uv);
if(u_textureBlend == 0.0) { // normal
pattern.a = 0.0;
gl_FragColor = filterColor(gl_FragColor + pattern);
} else { // replace
pattern.a *= u_opacity;
if(gl_FragColor.a <= 0.0) {
pattern.a = 0.0;
}
gl_FragColor = filterColor(pattern);
}
// gl_FragColor = filterColor(gl_FragColor + pattern);
} else {
gl_FragColor = filterColor(gl_FragColor);
}
// gl_FragColor = filterColor(gl_FragColor);
}

34
packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
View File

@ -1,6 +1,8 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
#define LineTexture 1.0
attribute vec4 a_Color;
attribute vec3 a_Position;
attribute vec4 a_Instance;
@ -17,6 +19,17 @@ uniform float u_line_type: 0.0;
uniform vec4 u_dash_array: [10.0, 5., 0, 0];
varying vec4 v_dash_array;
uniform float u_icon_step: 100;
uniform float u_line_texture: 0.0;
varying float v_segmentIndex;
varying float v_arcDistrance;
varying float v_pixelLen;
varying vec2 v_offset;
varying float v_a;
attribute vec2 a_iconMapUV;
varying vec2 v_iconMapUV;
#pragma include "projection"
#pragma include "project"
#pragma include "picking"
@ -119,7 +132,16 @@ void main() {
float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
if(u_line_type == LineTypeDash) {
v_distance_ratio = segmentIndex / segmentNumber;
float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba);
vec2 s = source;
vec2 t = target;
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
s = unProjCustomCoord(source);
t = unProjCustomCoord(target);
}
float total_Distance = pixelDistance(s, t) / 2.0 * PI;
total_Distance = total_Distance*8.0;
// float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba);
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex);
}
if(u_aimate.x == Animate) {
@ -134,6 +156,16 @@ void main() {
// vec4 project_pos = project_position(vec4(curr.xy, 0, 1.0));
// gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, curr.z, 1.0));
v_segmentIndex = a_Position.x;
if(LineTexture == u_line_texture) { // 开启贴图模式
v_arcDistrance = length(source - target);
v_pixelLen = project_pixel(u_icon_step)/8.0;
v_a = project_pixel(a_Size);
v_offset = offset + offset * sign(a_Position.y);
v_iconMapUV = a_iconMapUV;
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * (vec4(curr.xy + offset, curr.z, 1.0));
} else {

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

@ -94,24 +94,35 @@ void main() {
float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
if(u_line_type == LineTypeDash) {
v_distance_ratio = segmentIndex / segmentNumber;
float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
vec2 s = source;
vec2 t = target;
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
s = unProjCustomCoord(source);
t = unProjCustomCoord(target);
}
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);
//unProjCustomCoord
vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
v_segmentIndex = a_Position.x + 1.0;
if(LineTexture == u_line_texture) { // 开启贴图模式
v_segmentIndex = a_Position.x + 1.0;
v_arcDistrance = length(source - target);
v_iconMapUV = a_iconMapUV;
v_pixelLen = project_pixel(u_icon_step);
@ -122,6 +133,7 @@ void main() {
// gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
// gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
} else {
gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));

30
packages/layers/src/line/shaders/line_frag.glsl
View File

@ -5,6 +5,7 @@
uniform float u_blur : 0.99;
uniform float u_line_type: 0.0;
uniform float u_opacity : 1.0;
uniform float u_textureBlend;
varying vec4 v_color;
varying vec2 v_normal;
@ -27,6 +28,10 @@ varying float v_pixelLen;
varying vec2 v_iconMapUV;
varying float v_strokeWidth;
uniform float u_linearColor: 0;
uniform vec4 u_sourceColor;
uniform vec4 u_targetColor;
#pragma include "picking"
uniform float u_time;
@ -34,7 +39,14 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; // 控制运动
// [animate, duration, interval, trailLength],
void main() {
float animateSpeed = 0.0; // 运动速度
gl_FragColor = v_color;
// gl_FragColor = v_color;
if(u_linearColor == 1.0) { // 使用渐变颜色
gl_FragColor = mix(u_sourceColor, u_targetColor, v_distance_ratio);
} else { // 使用 color 方法传入的颜色
gl_FragColor = v_color;
}
// anti-alias
// float blur = 1.0 - smoothstep(u_blur, 1., length(v_normal.xy));
gl_FragColor.a *= u_opacity; // 全局透明度
@ -56,13 +68,25 @@ void main() {
// gl_FragColor.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, dashLength)));
}
if(u_line_texture == LineTexture) { // while load texture
if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
float u = fract(mod(v_distance, v_pixelLen)/v_pixelLen - animateSpeed);
float v = length(v_offset)/(v_a*2.0);
v = max(smoothstep(0.95, 1.0, v), v);
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, vec2(u, v)));
gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
vec4 pattern = texture2D(u_texture, uv);
if(u_textureBlend == 0.0) { // normal
pattern.a = 0.0;
gl_FragColor = filterColor(gl_FragColor + pattern);
} else { // replace
pattern.a *= u_opacity;
if(gl_FragColor.a <= 0.0) {
pattern.a = 0.0;
}
gl_FragColor = filterColor(pattern);
}
} else {
gl_FragColor = filterColor(gl_FragColor);
}

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

@ -36,6 +36,7 @@ varying float v_size;
varying float v_a;
varying float v_pixelLen;
varying vec2 v_iconMapUV;
uniform float u_linearColor: 0;
// varying float v_strokeWidth;
void main() {
@ -49,7 +50,7 @@ void main() {
// v_distance_ratio = 0.01;
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
}
if(u_aimate.x == Animate) {
if(u_aimate.x == Animate || u_linearColor == 1.0) {
v_distance_ratio = a_Distance / a_Total_Distance;
}
v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter));

4
packages/layers/src/plugins/DataMappingPlugin.ts
View File

@ -117,7 +117,8 @@ export default class DataMappingPlugin implements ILayerPlugin {
coordinates: record.coordinates,
...preRecord,
};
// console.log('encodeRecord', encodeRecord)
// console.log('attributes', attributes)
attributes
.filter((attribute) => attribute.scale !== undefined)
.forEach((attribute: IStyleAttribute) => {
@ -126,6 +127,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
// TODO: 支持每个属性配置 postprocess
if (attribute.name === 'color') {
// console.log('attribute', attribute)
values = values.map((c: unknown) => {
return rgb2arr(c as string);
});

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.);

2
packages/map/package.json
View File

@ -44,5 +44,5 @@
"eventemitter3": "^4.0.4",
"lodash": "^4.17.15"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83"
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0"
}

2
packages/maps/package.json
View File

@ -43,7 +43,7 @@
"@types/gl-matrix": "^2.4.5",
"@types/viewport-mercator-project": "^6.1.0"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
"publishConfig": {
"access": "public"
}

7
packages/maps/src/amap2/map.ts
View File

@ -152,7 +152,12 @@ export default class AMapService
// 'amap-maps',
// )[0] as HTMLElement;
// this.markerContainer = DOM.create('div', 'l7-marker-container2', amap);
this.markerContainer = mapContainer;
this.markerContainer = DOM.create(
'div',
'l7-marker-container2',
mapContainer,
);
// this.markerContainer = mapContainer;
}
}
public getMarkerContainer(): HTMLElement {

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 };

2
packages/renderer/package.json
View File

@ -33,7 +33,7 @@
"reflect-metadata": "^0.1.13",
"regl": "^1.6.1"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
"publishConfig": {
"access": "public"
}

2
packages/scene/package.json
View File

@ -34,7 +34,7 @@
"mapbox-gl": "^1.2.1",
"reflect-metadata": "^0.1.13"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
"publishConfig": {
"access": "public"
}

2
packages/source/package.json
View File

@ -45,7 +45,7 @@
"@types/d3-hexbin": "^0.2.3",
"@types/lodash": "^4.14.138"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
"publishConfig": {
"access": "public"
}

2
packages/three/package.json
View File

@ -53,7 +53,7 @@
"devDependencies": {
"three": "^0.115.0"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
"publishConfig": {
"access": "public"
}

2
packages/utils/package.json
View File

@ -30,7 +30,7 @@
"devDependencies": {
"@types/d3-color": "^1.2.2"
},
"gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
"gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
"publishConfig": {
"access": "public"
}

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

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

@ -45,6 +45,8 @@ export default class Amap2demo_arcLine extends React.Component {
.style({
opacity: 0.8,
blur: 0.99,
lineType: 'dash',
dashArray: [5, 5],
});
// .forward(false)
scene.addLayer(layer);

26
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',
@ -38,7 +41,7 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
lat2: 52.802761415419674,
},
];
//// @ts-ignore
const layer = new LineLayer({
blend: 'normal',
})
@ -53,18 +56,25 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
})
.size(10)
.shape('arc3d')
// .texture('02')
.texture('02')
.color('#8C1EB2')
.style({
// forward: false,
// lineTexture: true, // 开启线的贴图功能
// iconStep: 100, // 设置贴图纹理的间距
// // opacity: 0
lineTexture: true, // 开启线的贴图功能
iconStep: 10, // 设置贴图纹理的间距
// opacity: 0,
opacity: 0.8,
// opacity: 0.2,
// lineType: 'dash',
// dashArray: [5, 5],
// textureBlend: 'replace',
// textureBlend: 'normal',
sourceColor: '#f00',
targetColor: '#0f0',
});
// .animate({
// duration: 50,
// interval: 0.3,
// trailLength: 0.1,
// interval: 0.2,
// trailLength: 0.02,
// });
scene.addLayer(layer);
});

95
stories/Map/components/amap2demo_arcLineLinear.tsx Normal file
View File

@ -0,0 +1,95 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_arcLineLinear extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 40,
center: [107.77791556935472, 35.443286920228644],
zoom: 2.9142882493605033,
viewMode: '3D',
style: 'dark',
}),
});
this.scene = scene;
scene.on('loaded', () => {
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
);
let data = [
{
lng1: 75.76171875,
lat1: 36.31512514748051,
lng2: 46.23046874999999,
lat2: 52.802761415419674,
},
];
// @ts-ignore
const layer = new LineLayer({
blend: 'normal',
})
.source(data, {
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
.size(20)
.shape('arc')
.color('#f00')
.style({
// forward: false,
lineTexture: true, // 开启线的贴图功能
iconStep: 30, // 设置贴图纹理的间距
// opacity: 0.5,
// opacity: 0.2,
// lineType: 'dash',
// dashArray: [5, 5],
// textureBlend: 'replace',
// textureBlend: 'normal',
sourceColor: '#f00',
targetColor: '#0f0',
});
// .animate({
// duration: 50,
// interval: 0.3,
// trailLength: 0.1,
// });
scene.addLayer(layer);
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

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

@ -1,6 +1,6 @@
// @ts-ignore
import { LineLayer, Scene } 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_arcLineTex extends React.Component {
@ -14,6 +14,7 @@ export default class Amap2demo_arcLineTex extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
// map: new GaodeMapV2({
map: new GaodeMap({
pitch: 40,
center: [107.77791556935472, 35.443286920228644],
@ -38,7 +39,7 @@ export default class Amap2demo_arcLineTex extends React.Component {
lat2: 52.802761415419674,
},
];
// @ts-ignore
const layer = new LineLayer({
blend: 'normal',
})
@ -51,21 +52,26 @@ export default class Amap2demo_arcLineTex extends React.Component {
y1: 'lat2',
},
})
.size(20)
.size(25)
.shape('arc')
.texture('02')
.color('#8C1EB2')
.style({
forward: false,
lineTexture: true, // 开启线的贴图功能
iconStep: 100, // 设置贴图纹理的间距
opacity: 0,
})
.animate({
duration: 50,
interval: 0.3,
trailLength: 0.1,
iconStep: 30, // 设置贴图纹理的间距
// opacity: 0.5,
// opacity: 0.2,
// lineType: 'dash',
// dashArray: [5, 5],
// textureBlend: 'replace',
// textureBlend: 'normal',
});
// .animate({
// duration: 50,
// interval: 0.3,
// trailLength: 0.1,
// })
scene.addLayer(layer);
});
}

104
stories/Map/components/amap2demo_arcLine_greatCircleTex.tsx Normal file
View File

@ -0,0 +1,104 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_arcLine_greatCircle extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
center: [107.77791556935472, 35.443286920228644],
zoom: 2.9142882493605033,
viewMode: '3D',
}),
});
this.scene = scene;
scene.on('loaded', () => {
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
// "https://gw-office.alipayobjects.com/bmw-prod/ae2a8580-da3d-43ff-add4-ae9c1bfc75bb.svg"
);
scene.addImage(
'01',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
);
const layer = new LineLayer({ blend: 'normal' })
.source(
[
{
lng1: 75.9375,
lat1: 37.71859032558816,
lng2: 123.3984375,
lat2: 39.639537564366684,
},
],
{
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
},
)
.size(20)
.shape('greatcircle')
.color('#ff0000')
.texture('02')
.style({
opacity: 0.6,
// textureBlend: 'replace',
// textureBlend: 'normal',
blur: 0.99,
lineTexture: true, // 开启线的贴图功能
iconStep: 5, // 设置贴图纹理的间距
// lineType: 'dash',
// dashArray: [5, 5],
sourceColor: '#f00',
targetColor: '#0f0',
});
// .animate({
// duration: 5,
// interval: 0.2,
// trailLength: 0.4,
// });
// .animate(true);
scene.addLayer(layer);
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

65
stories/Map/components/amap2demo_clustermarker.tsx Normal file
View File

@ -0,0 +1,65 @@
//@ts-ignore
import { MarkerLayer, Marker, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_clustermarker extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
// this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [110.19382669582967, 30.258134],
pitch: 0,
zoom: 3,
}),
});
scene.on('loaded', () => {
addMarkers();
scene.render();
});
function addMarkers() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
)
.then((res) => res.json())
.then((nodes) => {
const markerLayer = new MarkerLayer({
cluster: true,
});
for (let i = 0; i < nodes.features.length; i++) {
const { coordinates } = nodes.features[i].geometry;
const marker = new Marker().setLnglat({
lng: coordinates[0],
lat: coordinates[1],
});
markerLayer.addMarker(marker);
}
scene.addMarkerLayer(markerLayer);
});
}
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

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 时必填

89
stories/Map/components/amap2demo_lineLinear.tsx Normal file
View File

@ -0,0 +1,89 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_lineLinear extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 16,
viewMode: '3D',
}),
});
this.scene = scene;
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
)
.then((res) => res.json())
.then((data) => {
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
);
scene.addImage(
'01',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
// @ts-ignore
const layer = new LineLayer({})
.source(data)
.size(5)
.shape('line')
.texture('01')
.color('#25d8b7')
// .animate({
// interval: 1, // 间隔
// duration: 1, // 持续时间，延时
// trailLength: 2, // 流线长度
// })
.style({
opacity: 0.5,
// opacity: 0,
// lineTexture: true, // 开启线的贴图功能
// iconStep: 50, // 设置贴图纹理的间距
// lineType: 'dash',
// dashArray: [5, 5],
// textureBlend: 'replace',
// textureBlend: 'normal',
sourceColor: '#f00',
targetColor: '#0f0',
});
scene.addLayer(layer);
});
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

21
stories/Map/components/amap2demo_lineStreet.tsx
View File

@ -41,22 +41,27 @@ export default class Amap2demo_lineStreet extends React.Component {
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
// @ts-ignore
const layer = new LineLayer({})
.source(data)
.size(5)
.shape('line')
.texture('02')
.texture('01')
.color('#25d8b7')
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间，延时
trailLength: 2, // 流线长度
})
// .animate({
// interval: 1, // 间隔
// duration: 1, // 持续时间，延时
// trailLength: 2, // 流线长度
// })
.style({
// opacity: 0.5,
opacity: 0.5,
// opacity: 0,
lineTexture: true, // 开启线的贴图功能
iconStep: 50, // 设置贴图纹理的间距
// lineType: 'dash',
// dashArray: [5, 5],
textureBlend: 'replace',
// textureBlend: 'normal',
});
scene.addLayer(layer);
});

15
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
@ -58,7 +58,20 @@ export default class Amap2demo_markerlayer extends React.Component {
markerLayer.addMarker(marker);
}
scene.addMarkerLayer(markerLayer);
// scene.on('loaded', () => {
// markerLayer.hide()
// })
let f = 0;
setInterval(() => {
if (f === 0) {
markerLayer.hide();
f = 1;
} else {
markerLayer.show();
f = 0;
}
}, 800);
this.scene = scene;
}

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

@ -33,7 +33,7 @@ export default class Amap2demo_road extends React.Component {
'road',
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*haGlTpW2BQgAAAAAAAAAAAAAARQnAQ',
);
// @ts-ignore
const layer = new LineLayer()
.source(data)
.size(10)

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

@ -33,7 +33,7 @@ export default class Amap2demo_road2 extends React.Component {
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
// @ts-ignore
const layer = new LineLayer({})
.source(data)
.size(5)

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();

10
stories/Map/map.stories.tsx
View File

@ -17,12 +17,15 @@ import Amap2demo_polygon_extrude from './components/amap2demo_polygon_extrude'
import Amap2demo_arcLine from "./components/amap2demo_arcLine"
import Amap2demo_arcLine3d from "./components/amap2demo_arcLine3d"
import Amap2demo_arcLine_greatCircle from "./components/amap2demo_arcLine_greatCircle"
import Amap2demo_arcLine_greatCircleTex from "./components/amap2demo_arcLine_greatCircleTex"
import Amap2demo_lineHeight from "./components/amap2demo_lineHeight"
import Amap2demo_lineDash from "./components/amap2demo_lineDash"
import Amap2demo_arcLineDir from "./components/amap2demo_arcLineDir"
import Amap2demo_arcLineTex from './components/amap2demo_arcLineTex';
import Amap2demo_arcLineLinear from './components/amap2demo_arcLineLinear';
import Amap2demo_arcLine3DTex from './components/amap2demo_arcLine3DTex';
import Amap2demo_lineStreet from './components/amap2demo_lineStreet';
import Amap2demo_lineLinear from './components/amap2demo_lineLinear';
import Amap2demo_road from './components/amap2demo_road';
import Amap2demo_road2 from './components/amap2demo_road2';
@ -41,6 +44,7 @@ import Amap2demo_citybuilding from "./components/amap2demo_citybuilding"
import Amap2demo_drilldown from "./components/amap2demo_drilldown"
import Amap2demo_markerlayer from "./components/amap2demo_markerlayer"
import Amap2demo_clustermarker from './components/amap2demo_clustermarker';
import Amap2demo_instance from "./components/amap2demo_instance"
@ -65,16 +69,19 @@ storiesOf('地图方法', module)
.add('高德地图2.0 line_arc', () => <Amap2demo_arcLine />)
.add('高德地图2.0 line_arc3d', () => <Amap2demo_arcLine3d />)
.add('高德地图2.0 line_arc3d_greatCircle', () => <Amap2demo_arcLine_greatCircle />)
.add('高德地图2.0 line_arc_greatCircle', () => <Amap2demo_arcLine_greatCircle />)
.add('高德地图2.0 line_arc_greatCircleTex', () => <Amap2demo_arcLine_greatCircleTex />)
.add('高德地图2.0 lineHeight', () => <Amap2demo_lineHeight />)
.add('高德地图2.0 lineDash', () => <Amap2demo_lineDash />)
.add('高德地图2.0 line_arcDir', () => <Amap2demo_arcLineDir />)
.add('高德地图2.0 line_arcTex', () => <Amap2demo_arcLineTex />)
.add('高德地图2.0 line_arcLinear', () => <Amap2demo_arcLineLinear />)
.add('高德地图2.0 line_arc3DTex', () => <Amap2demo_arcLine3DTex />)
.add('高德地图2.0 line_winds', () => <Amap2demo_winds />)
.add('高德地图2.0 line_Street', () => <Amap2demo_lineStreet />)
.add('高德地图2.0 line_Linear', () => <Amap2demo_lineLinear />)
.add('高德地图2.0 road', () => <Amap2demo_road />)
.add('高德地图2.0 road2', () => <Amap2demo_road2 />)
@ -90,6 +97,7 @@ storiesOf('地图方法', module)
.add('高德地图2.0 点击下钻', () => <Amap2demo_drilldown />)
.add('高德地图2.0 Marker图层', () => <Amap2demo_markerlayer />)
.add('高德地图2.0 clusterMarker图层', () => <Amap2demo_clustermarker />)
.add('高德地图2.0 instance实例', () => <Amap2demo_instance />)

25
stories/React/components/Scene.tsx
View File

@ -25,9 +25,16 @@ export default React.memo(function Map() {
fetchData();
}, []);
const popupClick = (e: any) => {
e.stopPropagation();
console.log(e);
// e.stopPropagation();
alert('11333');
};
const markerClick = (e: any) => {
console.log(e);
// e.stopPropagation();
alert('marker');
};
return (
<>
<AMapScene
@ -50,12 +57,20 @@ export default React.memo(function Map() {
closeOnClick: false,
stopPropagation: false,
}}
lnglat={[110.1938, 30.25] as number[]}
lnglat={[115, 30.25] as number[]}
>
<p onClick={popupClick}>122224</p>
</Popup>
<Marker lnglat={[100.1938, 30.25] as number[]}>
<p onClick={popupClick}>tes</p>
<Marker lnglat={[100.1938, 27.25] as number[]}>
<div
style={{
border: '1px solid #fff',
background: '#FFF',
fontSize: '24px',
}}
>
<p onClick={markerClick}>tes</p>
</div>
</Marker>
<PolygonLayer
key={'2'}
@ -86,7 +101,7 @@ export default React.memo(function Map() {
<LayerEvent
type="click"
handler={(e) => {
console.log(e);
console.log('LayerEvent', e);
}}
/>
</PolygonLayer>