react-amap-next/src/api.js

import forOwn from 'lodash/forOwn';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import loadjscssfile from './loadScript';

export const loadApi = async (key = '0325e3d6d69cd56de4980b4f28906fd8') => {
  return await loadjscssfile(
    'https://webapi.amap.com/maps?v=1.4.7&key=' + key,
    'js'
  );
};

// let LoadResult = false;
// loadApi().then(result => {
//   console.log('loadApi result:', result);
//   LoadResult = result;
//   return result;
// })

// export default LoadResult;

export const loadMap = key => {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
    }
    loadApi(key)
      .then(ret => {
        if (window.AMap) {
          resolve(window.AMap);
        } else {
          reject(new Error('window.AMap不存在!'));
        }
      })
      .catch(error => {
        reject(new Error('加载地图错误!' + error.message));
      });
  });
};

/**
 * [加载插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins)
 * 加载完成后,可以调用:
 *  var toolbar = new AMap.ToolBar();
 *  map.addControl(toolbar);
 * @param {string} name 插件名或插件数组,如:AMap.ToolBar,['AMap.ToolBar','AMap.Driving']
 */
export const loadPlugin = name => {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(true);
    }
    loadApi()
      .then(ret => {
        if (!name) {
          reject(new Error('未填写组件名'));
        }
        window.AMap.plugin(name, () => {
          resolve(true);
        });
      })
      .catch(error => {
        reject(new Error('加载地图错误!' + error.message));
      });
  });
};

////////////////////////////////////////////////////////////
// Map
////////////////////////////////////////////////////////////
export const createMap = (AMap, dom, options, events) => {
  const __func__ = 'createMap';
  if (!AMap) {
    console.log(__func__, 'fail! no AMap!');
    return null;
  }
  if (!dom) {
    console.log(__func__, 'fail! no dom!');
    return null;
  }
  let map = new AMap.Map(dom, { ...(options || {}) });
  forOwn(events, (value, key) => {
    console.log(__func__, 'event on ' + key);
    map.on(key, value);
  });
  console.log(__func__, 'ok!');
  return map;
};

export const commonUpdate = (
  entity,
  newOptions,
  newEvents,
  oldOptions,
  oldEvents,
  operators,
  __func__ = 'commonUpdate'
) => {
  // const __func__ = 'commonUpdate';
  if (!entity) {
    console.log(__func__, 'fail! no entity!');
    return false;
  }

  // 找到改变的属性集合,包含添加,删除及修改的属性,删除的置为null
  let props = {};
  if (newOptions != oldOptions) {
    oldOptions &&
      forOwn(oldOptions, (value, key) => {
        // 找到改变的旧属性,用新属性取代
        let newValue = newOptions && newOptions[key];
        if (!isEqual(newValue, value)) {
          if (!(isNil(newValue) && isNil(value)))
            props[key] = newValue;
        }
      });
    newOptions &&
      forOwn(newOptions, (value, key) => {
        // 找到新加的属性,添加进去
        let oldValue = oldOptions && oldOptions[key];
        if (isNil(oldValue) && !isNil(value)) {
          props[key] = value;
        }
      });
  }
  // 找到改变的事件集合,包含添加,删除及修改的事件处理函数,删除的置为null
  let events = {};
  if (newEvents != oldEvents) {
    oldEvents &&
      forOwn(oldEvents, (value, key) => {
        // 找到改变的旧属性,用新属性取代
        let newValue = newEvents && newEvents[key];
        if (!isEqual(newValue, value)) {
          if (!(isNil(newValue) && isNil(value)))
            events[key] = newValue;
        }
      });
    newEvents &&
      forOwn(newEvents, (value, key) => {
        // 找到新加的属性,添加进去
        let oldValue = oldEvents && oldEvents[key];
        if (isNil(oldValue) && !isNil(value)) {
          events[key] = value;
        }
      });
  }

  // let operators = {
  //   map: v => entity.setMap(v),
  //   position: v => entity.setPosition(v),
  //   offset: v => entity.setOffset(v),
  //   icon: v => entity.setIcon(v),
  //   content: v => entity.setContent(v),
  //   topWhenClick: null,
  //   bubble: null,
  //   draggable: v => entity.setDraggable(v),
  //   raiseOnDrag: null,
  //   cursor: v => entity.setCursor(v),
  //   visible: null,
  //   zIndex: v => entity.setzIndex(v),
  //   angle: v => entity.setAngle(v),
  //   autoRotation: null,
  //   animation: v => entity.setAnimation(v),
  //   shadow: v => entity.setShadow(v),
  //   title: v => entity.setTitle(v),
  //   clickable: v => entity.setClickable(v),
  //   shape: v => entity.setShape(v),
  //   extData: v => entity.setExtData(v),
  //   label: v => entity.setLabel(v)
  // };

  forOwn(props, (value, key) => {
    if (value) {
      let func = operators[key];
      if (func) {
        func(value);
      } else {
        // ignore properties can not set.
        console.log(__func__, 'warning! no setter! can not update ' + key);
      }
    } else {
      // key removed, not support!
      console.log(__func__, 'warning! remove prop not support! key=' + key);
    }
  });
  forOwn(events, (value, key) => {
    let oldFunc = oldEvents && oldEvents[key];
    if (oldFunc) {
      entity.off(key, oldFunc);
    }
    if (value) {
      entity.on(key, value);
    }
  });
  console.log(
    __func__, 'update:',
    props,
    events,
    // newOptions,
    // newEvents,
    // oldOptions,
    // oldEvents
  );
  return true;
};

