Arcgis JS api4.18简单实现leaflet的divOverlay

介绍

在leaflet里有一个非常好用divOverylay类，可以使用html+css构建元素直接叠加到地图，并随地图拖动实时改变位置，用于表现复杂的弹窗气泡或标注都很实用，但在arcgis js api 里没有相关的实现方式，这里参考leaflet的实现方式基于arcgis api实现类似的功能。

实现代码

// divOverlay.ts 类
const supportClass = ['esri.layers.FeatureLayer', 'esri.layers.GraphicsLayer'];
const getGeometryCenter = (geometry: __esri.Geometry) => {
   
   
  if (!geometry) {
   
   
    window.console.log(new Error('map:getGeometryCenter:几何对象为空'));
    return null
  }
  const {
   
    type } = geometry;
  // 获取图形中心点
  let center: __esri.Geometry | any = null;
  switch (type) {
   
   
    case 'point':
      center = geometry
      break;
    case 'polyline':
      center = geometry.extent.center;
      break;
    case 'polygon':
      // center = geometry.centroid;
      center = geometry.extent.center;
      break;
    case 'extent':
      center = geometry.center;
      break;
    default:
      break;
  }
  return center;
}
const setClass = (el: HTMLElement, name: string) => {
   
   
  if (!el.className['baseVal']) {
   
   
    el.className = name;
  } else {
   
   
    // in case of SVG element
    el.className['baseVal'] = name;
  }
};
const getClass = (el: HTMLElement) => {
   
   
  if (el['correspondingElement']) {
   
   
    el = el['correspondingElement'];
  }
  return el.className['baseVal'] === undefined ? el.className : el.className['baseVal'];
};
const hasClass = (el: HTMLElement, name: string) => {
   
   
  if (el.classList !== undefined) {
   
   
    return el.classList.contains(name);
  }
  const className = getClass(el);
  return className.length > 0 && new RegExp('(^|\\s)' + name + '(\\s|$)').test(className);
};
function splitWords(str: string) {
   
   
  return trim(str).split(/\s+/);
}
const addClass = (el, name) => {
   
   
  if (el.classList !== undefined) {
   
   
    const classes = splitWords(name);
    for (let i = 0, len = classes.length; i < len; i++) {
   
   
      el.classList.add(classes[i]);
    }
  } else if (!hasClass(el, name)) {
   
   
    const className = getClass(el);
    setClass(el, (className ? className + ' ' : '') + name);
  }
};

export default class DivOverlay{
   
   
  declaredClass: string = 'divoverlay';
  uiKey: string = 'div-overlay';
  map: __esri.WebMap | __esri.WebScene;
  mapView: __esri.MapView | __esri.SceneView;
  source: __esri.Graphic[] | __esri.GraphicsLayerView | __esri.FeatureLayerView;
  options: any = {
   
   };
  container: any;
  data: any = [];
  domNodes: any = {
   
   };
  displayField: string = 'name';
  currentAlignment: string = 'top-center'; // top-center\top-left\top-right\bottom-center\bottom-left\bottom-right\left-center\right-center