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

Shihuidev (#1041) 

* feat: 完善线图层的 heightfixed 配置

* style: lint style

* docs: 完善官网 demo

* docs: 完善官网文档

* style: lint style
This commit is contained in:
YiQianYao 2022-04-06 15:33:11 +08:00 committed by GitHub
parent 81b8726d5b
commit 3369cd83cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 165 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/api/line_layer/path.zh.md
View File

@ -43,6 +43,20 @@ layer.size('height', []);
✨ 当用户在传入数据的第三个值可以用于表示当前点的高度，通过在 source 中传入的第三个参数我们可以的高度不等的线图层
### style
#### raisingHeight: number
线图层的抬升高度，高度值和地图缩放层级无关。
[在线案例](/zh/examples/polygon/3d#floatMap)
#### heightfixed: boolean
线图层的高度是否和地图缩放层级无关，默认为 false。
[在线案例](/zh/examples/line/isoline#ele)
`markdown:docs/api/line_layer/features/vertexHeight.zh.md`
`markdown:docs/api/line_layer/features/linear.zh.md`

7
examples/line/isoline/demo/ele.js
View File

@ -7,7 +7,7 @@ const scene = new Scene({
pitch: 53.6305,
style: 'light',
center: [ 102.600579, 23.114887 ],
zoom: 14.66
zoom: 13.5
})
});
scene.on('loaded', () => {
@ -17,12 +17,15 @@ scene.on('loaded', () => {
const layer = new LineLayer({})
.source(data)
.size('ELEV', h => {
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 0.2 ];
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20 ];
})
.shape('line')
.scale('ELEV', {
type: 'quantize'
})
.style({
heightfixed: true
})
.color(
'ELEV',
[

5
examples/line/isoline/demo/ele_dark.js
View File

@ -31,12 +31,15 @@ scene.on('loaded', () => {
})
.source(data)
.size('ELEV', h => {
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 0.2 ];
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20 ];
})
.shape('line')
.scale('ELEV', {
type: 'quantize'
})
.style({
heightfixed: true
})
.color('ELEV', [
'#094D4A',
'#146968',

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

@ -44,6 +44,7 @@ export default class LineModel extends BaseModel {
borderWidth = 0.0,
borderColor = '#ccc',
raisingHeight = 0,
heightfixed = false,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (dashArray.length === 2) {
dashArray.push(0, 0);
@ -117,6 +118,9 @@ export default class LineModel extends BaseModel {
u_sourceColor: sourceColorArr,
u_targetColor: targetColorArr,
// 是否固定高度
u_heightfixed: Number(heightfixed),
// 顶点高度 scale
u_vertexScale: vertexHeightScale,
u_raisingHeight: Number(raisingHeight),

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

@ -18,6 +18,7 @@ uniform mat4 u_Mvp;
uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
uniform float u_icon_step: 100;
uniform float u_heightfixed: 0.0;
uniform float u_vertexScale: 1.0;
uniform float u_raisingHeight: 0.0;
@ -93,35 +94,37 @@ 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) * u_vertexScale; // 线顶点的高度 - 兼容不存在第三个数值的情况
// project_pos.z += u_raisingHeight;
// if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
// float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
// project_pos.z += u_raisingHeight * mapboxZoomScale;
// }
float h = float(a_Position.z) * u_vertexScale; // 线顶点的高度 - 兼容不存在第三个数值的情况 vertex height
float lineHeight = a_Size.y; // size 第二个参数代表的高度 [linewidth, lineheight]
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * (vec4(project_pos.xy + offset, project_pixel(a_Size.y) + h * 0.2 + u_raisingHeight, 1.0));
lineHeight *= 0.2; // 保持和 amap/mapbox 一致的效果
h *= 0.2;
if(u_heightfixed < 1.0) {
lineHeight = project_pixel(a_Size.y);
}
gl_Position = u_Mvp * (vec4(project_pos.xy + offset, lineHeight + h + u_raisingHeight, 1.0));
} else {
float lineHeight = a_Size.y;
// mapbox - amap
// 兼容 mapbox 在线高度上的效果表现基本一致
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
// mapbox
// 保持高度相对不变
// h *= 2.0/pow(2.0, 20.0 - u_Zoom);
float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
h *= mapboxZoomScale;
h += u_raisingHeight * mapboxZoomScale;
if(u_heightfixed > 0.0) {
lineHeight *= mapboxZoomScale;
}
} else {
// amap
h += u_raisingHeight;
}
// #define COORDINATE_SYSTEM_P20 5.0
// #define COORDINATE_SYSTEM_P20_OFFSET 6.0
// amap1.x
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
// 保持高度相对不变
lineHeight *= pow(2.0, 20.0 - u_Zoom);
// lineHeight 顶点偏移高度
if(u_heightfixed < 1.0) {
lineHeight *= pow(2.0, 20.0 - u_Zoom);
}
}
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight + h, 1.0));

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

@ -13,31 +13,62 @@ export default class Amap2demo_lineHeight extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new Mapbox({
pitch: 40,
style: 'light',
center: [120, 23.114887],
zoom: 8,
// center: [120, 23.114887],
center: [102.600579, 23.114887],
// zoom: 8,
zoom: 14.66,
}),
});
this.scene = scene;
scene.on('loaded', () => {
fetch(
// 'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
'https://gw.alipayobjects.com/os/bmw-prod/65589ef3-7f1d-440f-ba5d-86b03ee6ba7e.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) => {
// const layer = new LineLayer({})
// .source(data)
// .size(1)
// .shape('line')
// .style({
// vertexHeightScale: 30,
// })
// .color('#ccc');
// scene.addLayer(layer);
// -----
const layer = new LineLayer({})
.source(data)
.size(1)
.shape('line')
.style({
vertexHeightScale: 30,
.size('ELEV', (h) => {
return [h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20]; // amap
})
.color('#ccc');
.shape('line')
.scale('ELEV', {
type: 'quantize',
})
.style({
heightfixed: true,
})
.color(
'ELEV',
[
'#E4682F',
'#FF8752',
'#FFA783',
'#FFBEA8',
'#FFDCD6',
'#EEF3FF',
'#C8D7F5',
'#A5C1FC',
'#7FA7F9',
'#5F8AE5',
].reverse(),
);
scene.addLayer(layer);
});
});

82
stories/Map/components/bugfix.tsx
View File

@ -1,6 +1,14 @@
// @ts-nocheck
import React from 'react';
import { Scene, GaodeMap, GaodeMapV2, Mapbox, Map, PointLayer } from '@antv/l7';
import {
Scene,
GaodeMap,
GaodeMapV2,
Mapbox,
Map,
PointLayer,
LineLayer,
} from '@antv/l7';
export default class Amap2demo extends React.Component {
// @ts-ignore
@ -20,7 +28,7 @@ export default class Amap2demo extends React.Component {
// zoom: 14.83,
pitch: 0,
style: 'light',
center: [122.5, 30],
center: [120, 30],
zoom: 4,
}),
});
@ -32,11 +40,71 @@ export default class Amap2demo extends React.Component {
});
}
for (let i = 0; i < 20; i++) {
console.log('init ' + (i + 1));
let scene = await initScene();
scene.destroy();
}
// for (let i = 0; i < 20; i++) {
// console.log('init ' + (i + 1));
// let scene = await initScene();
// scene.destroy();
// }
const scene = new Scene({
id: 'map',
map: new GaodeMap({
// center: [121.434765, 31.256735],
// zoom: 14.83,
pitch: 0,
style: 'light',
center: [120, 30],
zoom: 4,
}),
});
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
);
scene.on('loaded', () => {
for (let i = 0; i < 20; i++) {
// const layer = new PointLayer().source([
// { lng: 120, lat: 30, name: '00' }
// ], {
// parser: {
// type: 'json',
// x: 'lng',
// y: 'lat'
// }
// })
// .shape('name', ['00'])
// .size(20)
// scene.addLayer(layer);
const lineLayer = new LineLayer()
.source(
[
{
lng1: 120,
lat1: 30,
lng2: 122,
lat2: 30,
},
],
{
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
},
)
.shape('line')
.size(2)
.color('#f00');
scene.addLayer(lineLayer);
}
});
}
public render() {