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

Shihui (#1023) 

* feat: 增加 lineLayer/pointLayer text 的抬升配置

* style: lint style
This commit is contained in:
YiQianYao 2022-03-28 22:57:02 +08:00 committed by GitHub
parent 09af464412
commit 31f0ee4a1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 118 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/layers/src/core/interface.ts
View File

@ -29,6 +29,7 @@ export interface ILineLayerStyleOptions {
borderColor?: string; // 可选参数 线边框颜色
heightfixed?: boolean; // 可选参数 高度是否固定
raisingHeight?: number; // 线图层抬升高度
mask?: boolean; // 可选参数 时候允许蒙层
maskInside?: boolean; // 可选参数 控制图层是否显示在蒙层的内部
@ -50,6 +51,8 @@ export interface IPointLayerStyleOptions {
fontFamily?: string;
textAllowOverlap?: boolean;
raisingHeight?: number; // 线图层抬升高度
// cylinder
pickLight?: boolean;
depth?: boolean;

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

@ -43,6 +43,7 @@ export default class LineModel extends BaseModel {
vertexHeightScale = 20.0,
borderWidth = 0.0,
borderColor = '#ccc',
raisingHeight = 0,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (dashArray.length === 2) {
dashArray.push(0, 0);
@ -118,6 +119,7 @@ export default class LineModel extends BaseModel {
// 顶点高度 scale
u_vertexScale: vertexHeightScale,
u_raisingHeight: Number(raisingHeight),
};
}
public getAnimateUniforms(): IModelUniform {

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

@ -19,6 +19,7 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
uniform float u_icon_step: 100;
uniform float u_vertexScale: 1.0;
uniform float u_raisingHeight: 0.0;
#pragma include "projection"
#pragma include "picking"
@ -94,14 +95,25 @@ void main() {
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;
// }
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, 1.0));
gl_Position = u_Mvp * (vec4(project_pos.xy + offset, project_pixel(a_Size.y) + h * 0.2 + u_raisingHeight, 1.0));
} else {
float lineHeight = a_Size.y;
// 兼容 mapbox 在线高度上的效果表现基本一致
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
// 保持高度相对不变
h *= 2.0/pow(2.0, 20.0 - u_Zoom);
// 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;
} else {
h += u_raisingHeight;
}
// #define COORDINATE_SYSTEM_P20 5.0

2
packages/layers/src/point/models/text.ts
View File

@ -102,6 +102,7 @@ export default class TextModel extends BaseModel {
textAllowOverlap = false,
halo = 0.5,
gamma = 2.0,
raisingHeight = 0,
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
const { canvas, mapping } = this.fontService;
if (Object.keys(mapping).length !== this.textCount) {
@ -158,6 +159,7 @@ export default class TextModel extends BaseModel {
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_raisingHeight: Number(raisingHeight),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 0.0,

20
packages/layers/src/point/shaders/text_vert.glsl
View File

@ -11,6 +11,7 @@ attribute float a_Rotate;
uniform vec2 u_sdf_map_size;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
uniform float u_raisingHeight: 0.0;
varying vec2 v_uv;
varying float v_gamma_scale;
@ -109,14 +110,21 @@ void main() {
// gl_Position = vec4(projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
vec4 projected_position;
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
projected_position = u_Mvp * (vec4(a_Position.xyz, 1.0));
} else { // else
projected_position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
float raiseHeight = 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);
raiseHeight = u_raisingHeight * mapboxZoomScale;
}
gl_Position = vec4(projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
vec4 projected_position;
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
projected_position = u_Mvp * (vec4(a_Position.xyz + vec3(0.0, 0.0, raiseHeight), 1.0));
} else { // else
projected_position = project_common_position_to_clipspace(vec4(project_pos.xyz + vec3(0.0, 0.0, raiseHeight), 1.0));
}
gl_Position = vec4(
projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
v_gamma_scale = gl_Position.w;
setPickingColor(a_PickingColor);

85
stories/Map/components/amap2demo_polygon_extrude.tsx
View File

@ -1,4 +1,4 @@
import { PolygonLayer, Scene, LineLayer } from '@antv/l7';
import { PolygonLayer, Scene, LineLayer, PointLayer } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
@ -117,6 +117,64 @@ export default class Amap2demo_polygon_extrude extends React.Component {
// .active(true);
// scene.addLayer(layer);
// @ts-ignore
let lineDown, lineUp, textLayer;
fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json')
.then((res) => res.json())
.then((data) => {
let texts: any[] = [];
data.features.map((option: any) => {
const { name, center } = option.properties;
const [lng, lat] = center;
texts.push({ name, lng, lat });
});
textLayer = new PointLayer({ zIndex: 2 })
.source(texts, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('name', 'text')
.size(14)
.color('#0ff')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#0ff', // 描边颜色
strokeWidth: 0.2, // 描边宽度
raisingHeight: 200000 + 150000 + 10000,
textAllowOverlap: true,
});
scene.addLayer(textLayer);
lineDown = new LineLayer()
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000,
});
lineUp = new LineLayer({ zIndex: 1 })
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000 + 150000,
});
scene.addLayer(lineDown);
scene.addLayer(lineUp);
});
fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
.then((res) => res.json())
.then((data) => {
@ -139,7 +197,6 @@ export default class Amap2demo_polygon_extrude extends React.Component {
.color('#0DCCFF')
.active({
color: 'rgb(100,230,255)',
// color: '#00FFFF',
})
.style({
heightfixed: true,
@ -154,12 +211,36 @@ export default class Amap2demo_polygon_extrude extends React.Component {
provincelayer.style({
raisingHeight: 200000 + 100000,
});
// @ts-ignore
lineDown.style({
raisingHeight: 200000 + 100000,
});
// @ts-ignore
lineUp.style({
raisingHeight: 200000 + 150000 + 100000,
});
// @ts-ignore
textLayer.style({
raisingHeight: 200000 + 150000 + 10000 + 100000,
});
});
provincelayer.on('unmousemove', () => {
provincelayer.style({
raisingHeight: 200000,
});
// @ts-ignore
lineDown.style({
raisingHeight: 200000,
});
// @ts-ignore
lineUp.style({
raisingHeight: 200000 + 150000,
});
// @ts-ignore
textLayer.style({
raisingHeight: 200000 + 150000 + 10000,
});
});
});
}