Ant Design Charts绘制中国地图并动态添加标记点_antd 地图

绘制中国地图并动态添加标记点，在这里使用的是antd charts绘制，需要求只显示中国地图，并且跟踪物流信息

使用组件地址：

图表 - Plot | Ant Design Charts

这里的引入方式是官网给的例子：

import { AreaMap, DotMap } from '@ant-design/charts';

import { Line, Pie } from '@ant-design/plots';

使用到的api和工具

amap API:地图-参考手册-地图 JS API | 高德地图API (amap.com)

mapbox API：Map | Mapbox GL JS | Mapbox

获取绘制地图数据：DataV.GeoAtlas地理小工具系列 (aliyun.com)

首先看下中国地图的绘制：

const config = {

        map: {

            type: 'mapbox',//一共又两个类型amap mapbox

            style: 'blank',/

            center: [103.20, 31.56],//中心

            zoom: 2.5,//当前缩放等级，这样写是禁止缩放地图 mapbox官网给的有boxZoom方法，这里没有用，

            minZoom: 2.5,//最小缩放等级

            maxZoom: 2.5,//最大缩放等级

            pitch: 0,

            dragPan: false,//禁止拖拽

        },

        source: {

            data: dataGeoJson,//绘制中国地图的json数据

            parser: {

                type: 'geojson',

            },

        },

        color: '#6495ED',

        style: {

            opacity: 0.3,

            stroke: '#6495ED',

            strokeWidth: 2,//描边宽度

        },

        state: {

            active: true,

            select: true,

        },

        tooltip: {

            items: ['name', 'density'],

        },

        zoom: false,//隐藏缩放控件

        legend: {},

    };

<AreaMap {...config} />

到这里 中国地图就完成了

在中国地图上面显示标记点，API上述同理

const configDotMap = {

        map: {

            type: 'amap',

            style: 'blank',

            center: [103.20, 31.56],

            zoom: 3.5,

            minZoom: 3.5,

            maxZoom: 3.5,

            pitch: 0,

        },

        source: {

            data: data,

            parser: {

                type: 'json',

                coordinates: 'lnglat',

            },

        },

        autofit: true,

        animate: true,

        color: 'red',

        style: {

            opacity: 1,

            stroke: '#6495ED',

            lineWidth: 0.5,

        },

        state: {

            active: true,

            select: true,

        },

        tooltip: {

            items: ['name', 'density'],

        },

        zoom: false,

        legend: {},

    };

<DotMap {...configDotMap} />

这样只显示中国动态标记点就完成了，也可以使用Echarts直接去画，引入China.js

ECharts 在线构建 (apache.org)