export const updateMap = (
  map,
  newOptions,
  newEvents,
  oldOptions,
  oldEvents
) => {
  let operators = {
    view: null,
    layers: v => map.setLayers(v),
    zoom: v => map.setZoom(v),
    center: v => map.setCenter(v),
    labelzIndex: v => map.setlabelzIndex(v),
    zooms: null,
    lang: v => map.setLang(v),
    defaultCursor: v => map.setDefaultCursor(v),
    crs: null,
    animateEnable: null,
    isHotspot: v => map.setStatus({ isHotspot: v }),
    defaultLayer: v => map.setDefaultLayer(v),
    rotateEnable: null,
    resizeEnable: null,
    showIndoorMap: null,
    indoorMap: null,
    expandZoomRange: null,
    dragEnable: v => map.setStatus({ dragEnable: v }),
    zoomEnable: null,
    doubleClickZoom: v => map.setStatus({ doubleClickZoom: v }),
    keyboardEnable: v => map.setStatus({ keyboardEnable: v }),
    jogEnable: null,
    scrollWheel: null,
    touchZoom: null,
    touchZoomCenter: null,
    mapStyle: v => map.setMapStyle(v),
    features: v => map.setFeatures(v),
    showBuildingBlock: null,
    viewMode: null,
    pitch: v => map.setPitch(v),
    pitchEnable: null,
    buildAnimation: null,
    skyColor: null,
    preloadMode: null
  };
  return commonUpdate (
    map,
    newOptions,
    newEvents,
    oldOptions,
    oldEvents,
    operators,
    'updateMap'
  )
};

////////////////////////////////////////////////////////////
// Marker
////////////////////////////////////////////////////////////
/**
 *
 * @param {*} AMap
 * @param {*} map
 * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
 * @param {*} events
 */
export const createMarker = (AMap, options, events) => {
  const __func__ = 'createMarker';
  if (!AMap) {
    console.log(__func__, 'fail! no AMap!');
    return null;
  }
  if (!options) {
    console.log(__func__, 'fail! no options!');
    return null;
  }
  if (!options.map) {
    console.log(__func__, 'fail! no options.map!');
    return null;
  }
  // let marker = new AMap.Marker({
  //   icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
  //   position: [116.405467, 39.907761]
  // });
  // marker.setMap(map);
  let entity = new AMap.Marker(options);
  forOwn(events, (value, key) => {
    entity.on(key, value);
  });
  console.log(__func__, 'ok!');
  return entity;
};

export const updateMarker = (
  entity,
  newOptions,
  newEvents,
  oldOptions,
  oldEvents
) => {
  let operators = {
    map: v => entity.setMap(v),
    position: v => entity.setPosition(v),
    offset: v => entity.setOffset(v),
    icon: v => entity.setIcon(v),
    content: v => entity.setContent(v),
    topWhenClick: null,
    bubble: null,
    draggable: v => entity.setDraggable(v),
    raiseOnDrag: null,
    cursor: v => entity.setCursor(v),
    visible: null,
    zIndex: v => entity.setzIndex(v),
    angle: v => entity.setAngle(v),
    autoRotation: null,
    animation: v => entity.setAnimation(v),
    shadow: v => entity.setShadow(v),
    title: v => entity.setTitle(v),
    clickable: v => entity.setClickable(v),
    shape: v => entity.setShape(v),
    extData: v => entity.setExtData(v),
    label: v => entity.setLabel(v)
  };

  return commonUpdate (
    entity,
    newOptions,
    newEvents,
    oldOptions,
    oldEvents,
    operators,
    'updateMarker'
  )
};

