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

Merge branch 'master' of https://github.com/antvis/L7

This commit is contained in:
2912401452 2021-11-17 11:24:37 +08:00
parent bf9c8eeb9d 33bc5f1c12
commit 25c29be5ea
4 changed files with 82 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/api/layer/point_layer/pointlayer.zh.md
View File

@ -29,8 +29,8 @@ shape 支持
点数据类型，根据经纬点绘制图形,目前支持三种数据结构
- [GeoJSON]('../../../../source/geojson/#point')
- [CSV](../../../../source/csv/#parser)
- [JSON](../../../../source/json/#点数据)
- [CSV]('../../../../source/csv/#parser')
- [JSON]('../../../../source/json/#点数据')
**图片标注**

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

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