React使用district-data和@antv/l7显示中国地图

今天给大家分享一个新的展示中国地图的方法，话不多说，上代码。

使用npm安装
npm i @antv/l7，@antv/l7-maps，district-data

import React, { useEffect, useState } from 'react';

import { LineLayer, Marker, PointLayer, PolygonLayer, Scene } from '@antv/l7';

import { Map } from '@antv/l7-maps';

import { DataSourceMap } from 'district-data';
 

const TagMap: React.FC = () => {

const [contentHeight, setContentHeight] = useState<number>(500);

    const [pointData, setPointData] = useState<any[]>([

{

    data: [108.484899, 22.826101],

    longitude: '108.484899',//开始的经纬度

    latitude: '22.826101',//开始的经纬度

    to_longitude: '106.467366',//结束的经纬度

    to_latitude: '26.64921',//结束的经纬度

//开始的经纬度，是当前textNode点的坐标，结束的经纬度是重点的坐标textNode2，如果使用了to_xxxxxx,会有一个动画过程。

    text: 'textNode',

    color: 'rgb(57,255,20)',

    value: '6',

    unit: '小时',//项目中并没有是用此属性（此属性是展示在value值的后缀）

  },

{

    data: [108.484899, 22.826101],

    longitude: '108.484899',//开始的经纬度

    latitude: '22.826101',//开始的经纬度

    to_longitude: '106.467366',//结束的经纬度

    to_latitude: '26.64921',//结束的经纬度

    text: 'textNode2',

    color: 'rgb(57,255,20)',

    value: '6',

    unit: '小时',//项目中并没有是用此属性（此属性是展示在value值的后缀）

  },

]);
 

const newMap = () => {

        const map = document.getElementById('map');

        if (!map) {

            return

        }

        const source = new DataSourceMap.RDBSource({

            version: '2024',

        });

        const scene = new Scene({

            id: 'map',

            logoVisible: false,

            map: new Map({

                pitch: 35.210526315789465,

                style: 'light',

                center: [104.288144, 31.239692],

                zoom: 4.4,

            }),

        });

        scene.addImage(

            '00',

            'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PPo0QYHNResAAAAAAAAAAAAADmJ7AQ/original',

        );

        scene.addImage(

            '01',

            'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*epXiTZ8B1McAAAAAAAAAAAAADmJ7AQ/original',

        );

        scene.addImage(

            '02',

            'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6WGaQKkJppIAAAAAAAAAAAAADmJ7AQ/original',

        );

        scene.setBgColor('#ff4700');

        scene.on('loaded', () => {

            map.style.background = '#fff';

            for (let i = 0; i < pointData.length; i++) {

                const el = document.createElement('label');