digital-agriculture-admin/src/views/agriculture/land/components/DrawArea/index.vue

<template>
  <div class="map">
    <el-autocomplete
      style="width: 100%"
      class="mb8"
      v-model="keyword"
      :fetch-suggestions="fetchLocationData"
      placeholder="请输入查询关键字"
      @select="handleSelect"
    >
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-autocomplete>
    <div id="mapBox" class="map-box" style="width: 100%"></div>
    <div class="map-tool">
      <el-button type="primary" plain size="mini" :disabled="!!this.polygon" @click="handleCreateBthClick">新建</el-button>
      <el-button type="success" plain size="mini" @click="handleCreateBthClick">编辑</el-button>
      <el-button type="warning" plain size="mini" @click="handleClearBthClick">清除</el-button>
      <el-button type="danger" plain size="mini" @click="handleCloseBthClick">结束</el-button>
    </div>
  </div>
</template>

<script>
// import AMapLoader from '@amap/amap-jsapi-loader';
// import { listBaseinfo } from '@/api/agriculture/baseinfo';
export default {
  name: 'DrawArea',
  props: {
    polygonPath: {
      type: String,
      default: '',
    },
    polygonStyle: {
      type: Object,
      default: () => {
        return {
          fillColor: '#26EB23',
          fillOpacity: 0.9,
          strokeColor: '#00D3FC',
          strokeOpacity: 0.9,
          strokeWeight: 2,
        };
      },
    },
  },
  data() {
    return {
      keyword: '',
      searchOverlays: [], //搜索图层
      polygon: null,
    };
  },
  watch: {
    polygonStyle: {
      handler: function (n, o) {
        if (this.polygon) {
          this.resetPolygonStyle();
          this.removePolygon();
          this.addPolygon();
        }
      },
      deep: true,
    },
  },
  async mounted() {
    await this.initMap();
    this.initPolygonEditor();
  },

  methods: {
    /** 初始化map */
    async initMap() {
      const { AMap } = this;
      this.map = new AMap.Map('mapBox', {
        //设置地图容器id
        //pitch: 40,
        viewMode: '3D', //是否为3D地图模式
        mapStyle: 'amap://styles/802500eb9c17892dd91047988cc1ece1',
        zoom: 16, //初始化地图级别
        //center: this.$zb, //初始化地图中心点位置
        layers: [
          new AMap.TileLayer.Satellite(),
          //new AMap.TileLayer.RoadNet()
        ],
        //showLabel: false,
      });
      /** 添加空间 控件 */
      this.map.addControl(new AMap.Scale());
      //this.map.addControl(new AMap.ToolBar());
      this.map.addControl(new AMap.MapType());
      /** 创建PlaceSearch实例 */
      this.placeSearch = new AMap.PlaceSearch({ city: '全国' });
    },
    /** init polygonEditor
     * isData：determine whether to render with value
     */
    initPolygonEditor(isData = true) {
      /** 创建多边形吸附实例 */
      if (this.polygonPath && isData) {
        this.polygon = new AMap.Polygon({ path: this.polygonPath.split('|').map((item) => item.split(',')) });
        this.resetPolygonStyle();
        this.map.add(this.polygon);
        this.polygonEditor = new AMap.PolygonEditor(this.map, this.polygon);
      } else {
        this.polygonEditor = new AMap.PolygonEditor(this.map);
      }
      this.polygonEditor.on('add', ({ target: polygon }) => {
        this.polygon = polygon;
        this.resetPolygonStyle();
      });
      this.polygonEditor.on('end', ({ target: polygon }) => {
        this.resetPolygonStyle();
      });
      this.polygonEditor.on('adjust', ({ target: polygon }) => {
        this.$emit('change-path', this.polygon._opts.path);
      });
      this.map.setFitView();
    },
    /** 位置查询处理 */
    fetchLocationData(queryString, cb) {
      if (queryString) {
        clearTimeout(this.timer);
        // 延迟 1.2 s
        this.timer = setTimeout(() => {
          this.placeSearch.search(queryString, (status, result) => {
            console.log(result);
            if (status === 'complete') {
              cb(result.poiList.pois.map((item) => ({ ...item, value: item.address })));
            } else {
              cb([]);
            }
          });
        }, 1200);
      } else {
        cb([]);
      }
    },
    /** handle select */
    handleSelect(item) {
      const { map, searchOverlays } = this;
      const { location, address } = item;
      const { lng, lat } = location;
      map.panTo([lng, lat]);
    },
    /** handle create button click event */
    handleCreateBthClick() {
      this.polygonEditor.close();
      this.polygonEditor.open();
    },
    /** handle close button click event */
    handleCloseBthClick() {
      this.polygonEditor.close();
      this.$emit('change-path', this.polygon._opts.path);
    },
    /** handle clear button click */
    handleClearBthClick() {
      this.clearPolygonEditor();
    },
    /** 清除多边形编辑工具 */
    clearPolygonEditor() {
      //TODO：【项目】需优化
      this.polygon = null;
      this.map.destroy();
      this.initMap();
      this.initPolygonEditor(false);
    },
    /** 重设polygon样式 */
    resetPolygonStyle() {
      const {
        polygon,
        polygonStyle: { fillColor, fillOpacity, strokeColor, strokeOpacity, strokeWeight },
      } = this;
      polygon._opts.fillColor = fillColor;
      polygon._opts.fillOpacity = fillOpacity;
      polygon._opts.strokeColor = strokeColor;
      polygon._opts.strokeOpacity = strokeOpacity;
      polygon._opts.strokeWeight = strokeWeight;
    },
    /** 移除多边形 */
    removePolygon() {
      this.map.remove(this.polygon);
    },
    /** 添加多边形 */
    addPolygon() {
      this.map.add(this.polygon);
    },
  },
};
</script>
<style lang="scss" scoped>
.map {
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  position: relative;
  // overflow: hidden;
}
.map-box {
  flex: auto;
}
.map-tool {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
}
::v-deep .el-button + .el-button {
  margin: 0;
}
::v-deep .el-button + .el-button:nth-child(2) {
  margin: 5px 0;
}
::v-deep .el-button + .el-button:nth-child(3) {
  margin-bottom: 5px;
}
</style>