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

Shihui dev (#842) 

* feat: 调整 lineLayer 的网格构建，支持顶点高度的传入

* style: lint style

Co-authored-by: zhongwu <xingya.sxy@alibaba-inc.com>
This commit is contained in:
YiQianYao 2021-11-17 11:24:06 +08:00 committed by GitHub
parent 42e357f268
commit 33bc5f1c12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 127 additions and 133 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.5.52",
"version": "2.5.54",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

6
packages/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.5.52",
"version": "2.5.54",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.5.52",
"@antv/l7-utils": "^2.5.52",
"@antv/l7-core": "^2.5.54",
"@antv/l7-utils": "^2.5.54",
"@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.5.52",
"version": "2.5.54",
"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.5.52",
"@antv/l7-utils": "^2.5.54",
"@babel/runtime": "^7.7.7",
"ajv": "^6.10.2",
"element-resize-event": "^3.0.3",

14
packages/l7/package.json
View File

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

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

@ -1,2 +1,2 @@
const version = '2.5.52';
const version = '2.5.54';
export { version };

8
packages/layers/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.5.52",
"version": "2.5.54",
"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.5.52",
"@antv/l7-source": "^2.5.52",
"@antv/l7-utils": "^2.5.52",
"@antv/l7-core": "^2.5.54",
"@antv/l7-source": "^2.5.54",
"@antv/l7-utils": "^2.5.54",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

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

@ -105,6 +105,8 @@ void main() {
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0));
float h = float((a_Position.z)); // 线顶点的高度 - 兼容不存在第三个数值的情况
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
// gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y, 1.0));
gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y / 8.0, 1.0)); // 额外除 8.0 是为了和gaode1.x的高度兼容
@ -114,7 +116,9 @@ void main() {
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
lineHeight = lineHeight*2.0/pow(2.0, 20.0 - u_Zoom);
}
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight, 1.0));
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight + h * 20.0, 1.0));
}
setPickingColor(a_PickingColor);

117
packages/layers/src/utils/extrude_polyline.ts
View File

