@antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等

html

<div class="charts-box">
    <div style="min-height: 300px; justify-content: center;position: relative" id="map"/>
</div>

引入组件

import { Scene, Control } from '@antv/l7'
import { CountryLayer } from '@antv/l7-district'
import { Mapbox } from '@antv/l7-maps'

绘制地图

const ProvinceData = [
        {
          name: '云南省',
          code: 530000,
          value: 1
        },
        {
          name: '黑龙江省',
          code: 230000,
          value: null
        },
        {
          name: '贵州省',
          code: 520000,
          value: 1
        },
        {
          name: '北京市',
          code: 110000,
          value: null
        },
        {
          name: '河北省',
          code: 130000,
          value: null
        },
        {
          name: '山西省',
          code: 140000,
          value: null
        },
        {
          name: '吉林省',
          code: 220000,
          value: null
        },
        {
          name: '宁夏回族自治区',
          code: 640000,
          value: null
        },
        {
          name: '辽宁省',
          code: 210000,
          value: null
        },
        {
          name: '海南省',
          code: 460000,
          value: null
        },
        {
          name: '内蒙古自治区',
          code: 150000,
          value: null
        },
        {
          name: '天津市',
          code: 120000,
          value: null
        },
        {
          name: '**自治区',
          code: 650000,
          value: null
        },
        {
          name: '上海市',
          code: 310000,
          value: null
        },
        {
          name: '陕西省',
          code: 610000,
          value: null
        },
        {
          name: '甘肃省',
          code: 620000,
          value: null
        },
        {
          name: '安徽省',
          code: 340000,
          value: null
        },
        {
          name: '香港特别行政区',
          code: 810000,
          value: null
        },
        {
          name: '广东省',
          code: 440000,
          value: null
        },
        {
          name: '河南省',
          code: 410000,
          value: null
        },
        {
          name: '湖南省',
          code: 430000,
          value: null
        },
        {
          name: '江西省',
          code: 360000,
          value: null
        },
        {
          name: '四川省',
          code: 510000,
          value: null
        },
        {
          name: '广西壮族自治区',
          code: 450000,
          value: null
        },
        {
          name: '江苏省',
          code: 320000,
          value: null
        },
        {
          name: '澳门特别行政区',
          code: 820000,
          value: null
        },
        {
          name: '浙江省',
          code: 330000,
          value: null
        },
        {
          name: '山东省',
          code: 370000,
          value: null
        },
        {
          name: '青海省',
          code: 630000,
          value: null
        },
        {
          name: '重庆市',
          code: 500000,
          value: null
        },
        {
          name: '福建省',
          code: 350000,
          value: null
        },
        {
          name: '湖北省',
          code: 420000,
          value: null
        },
        {
          name: '*自治区',
          code: 540000,
          value: null
        },
        {
          name: '*省',
          code: 710000,
          value: null
        }
      ]
      let color = ['#adf4c5', '#fff']
      const scene = new Scene({
        id: 'map',
        logoVisible: false, // 是否显示logo
        map: new Mapbox({
          center: [116.2825, 39.9],
          pitch: 0,
          style: 'blank',
          zoom: 0
        })
      })
      scene.setMapStatus({
        dragEnable: false, // 是否允许地图拖拽
        keyboardEnable: false, // 是否允许形键盘事件
        doubleClickZoom: false, // 双击放大
        zoomEnable: false, // 滚动缩放
        rotateEnable: false // 旋转
      })
      scene.on('loaded', () => {
        new CountryLayer(scene, {
          data: ProvinceData,
          joinBy: ['NAME_CHN', 'name'],
          depth: 1,
          fill: {
            color: {
              field: 'value',//地图上绘制根据具体字段绘制颜色
              values: (item) => { // 根据具体是否开通绘制地图颜色
                if (item) {
                  return color[0]
                }
              }
            }
          }
        })
      })
      // 添加图例
      const legend = new Control({
        position: 'bottomleft'
      })
      legend.onAdd = function () {
        var el = document.createElement('div')
        el.className = 'infolegend legend'
        var grades = ['已开通', '未开通']
        for (var i = 0; i < grades.length; i++) {
          el.innerHTML +=
            `<i style="background:${color[i]}"></i> ` +
            grades[i] + '<br>'
        }
        return el
      }
      scene.addControl(legend)