---
title: "中国行政区市"
language: "en"
canonical: "https://l7.antv.antgroup.com/en/examples/polygon/fill/china-city/"
---

# 中国行政区市

[Live example](https://l7.antv.antgroup.com/en/examples/polygon/fill/china-city/)

[Resource index](/llms.txt)

Provide a DOM element with `id="container"`. The original example source follows.

## Source

```js
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*9m0bSLr1oCIAAAAAgEAAAAgAerd2AQ/original_中国_市.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);
});
```

## Runtime environment

Before evaluating the example, await this setup in a page containing #container. Supporting files follow below.

```js
await (await import("/src/demo/setup.ts")).default({ container: document.getElementById('container'), path: "/examples/polygon/fill/demo/china-city.js" });
```


## src/demo/setup.ts

```ts
import type { DemoSetupContext } from '@antv/astro-theme-antv';
import * as District from 'district-data';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default async function setup({ container, path }: DemoSetupContext) {
  // Tool pages provide their own React layout and SDK imports.
  if (!path.startsWith('/examples/')) return;
  // Retain only the original globals still used by gallery examples.
  Object.assign(window, { District, GLTFLoader });
  const map = document.createElement('div');
  map.id = 'map';
  container.append(map);
  await import('./map.css');
  // Match the original gallery's shared AMap environment, including raw AMap demos.
  await import('./amap');
}
```

## src/demo/map.css

```css
#map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.labelclass {
  position: absolute;
  display: inline;
  cursor: pointer;
  background: rgb(255, 228, 120);
  border: solid 2px #fff;
  padding: 4px;
  white-space: nowrap;
  font:
    bold 12px/18px arial,
    sans-serif;
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 30px;
  /* opacity: 0.7; */
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
```

## src/demo/amap.ts

```ts
import AMapLoader from '@amap/amap-jsapi-loader';

// Preserve the site's development and production SDK registrations.
const credentials = import.meta.env.DEV
  ? { key: '6f025e700cbacbb0bb866712d20bb35c', securityJsCode: '290ddc4b0d33be7bc9b354bc6a4ca614' }
  : { key: 'f59bcf249433f8b05caaee19f349b3d7', securityJsCode: '2653011adeb04230b3a26cc9a780a800' };
window._AMapSecurityConfig = { securityJsCode: credentials.securityJsCode };
await AMapLoader.load({ key: credentials.key, version: '2.0', plugins: ['Map3D'] });
```