////////////////////////////////////////////////////////////
// MassMarks, warning! is a layer!
////////////////////////////////////////////////////////////
/**
 *
 * @param {*} AMap
 * @param {*} map
 * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
 * @param {*} events
 */
export const createMassMarks = (AMap, options, events) => {
  const __func__ = 'createMassMarks';
  if (!AMap) {
    console.log(__func__, 'fail! no AMap!');
    return null;
  }
  if (!options) {
    console.log(__func__, 'fail! no options!');
    return null;
  }
  let {map, data, ...restOpts} = options;
  let entity = new AMap.MassMarks(data, restOpts);
  forOwn(events, (value, key) => {
    entity.on(key, value);
  });
  if (map) {
    entity.setMap(map);
  }
  console.log(__func__, 'ok!');
  return entity;
};

export const updateMassMarks = (
  entity,
  newOptions,
  newEvents,
  oldOptions,
  oldEvents
) => {
  let operators = {
    zIndex: v => entity.setzIndex(v),
    opacity: null,
    zooms: null,
    cursor: v => entity.setCursor(v),
    alwaysRender: null,
    style: v => entity.setStyle(v),
    map: v => entity.setMap(v),
    data: v=> entity.setData(v)
  };

  return commonUpdate (
    entity,
    newOptions,
    newEvents,
    oldOptions,
    oldEvents,
    operators,
    'updateMassMarks'
  )
};

////////////////////////////////////////////////////////////
// Polygon
////////////////////////////////////////////////////////////
/**
 *
 * @param {*} AMap
 * @param {*} map
 * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
 * @param {*} events
 */
export const createPolygon = (AMap, options, events) => {
  const __func__ = 'createPolygon';
  if (!AMap) {
    console.log(__func__, 'fail! no AMap!');
    return null;
  }
  if (!options) {
    console.log(__func__, 'fail! no options!');
    return null;
  }
  if (!options.map) {
    console.log(__func__, 'fail! no options.map!');
    return null;
  }
  let entity = new AMap.Polygon(options);
  forOwn(events, (value, key) => {
    entity.on(key, value);
  });
  console.log(__func__, 'ok!');
  return entity;
};

export const updatePolygon = (
  entity,
  newOptions,
  newEvents,
  oldOptions,
  oldEvents
) => {
  let operators = {
    map: v => entity.setMap(v),
    zIndex: v => entity.setzIndex(v),
    path: v => entity.setPath(v),
    bubble: null,
    cursor: null,
    strokeColor: null,
    strokeOpacity: null,
    strokeWeight: null,
    fillColor: null,
    fillOpacity: null,
    draggable: null,
    extData: v => entity.setExtData(v),
    strokeStyle: null,
    strokeDasharray: null,
    options: v => entity.setOptions(v)
  };

  return commonUpdate (
    entity,
    newOptions,
    newEvents,
    oldOptions,
    oldEvents,
    operators,
    'updatePolygon'
  )
};

////////////////////////////////////////////////////////////
// Polyline
////////////////////////////////////////////////////////////
/**
 *
 * @param {*} AMap
 * @param {*} map
 * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
 * @param {*} events
 */
export const createPolyline = (AMap, options, events) => {
  const __func__ = 'createPolyline';
  if (!AMap) {
    console.log(__func__, 'fail! no AMap!');
    return null;
  }
  if (!options) {
    console.log(__func__, 'fail! no options!');
    return null;
  }
  if (!options.map) {
    console.log(__func__, 'fail! no options.map!');
    return null;
  }
  let entity = new AMap.Polyline(options);
  forOwn(events, (value, key) => {
    entity.on(key, value);
  });
  console.log(__func__, 'ok!');
  return entity;
};

export const updatePolyline = (
  entity,
  newOptions,
  newEvents,
  oldOptions,
  oldEvents
) => {
  let operators = {
    map: v => entity.setMap(v),
    zIndex: v => entity.setzIndex(v),
    bubble: null,
    cursor: null,
    gedodesic: null,
    isOutline: null,
    borderWeight: null,
    outlineColor: null,
    path: v => entity.setPath(v),
    strokeColor: null,
    strokeOpacity: null,
    strokeWeight: null,
    strokeStyle: null,
    strokeDasharray: null,
    lineJoin: null,
    lineCap: null,
    draggable: null,
    extData: v => entity.setExtData(v),
    showDir: null,
    options: v => entity.setOptions(v)
  };

  return commonUpdate (
    entity,
    newOptions,
    newEvents,
    oldOptions,
    oldEvents,
    operators,
    'updatePolyline'
  )
};