vue 实现 省市区五色图 地区都显示

1.html中引入 

   <script src='../../../static/plugins/amap/aMapPolyline.js'></script>
   <script src="https://webapi.amap.com/maps?key=地图的key值&v=1.4.13&plugin=Map3D,AMap.DistrictSearch,Loca,AMap.DistrictLayer,SimpleMarker,DistrictExplorer,"></script>
   <script src="https://webapi.amap.com/loca?v=1.3.2&key=地图的key值"></script>
  <script src="//webapi.amap.com/ui/1.0/main.js"></script>
 
 2. 新建vue文件 命名investMap.vue 代码如下：
    <template>
      <div style="position:relative;width:100%;height:100%">
        <div id="mapContainer"></div>
        <div class="mapRange">
          <div class="mapRange-item">排名情况分布</div>
          <div
            class="mapRange-item"
            v-for="(item, i) in rightColor"
            :key="`colorList-${i}`"
          >
            <i :style="{ background: item.color }"></i>
            {{ item.min ? item.min + '~' : item.min == 0 ? '0~' : '大于'
            }}{{ item.max }}
          </div>
        </div>
      </div>
    </template>
    <script>
    import { citysMap } from '@common/constant'
    // api
    // import { getAllColor } from '@/api/controller/penTagram/index.js'
    let that
    export default {
      data() {
        return {
          countyData: [],
          districtExplorer: null, // 地图districtExplorer类实例
          textOverlayGroup: new AMap.OverlayGroup([]), // 区县显示文案
          filterText: [
            '衢江区',
            '拱墅区',
            '上城区',
            '下城区',
            '江干区',
            '滨江区',
            '江北区',
            '鄞州区',
            '南湖区',
            '瓯海区',
            '金东区'
          ],
          adcodes: {
            330100: '杭州市',
            330200: '宁波市',
            330300: '温州市',
            330400: '嘉兴市',
            330500: '湖州市',
            330600: '绍兴市',
            330700: '金华市',
            330800: '衢州市',
            330900: '舟山市',
            331000: '台州市',
            331100: '丽水市'
          },
          citys: citysMap,
          renderList: null,
          districtExplorer: null,
          colorList: [],
          rightColor: [], // 右侧颜色
          lv: '',
          unit: ''
        }
      },
      beforeMount() {
        that = this
      },
      mounted() {
        this.initMap()
        this.getRightColor()
      },
      methods: {
        getRightColor(type, colorData) {
          const data = {
            type: type
          }
          this.rightColor = colorData
        },
        initMap() {
          this.map = new AMap.Map('mapContainer', {
            mapStyle: '',// 地图样式ui提供
            zoom: 8,
            center: [120.012427, 29.203573],
            enableMapClick: false
          })
        },
        mapCountyChange(args, list, level, unit) {
          // unit 单位  level 控制市级还是区县的
          // console.log(level)
          // level为了判断市级
          const items = args
          this.countyData = list
          this.dataList = JSON.parse(JSON.stringify(list))
          const arr = items.map(v => {
            return v.adcode
          })
          if (arr.length == 0 || arr[0] == 'zj') {
            this.renderList = Object.keys(this.adcodes)
          } else {
            this.renderList = arr
          }

          this.lv = level // 1市级 还是2区县级
          this.unit = unit
          this.countryRender(true, false, level)
          // }
        },
        countryRender(clear = false, defaultStyle = false, level) {
          const that = this
          AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
            let districtExplorer = null
            // 创建一个实例
            if (!that.districtExplorer) {
              that.districtExplorer = new DistrictExplorer({
                eventSupport: true,
                map: that.map
              })
            }
            districtExplorer = that.districtExplorer
            var tipMarker = null
            // 创建一个辅助Marker，提示鼠标内容
            // 鼠标hover提示内容

            if (!that.tipMarker) {
              that.tipMarker = new AMap.Marker({
                // 启用冒泡，否则click事件会被marker自己拦截
                bubble: true,
                offset: new AMap.Pixel(0, 0)
                // icon: require('@/assets/images/areaTBsel.png'),
              })
            }
            tipMarker = that.tipMarker
            // 监听feature的hover事件
            districtExplorer.on('featureMouseout featureMouseover', function(
              e,
              feature
            ) {
              var isHover = e.type === 'featureMouseover'
              if (!isHover) {
                tipMarker.setMap(null)
                return
              }
              tipMarker.setMap(that.map)
              tipMarker.setPosition(e.originalEvent.lnglat)
              const positionName = that.getCountyDetailData(
                feature.properties.name,
                that.lv
              ) // 获取值     level 判断市还是去
              console.log('positionName', positionName)
              const unit = that.unit
              const div =
                positionName.rate == null || positionName.rate == 0
                  ? `<div class="label-value"><b>${
                      positionName.value
                    }${unit}</b></div><div class="rateMarker"><span class="zColor">${
                      positionName.rate == null ? '' : '+' + positionName.rate + '%'
                    }</span></div>`
                  : positionName.rate > 0
                  ? `<div class="label-value"><b>${
                      positionName.value
                    }${unit}</b></div><div class="rateMarker"><i class="hot" ></i><span class='rColor'>${
                      positionName.rate == null ? '' : '+' + positionName.rate + '%'
                    }</span></div>`
                  : `<div class="label-value"><b>${
                      positionName.value
                    }${unit}</b></div><div class="rateMarker"><i class="low" ></i><span color='gColor'>${
                      positionName.rate == null ? '' : positionName.rate + '%'
                    }</span></div>`

              tipMarker.setLabel({
                offset: new AMap.Pixel(20, 20),
                content:
                  '<span class="rank-radiu">' +
                  positionName.orderBy +
                  '</span>' +
                  feature.properties.name +
                  div
                // color: "red",
              })
            })
            // feature被点击
            districtExplorer.on('featureClick', function(e, feature) {
              that.countyName = feature.properties.name
            })

            function renderAreaNode(areaNode, level) {
              districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
                // console.log('feature',feature)
                if (level == 2) {
                  if (
                    that.filterText.filter(v => feature.properties.name == v)
                      .length == 0
                  ) {
                    const text = new AMap.Text({
                      map: that.map,
                      position: feature.properties.center,
                      text: feature.properties.name,
                      zIndex: 100,
                      color: 'black'
                    })
                    that.textOverlayGroup.addOverlay(text)
                  }
                } else if (level == 1) {
                  const text = new AMap.Text({
                    map: that.map,
                    position: feature.properties.center,
                    text: feature.properties.name,
                    zIndex: 100,
                    color: 'black'
                  })
                  that.textOverlayGroup.addOverlay(text)
                }
                const name = feature.properties.name
                let color = null
                let strokeColor = '#ccc'
                // console.log(name)
                const d = that.getCountyDetailData(name, level)
                if (d) {
                  // color = that.getColor(d.value)
                  color = d.color
                }
                strokeColor = '#D5D4D4'

                return {
                  cursor: 'default',
                  bubble: true,
                  strokeColor: '#D5D4D4', // 线颜色
                  strokeOpacity: 1, // 线透明度
                  strokeWeight: 1, // 线宽
                  fillColor: color, // 填充色
                  fillOpacity: 1 // 填充透明度
                }
              })
            }

            if (clear) {
              districtExplorer.clearFeaturePolygons()
              that.textOverlayGroup.setMap(null)
              that.textOverlayGroup.clearOverlays()
            }
            let adcodes
            // console.log(adcodes)
            if (level == 2) {
              adcodes = that.renderList // 所有的浙江省地市
            } else if (level == 1) {
              adcodes = ['330000'] // 市级浙江省11个地市
            }

            districtExplorer.loadMultiAreaNodes(adcodes, function(
              error,
              areaNodes
            ) {
              // debugger
              // 设置定位节点，支持鼠标位置识别
              // 注意节点的顺序，前面的高优先级
              districtExplorer.setAreaNodesForLocating(areaNodes)
              if (areaNodes.length > 0) {
                // 清除已有的绘制内容
                for (var i = 0, len = areaNodes.length; i < len; i++) {
                  renderAreaNode(areaNodes[i], level)
                }
              } else {
                // renderAreaNode(areaNodes[]);
              }
            })
          })
        },
        getCountyDetailData(name, level) {
          // debugger

          if (level == 2) {
            const t = this.countyData.filter(v => {
              return v.county.indexOf(name.substr(0, 2)) > -1
            })
            return t[0]
          } else if (level == 1) {
            const t = this.countyData.filter(v => {
              //  console.log(v.city)
              return v.city == name
            })
            // console.log(t[0])
            return t[0]
          }
        },
        getColor(value) {
          if (this.rightColor.length > 0) {
            const c = this.rightColor.find(v => {
              //     if(value==0){
              //         return {color:'#FFFFFF'}
              //     }else if(value==v.min){
              //        return v
              //     }else{
              return v.min <= value && v.max >= value
              // }
            })
            return c ? c.color : '#FFFFFF'
          } else {
            return '#FFFFFF'
          }
        }
      }
    }
    </script>
  3.样式
    <style lang="less">
    #mapContainer {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      .amap-overlay-text-container {
        background: none;
        border: none;
        color: black;
      }
      .amap-info-content {
        padding: 0;
        background-color: transparent;
        // color: white;
        font-weight: bold;
      }
      .investment-right-map-content {
        .amap-info-content {
          color: black !important;
        }
        .amap-maps {
          color: black;
        }
      }
    }
    .mapRange {
      position: absolute;
      right: 0.1rem;
      bottom: 0.3rem;
      width: 1rem;
      color: white;
      padding-left: 0.2rem;
      background-color: rgba(3, 44, 88, 0.43);
      min-width: 95px;
      &-item {
        line-height: 0.35rem;
        height: 0.35rem;
        i {
          display: inline-block;
          width: 0.12rem;
          height: 0.12rem;
          // background: red;
        }
      }
    }
    .amap-logo {
      display: none !important;
    }
    .amap-marker-label {
      position: absolute;
      padding: 10px;
      border: 0 none;
      background-color: rgba(0, 0, 0, 0.65);
      color: white;
      white-space: nowrap;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
      border-radius: 2px;
      height: 65px;
      min-width: 90px;
    }
    .amap-marker-label:after {
      position: absolute;
      border: 5px solid transparent;
      border-right-color: rgba(0, 0, 0, 0.65);
      top: 30px;
      left: -8%;
      content: '';
      width: 0;
      height: 0;
    }
    .label-value {
      margin-top: 10px;
      b {
        font-weight: bold;
        font-size: 14px;
        font-family: DINAlternate-Bold;
      }
      i {
        margin-left: 5px;
      }
    }
    .rank-radiu {
      color: white;
      display: inline-block;
      width: 15px;
      height: 15px;
      background: rgba(42, 107, 255, 0.5);
      margin-right: 5px;
      padding: 3px;
      border-radius: 50%;
      text-align: center;
      vertical-align: middle;
      line-height: 15px;
    }
    .rateMarker {
      margin-top: 5px;
      margin-bottom: 4px;
      // color:red
      //  .hot,.low{
      //        display: inline-block;
      //     width:5px;
      //     height: 10px;
      //     color:#0091FF;
      //      background-size: 100% 100%;
      //     margin-right: 5px;
      //  }
      // 为0
      .zColor {
        color: #32c5ff;
      }
      // 小于0
      .gColor {
        color: #44d7b6;
      }
      .rColor {
        color: #ff4640;
      }
      .hot {
        display: inline-block;
        width: 18px;
        width: 13px;
        height: 19px;
        background: url('~@assets/images/map-icons/up.png') no-repeat center center;
        background-size: 100% 100%;
        margin-right: 5px;
      }
      .low {
        display: inline-block;
        color: #fa6400;
        width: 13px;
        height: 19px;
        color: #0091ff;
        margin-right: 5px;
        background: url('~@assets/images/map-icons/down.png') no-repeat center
          center;

        background-size: 100% 100%;
      }
    }
    </style>
 
4. citysMap 的内容
export const citysMap = [
  {
    name: '浙江省',
    adcode: 'zj',
    type: 1,
    active: true
  },
  {
    name: '杭州市',
    adcode: '330100',
    type: 1,
    active: false
  },
  {
    name: '宁波市',
    adcode: '330200',
    type: 1,
    active: false
  },
  {
    name: '温州市',
    adcode: '330300',
    type: 1,
    active: false
  },
  {
    name: '嘉兴市',
    adcode: '330400',
    type: 1,
    active: false
  },
  {
    name: '湖州市',
    adcode: '330500',
    type: 1,
    active: false
  },
  {
    name: '绍兴市',
    adcode: '330600',
    type: 1,
    active: false
  },
  {
    name: '金华市',
    adcode: '330700',
    type: 1,
    active: false
  },
  {
    name: '衢州市',
    adcode: '330800',
    type: 1,
    active: false
  },
  {
    name: '舟山市',
    adcode: '330900',
    type: 1,
    active: false
  },
  {
    name: '台州市',
    adcode: '331000',
    type: 1,
    active: false
  },
  {
    name: '丽水市',
    adcode: '331100',
    type: 1,
    active: false
  }
]