同时创建两个LayerPopup的问题,鼠标移动到层级高的图层上时,不仅显示了高层级图层的信息,还显示低层级图层的信息
- 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
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