数据服务

简介

数据服务托管在 npm 上，并且采用 pbf 数据格式进行编码压缩，减少数据量。数据解码需要安装 geobuf、Pbf 模块

`https://unpkg.com/xingzhengqu@${version}/data/${level}.pbf`;

version 为 2024 及以上时也可使用以下数据服务

`https://unpkg.com/xingzhengqu@${version}/data/${type}/${level}.pbf`;

level 类型

‘country’
‘province’
‘city’
‘district’
‘jiuduanxian’

version 数据版本

2023
2022
2021
2020
2019
2018
2017
2016
2015

type 坐标系

‘gcj02’

数据获取

数据服务进行了 pbf 压缩使用前需要先解析

const url = 'https://unpkg.com/xingzhengqu@2023/data/country.pbf`
fetch(url)
  .then((response) => response.arrayBuffer())
  .then((data) => {
    // 数据解码为geojson
    const gejson = geobuf.decode(new Pbf(data));

  });

中国边界数据

边界数据包括

国界线、九段线
海岸线
未定国界
海上省界
香港界

数据预览

import { createRoot } from 'react-dom/client';
// https://unpkg.com/[email protected]/data/2023_xian.pbf

// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
// @ts-ignore
import { Map } from '@antv/l7-maps';
import { useEffect } from 'react';

const Example = () => {
  // @ts-ignore
  useEffect(() => {
    let disposed = false;
    const scene = new Scene({
      id: 'map',
      map: new Map({
        center: [121.4, 31.258134],
        zoom: 2,
        pitch: 0,
        maxZoom: 4,
        style: 'normal',
        doubleClickZoom: false,
      }),
    });

    const fetchData = () => {
      fetch(
        'https://mdn.alipayobjects.com/afts/file/A*zMVuS7mKBI4AAAAAAAAAAAAADrd2AQ/%E5%85%A8%E5%9B%BD%E8%BE%B9%E7%95%8C.json',
      )
        .then((response) => response.json())
        .then((data) => {
          if (disposed) return;
          const line = new LineLayer({})
            .source(data)
            .size(1)
            .shape('line')
            .color('type', ['#e41a1c', '#ff7f00', '#4daf4a', '#377eb8', '#984ea3', '#377eb8'])
            .scale('type', {
              type: 'cat',
              domain: ['haishangshengjie', 'xianggangjie', 'haianxian', 'guojiexian'],
            })
            .style({ opacity: 1.0 });

          scene.addLayer(line);
        });
    };
    fetchData();
    return () => {
      disposed = true;
      scene.destroy();
    };
  }, []);
  return (
    <div
      id="map"
      style={{
        height: '500px',
        position: 'relative',
      }}
    />
  );
};

createRoot(document.getElementById('container')!).render(<Example />);

import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';

interface DataType {
  name: string;
  adcode: number;
  name_en: string;
  name_var: string;
  city_type: string;
  city_adcode: string;
  province: string;
  province_adcode: string;
  province_type: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: 'NAME',
    dataIndex: 'NAME',
    sorter: true,
  },
  {
    title: 'type',
    dataIndex: 'type',
  },
];

interface IProps {
  onDataLoad: (data: any) => void;
}

const App: React.FC<IProps> = () => {
  const [data, setData] = useState<DataType[]>();

  const fetchData = () => {
    fetch(
      `https://mdn.alipayobjects.com/afts/file/A*zMVuS7mKBI4AAAAAAAAAAAAADrd2AQ/%E5%85%A8%E5%9B%BD%E8%BE%B9%E7%95%8C.json`,
    )
      .then((response) => response.json())
      .then((data) => {
        // 数据解码为geojson
        // @ts-ignore
        const results = data.features.map((feature: any) => {
          return feature.properties;
        });
        setData(results);
      });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <Table
      columns={columns}
      rowKey={(record) => record.adcode}
      dataSource={data}
      size="small"
      scroll={{ x: 1000, y: 500 }}
      pagination={{
        pageSize: 20,
        simple: true,
      }}
    />
  );
};

export default App;

createRoot(document.getElementById('container')!).render(<Example />);

数据下载