高德地图画区域

image.png

              const polygonArr = this.postarr;
                import('~/utils/drawPluginFront.js').then(({ default: DrawPlugin }) => {
                const drawPlugin = new DrawPlugin(map,AMap);
               drawPlugin.drawAll([polygonArr]);//[数据]
               map.setCenter(polygonArr.center);//[中心点]
             });

drawPluginFront 文件代码

  // import AMap from 'AMap';
import * as turf from '@turf/turf';
let AMap = '';
const DrawPlugin = function(map, AMap1) {
  this.map = map;
  this.overlays = [];
  AMap = AMap1;
  return this;
};

DrawPlugin.prototype = {
  drawAll(dataArray) {
    for (let i = 0; i < dataArray.length; i++) {
      const data = dataArray[i];
      this.loadGeo(data);
    }
  },
  loadGeo(obj) {
    let index;
    const path = [];
    const geoData = {};
    geoData.chooseType = obj.chooseType;
    const type = obj.chooseType;
    let geo = {};
    if (type === 'marker') {
      const marker = new AMap.Marker({
        position: new AMap.LngLat(obj.p[0], obj.p[1]),
      });
      this.overlays.push(marker);
      this.map.add(marker);
      geo = marker;
    } else if (type === 'polyline' || type === 'arc') {
      for (const index in obj.geo) {
        path.push(new AMap.LngLat(obj.geo[index][0], obj.geo[index][1]));
      }
      const polyline = new AMap.Polyline({
        path,
        strokeColor: '#0051ff',
      });
      this.overlays.push(polyline);
      this.map.add(polyline);
      geo = polyline;
    } else if (type === 'polygon' || type === 'district' || type === 'rectangle') {
      for (index in obj.geo) {
        path.push(new AMap.LngLat(obj.geo[index][0], obj.geo[index][1]));
      }
      const polygon = new AMap.Polygon({
        path,
        fillColor: '#0051ff',
        strokeColor: '#80d8ff',
        fillOpacity: 0.4,
      });
      this.overlays.push(polygon);
      this.map.add(polygon);
      geo = polygon;
    } else if (type === 'circle') {
      const circle = new AMap.Circle({
        center: new AMap.LngLat(obj.p[0], obj.p[1]), // 圆心位置
        radius: obj.r, // 圆半径
        fillColor: '#0051ff',
        strokeColor: '#80d8ff',
        fillOpacity: 0.4,
      });
      this.overlays.push(circle);
      this.map.add(circle);
      geo = circle;
    }
    // 绘制扩展区域
    const extArray = obj.ext;
    if (extArray.length > 0) {
      for (let i = 0; i < extArray.length; i++) {
        const ext = extArray[i];
       this.buffer(geo, 'ext', ext.name, ext.dist, ext.color);
      }
    }
  },
      GeoJsonArrayTopath(points) {
    const path = [];
    let index;
    for (index in points) {
      path.push(new AMap.LngLat(points[index][0], points[index][1]));
    }
    return path;
  },

  pathToGeoJsonArray(path) {
    const array = [];
    let index;
    for (index in path) {
      array.push([path[index].lng, path[index].lat]);
    }
    array.push([path[0].lng, path[0].lat]);
    return array;
  },
  pathToGeoJsonArrayLine(path) {
const array = [];
let index;
for (index in path) {
  array.push([path[index].lng, path[index].lat]);
}
return array;
  },
  // 移除全部
  clearAll() {
    this.map.remove(this.overlays);
    this.overlays = [];
  },
  AMapToGeoJson(geo) {
    const lastOne = geo;
    let GeoJson = '';
if (lastOne) {
  // const obj = {}
  if (lastOne.CLASS_NAME === 'AMap.Marker') {
    // console.log(e.obj.C.position);
    GeoJson = turf.point([lastOne.getPosition().getLng(), lastOne.getPosition().getLat()]);
  } else if (lastOne.CLASS_NAME === 'AMap.Circle') {
    const pathNew = lastOne.getPath();
    GeoJson = turf.polygon([this.pathToGeoJsonArray(pathNew)], { name: 'Circle' });
  } else if (lastOne.CLASS_NAME === 'AMap.Polygon') {
    const pathNew = lastOne.getPath();
    GeoJson = turf.polygon([this.pathToGeoJsonArray(pathNew)], { name: 'Polygon' });
  } else if (lastOne.CLASS_NAME === 'AMap.Polyline') {
    const pathNew = lastOne.getPath();
    GeoJson = turf.lineString(this.pathToGeoJsonArrayLine(pathNew), { name: 'Polyline' });
  }
}
return GeoJson;
  },
  buffer(geo, id, name, bufferDistance, color) {
    const geoJson = this.AMapToGeoJson(geo);
    let pX;
const buffered = turf.buffer(geoJson, bufferDistance, { units: 'kilometers' });
const area = new AMap.GeoJSON({
  geoJSON: buffered,
  data: id,
  getPolygon(geojson, lnglats) {
    // 还可以自定义getMarker和getPolyline
    pX = lnglats[0][0];
    return new AMap.Polygon({
      path: lnglats,
      fillOpacity: 0,
      strokeColor: color,
      strokeStyle: 'dashed',
      strokeWeight: 2,
      fillColor: color,
      bubble: true,
    });
  },
});
const textMarker = new AMap.Text({
  text: `${name}<div style="font-size: .8em; font-weight: 800;">${bufferDistance}KM</div>`,
  textAlign: 'center', // 'left' 'right', 'center',
  verticalAlign: 'middle', // middle 、bottom
  draggable: false,
  cursor: 'pointer',
  style: {
    color,
    border: '0px',
    background: 'none',
    display: 'block',
    width: 'auto',
    'word-break': 'keep-all',
    'white-space': 'nowrap',
    overflow: 'hidden',
    'text-overflow': 'ellipsis',
    padding: '2px 3px',
    'font-weight': '800',
    'font-size': '18px',
    'text-shadow': '0 1px #fff, 1px 0 #fff, -1px 0 #fff, 0 -1px #fff',
    'text-align': 'center',
    'line-height': 1.2,
  },
  data: id,
  // offset: new AMap.Pixel(50, -16),
  position: pX,
});
this.overlays.push(area);
this.map.add(area);
this.overlays.push(textMarker);
this.map.add(textMarker);
// 扩展区域间隔点
// const pointsX = turf.getCoords(buffered)
// const points = this.getLine(this.GeoJsonArrayTopath(pointsX[0]), this.pointDistance)
// 绘制扩展区域间隔点
// this.drawPoints(points);
// console.log(name, points);
// const obj = {}
// obj.pointPath = buffered
// obj.name = name
// obj.type = 'ext'
// obj.id = id
// return obj
  },
};

export default DrawPlugin;