VUE2.0实现高德地图选择地点后进行行政区边界划分

最终效果图：

最终效果达到选择全部就描绘当前级联选择框下面的所有行政区，第二级开始描绘上一层加当前所有行政区

预备知识：

vue2.0、组件间传值、高德地图API（提前去高德地图提供的服务处申请好key）、elementUI

在父组件中完成一个级联框:

<template>
  <div class="main-Screen">
      <el-cascader
       size="mini"
       v-model="selectedCity"
       placeholder="请选择城市"
       :options="cityOption"
       @change="changeCity(selectedCity)"
     >
     </el-cascader>
  </div>
  <Map></Map>
</template>

import Map from "./component/Map.vue";

export default {
  name: "MainScreen",
  components: {
    Map
  },
  data() {
    return {
       cityOption: [
        {
          value: "all",
          label: "全部"
        },
        {
          value: "370000",
          label: "山东省",
          children: [
            {
              value: "all",
              label: "全部"
            },
            {
              value: "370100",
              label: "济南市"
            },
            {
              value: "370800",
              label: "济宁市"
            },
            {
              value: "371300",
              label: "临沂市",
              children: [
                {
                  value: "all",
                  label: "全部"
                },
                {
                  value: "371311",
                  label: "罗庄区"
                }
              ]
            }
          ]
        }
      ],
      selectedCity: ["370000","all"],
      mapOpt:[], 
    }
  },
  methods: {
      // 得到要绘画出的地图
      getMapOpt() {
      if(this.selectedCity){
        let length = this.selectedCity.length;
        // 选择了第一级的全部
        if(length == 1 && this.selectedCity[0] == 'all'){
          this.mapOpt = [];
          if(this.cityOption.length == 1){ // 如果第一级的全部下面没有东西了
            this.mapOpt.push({ city: "中国", color : "blue"});
          }else{
            for(let i = 1; i < this.cityOption.length ; i++ ) {
              this.mapOpt.push({ city: this.cityOption[i].value, color : "blue"});
            }
          }
        }
        // 选择了第二级的全部
        if(length == 2 && this.selectedCity[length - 1] == "all"){
          this.mapOpt = [];
          // 先把最大的放进去
          this.mapOpt.push({ city: this.selectedCity[length - 2], color : "#13c2c2"});
          // 再去找children
          for(let i = 1; i < this.cityOption.length ; i++ ) {
            if(this.selectedCity[length - 2] == this.cityOption[i].value){
              for (let j = 1; j < this.cityOption[i].children.length; j++) {
                this.mapOpt.push({ city: this.cityOption[i].children[j].value, color : "blue"});
              }
            }
          }
        }
        // 没有选第二级全部的
        if(length == 2 && this.selectedCity[length - 1] != "all"){
          this.mapOpt = [];
          this.mapOpt.push({ city: this.selectedCity[length - 1], color : "green"});
        }

        // 选了第三级全部的
        if(length == 3 && this.selectedCity[length - 1] == "all"){
          this.mapOpt = [];
          // 先把最大的一级放进去
          this.mapOpt.push({ city: this.selectedCity[length - 2], color : "green"});
          // 再去找children
          for(let i = 1; i < this.cityOption.length ; i++ ) {
            if(this.selectedCity[length - 3] == this.cityOption[i].value){
              for (let j = 1; j < this.cityOption[i].children.length; j++) {
                if(this.selectedCity[length - 2] == this.cityOption[i].children[j].value ){
                  for(let k = 1; k < this.cityOption[i].children[j].children.length; k++)
                  this.mapOpt.push({ city: this.cityOption[i].children[j].children[k].value, color : "yellow"});
                }
              }
            }
          }
        }

        // 选到县级了
        if(length == 3 && this.selectedCity[length - 1] != "all"){
          this.mapOpt = [];
          this.mapOpt.push({ city: this.selectedCity[length - 1], color : "yellow"});
        }
        // console.log(this.mapOpt,"mapOpt");
        // 执行子组件的搜索方法
        this.$nextTick( () => {
          this.$refs.map.getSearch(this.mapOpt);
        })
      }
    },
    //级联选择框的值改变以后执行
    changeCity(val) {
      // this.selectedCity = val;
      console.log(val);
      this.getMapOpt();
    }  
  }
}

建立一个Map.vue(子组件)

<template>
  <div class="content">
    <div class="map">
      <div class="img" id="container"> //建立好容器
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //下载高德地图的包
window._AMapSecurityConfig = {
  securityJsCode: "安全密钥（自己申请）" //填好安全密钥
};
export default {
  data() {
    return {
      map: null, 
      placeSearch: null,
      //接收Search组件传输input输入框的值
      searchPlaceInput: "",
      district: null,
      polygons: null,
      map_opt: []
    };
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.DistrictSearch",
          "AMap.ToolBar",
          "AMap.Scale", //比例尺
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.Geolocation",
          "AMap.PlaceSearch",
          "AMap.AutoComplete" //搜索框
        ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          // 在该容器里新建一个高德地图
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            mapStyle: "amap://styles/darkblue", //地图深色背景样式
            center: [118.356464, 35.103771] //初始化地图中心点位置这里填经纬度 这里是临沂市的
          });
          this.map.addControl(new AMap.Scale());
          this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.HawkEye());
          // this.map.addControl(new AMap.MapType()); //卫星层、街道、标准地图
          this.map.addControl(new AMap.Geolocation());
          // 绑定搜索地图
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map
          }); 
          //调用父组件方法 使默认的地图灯钩绘制出来
          this.$parent.getMapOpt();
        })
        .catch(e => {
          console.log(e);
        });
    },

    //父组件调用的方法：可以把父组件得到的要查询的点位数组传过来
    getSearch(e) {
      console.log(e);
      this.map_opt = e;
      // 执行地点搜索
      this.searchBounds(this.map_opt);
    },

    // 行政区区域划分
    searchBounds(newArr) {
      // 每次搜索之后清空上一次搜索的数据
      if (this.polygons != null) {
        this.map.remove(this.polygons); //清除上次结果
        this.polygons = [];
      }
      //加载行政区划插件
      if (!this.district) {
        //实例化DistrictSearch
        var opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "district" //查询行政级别为 市
        };
        this.map.plugin(["AMap.DistrictSearch"], () => {
          this.district = new AMap.DistrictSearch(opts);
        });
      }
      // 循环数组查询
      for (let i = 0; i < newArr.length; i++) {
        // 行政区查询
        this.district.search(newArr[i].city, (status, result) => {
          console.log(status, result, "*****");
          this.handlePolygon(result, newArr[i].color);
        });
      }
    },

    // 画图方法
    handlePolygon(result, color) {
      let bounds = result.districtList[0].boundaries;
      if (bounds) {
        for (let i = 0, l = bounds.length; i < l; i++) {
          //生成行政区划polygon
          let polygon = new AMap.Polygon({
            map: this.map, // 指定地图对象
            strokeWeight: 1, // 轮廓线宽度
            path: bounds[i], //轮廓线的节点坐标数组
            fillOpacity: 0.4, //透明度
            fillColor: color, //填充颜色
            strokeColor: "#256edc" //线条颜色
          });
          this.polygons.push(polygon);
        }
        // 地图自适应
        this.map.setFitView();
      }
    },
  },
  mounted() {
    this.initMap();
  }
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
}
.map {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
</style>

最后自己给一点样式就ok了

VUE2.0实现 高德地图 选择地点后 进行 行政区边界划分

猜你喜欢

VUE2.0实现高德地图选择地点后进行行政区边界划分