mirror of https://gitee.com/antv-l7/antv-l7
Shihui (#1023)
* feat: 增加 lineLayer/pointLayer text 的抬升配置 * style: lint style
This commit is contained in:
parent
09af464412
commit
31f0ee4a1c
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue