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

Shihuidev (#869) 

* feat: 增加着色器的拾取计算控制、完善 arcmini

* feat: 完善 enableShaderPick/disableShaderPick 功能

* style: lint style

* feat: 补充调用高德地图公交线路查询 demo

* style: lint style

* feat: 优化弧线的纹理动画

* style: lint style

* feat: 去除greatCircle 的纹理动画优化

* feat: 扩展点图层圆柱效果

* feat: 增加几何体的径向渐变配置

* style: lint style

* fix: 修复bug 图层触发的事件跟图层设置的zIndex无关，只跟插入图层先后顺序有关

* style: lint style

* feat: 补全挤出几何体拾取颜色的光照配置

* style: lint style

* fix: 修复圆柱 cull 问题 mapbox amap 不同

* feat: 图层销毁时的内存泄漏

* style: lint style

* chore: update version 2.6.6 -> 2.6.7

* feat: 平面弧线新增弧线偏移量的数据映射能力

* style: lint style
This commit is contained in:
YiQianYao 2021-12-07 17:27:45 +08:00 committed by GitHub
parent 469a43f94b
commit 6c5488c19c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 239 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lerna.json
View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.6.6",
"version": "2.6.7",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

6
packages/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.6.6",
"version": "2.6.7",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.6.6",
"@antv/l7-utils": "^2.6.6",
"@antv/l7-core": "^2.6.7",
"@antv/l7-utils": "^2.6.7",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

4
packages/core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.6.6",
"version": "2.6.7",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,7 +24,7 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "^2.6.6",
"@antv/l7-utils": "^2.6.7",
"@babel/runtime": "^7.7.7",
"ajv": "^6.10.2",
"element-resize-event": "^3.0.3",

5
packages/core/src/services/shader/ShaderModuleService.ts
View File

@ -17,6 +17,7 @@ import styleMapping from '../../shaders/styleMapping.glsl';
import styleMappingCalOpacity from '../../shaders/styleMappingCalOpacity.glsl';
import styleMappingCalStrokeOpacity from '../../shaders/styleMappingCalStrokeOpacity.glsl';
import styleMappingCalStrokeWidth from '../../shaders/styleMappingCalStrokeWidth.glsl';
import styleMappingCalThetaOffset from '../../shaders/styleMappingCalThetaOffset.glsl';
const precisionRegExp = /precision\s+(high|low|medium)p\s+float/;
const globalDefaultprecision =
@ -39,6 +40,10 @@ export default class ShaderModuleService implements IShaderModuleService {
this.registerModule('light', { vs: light, fs: '' });
this.registerModule('picking', { vs: pickingVert, fs: pickingFrag });
this.registerModule('styleMapping', { vs: styleMapping, fs: '' });
this.registerModule('styleMappingCalThetaOffset', {
vs: styleMappingCalThetaOffset,
fs: '',
});
this.registerModule('styleMappingCalOpacity', {
vs: styleMappingCalOpacity,
fs: '',

9
packages/core/src/shaders/styleMapping.glsl
View File

@ -23,6 +23,10 @@ bool hasOffsets() { // 判断 cell 中是否存在 offsets 的数据
return u_cellTypeLayout[2][0] > 0.0 && u_cellTypeLayout[3][3] > 0.0;
}
bool hasThetaOffset() { // 判断 cell 中是否存在 thetaOffset 的数据
return u_cellTypeLayout[2][1] > 0.0 && u_cellTypeLayout[3][3] > 0.0;
}
// 根据坐标位置先是计算 uv ，然后根据 uv 从数据纹理中取值
float pos2value(vec2 pos, float columnWidth, float rowHeight) {
float u = (pos.r - 1.0) * columnWidth + columnWidth/2.0;
@ -53,12 +57,13 @@ float calCellCount() {
// u_cellTypeLayout
// cal_height, WIDTH, 0.0, 0.0, // rowCount columnCount - 几行几列
// 1.0, 1.0, 1.0, 0.0, // opacity strokeOpacity strokeWidth stroke - 1.0 表示有数据映射、0.0 表示没有
// 1.0, 0.0, 0.0, 0.0, // offsets
// 1.0, 1.0, 0.0, 0.0, // offsets thetaOffset
// 0.0, 0.0, 0.0, 0.0
return u_cellTypeLayout[1][0] + // opacity
u_cellTypeLayout[1][1] + // strokeOpacity
u_cellTypeLayout[1][2] + // strokeWidth
u_cellTypeLayout[1][3] * 4.0 + // stroke
u_cellTypeLayout[2][0] * 2.0; // offsets
u_cellTypeLayout[2][0] * 2.0 + // offsets
u_cellTypeLayout[2][1]; // thetaOffset
}

11
packages/core/src/shaders/styleMappingCalThetaOffset.glsl Normal file
View File

@ -0,0 +1,11 @@
// 计算 thetaOffset 和标示在 cell 中取值位置的偏移量 textureOffset
vec2 calThetaOffsetAndOffset(float cellCurrentRow, float cellCurrentColumn, float columnCount, float textureOffset, float columnWidth, float rowHeight) {
if(!hasThetaOffset()) { // 数据纹理中不存在 thetaOffset 的时候取默认值（用户在 style 中传入的是常量）
return vec2(u_thetaOffset, textureOffset);
} else {
vec2 valuePos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
float textureThetaOffset = pos2value(valuePos, columnWidth, rowHeight);
return vec2(textureThetaOffset, textureOffset + 1.0);
}
}

15
packages/l7/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.6.6",
"version": "2.6.7",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,12 +25,13 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "^2.6.6",
"@antv/l7-core": "^2.6.6",
"@antv/l7-layers": "^2.6.6",
"@antv/l7-maps": "^2.6.6",
"@antv/l7-scene": "^2.6.6",
"@antv/l7-utils": "^2.6.6",
"@antv/l7-component": "^2.6.7",
"@antv/l7-core": "^2.6.7",
"@antv/l7-source": "^2.6.7",
"@antv/l7-layers": "^2.6.7",
"@antv/l7-maps": "^2.6.7",
"@antv/l7-scene": "^2.6.7",
"@antv/l7-utils": "^2.6.7",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

2
packages/l7/src/version.ts
View File

@ -1,2 +1,2 @@
const version = '2.6.6';
const version = '2.6.7';
export { version };

8
packages/layers/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.6.6",
"version": "2.6.7",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,9 +24,9 @@
"license": "ISC",
"dependencies": {
"@antv/geo-coord": "^1.0.8",
"@antv/l7-core": "^2.6.6",
"@antv/l7-source": "^2.6.6",
"@antv/l7-utils": "^2.6.6",
"@antv/l7-core": "^2.6.7",
"@antv/l7-source": "^2.6.7",
"@antv/l7-utils": "^2.6.7",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

28
packages/layers/src/core/BaseModel.ts
View File

@ -70,6 +70,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
protected rowCount: number; // 计算得到的当前数据纹理有多少行（高度）
protected cacheStyleProperties: {
// 记录存储上一次样式字段的值
thetaOffset: styleSingle | undefined;
opacity: styleSingle | undefined;
strokeOpacity: styleSingle | undefined;
strokeWidth: styleSingle | undefined;
@ -81,6 +82,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
protected cellTypeLayout: number[];
protected stylePropertyesExist: {
// 记录 style 属性是否存在的中间变量
hasThetaOffset: number;
hasOpacity: number;
hasStrokeOpacity: number;
hasStrokeWidth: number;
@ -145,6 +147,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
this.cellLength = 0;
this.cellProperties = [];
this.cacheStyleProperties = {
thetaOffset: undefined,
opacity: undefined,
strokeOpacity: undefined,
strokeWidth: undefined,
@ -152,6 +155,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
offsets: undefined,
};
this.stylePropertyesExist = {
hasThetaOffset: 0,
hasOpacity: 0,
hasStrokeOpacity: 0,
hasStrokeWidth: 0,
@ -181,6 +185,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
this.cellLength = 0; // 清空上一次计算的 cell 的长度
this.stylePropertyesExist = {
// 全量清空上一次是否需要对 style 属性进行数据映射的判断
hasThetaOffset: 0,
hasOpacity: 0,
hasStrokeOpacity: 0,
hasStrokeWidth: 0,
@ -192,18 +197,22 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
public getCellTypeLayout() {
if (this.dataTextureTest) {
return [
// 0
this.rowCount, // 数据纹理有几行
this.DATA_TEXTURE_WIDTH, // 数据纹理有几列
0.0,
0.0,
// 1
this.stylePropertyesExist.hasOpacity, // cell 中是否存在 opacity
this.stylePropertyesExist.hasStrokeOpacity, // cell 中是否存在 strokeOpacity
this.stylePropertyesExist.hasStrokeWidth, // cell 中是否存在 strokeWidth
this.stylePropertyesExist.hasStroke, // cell 中是否存在 stroke
// 2
this.stylePropertyesExist.hasOffsets, // cell 中是否存在 offsets
this.stylePropertyesExist.hasThetaOffset, // cell 中是否存在 thetaOffset
0.0,
0.0,
0.0,
// 3
0.0,
0.0,
0.0,
@ -237,6 +246,8 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
* @returns
*/
public dataTextureNeedUpdate(options: {
// TODO: thetaOffset 目前只有 lineLayer/arc 使用
thetaOffset?: styleSingle;
opacity?: styleSingle;
strokeOpacity?: styleSingle;
strokeWidth?: styleSingle;
@ -245,6 +256,10 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
textOffset?: styleOffset;
}): boolean {
let isUpdate = false;
if (!isEqual(options.thetaOffset, this.cacheStyleProperties.thetaOffset)) {
isUpdate = true;
this.cacheStyleProperties.thetaOffset = options.thetaOffset;
}
if (!isEqual(options.opacity, this.cacheStyleProperties.opacity)) {
isUpdate = true;
this.cacheStyleProperties.opacity = options.opacity;
@ -277,6 +292,8 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
* @param options
*/
public judgeStyleAttributes(options: {
// TODO: 目前 thetaOffset 只有 lineLayer/arc 使用
thetaOffset?: styleSingle;
opacity?: styleSingle;
strokeOpacity?: styleSingle;
strokeWidth?: styleSingle;
@ -325,6 +342,13 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
this.stylePropertyesExist.hasOffsets = 1;
this.cellLength += 2;
}
if (options.thetaOffset !== undefined && !isNumber(options.thetaOffset)) {
// 数据映射
this.cellProperties.push({ attr: 'thetaOffset', count: 1 });
this.stylePropertyesExist.hasThetaOffset = 1;
this.cellLength += 1;
}
// console.log('this.cellLength', this.cellLength)
}
@ -405,7 +429,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
const { attr, count } = layout;
const value = cellData[attr];
if (value) {
if (value !== undefined) {
// 数据中存在该属性
if (attr === 'stroke') {
d.push(...rgb2arr(value));

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

@ -37,8 +37,11 @@ export default class ArcModel extends BaseModel {
thetaOffset = 0.314,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
this.judgeStyleAttributes({ opacity });
if (
this.dataTextureTest &&
this.dataTextureNeedUpdate({ opacity, thetaOffset })
) {
this.judgeStyleAttributes({ opacity, thetaOffset });
const encodeData = this.layer.getEncodedData();
const { data, width, height } = this.calDataFrame(
this.cellLength,
@ -86,10 +89,10 @@ export default class ArcModel extends BaseModel {
}
return {
u_thetaOffset: thetaOffset,
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_thetaOffset: isNumber(thetaOffset) ? thetaOffset : 0.0,
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber,

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

@ -30,6 +30,7 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
#pragma include "styleMapping"
#pragma include "styleMappingCalOpacity"
#pragma include "styleMappingCalThetaOffset"
#pragma include "projection"
#pragma include "project"
@ -39,11 +40,11 @@ float bezier3(vec3 arr, float t) {
float ut = 1. - t;
return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t;
}
vec2 midPoint(vec2 source, vec2 target) {
vec2 midPoint(vec2 source, vec2 target, float arcThetaOffset) {
vec2 center = target - source;
float r = length(center);
float theta = atan(center.y, center.x);
float thetaOffset = u_thetaOffset;
float thetaOffset = arcThetaOffset;
float r2 = r / 2.0 / cos(thetaOffset);
float theta2 = theta + thetaOffset;
vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y);
@ -59,9 +60,9 @@ vec2 midPoint(vec2 source, vec2 target) {
float getSegmentRatio(float index) {
return smoothstep(0.0, 1.0, index / (segmentNumber - 1.));
}
vec2 interpolate (vec2 source, vec2 target, float t) {
vec2 interpolate (vec2 source, vec2 target, float t, float arcThetaOffset) {
// if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation
vec2 mid = midPoint(source, target);
vec2 mid = midPoint(source, target, arcThetaOffset);
vec3 x = vec3(source.x, mid.x, target.x);
vec3 y = vec3(source.y, mid.y, target.y);
return vec2(bezier3(x ,t), bezier3(y,t));
@ -102,13 +103,17 @@ void main() {
float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
// cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ...
// cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke -> thetaOffset...
// 按顺序从 cell 中取值、若没有则自动往下取值
float textureOffset = 0.0; // 在 cell 中取值的偏移量
vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
styleMappingMat[0][0] = opacityAndOffset.r;
textureOffset = opacityAndOffset.g;
vec2 thetaOffsetAndOffset = calThetaOffsetAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
styleMappingMat[0][1] = thetaOffsetAndOffset.r;
textureOffset = thetaOffsetAndOffset.g;
// cal style mapping - 数据纹理映射部分的计算
@ -144,8 +149,9 @@ void main() {
styleMappingMat[3].b = d_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));
// styleMappingMat[0][1] - arcThetaOffset
vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, styleMappingMat[0][1]), 0.0, 1.0));
vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, styleMappingMat[0][1]), 0.0, 1.0));
// v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
//unProjCustomCoord

8
packages/layers/src/utils/dataMappingStyle.ts
View File

@ -13,6 +13,7 @@ import { isArray, isFunction, isNumber, isString } from 'lodash';
*/
interface IConfigToUpdate {
thetaOffset?: any;
opacity?: any;
strokeOpacity?: any;
stroke?: any;
@ -48,7 +49,6 @@ function registerStyleAttribute(
function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) {
if (configToUpdate.opacity) {
// 处理 style 中 opacity 属性的数据映射
handleStyleFloat('opacity', layer, configToUpdate.opacity);
}
@ -60,7 +60,6 @@ function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) {
if (configToUpdate.strokeOpacity) {
// 处理 style 中 strokeOpacity 属性的数据映射
handleStyleFloat('strokeOpacity', layer, configToUpdate.strokeOpacity);
}
@ -78,6 +77,11 @@ function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) {
// 处理 style 中 textOffset 属性的数据映射
handleStyleOffsets('textOffset', layer, configToUpdate.textOffset);
}
if (configToUpdate.thetaOffset) {
// 处理 style 中 thetaOffset 属性的数据映射
handleStyleFloat('thetaOffset', layer, configToUpdate.thetaOffset);
}
}
/**

4
packages/map/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.6.6",
"version": "2.6.7",
"description": "l7 map",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -37,7 +37,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-utils": "^2.6.6",
"@antv/l7-utils": "^2.6.7",
"@babel/runtime": "^7.7.7",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",

8
packages/maps/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.6.6",
"version": "2.6.7",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -27,9 +27,9 @@
"license": "ISC",
"dependencies": {
"@amap/amap-jsapi-loader": "^0.0.3",
"@antv/l7-core": "^2.6.6",
"@antv/l7-map": "^2.6.6",
"@antv/l7-utils": "^2.6.6",
"@antv/l7-core": "^2.6.7",
"@antv/l7-map": "^2.6.7",
"@antv/l7-utils": "^2.6.7",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

12
packages/mini/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-mini",
"version": "2.6.6",
"version": "2.6.7",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,11 +25,11 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-core": "^2.6.6",
"@antv/l7-layers": "^2.6.6",
"@antv/l7-maps": "^2.6.6",
"@antv/l7-scene": "^2.6.6",
"@antv/l7-utils": "^2.6.6",
"@antv/l7-core": "^2.6.7",
"@antv/l7-layers": "^2.6.7",
"@antv/l7-maps": "^2.6.7",
"@antv/l7-scene": "^2.6.7",
"@antv/l7-utils": "^2.6.7",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

4
packages/renderer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.6.6",
"version": "2.6.7",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.6.6",
"@antv/l7-core": "^2.6.7",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"l7regl": "^0.0.16",

14
packages/scene/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.6.6",
"version": "2.6.7",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,12 +23,12 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.6.6",
"@antv/l7-core": "^2.6.6",
"@antv/l7-layers": "^2.6.6",
"@antv/l7-maps": "^2.6.6",
"@antv/l7-renderer": "^2.6.6",
"@antv/l7-utils": "^2.6.6",
"@antv/l7-component": "^2.6.7",
"@antv/l7-core": "^2.6.7",
"@antv/l7-layers": "^2.6.7",
"@antv/l7-maps": "^2.6.7",
"@antv/l7-renderer": "^2.6.7",
"@antv/l7-utils": "^2.6.7",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

6
packages/source/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.6.6",
"version": "2.6.7",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,8 +26,8 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "^2.6.6",
"@antv/l7-utils": "^2.6.6",
"@antv/l7-core": "^2.6.7",
"@antv/l7-utils": "^2.6.7",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

8
packages/three/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-three",
"version": "2.6.6",
"version": "2.6.7",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,9 +44,9 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-core": "^2.6.6",
"@antv/l7-layers": "^2.6.6",
"@antv/l7-scene": "^2.6.6",
"@antv/l7-core": "^2.6.7",
"@antv/l7-layers": "^2.6.7",
"@antv/l7-scene": "^2.6.7",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"reflect-metadata": "^0.1.13",

2
packages/utils/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.6.6",
"version": "2.6.7",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

115
stories/Map/components/planeLine.tsx Normal file
View File

@ -0,0 +1,115 @@
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class PlaneLine 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: [110, 35.443],
zoom: 5,
viewMode: '3D',
style: 'dark',
}),
});
this.scene = scene;
scene.addImage(
'plane',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
);
// 106.6400729259405 29.72018042111331 重庆
// 116.5883553580003 40.07680509701226 北京
let originData = {
lng1: 106.6400729259405,
lat1: 29.72018042111331,
lng2: 116.5883553580003,
lat2: 40.07680509701226,
};
scene.on('loaded', () => {
let data = [];
for (let i = 0; i < 11; i++) {
data.push({
thetaOffset: -0.5 + i * 0.1,
...originData,
});
}
const layer = new LineLayer({
blend: 'normal',
})
.source(data, {
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
.size(1)
.shape('arc')
.color('#ccc')
.style({
opacity: 1,
thetaOffset: 'thetaOffset',
});
scene.addLayer(layer);
const layer2 = new LineLayer({
blend: 'normal',
})
.source(data, {
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
.size(15)
.texture('plane')
.shape('arc')
.color('#8C1EB2')
.style({
opacity: 1,
thetaOffset: 'thetaOffset',
lineTexture: true, // 开启线的贴图功能
iconStep: 20, // 设置贴图纹理的间距
textureBlend: 'replace',
})
.animate({
duration: 0.2,
interval: 0.5,
trailLength: 1,
});
scene.addLayer(layer2);
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

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

@ -66,6 +66,7 @@ import ShapeUpdate from './components/shapeUpdate'
import AmapPlugin from './components/plugin'
import PointUV from './components/pointUV'
import DestroyClear from './components/destroyClear'
import PlaneLine from './components/planeLine'
// @ts-ignore
storiesOf('地图方法', module)
@ -135,3 +136,4 @@ storiesOf('地图方法', module)
.add('AmapPlugin', () => <AmapPlugin/>)
.add('PointUV', () => <PointUV/>)
.add('DestroyClear', () => <DestroyClear/>)
.add('PlaneLine', () => <PlaneLine/>)