antvis / antvis/L7

同时创建两个LayerPopup的问题,鼠标移动到层级高的图层上时,不仅显示了高层级图层的信息,还显示低层级图层的信息

Open
#1,716 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.1k
Forks
656
PR merge metrics
No merged PRs in 30d

Description

创建了两个图层,一个PointLayer(zindex为3),一个PolygonLayer(zindex为2),两个图层都创建了对应的LayerPopup,鼠标移动到PointLayer上的某个图片上时,不仅显示了对应点的信息,还显示了下面区域的信息,这个怎么解决???
代码如下,
import { Scene, PointLayer,PolygonLayer,LayerPopup } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
center: [ 120.133912, 30.264487 ],
zoom: 10
})
});
scene.addImage(
'0',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
);
scene.addImage(
'1',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
);
scene.addImage(
'2',
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
);
scene.on('loaded', () => {
const data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"name":"aaa","value":10},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[120.133912, 30.264487],
[120.165222, 30.26708],
[120.170798, 30.241887],
[120.154356, 30.222124],
[120.129194, 30.222865],
[120.111324, 30.243863],
[120.133912, 30.264487]
]
]
}
}
]
};
const layer = new PolygonLayer({
zIndex: 2,
})
.source(data)
.color("#FF5D5D")
.shape('fill')
.active(true).style({
opacity: 0.6,
});
scene.addLayer(layer);

const popup = new LayerPopup({
items: [
{
layer: layer,
fields: [
{
field: 'name',
formatField: () => '名称',
},
{
field: 'value',
formatField: () => '权值',
formatValue: (val) => val.toFixed(2),
},
'lng',
'lat',
],
},
],
trigger: 'hover',
});
scene.addPopup(popup);

const data1 = [{
lng: 120.155268,
lat: 30.256018,
status: '0'
}, {
lng: 120.150568,
lat: 30.244729,
status: '1'
},{
lng: 120.140307,
lat: 30.245323,
status: '2'
}];
const siteLayer = new PointLayer({
zIndex: 3,
}).source(data1, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}

}).shape('status', ['0', '1', '2']).size(15);
scene.addLayer(siteLayer);

const sitePopup = new LayerPopup({
items: [
{
layer: siteLayer,
fields:[{
field: 'status',
formatField: () => '基站能耗',
}]
},
],
trigger: 'hover',
});
scene.addPopup(sitePopup);

});

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied example with PointLayer and PolygonLayer, each using a hover-triggered LayerPopup. Then inspect the LayerPopup hover handling and layer zIndex behavior; done means hovering the point layer shows only its popup and does not also show the polygon layer's information.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.