vue3+ts实现百度地图鼠标绘制多边形

周不凢2025-06-07 8:58

百度地图api鼠标绘制地址：JavaScript API - 鼠标绘制 | 百度地图API SDK

index.vue文件引入组件

复制代码 
<map @submitMap="submitMap" />

import map from './components/map.vue';

//获取经纬度
const submitMap = (adress: any) => {
  const convertedData = convertCoordinates(adress);
  console.log(convertedData);
};
//使用 map 方法遍历数组，将每个对象转换为 [jd, wd] 形式的数组
function convertCoordinates(original: { jd: number; wd: number }[]): number[][] {
  return original.map((item) => [item.jd, item.wd]);
}

组件map.vue文件

复制代码 
<template>
  <div :class="isFull ? 'fullContain' : 'contain'">
    <div id="allmap" :class="isFull ? 'fullMap' : 'allmap'"></div>
    <div
      class="dialog-footer"
      v-if="showClearButton"
      :style="isFull ? 'height: 100%;width: 20%' : 'height: 500px'"
    >
      <div class="content">
        <div class="title">编辑网格</div>
        <div class="button-content">
          <el-button type="primary" @click="hzMap" v-if="showHzButton">绘制网格区域</el-button>
          <el-button type="primary" @click="editMap" v-if="!showHzButton">编辑网格区域</el-button>
          <el-button @click="clearnMap">清除网格区域</el-button>
        </div>
        <div class="title">使用说明</div>
        <div class="tishi">
          <p>1.选择颜色，在地图上拖动鼠标绘制网格范围，绘制完成后双击鼠标左键完成绘制。</p>
          <p>2.点击编辑按钮可对当前所绘网格区域进行修改。</p>
          <p>3.点击清空按钮可清空当前所绘制的网格区域。</p>
          <div class="button-content">
            <el-button type="primary" @click="mapSubimt">绘制完成</el-button>
          </div>
        </div>
      </div>
      <div :class="isFull ? 'sxFull' : 'allFull'" @click="fullClick">
        <el-icon color="#409efc">
          <FullScreen />
        </el-icon>
      </div>
    </div>
  </div>
</template>
<script lang="ts" name="Post" setup>
// 定义 dts 数组中对象的类型
interface DtsItem {
  jd: number; // 经度
  wd: number; // 纬度
}

// 修改 props 定义
const props = withDefaults(
  defineProps<{
    dts?: Array<DtsItem>; // 使用泛型 Array<DtsItem>
  }>(),
  {
    dts: () => [] // 默认值设为空数组
  }
);
const emit = defineEmits(['update:value']);
var map:any = null;
var polyline:any = null;
const mapPointList = ref([]);
var myGeo:any = null;
const showClearButton = ref(true);
const showHzButton = ref(true);
const isFull = ref(false);
watch(
  () => props.dts,
  () => {
    initEditMap();
  }
);
onMounted(() => {
  if (!map) {
    map = new window.BMapGL.Map('allmap');
    map.enableScrollWheelZoom(true);
    myGeo = new window.BMapGL.Geocoder();
    initMapWz();
  }
});

