高德—根据四点坐标画出空间范围(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>

Vue中使用高德地图(AMap)根据坐标绘制路线,你可以按照以下步骤操作: 1. 首先,在项目中安装高德地图组件:如果你使用的是Vue CLI项目,可以在`main.js`中引入并配置高德地图API。 ```javascript import AMap from 'vue-amap'; Vue.use(AMap); AMap.initAMapApiLoader({ key: 'your_amap_key', // 将此处替换为你的高德地图API Key version: '1.4.16', // 或者最新版本 }); ``` 2. 创建地图实例并绑定到Vue组件上: ```html <template> <div id="map"> <amap-map :zoom="zoom" :center="center"> <amap-polyline :points="routePoints" :polyline-options="{color: '#FF0000'}"></amap-polyline> <!-- 根据需要显示路线 --> </amap-map> </div> </template> <script> export default { data() { return { zoom: 15, center: [116.39, 39.9], // 北京坐标 routePoints: [], // 存放路径点的数组,每个点是一个包含经度和纬度的对象 }; }, created() { this.getRoute(); // 初始化获取路线数据 }, methods: { getRoute() { // 获取路线并填充routePoints // 使用高德地图的路线规划服务 API,这里仅作示例,实际应用需要替换为你的真实请求逻辑 const service = new AMap.Routing(); service.search('起点地址', '终点地址', { mode: 'Driving', // 路线模式,默认为驾车 onSearchComplete: (result) => { if (result && result.routes && result.routes[0]) { result.routes[0].paths.forEach(path => { this.routePoints.push({ lng: path[0][1], lat: path[0][0] }); }); } }, }); }, }, }; </script> ``` 3. 当你需要更新路线时,比如用户输入新的起点和终点,可以在相应方法中调用`getRoute`方法来刷新路线。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丿BAIKAL巛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值