高德地图给全国省份行政地图加上自定义暗色系

初始化地图

AMapLoader.load({
  key: 'xxxxxx', // 申请好的Web端开发者Key，首次调用 load 时必填
  version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.ControlBar', 'AMap.MoveAnimation'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
  .then(async (AMap) => {
    // 设置地图属性
    setMap(AMap)

    map.value.setZoomAndCenter(5, [104.880411, 36.145663])
  })
  .catch((e) => {
    console.log(e)
  })

设置地图属性

const setMap = (AMap) => {

    let colors = {}
    let GDPSpeed = {
      520000: 10, //贵州
      540000: 10, //西藏
      530000: 8.5, //云南
      500000: 8.5, //重庆
      360000: 8.5, //江西
      340000: 8.0, //安徽
      510000: 7.5, //四川
      350000: 8.5, //福建
      430000: 8.0, //湖南
      420000: 7.5, //湖北
      410000: 7.5, //河南
      330000: 7.0, //浙江
      640000: 7.5, //宁夏
      650000: 7.0, //新疆
      440000: 7.0, //广东
      370000: 7.0, //山东
      450000: 7.3, //广西
      630000: 7.0, //青海
      320000: 7.0, //江苏
      140000: 6.5, //山西
      460000: 7, // 海南
      310000: 6.5, //上海
      110000: 6.5, // 北京
      130000: 6.5, // 河北
      230000: 6, // 黑龙江
      220000: 6, // 吉林
      210000: 6.5, //辽宁
      150000: 6.5, //内蒙古
      120000: 5, // 天津
      620000: 6, // 甘肃
      610000: 8.5, // 甘肃
      710000: 2.64, //台湾
      810000: 3.0, //香港
      820000: 4.7 //澳门
    }
    let getColorByDGP = function (adcode) {
      if (!colors[adcode]) {
        let gdp = GDPSpeed[adcode]
        if (!gdp) {
          colors[adcode] = 'rgb(227,227,227)'
        } else {
          let r = 21
          let g = 38
          let b = 57
          // let a = gdp / 8.5
          let a = 1
          colors[adcode] = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'
        }
      }
      // 21, 38, 57
      return colors[adcode]
    }

    let disCountry = new AMap.DistrictLayer.Country({
      zIndex: 10,
      SOC: 'CHN',
      depth: 1,
      styles: {
        'nation-stroke': '#ff0000',
        'coastline-stroke': '#0088ff',
        'province-stroke': '#3d6691',
        'city-stroke': 'rgba(255,255,255,0.15)', //中国特有字段
        fill: function (props) {
          return getColorByDGP(props.adcode_pro)
        }
      }
    })

    let counts = [10000, 5000, 1000, 500, 100]
    let color = ['#12151c', '#12151c', '#12151c', '#12151c', '#12151c']
    const data = FormatWorld()
    let dis = new AMap.DistrictLayer.World({
      zIndex: 10,
      styles: {
        'stroke-width': 0.8,
        fill: function (d) {
          let country = data.find((c) => {
            return c.name == d.NAME_CHN
          })
          if (!country) {
            return
          }
          country = country.qz
          if (country > counts[0]) {
            return color[0]
          } else if (country > counts[1]) {
            return color[1]
          } else if (country > counts[2]) {
            return color[2]
          } else if (country > counts[3]) {
            return color[3]
          } else {
            return color[4]
          }
        },
        'coastline-stroke': function (d) {
          if (d.type === 'Coastline_China') {
            return '#41ae76'
          }
          return 'rgba(0,0,0,0)'
        },
        'nation-stroke': function (d) {
          if (d.type === 'Nation_Border_China') {
            return '#3d6691'
          }
          return '#24374e'
        }
      }
    })

    map.value = new AMap.Map('container', {
      //设置地图容器id
      viewMode: '3D', //是否为3D地图模式
      // zoom: 0, //初始化地图级别
      center: [lng.value, lat.value], //初始化地图中心点位置
      features: ['bg', 'road', 'building'], // 地图显示要素：区域面，道路，建筑，标注
      pitch: 0, // 角度
      expandZoomRange: true, // 为 true 时，zooms的最大级别在PC上可以扩大到20级
      resizeEnable: true, // 是否监控地图容器尺寸变化
      showLabel: true,
      layers: [disCountry, dis]
      // layers: layers
    })
}

发现地图的海面是白色的

没关系给背景加个颜色

background-color: #12151c !important;