const options = {
  url: '/arcgisApi/4.7/init.js',
};

import _default, * as esriLoader from 'esri-loader';
export function perGzqkOnMap(_self, tableData) {
  esriLoader
    .loadModules(
      [
        'esri/Graphic',
        'esri/geometry/Point',
        'esri/geometry/SpatialReference',
        'dojo/domReady!',
      ],
      options,
    )
    .then(([Graphic, Point, SpatialReference]) => {
      var trackGraphicLayer1 =
        _self.mapObject.findLayerById('trackGraphicLayer1');
      trackGraphicLayer1.removeAll();
      trackGraphicLayer1.visible = true;
      var symbol = {
        //
        type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
        style: 'circle',
        color: 'red',
        size: '12px', // pixels
        outline: {
          // autocasts as new SimpleLineSymbol()
          color: [255, 255, 0],
          width: 1, // points
        },
      };
      var gra, pt, symbol;
      tableData.forEach((item) => {
        if (item.lon && item.lat) {
          pt = new Point(item.lon, item.lat, new SpatialReference(4326));
          gra = new Graphic({
            geometry: pt,
            symbol: symbol,
            attributes: item,
          });
          trackGraphicLayer1.add(gra);
        }
      });
      if (tableData.length > 0) {
        _self.viewObject.goTo({
          center: [tableData[0].lon - 0.18, tableData[0].lat],
          zoom: 12,
        });
      }
    })
    .catch((err) => {
      console.error(err);
    });
}
