Shihuidev (#901)

* feat: 增加着色器的拾取计算控制、完善 arcmini

* feat: 完善 enableShaderPick/disableShaderPick 功能

* style: lint style

* feat: 补充调用高德地图公交线路查询 demo

* style: lint style

* feat: 优化弧线的纹理动画

* style: lint style

* feat: 去除greatCircle 的纹理动画优化

* feat: 扩展点图层圆柱效果

* feat: 增加几何体的径向渐变配置

* style: lint style

* fix: 修复bug 图层触发的事件跟图层设置的zIndex无关,只跟插入图层先后顺序有关

* style: lint style

* feat: 补全挤出几何体拾取颜色的光照配置

* style: lint style

* fix: 修复圆柱 cull 问题 mapbox amap 不同

* feat: 图层销毁时的内存泄漏

* style: lint style

* feat: 平面弧线新增弧线偏移量的数据映射能力

* style: lint style

* fix: 修复重复销毁bug

* style: lint style

* feat: 修复 texture 重复销毁问题

* style: lint style

* fix: 修复图层叠加模式下的拾取失效问题

* style: lint style

* fix: 修复纹理贴图在 zoom 大于 12 时存在的问题

* fix: 修复水波点颜色偏暗

* feat: 优化点图层的渲染效果,叠加渲染效果

* style: lint style

* fix: 修复 layer contextmenu 事件丢失

* fix: 修复 map 类型 resize 失效

* style: lint style

* feat: 增加瓦片地图的请求节流

* style: lint style

* feat: 优化热力图在 radius 数值比较大时热力点边缘发生裁剪的现象

* style: lint style

* fix: 修复resize 后 picking shiqu 拾取失败的问题

* feat: 优化 marker/popup 在容器边缘的表现

* feat: 增加 setEnableRender 方法

* style: lint style

* feat: 增加城市图层扫光特效

* style: lint style

* feat: 补全拾取色混合配置

* style: lint style

* feat: 增加高德地图的面积大小点

* style: lint style

* feat: 点优化边缘锯齿

* fix: 修复pointLayer stroke 变暗问题

* fix: 修复混合导致的拾取错误

* feat: add simple point 1.0

* style: lint style

* feat: simple point support stroke

* style: lint style

* feat: 优化 simple point 边缘的锯齿

* style: lint style

* feat: add point cylinder raising animate

* style: lint style

* feat: 优化点图层 icon 在小尺寸下的锯齿问题

* style: lint style

* feat: 修复 layer destroy 报错、未清理、未重绘、补充触发 destroy 事件

* fix: 修复 marker 在 cluster getMakers 失效

* style: lint style

* feat: 清除 marker layer cluster fix

* style: lint style

* fix: 修复 markerLayer hide show 方法缺少 cluster 模式下的控制

* style: lint style

* feat: 取消在 shape 方法执行后的暴力更新

* style: lint style

* feat: 增加图层保底颜色设置

* style: lint style

* feat: 将兜底颜色改为 bottomColor

* fix: color bottom

* style: lint style

* feat: 修改颜色兜底判断逻辑

* style: lint style

* chore: update version 2.6.27 -> 2.6.28

* style: lint style

* feat: add tnpm dist-tag

* feat: 增加line border 边框

* style: lint style

* feat: 增加 layer 重复销毁过滤

* style: lint style
This commit is contained in:
YiQianYao 2021-12-27 19:11:15 +08:00 committed by GitHub
parent 62510767ea
commit 9727081810
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 237 additions and 178 deletions

View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.6.27",
"version": "2.6.28",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.6.27",
"version": "2.6.28",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.6.27",
"@antv/l7-utils": "^2.6.27",
"@antv/l7-core": "^2.6.28",
"@antv/l7-utils": "^2.6.28",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.6.27",
"version": "2.6.28",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,7 +24,7 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "^2.6.27",
"@antv/l7-utils": "^2.6.28",
"@babel/runtime": "^7.7.7",
"ajv": "^6.10.2",
"element-resize-event": "^3.0.3",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.6.27",
"version": "2.6.28",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,13 +25,13 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "^2.6.27",
"@antv/l7-core": "^2.6.27",
"@antv/l7-layers": "^2.6.27",
"@antv/l7-maps": "^2.6.27",
"@antv/l7-scene": "^2.6.27",
"@antv/l7-source": "^2.6.27",
"@antv/l7-utils": "^2.6.27",
"@antv/l7-component": "^2.6.28",
"@antv/l7-core": "^2.6.28",
"@antv/l7-layers": "^2.6.28",
"@antv/l7-maps": "^2.6.28",
"@antv/l7-scene": "^2.6.28",
"@antv/l7-source": "^2.6.28",
"@antv/l7-utils": "^2.6.28",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

View File

@ -1,2 +1,2 @@
const version = '2.6.27';
const version = '2.6.28';
export { version };

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.6.27",
"version": "2.6.28",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,9 +24,9 @@
"license": "ISC",
"dependencies": {
"@antv/geo-coord": "^1.0.8",
"@antv/l7-core": "^2.6.27",
"@antv/l7-source": "^2.6.27",
"@antv/l7-utils": "^2.6.27",
"@antv/l7-core": "^2.6.28",
"@antv/l7-source": "^2.6.28",
"@antv/l7-utils": "^2.6.28",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

View File

@ -189,6 +189,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
// TODO: layer 保底颜色
private bottomColor = 'rgba(0, 0, 0, 0)';
private isDestroied: boolean = false;
// private pickingPassRender: IPass<'pixelPicking'>;
constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
@ -789,12 +791,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
public destroy() {
// debugger
if (this.isDestroied) {
return;
}
this.hooks.beforeDestroy.call();
// 清除sources事件
this.layerSource.off('update', this.sourceEvent);
this.multiPassRenderer.destroy();
// console.log(this.styleAttributeService.getAttributes())
// 清除所有属性以及关联的 vao == 销毁所有 => model this.models.forEach((model) => model.destroy());
this.styleAttributeService.clearAllAttributes();
@ -803,7 +809,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
this.hooks.afterDestroy.call();
// TODO: 清除各个图层自定义的 models 资源
this.layerModel?.clearModels();
// this.layerModel?.clearModels();
this.models = [];
@ -822,6 +828,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
this.removeAllListeners();
// 解绑图层容器中的服务
// this.container.unbind(TYPES.IStyleAttributeService);
this.isDestroied = true;
}
public clear() {
this.styleAttributeService.clearAllAttributes();

View File

@ -20,4 +20,7 @@ export interface ILineLayerStyleOptions {
globalArcHeight?: number; // 可选参数、地球模式下 3D 弧线的高度
vertexHeightScale?: number; // 可选参数、lineLayer vertex height scale
borderWidth?: number; // 可选参数 线边框宽度
borderColor?: string; // 可选参数 线边框颜色
}

View File

@ -34,6 +34,8 @@ export default class LineModel extends BaseModel {
lineTexture = false,
iconStep = 100,
vertexHeightScale = 20.0,
borderWidth = 0.0,
borderColor = '#ccc',
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (dashArray.length === 2) {
dashArray.push(0, 0);
@ -98,6 +100,10 @@ export default class LineModel extends BaseModel {
u_icon_step: iconStep,
u_textSize: [1024, this.iconService.canvasHeight || 128],
// line border 参数
u_borderWidth: borderWidth,
u_borderColor: rgb2arr(borderColor),
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,

View File

@ -6,8 +6,10 @@ uniform float u_blur : 0.99;
uniform float u_line_type: 0.0;
uniform float u_opacity : 1.0;
uniform float u_textureBlend;
uniform float u_borderWidth: 0.0;
uniform vec4 u_borderColor;
varying vec4 v_color;
// varying vec2 v_normal;
// line texture
uniform float u_line_texture;
@ -69,7 +71,7 @@ void main() {
float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);
float v = styleMappingMat[3].a; // 线图层贴图部分的 v 坐标值
v = max(smoothstep(0.95, 1.0, v), v);
// v = max(smoothstep(0.95, 1.0, v), v);
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, vec2(u, v)));
@ -87,19 +89,34 @@ void main() {
gl_FragColor = filterColor(pattern);
}
} else {
float v = styleMappingMat[3].a;
float borderWidth = min(0.5, u_borderWidth);
// 绘制 border
if(borderWidth > 0.0) {
float borderOuterWidth = borderWidth/2.0;
if(v >= 1.0 - borderWidth || v <= borderWidth) {
if(v > borderWidth) {
float linear = smoothstep(0.0, 1.0, (v - (1.0 - borderWidth))/borderWidth);
gl_FragColor.rgb = mix(gl_FragColor.rgb, u_borderColor.rgb, linear);
} else if(v <= borderWidth) {
float linear = smoothstep(0.0, 1.0, v/borderWidth);
gl_FragColor.rgb = mix(u_borderColor.rgb, gl_FragColor.rgb, linear);
}
}
if(v < borderOuterWidth) {
gl_FragColor.a = mix(0.0, gl_FragColor.a, v/borderOuterWidth);
} else if(v > 1.0 - borderOuterWidth) {
gl_FragColor.a = mix(gl_FragColor.a, 0.0, (v - (1.0 - borderOuterWidth))/borderOuterWidth);
}
}
gl_FragColor = filterColor(gl_FragColor);
}
// gl_FragColor = (vec4(1.0, 0.0, 0.0, 1.0));
// if(rV < r || rV > 1.0 - r) {
// gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
// }
// if(v > 0.9) {
// gl_FragColor = vec4(0.17647, 0.43921568, 0.2, 1.0);
// } else if(v < 0.1) {
// gl_FragColor = vec4(0.17647, 0.43921568, 0.2, 1.0);
// }
// gl_FragColor = filterColor(gl_FragColor);
}

View File

@ -28,7 +28,6 @@ uniform float u_vertexScale: 1.0;
varying vec4 v_color;
varying vec4 v_dash_array;
varying vec2 v_normal;
// texV 线图层 - 贴图部分的 v 坐标(线的宽度方向)
varying vec2 v_iconMapUV;
@ -85,8 +84,6 @@ void main() {
if(u_aimate.x == Animate || u_linearColor == 1.0) {
d_distance_ratio = a_Distance / a_Total_Distance;
}
v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter));
v_color = a_Color;
vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);

