Vue百度地图电子围栏

• 主要功能

支持多边形、圆形、矩形、行政区域绘制 

• 在线访问地址

http://wecode2020.gitee.io/bmap-hurdle/

• 码云仓库地址

https://gitee.com/wecode2020/bmap-hurdle

• 界面预览

• 主要依赖引入

element-ui、v-region（地区选择器）、百度地图v3.0、DrawingManager（绘制工具）

1、index.html 引入百度地图v3.0、DrawingManager

2、packpage.json 引入element-ui、v-region

3、main.js 

• 主要代码 Index.vue

<template>

  <el-container>
    <!-- 头部 -->
    <el-header>
      <el-page-header @back="goBack" content="电子围栏绘制">
      </el-page-header>
    </el-header>

    <!-- 中间 -->
    <el-main>
      <!-- 地图 -->
      <div id="map-container"></div>

      <!-- 左侧操作区 -->
      <div class="s-control-l">
        <v-region @values="regionChange" class="form-control"></v-region>
        <el-button type="primary" size="small" style="margin-left:20px;" @click="drawRegion">绘制区域</el-button>
      </div>

      <!-- 右侧操作区 -->
      <div class="s-control-r">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="" style="margin-right:30px;">
            <el-input v-model.lazy="keyword" placeholder="请输入地名" prefix-icon="el-icon-search" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-radio-group v-model="radioSelect" size="mini">
              <el-radio-button label="none"><span class="s-icon s-icon-select"></span></el-radio-button>
              <el-radio-button label="circle"><span class="s-icon s-icon-circle"></span>
              </el-radio-button>
              <el-radio-button label="polygon"><span class="s-icon s-icon-polygon"></span>
              </el-radio-button>
              <el-radio-button label="rectangle"><span class="s-icon s-icon-rectangle"></span>
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <!-- 地区检索显示区 -->
          <div id="search-result"></div>
        </el-form>
      </div>
    </el-main>

    <!-- 尾部 -->
    <el-footer>
      <el-row type="flex" class="row-bg" justify="end" style="margin:14px 0 0 0;">
        <el-button type="" size="small" style="margin-left:20px;" @click="goBack">返回</el-button>
        <el-button type="primary" size="small" style="margin-left:20px;" @click="saveHurdle">保存</el-button>
      </el-row>
    </el-footer>
  </el-container>

</template>
<script>
export default {
  name: "index",

  data() {
    return {
      center: { lng: 116.93761, lat: 40.059866 }, // 中心点坐标
      zoom: 11, // 缩放级别
      location: "吉安市",
      keyword: "",
      radioSelect: "none",
      styleOptions: {
        strokeColor: "#5E87DB", // 边线颜色
        fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2, // 边线宽度，以像素为单位
        strokeOpacity: 1, // 边线透明度，取值范围0-1
        fillOpacity: 0.2, // 填充透明度，取值范围0-1
      },
      labelOptions: {
        borderRadius: "2px",
        background: "#FFFBCC",
        border: "1px solid #E1E1E1",
        color: "#703A04",
        fontSize: "12px",
        letterSpacing: "0",
        padding: "5px",
      },
      map: null, // 百度地图
      drawingManager: null, // 鼠标绘制工具
      localSearch: null, // 地区检索
      region: {}, // 行政区域
    };
  },

  watch: {
    // 绘制类型变更
    radioSelect(nval, oval) {
      if (nval != "none") {
        this.clearOverlays();
        this.drawingManager.close();
        this.draw(nval);
      } else {
        this.drawingManager.close();
      }
    },
    // 地区检索关键字变更
    keyword(nval, oval) {
      this.localSearch.clearResults();
      this.localSearch.search(nval);
    },
  },

  mounted() {
    // 创建Map实例
    this.map = new BMap.Map("map-container", {
      enableMapClick: false,
      minZoom: 5,
      maxZoom: 15,
    });
    // 设置中心点坐标和地图级别
    this.map.centerAndZoom(
      new BMap.Point(this.center.lng, this.center.lat),
      this.zoom
    );
    // 开启鼠标滚轮缩放
    this.map.enableScrollWheelZoom(true);

    // 创建鼠标绘制工具
    this.drawingManager = new BMapLib.DrawingManager(this.map, {
      // isOpen: true, //是否开启绘制模式
      enableCalculate: true, // 绘制是否进行测距(画线时候)、测面(画圆、多边形、矩形)
      drawingToolOptions: {
        enableTips