polygon/fill/china-fill
Example page
import { LayerPopup, PolygonLayer, Scene } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Map({
center: [116.368652, 39.93866],
zoom: 10.07,
}),
});
scene.on('loaded', async () => {
const url1 =
'https://mdn.alipayobjects.com/antforest/afts/file/A*vaL-R4SU18IAAAAAgCAAAAgAerd2AQ/original_2025-11-14.json';
const result = await fetch(url1);
const data = await result.json();
const fillData = data.features.filter((feature) => {
// 过滤掉线数据
if (feature.properties.name === '境界线') {
return false;
}
return true;
});
// 未定国界线数据
const UndelimitedBoundary = [
{
geometry: {
type: 'MultiLineString',
coordinates: [
[
[73.881449, 38.578733],
[73.89119, 38.581017],
[73.896225, 38.579277],
[73.901848, 38.568253],
[73.903687, 38.560555],
[73.903793, 38.560116],
[73.905403, 38.553806],
[73.909576, 38.543568],
[73.914925, 38.538662],
[73.923203, 38.536366],
[73.924095, 38.536278],
[73.934052, 38.535278],
[73.949661, 38.533672],
[73.964668, 38.533447],
[73.975594, 38.532825],
[73.985313, 38.531368],
[73.987816, 38.52985],
[73.997551, 38.52393],
[74.00869, 38.525055],
[74.020653, 38.5382],
[74.020912, 38.538483],
[74.031281, 38.541729],
[74.037125, 38.541653],
[74.047905, 38.54216],
[74.077568, 38.542782],
[74.079102, 38.542683],
[74.087425, 38.542156],
[74.083199, 38.54781],
[74.081154, 38.553463],
[74.07869, 38.560131],
[74.073669, 38.568062],
[74.072433, 38.570675],
[74.065392, 38.585571],
[74.076485, 38.598328],
[74.084778, 38.611031],
[74.108658, 38.611382],
[74.109337, 38.611393],
[74.115211, 38.614529],
[74.118477, 38.624729],
[74.121376, 38.64859],
[74.129761, 38.662048],
[74.133057, 38.668049],
[74.13459, 38.670841],
[74.139587, 38.674702],
[74.144943, 38.676849],
[74.155731, 38.674114],
[74.162476, 38.670082],
[74.163864, 38.66925],
[74.175537, 38.667221],
[74.186333, 38.664482],
[74.19622, 38.661739],
[74.205475, 38.660095],
[74.226761, 38.656315],
[74.234604, 38.656364],
[74.246483, 38.656441],
[74.251289, 38.65649],
[74.266762, 38.656651],
[74.289215, 38.655109],
[74.30764, 38.652126],
[74.337044, 38.654865],
[74.340645, 38.655075],
[74.344566, 38.6553],
[74.350487, 38.655643],
[74.362137, 38.655704],
[74.374725, 38.654823],
[74.382034, 38.653049],
[74.38282, 38.652859],
[74.392433, 38.650524],
[74.404274, 38.649036],
[74.418686, 38.647556],
[74.43306, 38.642704],
[74.441162, 38.638527],
[74.45285, 38.632957],
[74.460251, 38.632298],
[74.480148, 38.634052],
[74.49382, 38.635956],
[74.503685, 38.637775],
[74.511642, 38.636116],
[74.52211, 38.629471],
[74.5345, 38.618053],
[74.544212, 38.607952],
[74.556969, 38.606674],
[74.563248, 38.605991],
[74.570419, 38.604614],
[74.578346, 38.604168],
[74.594643, 38.599072],
[74.606316, 38.593487],
[74.610794, 38.593502],
[74.616135, 38.599846],
[74.624184, 38.602684],
[74.637634, 38.599915],
[74.652908, 38.589417],
[74.665497, 38.579609],
[74.67807, 38.571209],
[74.691544, 38.560699],
[74.705917, 38.549488],
[74.71489, 38.54248],
[74.727448, 38.536884],
[74.733719, 38.53479],
[74.742088, 38.534157],
[74.755562, 38.536892],
[74.763435, 38.536907],
[74.772621, 38.536926],
[74.782036, 38.538403],
[74.7901, 38.536308],
[74.793694, 38.532097],
[74.799973, 38.527184],
[74.805359, 38.520164],
[74.810745, 38.511738],
[74.812561, 38.503304],
[74.816154, 38.495575],
[74.818848, 38.491364],
[74.827797, 38.490673],
[74.835846, 38.490685],
[74.843887, 38.493507],
[74.846268, 38.492889],
[74.85463, 38.490707],
[74.860008, 38.484386],
[74.861649, 38.470398],
[74.861824, 38.468925],
[74.861855, 38.455566],
[74.862221, 38.443928],
[74.865677, 38.435745],
[74.868057, 38.424793],
[74.869499, 38.415886],
[74.868637, 38.413368],
[74.865524, 38.404251],
[74.855713, 38.393692],
[74.851265, 38.38525],
[74.845764, 38.377579],
[74.840797, 38.374104],
[74.833038, 38.36721],
[74.831085, 38.361538],
[74.821259, 38.364101],
[74.816986, 38.360847],
[74.812035, 38.357075],
[74.795113, 38.342285],
[74.787994, 38.33313],
[74.786682, 38.324875],
[74.788658, 38.318695],
[74.792931, 38.312775],
[74.795563, 38.306595],
[74.799187, 38.297581],
[74.804184, 38.286053],
[74.798851, 38.279015],
[74.790428, 38.271023],
[74.79438, 38.260204],
[74.798332, 38.251965],
[74.800323, 38.239082],
[74.8097, 38.224194],
[74.814178, 38.215763],
[74.813332, 38.198185],
[74.808014, 38.184818],
[74.801826, 38.167229],
[74.803642, 38.155983],
[74.806335, 38.147549],
[74.811707, 38.135605],
[74.816185, 38.123661],
[74.818909, 38.103275],
[74.825157, 38.094143],
[74.830513, 38.085712],
[74.838539, 38.077286],
[74.851013, 38.064648],
[74.859039, 38.054111],
[74.868858, 38.034435],
[74.873314, 38.028812],
[74.875923, 38.023186],
[74.876709, 38.021492],
[74.89109, 38.025314],
[74.900253, 38.028221],
[74.908867, 38.030956],
[74.91954, 38.026043],
[74.923103, 38.017605],
[74.922226, 38.004246],
[74.920464, 37.992996],
[74.916, 37.987175],
[74.913628, 37.97934],
[74.910248, 37.972633],
[74.909927, 37.972004],
[74.908577, 37.967358],
[74.908142, 37.958424],
[74.909958, 37.94878],
[74.912727, 37.94397],
[74.91674, 37.936993],
[74.916649, 37.927158],
[74.916763, 37.915913],
[74.916321, 37.908409],
[74.921738, 37.900196],
[74.928055, 37.894127],
[74.933929, 37.884125],
[74.934387, 37.876266],
[74.928085, 37.86697],
[74.920433, 37.855888],
[74.917282, 37.85017],
[74.914772, 37.845325],
[74.91935, 37.837162],
[74.929138, 37.828865],
[74.94384, 37.820431],
[74.957329, 37.814034],
[74.972275, 37.805893],
[74.986687, 37.798035],
[74.999969, 37.787449],
[75.00322, 37.783325],
[75.005371, 37.776417],
[75.003571, 37.771057],
[74.996262, 37.767288],
[74.978325, 37.758049],
[74.970711, 37.751724],
[74.962685, 37.741776],
[74.961517, 37.74033],
[74.96064, 37.739479],
[74.954781, 37.733791],
[74.946358, 37.72562],
[74.933403, 37.7178],
[74.920357, 37.717434],
[74.919464, 37.707428],
[74.919701, 37.703598],
[74.92038, 37.69278],
[74.918144, 37.684917],
[74.907249, 37.679573],
[74.902786, 37.677383],
[74.895126, 37.673115],
[74.889503, 37.668427],
[74.890289, 37.661339],
[74.892746, 37.656574],
[74.902908, 37.642384],
[74.90873, 37.63327],
[74.909401, 37.631916],
[74.909828, 37.631065],
[74.913025, 37.624645],
[74.920021, 37.608097],
[74.925194, 37.589993],
[74.92543, 37.589161],
[74.926338, 37.582016],
[74.928146, 37.57201],
[74.937737, 37.559345],
[74.954155, 37.549564],
[74.966125, 37.543827],
[74.976898, 37.539898],
[74.997726, 37.530582],
[75.003113, 37.525581],
[74.998672, 37.519382],
[74.998703, 37.519028],
[74.999321, 37.51165],
[75.006439, 37.508041],
[75.013802, 37.507797],
[75.01899, 37.50766],
[75.023857, 37.508663],
[75.032326, 37.50082],
[75.03685, 37.50082],
[75.044617, 37.503395],
[75.050972, 37.506393],
[75.062325, 37.512344],
[75.062531, 37.512386],
[75.06591, 37.513058],
[75.070396, 37.512341],
[75.075333, 37.510906],
[75.077568, 37.506973],
[75.079803, 37.499825],
[75.08786, 37.486958],
[75.102646, 37.475155],
[75.113388, 37.466568],
[75.126381, 37.459049],
[75.13414, 37.446362],
[75.135757, 37.441174],
[75.144249, 37.426514],
[75.14782, 37.419361],
[75.150047, 37.413998],
[75.15004, 37.409355],
[75.148239, 37.404354],
[75.14286, 37.402573],
[75.133408, 37.39687],
[75.129402, 37.392582],
[75.122902, 37.388123],
[75.120651, 37.381695],
[75.126015, 37.37347],
[75.135582, 37.367622],
[75.136513, 37.36113],
[75.136948, 37.355412],
[75.130737, 37.350475],
[75.125565, 37.34687],
[75.12439, 37.339348],
[75.123253, 37.32864],
[75.12291, 37.325413],
[75.122566, 37.322197],
[75.115852, 37.316841],
[75.102646, 37.314533],
[75.090569, 37.316685],
[75.088425, 37.316887],
[75.075363, 37.318127],
[75.069244, 37.314819],
[75.061485, 37.310631],
[75.044037, 37.303848],
[75.030609, 37.299564],
[75.014954, 37.29385],
[75.00618, 37.291611],
[75.004807, 37.29126],
[75.003075, 37.290859],
[74.98745, 37.287239],
[74.972244, 37.28545],
[74.954353, 37.28759],
[74.940041, 37.285439],
[74.929764, 37.281502],
[74.9244, 37.277924],
[74.921722, 37.271851],
[74.920616, 37.263092],
[74.916885, 37.24551],
[74.913071, 37.238796],
[74.90834, 37.233894],
[74.896385, 37.230919],
[74.887998, 37.231222],
[74.879093, 37.231222],
],
],
},
type: 'Feature',
properties: { name: '境界线', gb: '003' },
},
];
const boundary = data.features.filter((feature) => {
// 过滤掉线数据
if (feature.properties.gb !== '003') {
return true;
}
return false;
});
// 行政区划填充色
const fillLayer = new PolygonLayer({
autoFit: true,
})
.source({
type: 'FeatureCollection',
features: fillData,
})
.color('#d6dff6')
.shape('fill')
.active({
color: '#5483ef',
})
.style({
opacity: 0.5,
});
const boundaryLayer = new PolygonLayer({
autoFit: true,
})
.source({
type: 'FeatureCollection',
features: boundary,
})
.color('#5483ef')
.shape('line')
.size(0.5)
.style({
opacity: 1,
});
// 未定国际虚线表示
const layer = new PolygonLayer()
.source({
type: 'FeatureCollection',
features: UndelimitedBoundary,
})
.color('red')
.shape('line')
.size(1)
.style({
opacity: 1,
lineType: 'dash',
dashArray: [5, 5],
});
const layerPopup = new LayerPopup({
trigger: 'click',
items: [
{
layer: fillLayer,
fields: [
{
field: 'name',
formatField: () => '名称',
},
{
field: 'gb',
formatField: () => '编号',
formatValue: (val) => val,
},
],
},
],
});
scene.addLayer(fillLayer);
scene.addLayer(boundaryLayer);
scene.addLayer(layer);
scene.addPopup(layerPopup);
});