View File

@ -215,7 +215,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
// console.log('params', params)
// console.log('attribute', attribute)
const mappingResult = attribute.mapping ? attribute.mapping(params) : [];
if (attribute.name === 'color' && !isColor(mappingResult[0])) {
return [minimumColor];

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.6.27",
"version": "2.6.28",
"description": "l7 map",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -37,7 +37,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-utils": "^2.6.27",
"@antv/l7-utils": "^2.6.28",
"@babel/runtime": "^7.7.7",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.6.27",
"version": "2.6.28",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -27,9 +27,9 @@
"license": "ISC",
"dependencies": {
"@amap/amap-jsapi-loader": "^0.0.3",
"@antv/l7-core": "^2.6.27",
"@antv/l7-map": "^2.6.27",
"@antv/l7-utils": "^2.6.27",
"@antv/l7-core": "^2.6.28",
"@antv/l7-map": "^2.6.28",
"@antv/l7-utils": "^2.6.28",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-mini",
"version": "2.6.27",
"version": "2.6.28",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,11 +25,11 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-core": "^2.6.27",
"@antv/l7-layers": "^2.6.27",
"@antv/l7-maps": "^2.6.27",
"@antv/l7-scene": "^2.6.27",
"@antv/l7-utils": "^2.6.27",
"@antv/l7-core": "^2.6.28",
"@antv/l7-layers": "^2.6.28",
"@antv/l7-maps": "^2.6.28",
"@antv/l7-scene": "^2.6.28",
"@antv/l7-utils": "^2.6.28",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.6.27",
"version": "2.6.28",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.6.27",
"@antv/l7-core": "^2.6.28",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"l7regl": "^0.0.16",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.6.27",
"version": "2.6.28",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,12 +23,12 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.6.27",
"@antv/l7-core": "^2.6.27",
"@antv/l7-layers": "^2.6.27",
"@antv/l7-maps": "^2.6.27",
"@antv/l7-renderer": "^2.6.27",
"@antv/l7-utils": "^2.6.27",
"@antv/l7-component": "^2.6.28",
"@antv/l7-core": "^2.6.28",
"@antv/l7-layers": "^2.6.28",
"@antv/l7-maps": "^2.6.28",
"@antv/l7-renderer": "^2.6.28",
"@antv/l7-utils": "^2.6.28",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.6.27",
"version": "2.6.28",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,8 +26,8 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "^2.6.27",
"@antv/l7-utils": "^2.6.27",
"@antv/l7-core": "^2.6.28",
"@antv/l7-utils": "^2.6.28",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-three",
"version": "2.6.27",
"version": "2.6.28",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,9 +44,9 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-core": "^2.6.27",
"@antv/l7-layers": "^2.6.27",
"@antv/l7-scene": "^2.6.27",
"@antv/l7-core": "^2.6.28",
"@antv/l7-layers": "^2.6.28",
"@antv/l7-scene": "^2.6.28",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"reflect-metadata": "^0.1.13",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.6.27",
"version": "2.6.28",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

View File

@ -15,9 +15,10 @@ export default class Amap2demo_road2 extends React.Component {
id: 'map',
map: new GaodeMap({
center: [120.165, 30.25],
pitch: 50,
zoom: 16.8,
pitch: 0,
zoom: 15,
viewMode: '3D',
style: 'dark',
}),
});
this.scene = scene;
@ -37,7 +38,7 @@ export default class Amap2demo_road2 extends React.Component {
.source(data)
.size(5)
.shape('line')
.texture('02')
// .texture('02')
// .color('#ccc')
.color('rgb(20, 180, 90)')
// .animate({
@ -46,10 +47,13 @@ export default class Amap2demo_road2 extends React.Component {
// trailLength: 2, // 流线长度
// })
.style({
borderWidth: 0.35,
borderColor: '#fff',
// opacity: 0.5,
lineTexture: true, // 开启线的贴图功能
iconStep: 80, // 设置贴图纹理的间距
});
// lineTexture: true, // 开启线的贴图功能
// iconStep: 80, // 设置贴图纹理的间距
})
.active(true);
scene.addLayer(layer);
});
});