const initMapWz = () => {
  let region = '陕西省';
  // if (JSON.parse(window.localStorage.getItem('authorities')).level == 1) {
  //   region = JSON.parse(window.localStorage.getItem('authorities')).region01
  // } else if (JSON.parse(window.localStorage.getItem('authorities')).level == 2) {
  //   region =
  // 	JSON.parse(window.localStorage.getItem('authorities')).region01 +
  // 	JSON.parse(window.localStorage.getItem('authorities')).region02
  // } else if (JSON.parse(window.localStorage.getItem('authorities')).level == 3) {
  //   region =
  // 	JSON.parse(window.localStorage.getItem('authorities')).region01 +
  // 	JSON.parse(window.localStorage.getItem('authorities')).region02 +
  // 	JSON.parse(window.localStorage.getItem('authorities')).region03
  // } else if (JSON.parse(window.localStorage.getItem('authorities')).level == 4) {
  //   region =
  // 	JSON.parse(window.localStorage.getItem('authorities')).region01 +
  // 	JSON.parse(window.localStorage.getItem('authorities')).region02 +
  // 	JSON.parse(window.localStorage.getItem('authorities')).region03 +
  // 	JSON.parse(window.localStorage.getItem('authorities')).region04
  // } else if (JSON.parse(window.localStorage.getItem('authorities')).level == 5) {
  //   region =
  // 	JSON.parse(window.localStorage.getItem('authorities')).region01 +
  // 	JSON.parse(window.localStorage.getItem('authorities')).region02 +
  // 	JSON.parse(window.localStorage.getItem('authorities')).region03 +
  // 	JSON.parse(window.localStorage.getItem('authorities')).region04 +
  // 	JSON.parse(window.localStorage.getItem('authorities')).region05
  // }
  myGeo.getPoint(region, function (point:any) {
    if (point) {
      map.centerAndZoom(point, 16);
    } else {
      alert('您选择的地址没有解析到结果！');
    }
  });
};
const initEditMap = () => {
  if (map) {
    map.clearOverlays();
    if (props.dts.length > 0) {
      mapPointList.value = [];
      for (let item of props.dts) {
        const point = new window.BMapGL.Point(item.jd, item.wd);
        mapPointList.value.push(point);
      }
      showHzButton.value = false;
      polyline = new window.BMapGL.Polygon(mapPointList.value, {
        strokeColor: '#39c19e',
        strokeWeight: 2,
        strokeOpacity: 1,
        fillColor: '#39c19e'
      });
      map.addOverlay(polyline);
    }
  }
};
const uploadDTDW = (regionName:any) => {
  if (myGeo) {
    myGeo.getPoint(regionName, function (point:any) {
      if (point) {
        map.centerAndZoom(point, 16);
      } else {
        alert('您选择的地址没有解析到结果！');
      }
    });
  }
};
const editMap = () => {
  if (polyline.enableEditing) {
    if (mapPointList.value.length >= 2) {
      polyline.enableEditing();
    }
  }
};
const hzMap = () => {
  if (polyline) {
    polyline.disableEditing();
  }
  showHzButton.value = false;
  mzwg();
};
const mzwg = () => {
  map.addEventListener('click', function (e:any) {
    var point = new window.BMapGL.Point(e.latlng.lng, e.latlng.lat);
    mapPointList.value.push(point);
    if (mapPointList.value.length >= 2) {
      if (polyline != null) {
        polyline.setPath(mapPointList.value);
      } else {
        polyline = new window.BMapGL.Polygon(mapPointList.value, {
          strokeColor: '#39c19e',
          strokeWeight: 2,
          strokeOpacity: 1,
          fillColor: '#39c19e'
        });
      }
      map.addOverlay(polyline);
    }
  });
  map.addEventListener('dblclick', function (e:any) {
    map.removeEventListener('click');
    map.removeEventListener('mousemove');
    map.removeEventListener('dblclick');
  });
  map.addEventListener('mousemove', function (e:any) {
    if (mapPointList.value.length > 0) {
      if (polyline == null) {
        polyline = new window.BMapGL.Polygon(
          [...mapPointList.value, new window.BMapGL.Point(e.latlng.lng, e.latlng.lat)],
          {
            strokeColor: '#39c19e',
            strokeWeight: 2,
            strokeOpacity: 1,
            fillColor: '#39c19e'
          }
        );
        map.addOverlay(polyline);
      } else {
        polyline.setPath([
          ...mapPointList.value,
          new window.BMapGL.Point(e.latlng.lng, e.latlng.lat)
        ]);
        map.addOverlay(polyline);
      }
    }
  });
};
const removeOverlay = () => {
  if (polyline) {
    polyline.disableEditing();
    polyline = null;
  }
  showHzButton.value = true;
  map.clearOverlays();
  mapPointList.value = [];
};
const mapSubimt = () => {
  let point: { jd: number; wd: number }[] = []; // 初始化为空数组
  if (polyline) {
    point = getPoint();
  }
  if (isFull.value) {
    isFull.value = false;
  }
  emit('submitMap', point);
};

const getPoint = (): { jd: number; wd: number }[] => {
  const point: { jd: number; wd: number }[] = [];
  const path = polyline.getPath();
  for (let index = 0; index < path.length; index++) {
    const currentPoint = path[index];
    const map = {
      jd: currentPoint.lng,
      wd: currentPoint.lat
    };
    // 使用 some 避免重复项
    if (!point.some(p => p.jd === map.jd && p.wd === map.wd)) {
      point.push(map);
    }
  }
  return point;
};
const clearnMap = () => {
  polyline = null;
  showHzButton.value = true;
  map.clearOverlays();
  mapPointList.value = [];
  // showHzButton.value = true
  // map.clearOverlays()
  // mapPointList = []
};
const init = (e:any) => {
  showClearButton.value = e;
};