@ -1,5 +1,5 @@
import { aProjectFlat } from '@antv/l7-utils';
import { vec2 } from 'gl-matrix';
import { vec2, vec3 } from 'gl-matrix';
const tmp = vec2.create();
const capEnd = vec2.create();
const lineA = vec2.create();
@ -102,10 +102,10 @@ export default class ExtrudePolyline {
const total = points.length;
let count = complex.startIndex;
for (let i = 1; i < total; i++) {
const last = points[i - 1] as vec2;
const last = points[i - 1] as vec3;
const originLast = originPoints[i - 1] as vec2;
const cur = points[i] as vec2;
const cur = points[i] as vec3;
const originCur = originPoints[i] as vec2;
const next = i < points.length - 1 ? points[i + 1] : null;
@ -117,7 +117,7 @@ export default class ExtrudePolyline {
count,
last,
cur,
next as vec2,
next as vec3,
originLast,
originCur,
originNext as vec2,
@ -146,10 +146,10 @@ export default class ExtrudePolyline {
const total = points.length;
let count = complex.startIndex;
for (let i = 1; i < total; i++) {
const last = points[i - 1] as vec2;
const cur = points[i] as vec2;
const last = points[i - 1] as vec3;
const cur = points[i] as vec3;
const next = i < points.length - 1 ? points[i + 1] : null;
const amt = this.segment(complex, count, last, cur, next as vec2);
const amt = this.segment(complex, count, last, cur, next as vec3);
count += amt;
}
if (this.dash) {
@ -163,9 +163,9 @@ export default class ExtrudePolyline {
private segment_gaode2(
complex: any,
index: number,
last: vec2,
cur: vec2,
next: vec2,
last: vec3,
cur: vec3,
next: vec3,
originLast: vec2,
originCur: vec2,
originNext: vec2,
@ -184,7 +184,7 @@ export default class ExtrudePolyline {
number,
number,
];
direction(lineA, cur, last);
direction(lineA, cur as vec2, last as vec2);
let segmentDistance = 0;
if (this.dash) {
segmentDistance = this.lineSegmentDistance(flatCur, flatLast);
@ -210,18 +210,18 @@ export default class ExtrudePolyline {
positions.push(
last[0],
last[1],
0,
last[2] | 0,
this.totalDistance - segmentDistance,
-this.thickness,
0,
last[2] | 0,
);
positions.push(
last[0],
last[1],
0,
last[2] | 0,
this.totalDistance - segmentDistance,
this.thickness,
0,
last[2] | 0,
);
} else {
this.extrusions(
@ -251,18 +251,18 @@ export default class ExtrudePolyline {
positions.push(
cur[0],
cur[1],
0,
cur[2] | 0,
this.totalDistance,
this.thickness,
0,
cur[2] | 0,
);
positions.push(
cur[0],
cur[1],
0,
cur[2] | 0,
this.totalDistance,
this.thickness,
0,
cur[2] | 0,
);
} else {
this.extrusions(
@ -281,14 +281,17 @@ export default class ExtrudePolyline {
);
count += 2;
} else {
if (isPointEqual(cur, next)) {
if (isPointEqual(cur as vec2, next as vec2)) {
vec2.add(
next,
cur,
vec2.normalize(next, vec2.subtract(next, cur, last)),
next as vec2,
cur as vec2,
vec2.normalize(
next as vec2,
vec2.subtract(next as vec2, cur as vec2, last as vec2),
),
);
}
direction(lineB, next, cur);
direction(lineB, next as vec2, cur as vec2);
// stores tangent & miter
const [miterLen, miter] = computeMiter(
@ -317,18 +320,18 @@ export default class ExtrudePolyline {
positions.push(
cur[0],
cur[1],
0,
cur[2] | 0,
this.totalDistance,
-this.thickness * flip,
0,
cur[2] | 0,
);
positions.push(
cur[0],
cur[1],
0,
cur[2] | 0,
this.totalDistance,
this.thickness * flip,
0,
cur[2] | 0,
);
indices.push(
...(this.lastFlip !== -flip
@ -345,10 +348,10 @@ export default class ExtrudePolyline {
positions.push(
cur[0],
cur[1],
0,
cur[2] | 0,
this.totalDistance,
-this.thickness * flip,
0,
cur[2] | 0,
);
count += 3;
} else {
@ -379,9 +382,9 @@ export default class ExtrudePolyline {
private segment(
complex: any,
index: number,
last: vec2,
cur: vec2,
next: vec2,
last: vec3,
cur: vec3,
next: vec3,
) {
let count = 0;
const indices = complex.indices;
@ -417,18 +420,18 @@ export default class ExtrudePolyline {
positions.push(
last[0],
last[1],
0,
last[2] | 0,
this.totalDistance - segmentDistance,
-this.thickness,
0,
last[2] | 0,
);
positions.push(
last[0],
last[1],
0,
last[2] | 0,
this.totalDistance - segmentDistance,
this.thickness,
0,
last[2] | 0,
);
// this.extrusions(positions, normals, last, out, this.thickness);
@ -462,18 +465,18 @@ export default class ExtrudePolyline {
positions.push(
cur[0],
cur[1],
0,
cur[2] | 0,
this.totalDistance,
this.thickness,
0,
cur[2] | 0,
);
positions.push(
cur[0],
cur[1],
0,
cur[2] | 0,
this.totalDistance,
this.thickness,
0,
cur[2] | 0,
);
} else {
this.extrusions(
@ -531,18 +534,18 @@ export default class ExtrudePolyline {
positions.push(
cur[0],
cur[1],
0,
cur[2] | 0,
this.totalDistance,
-this.thickness * flip,
0,
cur[2] | 0,
);
positions.push(
cur[0],
cur[1],
0,
cur[2] | 0,
this.totalDistance,
this.thickness * flip,
0,
cur[2] | 0,
);
indices.push(
...(this.lastFlip !== -flip
@ -559,10 +562,10 @@ export default class ExtrudePolyline {
positions.push(
cur[0],
cur[1],
0,
cur[2] | 0,
this.totalDistance,
-this.thickness * flip,
0,
cur[2] | 0,
);
count += 3;
} else {
@ -593,15 +596,29 @@ export default class ExtrudePolyline {
private extrusions(
positions: number[],
normals: number[],
point: vec2, // 顶点
point: vec3, // 顶点
normal: vec2, // 法向量
thickness: number, // 高度
distanceRadio: number,
) {
normals.push(normal[0], normal[1], 0);
normals.push(normal[0], normal[1], 0);
positions.push(point[0], point[1], 0, distanceRadio, -thickness, 0);
positions.push(point[0], point[1], 0, distanceRadio, thickness, 0);
positions.push(
point[0],
point[1],
point[2] | 0,
distanceRadio,
-thickness,
point[2] | 0,
);
positions.push(
point[0],
point[1],
point[2] | 0,
distanceRadio,
thickness,
point[2] | 0,
);
}
private lineSegmentDistance(b1: vec2, a1: vec2) {
const dx = a1[0] - b1[0];

4
packages/map/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.5.52",
"version": "2.5.54",
"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.5.52",
"@antv/l7-utils": "^2.5.54",
"@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.5.52",
"version": "2.5.54",
"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.5.52",
"@antv/l7-map": "^2.5.52",
"@antv/l7-utils": "^2.5.52",
"@antv/l7-core": "^2.5.54",
"@antv/l7-map": "^2.5.54",
"@antv/l7-utils": "^2.5.54",
"@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.5.52",
"version": "2.5.54",
"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.5.52",
"@antv/l7-layers": "^2.5.52",
"@antv/l7-maps": "^2.5.52",
"@antv/l7-scene": "^2.5.52",
"@antv/l7-utils": "^2.5.52",
"@antv/l7-core": "^2.5.54",
"@antv/l7-layers": "^2.5.54",
"@antv/l7-maps": "^2.5.54",
"@antv/l7-scene": "^2.5.54",
"@antv/l7-utils": "^2.5.54",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

4
packages/renderer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.5.52",
"version": "2.5.54",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.5.52",
"@antv/l7-core": "^2.5.54",
"@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.5.52",
"version": "2.5.54",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,12 +23,12 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.5.52",
"@antv/l7-core": "^2.5.52",
"@antv/l7-layers": "^2.5.52",
"@antv/l7-maps": "^2.5.52",
"@antv/l7-renderer": "^2.5.52",
"@antv/l7-utils": "^2.5.52",
"@antv/l7-component": "^2.5.54",
"@antv/l7-core": "^2.5.54",
"@antv/l7-layers": "^2.5.54",
"@antv/l7-maps": "^2.5.54",
"@antv/l7-renderer": "^2.5.54",
"@antv/l7-utils": "^2.5.54",
"@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.5.52",
"version": "2.5.54",
"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.5.52",
"@antv/l7-utils": "^2.5.52",
"@antv/l7-core": "^2.5.54",
"@antv/l7-utils": "^2.5.54",
"@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.5.52",
"version": "2.5.54",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,9 +44,9 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-core": "^2.5.52",
"@antv/l7-layers": "^2.5.52",
"@antv/l7-scene": "^2.5.52",
"@antv/l7-core": "^2.5.54",
"@antv/l7-layers": "^2.5.54",
"@antv/l7-scene": "^2.5.54",
"@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.5.52",
"version": "2.5.54",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

43
stories/Map/components/amap2demo_lineHeight.tsx
View File

@ -13,55 +13,28 @@ export default class Amap2demo_lineHeight extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new GaodeMap({
pitch: 40,
style: 'light',
center: [102.600579, 23.114887],
zoom: 14.66,
viewMode: '3D',
center: [120, 23.114887],
zoom: 8,
}),
});
this.scene = scene;
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
// 'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
'https://gw.alipayobjects.com/os/bmw-prod/65589ef3-7f1d-440f-ba5d-86b03ee6ba7e.json',
)
.then((res) => res.json())
.then((data) => {
// let data = {
// "type": "FeatureCollection",
// "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
// "features": [
// { "type": "Feature", "properties": { "ID": 29, "ELEV": 1520.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.608042343554914, 23.123174402406956 ], [ 102.608042343554914, 23.12303965511434 ], [ 102.608042119163088, 23.123036986851119 ], [ 102.608031339379679, 23.122770160529104 ], [ 102.608031339379679, 23.122500665943868 ], [ 102.608042119163088, 23.122470722101063 ], [ 102.6082217822199, 23.122231171358631 ], [ 102.608311613748313, 23.122171283673023 ], [ 102.608580436277236, 23.122231171358631 ], [ 102.608581108333553, 23.122231416131189 ], [ 102.608737131514474, 23.122500665943868 ], [ 102.608737131514474, 23.122770160529104 ], [ 102.608850602918793, 23.12290490782172 ], [ 102.608958400752883, 23.12303965511434 ], [ 102.608958400752883, 23.123174402406956 ] ] } },
// { "type": "Feature", "properties": { "ID": 30, "ELEV": 1530.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.607834863512082, 23.123174402406956 ], [ 102.607834863512082, 23.12303965511434 ], [ 102.607923541545574, 23.122770160529104 ], [ 102.607923541545574, 23.122500665943868 ], [ 102.608012175320283, 23.122231171358631 ], [ 102.608042119163088, 23.122182172343134 ], [ 102.608311613748313, 23.122021564459004 ], [ 102.608581108333553, 23.122089399325638 ], [ 102.608703539025072, 23.122231171358631 ], [ 102.608850602918793, 23.122462166717405 ], [ 102.608877552377308, 23.122500665943868 ], [ 102.608877552377308, 23.122770160529104 ], [ 102.609093148045503, 23.12303965511434 ], [ 102.609093148045503, 23.123174402406956 ] ] } },
// ]
// }
const layer = new LineLayer({})
.source(data)
.size('ELEV', (h) => {
return [h % 50 === 0 ? 1.0 : 0.5, (h - 1500) * 20];
})
.size(1)
.shape('line')
.scale('ELEV', {
type: 'quantize',
})
.color('#f00');
// .color(
// 'ELEV',
// [
// '#E4682F',
// '#FF8752',
// '#FFA783',
// '#FFBEA8',
// '#FFDCD6',
// '#EEF3FF',
// '#C8D7F5',
// '#A5C1FC',
// '#7FA7F9',
// '#5F8AE5',
// ].reverse(),
// );
.color('#ccc');
scene.addLayer(layer);
});
});