View File

@ -65,6 +65,7 @@ function joinData(geodata: any, ncovData: any) {
}
export default React.memo(function Map() {
const [showScene, setShowScene] = React.useState(true);
const [data, setData] = React.useState();
const [popupInfo, setPopupInfo] = React.useState<{
lnglat: number[];
@ -92,115 +93,128 @@ export default React.memo(function Map() {
};
fetchData();
}, []);
setTimeout(() => {
// setShowScene(false)
}, 3000);
return (
<>
<AMapScene
map={{
center: [110.19382669582967, 50.258134],
pitch: 0,
style: 'blank',
zoom: 10,
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
{popupInfo && (
<Popup lnglat={popupInfo.lnglat}>
{popupInfo.feature.name}
<ul
{showScene && (
<AMapScene
map={{
center: [110.19382669582967, 50.258134],
pitch: 0,
style: 'blank',
zoom: 10,
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
onSceneLoaded={(scene) => {
// setTimeout(() => {
// scene.removeAllLayer()
// }, 3000)
// setTimeout(() => scene.destroy(), 5000)
}}
>
{popupInfo && (
<Popup lnglat={popupInfo.lnglat}>
{popupInfo.feature.name}
<ul
style={{
margin: 0,
}}
>
<li>
<button
onClick={() => {
alert('test');
}}
value="点击"
>
</button>
:{popupInfo.feature.currentConfirmedCount}
</li>
<li>:{popupInfo.feature.confirmedCount}</li>
<li>:{popupInfo.feature.curedCount}</li>
<li>:{popupInfo.feature.deadCount}</li>
</ul>
</Popup>
)}
{data && [
<PolygonLayer
key={'1'}
options={{
autoFit: true,
fitBoundsOptions: {
duration: 0,
animate: false,
},
}}
source={{
data,
}}
scale={{
values: {
confirmedCount: {
type: 'quantile',
},
},
}}
active={{
option: {
color: '#0c2c84',
},
}}
color={{
field: 'confirmedCount',
values: [
'#732200',
'#CC3D00',
'#FF6619',
'#FF9466',
'#FFC1A6',
'#FCE2D7',
].reverse(),
}}
shape={{
values: 'fill',
}}
style={{
margin: 0,
opacity: 1,
}}
>
<li>
<button
onClick={() => {
alert('test');
}}
value="点击"
>
</button>
:{popupInfo.feature.currentConfirmedCount}
</li>
<li>:{popupInfo.feature.confirmedCount}</li>
<li>:{popupInfo.feature.curedCount}</li>
<li>:{popupInfo.feature.deadCount}</li>
</ul>
</Popup>
)}
{data && [
<PolygonLayer
key={'1'}
options={{
autoFit: true,
fitBoundsOptions: {
duration: 0,
animate: false,
},
}}
source={{
data,
}}
scale={{
values: {
confirmedCount: {
type: 'quantile',
},
},
}}
active={{
option: {
color: '#0c2c84',
},
}}
color={{
field: 'confirmedCount',
values: [
'#732200',
'#CC3D00',
'#FF6619',
'#FF9466',
'#FFC1A6',
'#FCE2D7',
].reverse(),
}}
shape={{
values: 'fill',
}}
style={{
opacity: 1,
}}
>
<LayerEvent type="click" handler={showPopup} />
{/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
</PolygonLayer>,
,
<LineLayer
key={'2'}
source={{
data,
}}
size={{
values: 0.6,
}}
color={{
values: '#aaa',
}}
shape={{
values: 'line',
}}
style={{
opacity: 1,
}}
/>,
]}
</AMapScene>
<LayerEvent type="click" handler={showPopup} />
{/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
</PolygonLayer>,
,
<LineLayer
key={'2'}
source={{
data,
}}
size={{
values: 0.6,
}}
color={{
values: '#aaa',
}}
shape={{
values: 'line',
}}
style={{
opacity: 1,
}}
/>,
]}
</AMapScene>
)}
</>
);
});

11
tbeta.sh Normal file
View File

@ -0,0 +1,11 @@
tnpm dist-tag add @antv/l7-component@2.6.20 beta
tnpm dist-tag add @antv/l7-core@2.6.20 beta
tnpm dist-tag add @antv/l7@2.6.20 beta
tnpm dist-tag add @antv/l7-layers@2.6.20 beta
tnpm dist-tag add @antv/l7-map@2.6.20 beta
tnpm dist-tag add @antv/l7-maps@2.6.20 beta
tnpm dist-tag add @antv/l7-renderer@2.6.20 beta
tnpm dist-tag add @antv/l7-scene@2.6.20 beta
tnpm dist-tag add @antv/l7-source@2.6.20 beta
tnpm dist-tag add @antv/l7-three@2.6.20 beta
tnpm dist-tag add @antv/l7-utils@2.6.20 beta