Baidu Map offline map realizes drawing polygons and echoing polygon areas

In view of the particularity of some projects, the project uses an intranet and the online map cannot be displayed. The offline map will be changed.

Offline map related files (under the public directory)

 index.html introduction

 The effect is as follows:

 offlineDraw.vue component code snippet

<template>
  <div class="map-wrap">
    <div class="flex">
      <div class="button-wrap">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-edit"
          @click="handleDraw('polygon')"
          >编辑</el-button
        >
        <el-button size="small" icon="el-icon-check" @click="handelFinishDraw"
          >完成</el-button
        >
        <el-button
          size="small"
          icon="el-icon-refresh-left"
          @click="handleClearDraw"
          >重置</el-button
        >
      </div>
      <div class="picker-color">
        <div class="text">选择颜色</div>
        <span
          @click="handleChangeColor(item)"
          v-for="item in colors"
          :key="item.code"
          :class="[
            'color' + item.code,
            drawColor == item.value ? 'active' : '',
          ]"
        >
          <i v-if="drawColor == item.value" class="el-icon-check"></i>
          <i v-else>&nbsp;</i>
        </span>
      </div>
    </div>
    <div :id="mapId" class="allmap" />
  </div>
</template>

<script>

export default {
  props: ["defaultArea","defaultColor"],
  components: {},
  data() {
    return {
      map: null,
      mapId: null,
      actNav: null,
      drawColor: "#2A8DFF",
      drawingManagers: null,
      colors: [
        { code: 1, value: "#FF6B36" },
        { code: 2, value: "#FFAD29" },
        { code: 3, value: "#FFDA21" },
        { code: 4, value: "#29E98F" },
        { code: 5, value: "#1EEDE6" },
        { code: 6, value: "#2A8DFF" },
        { code: 7, value: "#CC16EF" },
        { code: 8, value: "#F53ABD" },
      ],
    };
  },
  created() {},
  mounted() {
       this.mapId = "map" + new Date().getTime();
        const point = new BMap.Point(114.97731018066408, 25.8246784210205);
    this.$nextTick(()=>{
       this.initMap(point);
    })
   
  },
  watch:{
    "defaultArea":{
      handler(val){
      if(val){
         this.drawColor=this.defaultColor||"#2A8DFF";
          setTimeout(()=>{
           this.drawDefault(val);
          },1000)
          
        }
      },
      immediate:true,
      deep:true
    }
  },
  destroyed() {
    /* this.map.destroy(); */
  },
  methods: {
    drawDefault(points){
     if(points){
        let newPonits = [];
        let arr=points.split(";");
        arr.forEach(item=>{
          let itemArr=item.split(",");
          newPonits.push(new BMap.Point(itemArr[0],itemArr[1]))
        })
       
      const polygon= new BMap.Polygon(newPonits, {strokeColor:this.drawColor, strokeWeight:4, strokeOpacity:1,fillColor:this.drawColor,fillOpacity: 0.2});
       this.map.addOverlay(polygon);
       this.map.setCenter(newPonits[0]); 
      }
    },
    initMap(point) {
      const _this = this;
        _this.map = new BMap.Map(this.mapId, { enableMapClick: false }); // 创建Map实例,GL版命名空间为BMap(鼠标右键控制倾斜角度)
        _this.map.centerAndZoom(new BMap.Point(114.97731018066408, 25.8246784210205), 15); // 初始化地图,设置中心点坐标和地图级别
        _this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        _this.cerateMarker(point);  
    },
    cerateMarker(point) {
      const marker = new BMap.Marker(point);
      // 将标记点添加到地图上
      this.map.addOverlay(marker);
    },
    handleChangeColor(item){
      this.drawColor = item.value;
      /* this.drawingManagers.setStrokeColor(item.value); */
      
    },
    //编辑
    handleDraw() {
      const _this=this;
        const styleOptions = {
          strokeColor: this.drawColor || "#2A8DFF", // 边线颜色
          fillColor: this.drawColor || "#2A8DFF", // 填充颜色。当参数为空时，圆形没有填充颜色
          strokeWeight: 4, // 边线宽度，以像素为单位
          strokeOpacity: 1, // 边线透明度，取值范围0-1
          fillOpacity: 0.2, // 填充透明度，取值范围0-1
        };
         const labelOptions = {
            borderRadius: '2px',
            background: '#FFFBCC',
            border: '1px solid #E1E1E1',
            color: '#703A04',
            fontSize: '12px',
            letterSpacing: '0',
            padding: '5px'
        };
      this.drawingManagers = new BMapGLLib.DrawingManager(this.map, {
          isOpen: false, // 是否开启绘制模式
          enableCalculate: true, // 绘制是否进行测距测面
          enableSorption: true, // 是否开启边界吸附功能
          sorptiondistance: 20, // 边界吸附距离
          polygonOptions: styleOptions, // 多边形的样式
          labelOptions:labelOptions,
        });
      this.drawingManagers.setDrawingMode('polygon');
      this.drawingManagers.open();
      this.drawingManagers.addEventListener("overlaycomplete", function (e) {
        _this.points=e.overlay.points;
        _this.$emit("getMapPointsData",e.overlay.points,_this.drawColor)
       
      });
    },

    //重置
    handleClearDraw() {
      /*  */
      this.map.clearOverlays();
      this.$emit("getMapPointsData",[],"")
   /*  document.getElementById('cancelOperate').click(); */
        
    },
    //完成
    handelFinishDraw() {
      if( document.getElementById('confirmOperate')){
         document.getElementById('confirmOperate').click();
      }
      
    },
  },
};
</script>
<style lang="scss" scoped>
.map-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  .flex {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    line-height: 50px;
  }
}
.allmap {
  width: 100%;
  height: calc(100% - 50px);
  position: absolute;
}
ul {
  list-style: none;
}
.picker-color {
  text-align: right;
  padding-right: 30px;

  .text {
    display: inline-block;
    padding: 0 10px;
    float: left;
  }
  span {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 20px;
    border-radius: 4px;
    border-width: 2px;
    border-style: solid;
    margin-left: 8px;
    overflow: hidden;
    text-align: center;
    margin-top: 10px;
    float: left;
    i {
      font-weight: 600;
    }
  }

  .color1 {
    border-color: #ff6b36;
    background: rgba(255, 107, 54, 0.3);
    color: #ff6b36;
  }
  .color2 {
    border-color: #ffad29;
    background: rgba(255, 173, 41, 0.3);
    color: #ffad29;
  }
  .color3 {
    border-color: #ffda21;
    background: rgba(255, 218, 33, 0.3);
    color: #ffda21;
  }
  .color4 {
    border-color: #29e98f;
    background: rgba(41, 233, 143, 0.3);
    color: #29e98f;
  }
  .color5 {
    border-color: #1eede6;
    background: rgba(30, 237, 230, 0.3);
    color: #1eede6;
  }
  .color6 {
    border-color: #2a8dff;
    background: rgba(42, 141, 255, 0.3);
    color: #2a8dff;
  }
  .color7 {
    border-color: #cc16ef;
    background: rgba(204, 22, 239, 0.3);
    color: #cc16ef;
  }
  .color8 {
    border-color: #f53abd;
    background: rgba(245, 58, 189, 0.3);
    color: #f53abd;
  }
}
</style>