//绘制当前区域下所有的网格区域
const hadDrawWGXX = (e:any) => {
  e.forEach((contentItem:any) => {
    var points: any[] = [];
    
    var opts;
    contentItem.dts.forEach((item: { jd: any; wd: any; }, index: number) => {
      points.push(new BMapGL.Point(item.jd, item.wd));
      if (index == 0) {
        opts = {
          position: new BMapGL.Point(item.jd, item.wd), // 指定文本标注所在的地理位置
          offset: new BMapGL.Size(10, -40) // 设置文本偏移量
        };
        const label = new BMapGL.Label(contentItem.wgName, opts);
        label.setStyle({
          color: 'blue',
          borderRadius: '5px',
          borderColor: '#ccc',
          padding: '10px',
          fontSize: '16px',
          height: '40px',
          lineHeight: '20px'
        });
        map.addOverlay(label);
        label.disableMassClear();
      }
    });
    const polylineddd = new window.BMapGL.Polygon(points, {
      strokeColor: '#EBAF00',
      strokeWeight: 1,
      strokeOpacity: 1,
      fillColor: '#EBAF00',
      fillOpacity: 0.2
    });
    map.addOverlay(polylineddd);
    polylineddd.disableMassClear();
  });
};
const fullClick = () => {
  isFull.value = !isFull.value;
};

const disgrogMap = () => {
  map.getOverlays().map((item: any) => {
    map.removeOverlay(item);
  });
};
</script>

<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 455px;
}

.fullContain {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 99999;
}

.allmap {
  width: 75%;
  height: 455px;
  float: left;
}

.fullMap {
  width: 80%;
  height: 100%;
  float: left;
}

.dialog-footer {
  float: right;
  width: 25%;
  height: 455px !important;
  border: 1px solid #e5e5e5;
  border-radius: 2px;

  .content {
    clear: both;
    margin-left: 20px;
    margin-right: 20px;

    .title {
      font-size: 20px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #333;
      height: 20px;
      line-height: 20px;
      border-left: 3px solid #188dff;
      padding-left: 10px;
      margin-bottom: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .tishi {
      font-size: 14px;
      height: 14px;
      line-height: 18px;

      .button-content {
        margin-top: 20px;
      }
    }

    .button-content {
      width: 100%;

      :deep(.el-button) {
        margin: 0px !important;
        width: 100%;
        margin-bottom: 10px !important;
      }
    }

    .hzwc {
      margin-top: 20px;
    }
  }
}

.allFull {
  position: absolute;
  left: 70%;
  top: 15px;
  color: #39c19e;
  z-index: 100;
  font-size: 25px;
}

.sxFull {
  position: absolute;
  left: 75%;
  top: 30px;
  color: #39c19e;
  z-index: 100;
  font-size: 25px;
}
</style>
相关推荐
ai产品老杨26 分钟前
减少交通拥堵、提高效率、改善交通安全的智慧交通开源了。
前端·vue.js·算法·ecmascript·音视频
lexiangqicheng31 分钟前
JS-- for...in和for...of
开发语言·前端·javascript
粥里有勺糖1 小时前
视野修炼-技术周刊第122期 | 发光图片制作
前端·javascript·github
Carlos_sam1 小时前
OpenLayers：封装Tooltip
前端·javascript
张老爷子2 小时前
记录uniapp开发安卓使用webRTC实现语音推送
vue.js
工呈士2 小时前
MobX与响应式编程实践
前端·react.js·面试
嘉小华2 小时前
Android Lifecycle 使用
前端
Sherry0072 小时前
实时数据传输协议：WebSocket vs MQTT
前端·websocket
然我2 小时前
JavaScript的OOP独特之道：从原型继承到class语法
前端·javascript·html
腹黑天蝎座2 小时前
如何更好的实现业务中图片批量上传需求
前端
热门推荐
01基于STM32的智能电池管理系统02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【无人机】无人机通信模块，无人机图数传模块的介绍，数传，图传，图传数传一体电台，05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07VMware虚拟机安装Win7专业版保姆级教程（附镜像包）08DeepSeek各版本说明与优缺点分析09组基轨迹建模 GBTM的介绍与实现（Stata 或 R）10海康Visionmaster-常见问题排查方法-启动阶段