【vue使用高德地图api，鼠标绘图工具与点聚合插件的浅结合】鼠标绘制矩形，框选地图并放大显示矩形内的点聚合（拓展：点击标记点，可以拿到你的原始数据，去做对应处理）

标题

【vue使用高德地图api，鼠标绘图工具与点聚合插件的浅结合】
用鼠标绘制矩形，框选地图并放大显示矩形内的点聚合（拓展：点击标记点，可以拿到你的原始数据，去做对应处理）

背景

小编目前也是在学习高德api，偶然想到，如果地图上有很多的点聚合在一起，那能不能通过鼠标绘图，画一个矩形框选放大地图上的点聚合，有了这个想法就开干！百度了很久没有满意的答案，可能是我百度的姿势不对吧。于是决定自己动手做一个。

其他

我使用的数绘图工具，只是一个学习，如果不想要这么复杂的绘图，也可以试试官方的拉框缩放，效果也是一样的，官方示例

一睹为快的效果图

画的矩形

这是原始数据

一、引入高德地图

1、在高德地图——控制台——获取key

传送门：高德地图
登陆后打开控制台

创建应用

添加服务，获取密钥

2、npm 安装

这里来个官方文档的传送门：高德地图api

npm i @amap/amap-jsapi-loader --save

3、版本注意，是 2.0！！！！！！

本篇文章使用的是 2.0版本，如果在官网上找示例或者查看文档的时候很容易找错了，尤其是示例，2.0示例直通车，2.0参考手册

二、上代码，完整代码也有注释，可以直接跳过这一步

1、创建一个index.vue文件

这是html部分

<template>
    <div class="map_box">
    <!--这个是地图容器，这个id是可以随意改写的，但是一定要记住要和js的初始化map获取的id相同-->
        <div id="container"></div> 
      <!-- 下面的是一个单选控件按钮，是小编之前学习api的时候做的，包涵多个鼠标绘制工具的样式，也配对了对应的切换事件函数，不需要的你们可以自行删除 -->
        <div class="cover"> 
            <el-radio-group v-model="radio" size="mini" @change="draw">
                <el-radio v-for="(item) of radioGroup" :key="item.value" :label="item.value" border>{
  
  {item.name}}</el-radio>
            </el-radio-group>
            <div class="input-item">
                <el-button type="primary" round @click="clearDraw">清除</el-button>
                <el-button type="primary" round @click="closeDraw">关闭绘图</el-button>
            </div>
        </div>
    </div>
</template>

这是我用到的数据

 points: [ // 这个数据是小编随便捏的，具体看后端怎么给你值
                    {
   
   id: 123,lnglat: [118.118547,24.475637]},
                    // 这里的id，是用于做点击标记点做下一步处理的，如果不需要可以删除
                    {
   
   id: 456,lnglat: [118.081211,24.493369]}, 
                    {
   
   lnglat: [118.08885,24.494072]},
                    {
   
   lnglat: [118.09503,24.48962]},
                    {
   
   lnglat: [118.102926,24.48837]},
                    {
   
   lnglat: [118.08679,24.485402]},
                    {
   
   lnglat: [118.081941,24.485909]},
                    {
   
   lnglat: [118.090137,24.476614]},
                    {
   
   lnglat: [118.094171,24.475598]},
                    {
   
   lnglat: [118.089794,24.472708]},
                    {
   
   lnglat: [118.094987,24.480051]},
                    {
   
   lnglat: [118.083614,24.47802]},
                    {
   
   lnglat: [118.09606,24.48298]},
                    {
   
   lnglat: [118.10181,24.478215]},
                    {
   
   lnglat: [118.083829,24.477864]},
                    {
   
   lnglat: [118.137158,24.451969]},
                    {
   
   lnglat: [118.144797,24.452047]},
                    {
   
   lnglat: [118.14351,24.445562]},
                    {
   
   lnglat: [118.114928,24.446812]},
                    {
   
   lnglat: [118.106879,24.453121]},
                    {
   
   lnglat: [118.103618,24.455934]},
                    {
   
   lnglat: [118.114261,24.457731]},
                    {
   
   lnglat: [118.12184,24.457445] },
                    {