信息框 和行政区域合并一下 ，但是信息框被覆盖掉，如何解决这个问题

[DreamNO1]

1. 信息框 .https://l7.antv.antgroup.com/examples/component/popup/#layerpopup
2. 行政区域 https://l7.antv.antgroup.com/examples/choropleth/administrative#zhejiang-province

[lzxue]

zindex 的问题？可以提供个在线案例

[DreamNO1]

import { GaodeMap, Scene, LayerPopup, PointLayer } from '@antv/l7';
import { Choropleth } from '@antv/l7plot';

const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
}),
});

scene.on('loaded', () => {
const pointLayer = new PointLayer({});
pointLayer
.source(
[
{
lng: 120.132235,
lat: 30.250868,
value: 34.71314604052238,
name: '坐标点1',
},
{
lng: 120.156236,
lat: 30.260268,
value: 96.807880210153,
name: '坐标点2',
},
{
lng: 120.163014,
lat: 30.251297,
value: 29.615472482876815,
name: '坐标点3',
},
{
lng: 120.15394,
lat: 30.231489,
value: 49.90316258911784,
name: '坐标点4',
},
{
lng: 120.154596,
lat: 30.24065,
value: 45.788587061188466,
name: '坐标点5',
},
{
lng: 120.150223,
lat: 30.235078,
value: 29.741111717098544,
name: '坐标点6',
},
{
lng: 120.143992,
lat: 30.229411,
value: 40.241555782182935,
name: '坐标点7',
},
{
lng: 120.136995,
lat: 30.237439,
value: 86.5369792415296,
name: '坐标点8',
},
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
)
.color('value', ['#FFCCC6', '#CF1421'])
.size(10)
.shape('circle');
scene.addLayer(pointLayer);
const layerPopup = new LayerPopup({
items: [
{
layer: pointLayer,
fields: [
{
field: 'name',
formatField: () => '名称',
},
{
field: 'value',
formatField: () => '权值',
formatValue: (val) => val.toFixed(2),
},
'lng',
'lat',
],
},
],
});

scene.addPopup(layerPopup);
fetch(
'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json',
)
.then((response) => response.json())
.then((list) => {
const data = list
.filter(({ level, parent }) => level === 'province' && parent === 100000)
.map((item) => ({ ...item, value: Math.random() * 5000 }));

  const choropleth = new Choropleth({
    source: {
      data,
      joinBy: {
        sourceField: 'adcode',
        geoField: 'adcode',
      },
    },
    viewLevel: {
      level: 'country',
      adcode: 100000,
    },
    autoFit: true,
    color: {
      field: 'value',
      value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
      scale: { type: 'quantize' },
    },
    style: {
      opacity: 1,
      stroke: '#ccc',
      lineWidth: 0.6,
      lineOpacity: 1,
    },
    label: {
      visible: true,
      field: 'name',
      style: {
        fill: '#000',
        opacity: 0.8,
        fontSize: 10,
        stroke: '#fff',
        strokeWidth: 1.5,
        textAllowOverlap: false,
        padding: [5, 5],
      },
    },
    state: {
      active: { stroke: 'black', lineWidth: 1 },
    },
    tooltip: {
      items: ['name', 'adcode', 'value'],
    },
    zoom: {
      position: 'bottomright',
    },
    legend: {
      position: 'bottomleft',
    },
  });
  

  choropleth.addToScene(scene);
});

});

[DreamNO1]

在线案例code

[lzxue]

在线案例code

提供codesanbox 链接，不是代码，怎么搞看这个 https://l7.antv.antgroup.com/tutorial/demo

[DreamNO1]

这个在线案例 https://7r9rn6.csb.app/ 您那边能看到吗？

[DreamNO1]

可以啦，谢谢
const layer = PointLayer({
zIndex: 2,
})