diff --git a/docs/api/layer/point_layer/pointlayer.zh.md b/docs/api/layer/point_layer/pointlayer.zh.md index 1ffc49c73a..a971f4af88 100644 --- a/docs/api/layer/point_layer/pointlayer.zh.md +++ b/docs/api/layer/point_layer/pointlayer.zh.md @@ -29,8 +29,8 @@ shape 支持 点数据类型，根据经纬点绘制图形,目前支持三种数据结构 - [GeoJSON]('../../../../source/geojson/#point') -- [CSV](../../../../source/csv/#parser) -- [JSON](../../../../source/json/#点数据) +- [CSV]('../../../../source/csv/#parser') +- [JSON]('../../../../source/json/#点数据') **图片标注** diff --git a/packages/layers/src/line/shaders/line_vert.glsl b/packages/layers/src/line/shaders/line_vert.glsl index 3dbb98ba91..94932a4b4a 100644 --- a/packages/layers/src/line/shaders/line_vert.glsl +++ b/packages/layers/src/line/shaders/line_vert.glsl @@ -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); diff --git a/packages/layers/src/utils/extrude_polyline.ts b/packages/layers/src/utils/extrude_polyline.ts index 591937a295..97b8347140 100644 --- a/packages/layers/src/utils/extrude_polyline.ts +++ b/packages/layers/src/utils/extrude_polyline.ts @@ -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]; diff --git a/stories/Map/components/amap2demo_lineHeight.tsx b/stories/Map/components/amap2demo_lineHeight.tsx index 0774766c66..f76fbbe3e7 100644 --- a/stories/Map/components/amap2demo_lineHeight.tsx +++ b/stories/Map/components/amap2demo_lineHeight.tsx @@ -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); }); });