This commit is contained in:
2912401452 2022-01-04 19:06:48 +08:00
commit 8ab6710e07
5 changed files with 76 additions and 143 deletions

22
beta.sh
View File

@ -1,11 +1,11 @@
npm dist-tag add @antv/l7-component@2.5.45 beta
npm dist-tag add @antv/l7-core@2.5.45 beta
npm dist-tag add @antv/l7@2.5.45 beta
npm dist-tag add @antv/l7-layers@2.5.45 beta
npm dist-tag add @antv/l7-map@2.5.45 beta
npm dist-tag add @antv/l7-maps@2.5.45 beta
npm dist-tag add @antv/l7-renderer@2.5.45 beta
npm dist-tag add @antv/l7-scene@2.5.45 beta
npm dist-tag add @antv/l7-source@2.5.45 beta
npm dist-tag add @antv/l7-three@2.5.45 beta
npm dist-tag add @antv/l7-utils@2.5.45 beta
npm dist-tag add @antv/l7-component@2.6.31 beta
npm dist-tag add @antv/l7-core@2.6.31 beta
npm dist-tag add @antv/l7@2.6.31 beta
npm dist-tag add @antv/l7-layers@2.6.31 beta
npm dist-tag add @antv/l7-map@2.6.31 beta
npm dist-tag add @antv/l7-maps@2.6.31 beta
npm dist-tag add @antv/l7-renderer@2.6.31 beta
npm dist-tag add @antv/l7-scene@2.6.31 beta
npm dist-tag add @antv/l7-source@2.6.31 beta
npm dist-tag add @antv/l7-three@2.6.31 beta
npm dist-tag add @antv/l7-utils@2.6.31 beta

View File

@ -1,11 +1,11 @@
npm dist-tag add @antv/l7-component@2.6.25 latest
npm dist-tag add @antv/l7-core@2.6.25 latest
npm dist-tag add @antv/l7@2.6.25 latest
npm dist-tag add @antv/l7-layers@2.6.25 latest
npm dist-tag add @antv/l7-map@2.6.25 latest
npm dist-tag add @antv/l7-maps@2.6.25 latest
npm dist-tag add @antv/l7-renderer@2.6.25 latest
npm dist-tag add @antv/l7-scene@2.6.25 latest
npm dist-tag add @antv/l7-source@2.6.25 latest
npm dist-tag add @antv/l7-three@2.6.25 latest
npm dist-tag add @antv/l7-utils@2.6.25 latest
npm dist-tag add @antv/l7-component@2.6.31 latest
npm dist-tag add @antv/l7-core@2.6.31 latest
npm dist-tag add @antv/l7@2.6.31 latest
npm dist-tag add @antv/l7-layers@2.6.31 latest
npm dist-tag add @antv/l7-map@2.6.31 latest
npm dist-tag add @antv/l7-maps@2.6.31 latest
npm dist-tag add @antv/l7-renderer@2.6.31 latest
npm dist-tag add @antv/l7-scene@2.6.31 latest
npm dist-tag add @antv/l7-source@2.6.31 latest
npm dist-tag add @antv/l7-three@2.6.31 latest
npm dist-tag add @antv/l7-utils@2.6.31 latest

View File

