高德—根据四点坐标画出空间范围（vue实现）

这篇我们讲一下，如何根据两个经纬度坐标来画出这两个经纬度坐标所框住的正方形区域？

这应该是个比较常见的需求。

我们直接看下最终效果。

一、准备工作：

已经申请好了高德的key且能够初始化出来高德地图。

没有做的可以参考这篇：高德地图API入门使用vue

二、最终效果：

点击完查询按钮之后，会根据你传入的坐标来框出范围，并缩小到合适的视野范围。

我这里给定的是左下角和右上角的经纬度坐标。

三、核心方法：

传入自己的经纬度坐标参数

这里我是按照左下右上的顺序传入的参数，自己的顺序如果不一样可以修改coordinates的数组下标，在传入AMap方法的时候跟我代码中注释掉的值对应上即可。

示例参数：[116.35，39.85，116.41，39.89]

      //画出文件空间范围
      rectangleEditor(coordinates){
        //清空上一次画的范围
        this.removeRectangle();
        // var southWest = new AMap.LngLat(116.356449, 39.859008)
        // console.log(coordinates,"coordinates+++++++++")
        var southWest = new AMap.LngLat(coordinates[0], coordinates[1])
        // var northEast = new AMap.LngLat(116.417901, 39.893797)
        var northEast = new AMap.LngLat(coordinates[2], coordinates[3])
        var bounds = new AMap.Bounds(southWest, northEast)
        this.rectangle = new AMap.Rectangle({
          bounds: bounds,
          // strokeColor:'red',
          strokeWeight: 6,
          strokeOpacity:0.5,
          strokeDasharray: [30,10],
          strokeStyle: 'dashed',
          fillColor:'blue',
          fillOpacity:0.5,
          cursor:'pointer',
          zIndex:50,
        })

        console.log(this.rectangle.getBounds());

        this.rectangle.setMap(this.map)
        // 缩放地图到合适的视野级别
        this.map.setFitView(this.rectangle)
      },

      // 在你的代码中添加一个函数来移除矩形
      removeRectangle() {
        // 确保你能够访问到已经创建的矩形对象
        if (this.rectangle) {
          // 调用AMap提供的方法将矩形从地图上移除
          this.rectangle.setMap(null);
          // 将矩形对象设为null以便释放内存
          this.rectangle = null;
        }
      },

四、完整页面代码：

<template>
  <div>
    <div id="container" ref="amap"></div>


    <div class="input-card-container">
      <el-form @submit.prevent="onSubmit" class="input-card">

        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form>
    </div>


  </div>


</template>

<script>

  import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    name: "Class",
    data() {
      return {

      };
    },
    created() {
      this.initAMap();

    },
    methods: {

      initAMap() {
        AMapLoader.load({
          key: '你自己的key', // 申请好的Web端开发者Key，首次调用 load 时必填
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ['AMap.DistrictSearch','AMap.Polygon']  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
        })
          .then((AMap) => {
            this.map = new AMap.Map('container', {
              // 设置地图容器id
              //viewMode: '3D', // 默认2d地图模式
              zoom: 12, // 初始化地图级别
              zooms: [5, 30], // 地图缩放范围
              // 可以设置初始化当前位置
              center: [116.397428, 39.90923] // 初始化地图位置
            })
          })
      },

      //画出文件空间范围
      rectangleEditor(coordinates){
        //清空上一次画的范围
        this.removeRectangle();
        // var southWest = new AMap.LngLat(116.356449, 39.859008)
        // console.log(coordinates,"coordinates+++++++++")
        var southWest = new AMap.LngLat(coordinates[0], coordinates[1])
        // var northEast = new AMap.LngLat(116.417901, 39.893797)
        var northEast = new AMap.LngLat(coordinates[2], coordinates[3])
        var bounds = new AMap.Bounds(southWest, northEast)
        this.rectangle = new AMap.Rectangle({
          bounds: bounds,
          // strokeColor:'red',
          strokeWeight: 6,
          strokeOpacity:0.5,
          strokeDasharray: [30,10],
          strokeStyle: 'dashed',
          fillColor:'blue',
          fillOpacity:0.5,
          cursor:'pointer',
          zIndex:50,
        })


        this.rectangle.setMap(this.map)
        // 缩放地图到合适的视野级别
        this.map.setFitView(this.rectangle)


      },

      // 在你的代码中添加一个函数来移除矩形
      removeRectangle() {
        // 确保你能够访问到已经创建的矩形对象
        if (this.rectangle) {
          // 调用AMap提供的方法将矩形从地图上移除
          this.rectangle.setMap(null);
          // 将矩形对象设为null以便释放内存
          this.rectangle = null;
        }
      },


      onSubmit(){
        var coor=[116.356449,39.859008,116.417901,39.893797]
        this.rectangleEditor(coor);
      },


    }
  };
</script>

<style scoped lang="scss">
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 900px;
    position: relative;
  }
  .input-card-container {
    /*position: absolute;*/
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
  }
</style>