antv g2绘制中国地图及每个省份区域单独展示

本文链接：https://blog.csdn.net/weixin_42418196/article/details/120061124

使用技术： antv g2
地图文件：https://gw.alipayobjects.com/os/antvdemo/assets/data/china-provinces.geo.json
该文件可以直接在线引入，也可以下载到本地使用，在这里我是直接下载到本地的
html代码

<template>
    <div class="map-wrapper">
        <div class="content" ref="mapChart">
        	<!-- 装载地图的容器-->
            <div id="map" ></div>
        </div>
    </div>
</template>

引入文件
引入的前提是本地需要安装dataset和@antv/g2

import DataSet from '@antv/data-set'
import * as G2 from "@antv/g2"
import GeoJSON from '../js/map.json'

绘制地图

data() {
   
        return {
   
            userView: null,
            GeoJSON,
            ds: '',
            mapDv: null
        }
    },
    created() {
   
    },
    watch: {
   
        data(val) {
   
            val.forEach(item => {
   
                GeoJSON.features.forEach(ele => {
   
                    if (ele.properties.name.indexOf(item.name) > -1) {
   
                        item.name = ele.properties.name
                    }
                })
            })
            const userDv = this.formateData(val)
            this.userView.changeData(userDv)
        }
    },
    methods: {
   
        init() {
   
            const chartWidth = this.$refs.mapChart.clientWidth
            const chartHeight = this.$refs.mapChart.clientHeight
            this.chart = new G2.Chart({
   
                container: 'map',
                width: chartWidth,
                height: chartHeight,
                padding: [30]
            })
            this.chart.scale({
   
                longitude: {
   
                    nice: false,
                    sync: true
                },