@ -166,6 +166,9 @@ export default class ImageModel extends BaseModel {
if (this.texture) {
this.texture.update({
data: this.iconService.getCanvas(),
mag: 'linear',
min: 'linear mipmap nearest',
mipmap: true,
});
// this.layer.render();
// TODO: 更新完纹理后在更新的图层的时候需要更新所有的图层

View File

@ -11,47 +11,22 @@ varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
void main(){
float opacity = styleMappingMat[0][0];
float size = styleMappingMat[1][0];
float size = max(styleMappingMat[1][0] - 2.0, 0.0);
vec2 pos = v_uv / u_textSize + gl_PointCoord / u_textSize * 64.;
vec4 textureColor;
// Y = 0.299R + 0.587G + 0.114B // 亮度提取
// if(size < 13.0) { // 尺寸过小时使用 bloom 卷积模糊采样
// float h = 1.0/ 512.0;
// vec4 color11 = texture2D( u_texture, vec2( pos.x - 1.0 * h, pos.y + 1.0 * h) );
// vec4 color12 = texture2D( u_texture, vec2( pos.x - 0.0 * h, pos.y + 1.0 * h) );
// vec4 color13 = texture2D( u_texture, vec2( pos.x + 1.0 * h, pos.y + 1.0 * h) );
// vec4 color21 = texture2D( u_texture, vec2( pos.x - 1.0 * h, pos.y) );
// vec4 color22 = texture2D( u_texture, vec2( pos.x , pos.y) );
// vec4 color23 = texture2D( u_texture, vec2( pos.x + 1.0 * h, pos.y) );
// vec4 color31 = texture2D( u_texture, vec2( pos.x - 1.0 * h, pos.y-1.0*h) );
// vec4 color32 = texture2D( u_texture, vec2( pos.x - 0.0 * h, pos.y-1.0*h) );
// vec4 color33 = texture2D( u_texture, vec2( pos.x + 1.0 * h, pos.y-1.0*h) );
// vec4 bloomPixels = (
// 1.0*color11 +
// 1.0*color12 +
// 1.0*color13 +
// 1.0*color21 +
// 1.0*color21 +
// 2.0*color22 +
// 1.0*color23 +
// 1.0*color31 +
// 1.0*color32 +
// 1.0*color33
// )/10.0;
// // luma 去除黑点
// float bloomluma = 0.299 * bloomPixels.r + 0.587 * bloomPixels.g + 0.114 * bloomPixels.b;
// // 弥补透明度
// bloomPixels.a *= bloomluma * 1.5;
// textureColor = bloomPixels;
// } else {
// textureColor = texture2D(u_texture, pos);
// }
textureColor = texture2D(u_texture, pos);
// Tip: 去除边缘部分 mipmap 导致的混合变暗
float fragmengTocenter = distance(vec2(0.5), gl_PointCoord);
if(fragmengTocenter >= 0.5) {
float luma = 0.299 * textureColor.r + 0.587 * textureColor.g + 0.114 * textureColor.b;
textureColor.a *= luma;
}
if(all(lessThan(v_color, vec4(1.0+0.00001))) && all(greaterThan(v_color, vec4(1.0-0.00001))) || v_color==vec4(1.0)){

View File

@ -22,94 +22,49 @@ export default class Amap2demo_image extends React.Component {
}),
});
this.scene = scene;
let originData = [
{
id: '5011000000404',
name: '铁路新村(华池路)',
longitude: 121.4316962,
latitude: 31.26082325,
unit_price: 71469.4,
count: 2,
opacity: 0.5,
offsets: [0, 0],
},
{
id: '5011000002716',
name: '金元坊',
longitude: 121.3810096,
latitude: 31.25302026,
unit_price: 47480.5,
count: 2,
opacity: 0.5,
offsets: [100, 0],
},
{
id: '5011000003403',
name: '兰溪路231弄',
longitude: 121.4086229,
latitude: 31.25291206,
unit_price: 55218.4,
count: 2,
opacity: 0.8,
},
{
id: '5011000003652',
name: '兰溪公寓',
longitude: 121.409227,
latitude: 31.251014,
unit_price: 55577.8,
count: 2,
opacity: 0.8,
},
{
id: '5011000004139',
name: '梅岭新村',
longitude: 121.400946,
latitude: 31.24946565,
unit_price: 63028.1,
count: 2,
opacity: 1.0,
},
];
scene.addImage(
'00',
// 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
// 'https://gw.alipayobjects.com/zos/bmw-prod/a5b94b2e-f01f-4a18-aade-4b41070cff55.svg'
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*qYtMTanpMOcAAAAAAAAAAAAAARQnAQ',
// 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*nGW2RZ3j8c8AAAAAAAAAAAAAARQnAQ'
// 'https://gw.alipayobjects.com/zos/bmw-prod/8eee5dbd-c3f5-4806-a9b5-5c8e90d8510c.svg'
);
scene.addImage(
'01',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
);
scene.on('loaded', () => {
this.imageLayer = new PointLayer()
.source(originData, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('name', ['00', '01', '02'])
// .active(true)
.active({
color: '#00f',
mix: 0.6,
})
// .select(true)
.select({
color: '#00f',
mix: 0.22,
})
.size(8);
scene.addLayer(this.imageLayer);
fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
)
.then((res) => res.json())
.then((data) => {
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
);
scene.addImage(
'01',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
);
const imageLayer = new PointLayer()
.source(data, {
// .source([
// {
// longitude: 121.434765,
// latitude: 31.256735,
// name: ''
// }
// ], {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('name', ['00', '01', '02'])
.active({
color: '#00f',
mix: 0.6,
})
.size(20);
scene.addLayer(imageLayer);
});
});
}