Page reference

<template>
  <div class="maps">
 <offlineDraw  :defaultColor="defaultColor" :defaultArea="this.defaultPonits" @getMapPointsData="getMapPointsData">
</offlineDraw>
  </div>
</template>

<script>
import offlineDraw from "@/components/Map/offlineDraw";
export default {
  props: [],
  components: {offlineDraw},
  data() {
   return {
    defaultPonits: "114.92823026067752,25.847650021588933;114.92600512212549,25.848323919288035;114.92407702000297,25.846762733388502;114.92300787077777,25.84652291159597;114.92185336930342,25.846201793519086;114.92105375349648,25.846039201755275;114.91772286058358,25.845837912045738;114.91889083872856,25.842911217098504;114.91923325032637,25.84246890883574;114.92025198248993,25.84137873822148;114.92057101937894,25.840621874689475;114.91990367247762,25.83543267890485;114.9200025013976,25.83448955771958;114.92517754302577,25.835847324633406;114.92554590536388,25.833513907204548;114.92189821977185,25.832473204456164;114.92135915293557,25.832367507571377;114.92629161448744,25.82696057947598;114.91354268380992,25.817138039228638;114.91515089987152,25.816658275085175;114.91687591374757,25.814682276855933;114.91807982968191,25.81317789396165;114.91995757916156,25.80885167019649;114.92392870485547,25.803606318603514;114.92615684777867,25.801329194472004;114.92827717733464,25.799930367954687;114.93126001382863,25.79976771263702;114.93589598862046,25.80145931702964;114.93948976752887,25.80402920826758;114.93953141347649,25.80412817087722;114.93953141347649,25.80412817087722;114.93948976752887,25.80402920826758;114.93948976752887,25.80402920826758;114.93953141347649,25.80412817087722;114.93953141347649,25.80412817087722;114.93953141347649,25.80412817087722;114.93953141347649,25.80412817087722;114.93906799602371,25.804714864544835;114.93827736466388,25.80569075236299;114.93648047520966,25.807707561717777;114.94762118982572,25.816164775470398;114.93985862738357,25.82410099603871;114.94194301915044,25.826117491923867;114.94172739241593,25.839321438580683;114.93834924024202,25.839256398119232;114.92785540582945,25.83652466645269;114.92823026067752,25.847650021588933",
    defaultColor:"#FFDA21",
   }
  },
  created() {},
  mounted() {},
  methods: {
    getMapPointsData(){},
  },
}
</script>
<style lang="scss" scoped>
.maps{
    width: 800px;
    height: 500px;
}
</style>

reference:

Map JS API example | Baidu Map Open Platform