Newer
Older
KaiFengWechat / src / utils / gis / AMapUtils.js
@jimengfei jimengfei on 23 Jul 6 KB updata
import { feature } from '@turf/turf';
import lodash from 'lodash';
export default class AMapUtils {
  static _default = {
    options: {
      rotateEnable: true,
      pitchEnable: true,
      zoom: 11.6,
      pitch: 0,
      rotation: 0,
      viewMode: '3D', //开启3D视图,默认为关闭
      zooms: [2, 20],
      mapStyle: 'amap://styles/light',
      center: [114.33999667685148, 34.80389630895566],
    },
    keys: {
      temporary: 'temporary',
    },
    events: {
      click: 'click',
    },
  };

  _map = null;

  callbacks = {
    click: [],
  };

  constructor(container, options = {}) {
    this.initMap(container, options);
  }

  initMap(container, options) {
    this._map = new AMap.Map(container, Object.assign(AMapUtils._default.options, options));
  }

  /*自动定位*/
  showCityInfo() {
    let self = this;
    var citysearch = new AMap.CitySearch();
    citysearch.getLocalCity(function (status, result) {
      if (!(status === 'complete' && result.info === 'OK')) return;
      if (result && result.city && result.bounds) {
        var cityinfo = result.city;
        var citybounds = result.bounds;
        self._map.setBounds(citybounds);
      }
    });
  }

  geojsonToMap(geojson) {
    let self = this;
    geojson = gcoord.transform(geojson, gcoord.WGS84, gcoord.AMap);
    let labelsLayer = new AMap.LabelsLayer({ collision: false, zooms: [0, 20], zIndex: 1000 });
    let geoJSON = new AMap.GeoJSON({
      geoJSON: geojson,
      getMarker: (feature, lnglats) => {
        const { properties } = feature;
        const { mapParams } = properties;
        let overLay = new AMap.LabelMarker({
          position: lnglats,
          zooms: [0, 20],
          opacity: 1,
          zIndex: 2,
          anchor: 'bottom-center',
          offset: new AMap.Pixel(0, 0),
          icon: {
            type: 'image',
            image: mapParams.icon || '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            anchor: 'bottom-center',
            size: mapParams.size || [15, 20],
          },
          text: {
            content: mapParams.name || '',
            zooms: [15, 20],
            style: {
              fontSize: 15,
            },
          },
          extData: properties,
        });
        overLay.newfiberId = mapParams.group || AMapUtils._default.keys.temporary;
        labelsLayer.add(overLay);
        // return overLay;
      },
      getPolyline: (feature, lnglats) => {
        const { properties } = feature;
        const { mapParams } = properties;
        let overLay = new AMap.Polyline({
          path: lnglats,
          isOutline: true,
          outlineColor: '#ffeeff',
          borderWeight: 3,
          strokeColor: '#3366FF',
          strokeOpacity: 1,
          strokeWeight: 6,
          // 折线样式还支持 'dashed'
          strokeStyle: 'dashed',
          // strokeStyle是dashed时有效
          strokeDasharray: [15, 5],
          lineJoin: 'round',
          lineCap: 'round',
          zIndex: 50,
          extData: properties,
        });
        overLay.newfiberId = mapParams.group || AMapUtils._default.keys.temporary;
        return overLay;
      },
      getPolygon: (feature, lnglats) => {
        const { properties } = feature;
        const { mapParams } = properties;
        let overLay = new AMap.Polygon({
          path: data,
          fillColor: '#ccebc5',
          strokeOpacity: 1,
          fillOpacity: 0.5,
          strokeColor: '#2b8cbe',
          strokeWeight: 1,
          strokeStyle: 'dashed',
          strokeDasharray: [5, 5],
          extData: properties,
        });
        overLay.newfiberId = mapParams.group || AMapUtils._default.keys.temporary;
        return overLay;
      },
    });
    let arrays = geoJSON.getOverlays().filter(Boolean);
    let arrays1 = labelsLayer.getAllOverlays().filter(Boolean);
    if (arrays1.length) this._map.add(labelsLayer);
    if (arrays.length) this._map.add(geoJSON);
    // this._map.setFitView(null, false, [150, 60, 100, 60]);
    arrays.concat(arrays1).forEach((i) =>
      i.on(
        'click',
        lodash.debounce(function (a) {
          self.callbacks.click.forEach((i) => i(a.target, [a.lnglat.lng, a.lnglat.lat]));
        }, 500)
      )
    );
  }
  addGeojsonPolygon(Geojson, layerName) {
    let geojsonPolygon = new AMap.GeoJSON({
      geoJSON: Geojson,
      // 还可以自定义getMarker和getPolyline
      getPolygon: (geojson, lnglats) => {
        // 计算面积
        let eachPolygon = new AMap.Polygon({
          path: lnglats,
          strokeColor: geojson.properties.outcolor || 'rgba(190, 161, 58, 1)',
          strokeWeight: 2,
          fillColor: geojson.properties.fillcolor || 'rgba(151 ,255 ,255,.2)',
        });
        eachPolygon.newfiberId = layerName;
        return eachPolygon;
      },
    });
    this._map.add(geojsonPolygon);
  }
  //添加纯文本标注
  addLabelLayer(geojson, layerName) {
    geojson.features.forEach((feature) => {
      gcoord.transform(feature, gcoord.WGS84, gcoord.AMap);
      let labelLayer = new AMap.Text({
        zooms: [12, 20],
        text: feature.properties.name, //标记显示的文本内容
        anchor: 'center', //设置文本标记锚点位置
        draggable: false, //是否可拖拽
        cursor: 'pointer', //指定鼠标悬停时的鼠标样式。
        style: {
          background: 'none',
          padding: '5px 10px',
          // 'border-radius': '4px',
          color: '#1c92ff',
          'text-align': 'center',
          'font-family': 'Microsoft YaHei',
          'font-size': '11px',
          'font-style': 'normal',
          'font-weight': 800,
          'line-height': 'normal',
          border: 'none',
          //'box-shadow': '0 2px 6px 0 rgba(97, 113, 166, 0)',
          //'box-shadow': '0 2px 4px rgba(108, 167, 255, 1), 0 0 4px rgba(108, 167, 255, 1)',
          //border: '1px solid rgba(108, 167, 255, 1)',
        },
        position: feature.geometry.coordinates, //点标记在地图上显示的位置
      });
      labelLayer.newfiberId = layerName;
      this._map.add(labelLayer); //将文本标记设置到地图上
      gcoord.transform(feature, gcoord.AMap, gcoord.WGS84);
    });
  }
  removeByIds(ids = []) {
    this.getOverLaysByIds(ids).forEach((i) => i.remove());
  }

  setVisibleByIds(ids = [], visible) {
    this.getOverLaysByIds(ids).forEach((i) => i[visible ? 'show' : 'hide']());
  }

  getOverLaysByIds(ids = []) {
    return this._map.getAllOverlays().filter((i) => ids.includes(i.newfiberId));
  }

  registerEvent(type = AMapUtils._default.events.click, callback = () => {}) {
    let self = this;
    self.callbacks[type].push(callback);
  }
}