<template>
  <div style="position: relative;">
    <el-amap-search-box class="search-box" :search-option="mapSearchOption" :on-search-result="onSearchPoiResult"></el-amap-search-box>
    <el-amap vid="amap" ref="map" :zoom="11" :center="mapOption.position" :plugin="mapPlugin" :events="mapOption.events" class="map">
      <el-amap-marker
          vid="poi-marker"
          :position="mapOption.position"/>
      <el-amap-polygon
          vid="polygon"
          ref="polygon"
          :path="polygonOption.path"
          :visible="polygonOption.visible"
          :editable="polygonOption.editable"
          :zIndex="polygonOption.zIndex"
          :strokeColor="polygonOption.strokeColor"
          :strokeOpacity="polygonOption.strokeOpacity"
          :strokeWeight="polygonOption.strokeWeight"
          :fillColor="polygonOption.fillColor"
          :fillOpacity="polygonOption.fillOpacity"
          :strokeStyle="polygonOption.strokeStyle"
          :draggable="polygonOption.draggable"
          :events="polygonOption.events"
      >
      </el-amap-polygon>
    </el-amap>
  </div>
</template>

<script>
export default {
  name: "AMapPolyline",
  data() {
    const position = [116.3975, 39.9092];
    const path = this.calculatePathWithCenter(position);
    return {
      polygonEditor: undefined, // 矢量图编辑器
      map: undefined, // 地图
      polygon: undefined, // 多边形
      // 地图
      mapOption: {
        position,
        events: {
          init: (instance) => {
            this.map = instance;
          },
          click: (e) => {
            this.mapOption.position = [e.lnglat.lng, e.lnglat.lat];
          }
        },
        draggable: true
      },
      // 多边形选项
      polygonOption: {
        path,
        visible: true, // 是否可见
        editable: false, // 多边形当前是否可编辑
        zIndex: 10, // 多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时，通过该属性使级别较高的多边形覆盖物在上层显示默认zIndex：10
        strokeColor: '#e50000', //	线条颜色，使用16进制颜色代码赋值。默认值为#006600
        strokeOpacity: 0.6, // 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        strokeWeight: 5, // 轮廓线宽度
        fillColor: '#4071ff', // 多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
        fillOpacity: 0.6, // 多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        strokeStyle: 'solid', // 轮廓线样式，实线:solid，虚线:dashed
        draggable: true, // 设置多边形是否可拖拽移动，默认为false
        events: {
          init: (instance) => {
            this.polygon = instance;
          }
        },
      },
      // 搜索选项
      mapSearchOption: {
        city: "全国",
        citylimit: false
      },
      // 地图插件
      mapPlugin: [
        {
          pName: 'Geolocation', // 定位
          enableHighAccuracy: true,// 是否使用高精度定位，默认:true
          timeout: 30000,          // 超过10秒后停止定位，默认：无穷大
          noIpLocate: 0,           // 禁止使用Ip定位
          maximumAge: 0,           // 定位结果缓存0毫秒，默认：0
          convert: true,           // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: false,       // 显示定位按钮，默认：true
          buttonPosition: 'LB',    // 定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true,        // 定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true,        // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true,     // 定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true,    // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          extensions: 'all',
          events: {
            init: (instance) => {
              // instance.getCurrentPosition((status, result) => {
              //   console.log(result);
              //   if (result && result.position && result.status) {
              //     this.mapOption.position = [result.position.lng, result.position.lat];
              //     console.log(result.formattedAddress);
              //   } else {
              //     this.$message("定位失败，请检查位置权限");
              //   }
              // })
            },
            click(e) {
              console.log(e);
            }
          }
        },
      ],
    }
  },

  watch: {
    map() {
      this.editPolygon();
    },
    polygon() {
      this.editPolygon();
    }
  },

  mounted() {

  },

  methods: {

    calculatePathWithCenter(center) {
      return [[center[0] - 0.06, center[1] + 0.04], [center[0] + 0.06, center[1] + 0.04], [center[0] + 0.06, center[1] - 0.04], [center[0] - 0.06, center[1] - 0.04]]
    },

    // 搜索结果处理
    onSearchPoiResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach(poi => {
          let {lng, lat} = poi;
          lngSum += lng;
          latSum += lat;
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.mapOption.position = [center.lng, center.lat];
        this.polygonOption.path = this.calculatePathWithCenter(this.mapOption.position)
      }
    },

    // 开始编辑多边形
    editPolygon() {
      if (!this.map || !this.polygon) return;
      this.map.add(this.polygon)
      setTimeout(() => {
        this.map.setFitView([this.polygon]) // 缩放地图到合适的视野级别
        this.polyEditor = new AMap.PolyEditor(this.map, this.polygon);
        this.polyEditor.open()
      }, 500)
    },

    // 获取多边形顶点
    getPath() {
      this.polyEditor.close();
      return this.$refs.polygon.$$getPath();
    },

    // 设置多边形顶点
    setPath(path) {
      this.polygonOption.path = path;
      setTimeout(() => {
        this.map.setFitView([this.polygon]) // 缩放地图到合适的视野级别
      }, 200)
    }
  }
}
</script>

<style scoped lang="scss">
.search-box {
  z-index: 10;
  margin-bottom: 20px;
  left: 0;
  top: 0;
  position: absolute;
}

.map {
  height: 400px;
  width: 800px;
}
</style>
