react-amap-next/lib/api.js

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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

var xdebug = console.log;
// const xdebug = () => {};

export var loadApi = function loadApi() {
  var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '0325e3d6d69cd56de4980b4f28906fd8';

  return new APILoader({
    key: key,
    useAMapUI: true,
    version: '1.4.7',
    protocol: 'https'
  }).load();
};
export var loadMap = function loadMap(key) {
  return new Promise(function (resolve, reject) {
    if (window.AMap) {
      resolve(window.AMap);
    }
    loadApi(key).then(function (ret) {
      if (window.AMap) {
        resolve(window.AMap);
      } else {
        reject(new Error('window.AMap不存在!'));
      }
    }).catch(function (error) {
      reject(new Error('加载地图错误!' + error.message));
    });
  });
};

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

// export const loadMapV1 = 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 window.AMap.ToolBar();
 *  map.addControl(toolbar);
 * @param {string} name 插件名或插件数组,如:window.AMap.ToolBar,['AMap.ToolBar','AMap.Driving']
 */
export var loadPlugin = function loadPlugin(name) {
  return new Promise(function (resolve, reject) {
    if (window.AMap) {
      window.AMap.plugin(name, function () {
        resolve(true);
      });
      //是否有加载失败的情况,如果加载失败,怎么reject?
    } else {
      reject(new Error('地图还未加载!'));
    }
  });
};

////////////////////////////////////////////////////////////
// 工具方法
////////////////////////////////////////////////////////////
var commonUpdate = function commonUpdate(entity, newOptions, newEvents, oldOptions, oldEvents, operators) {
  var __func__ = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'commonUpdate';

  // const __func__ = 'commonUpdate';
  if (!entity) {
    xdebug(__func__, 'fail! no entity!');
    return false;
  }

  // 找到改变的属性集合,包含添加,删除及修改的属性,删除的置为null
  var props = {};
  if (newOptions != oldOptions) {
    oldOptions && forOwn(oldOptions, function (value, key) {
      // 找到改变的旧属性,用新属性取代
      var newValue = newOptions && newOptions[key];
      if (!isEqual(newValue, value)) {
        if (!(isNil(newValue) && isNil(value))) props[key] = newValue;
      }
    });
    newOptions && forOwn(newOptions, function (value, key) {
      // 找到新加的属性,添加进去
      var oldValue = oldOptions && oldOptions[key];
      if (isNil(oldValue) && !isNil(value)) {
        props[key] = value;
      }
    });
  }
  // 找到改变的事件集合,包含添加,删除及修改的事件处理函数,删除的置为null
  var events = {};
  if (newEvents != oldEvents) {
    oldEvents && forOwn(oldEvents, function (value, key) {
      // 找到改变的旧属性,用新属性取代
      var newValue = newEvents && newEvents[key];
      if (!isEqual(newValue, value)) {
        if (!(isNil(newValue) && isNil(value))) events[key] = newValue;
      }
    });
    newEvents && forOwn(newEvents, function (value, key) {
      // 找到新加的属性,添加进去
      var 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, function (value, key) {
    if (value) {
      var func = operators[key];
      if (func) {
        func(value);
      } else {
        // ignore properties can not set.
        xdebug(__func__, 'warning! no setter! can not update ' + key);
      }
    } else {
      // key removed, not support!
      xdebug(__func__, 'warning! remove prop not support! key=' + key);
    }
  });
  forOwn(events, function (value, key) {
    var oldFunc = oldEvents && oldEvents[key];
    if (oldFunc) {
      entity.off(key, oldFunc);
    }
    if (value) {
      entity.on(key, value);
    }
  });
  if (!isEmpty(props) || !isEmpty(events)) {
    xdebug(__func__, 'update:', entity, props, events
    // newOptions,
    // newEvents,
    // oldOptions,
    // oldEvents
    );
  }
  return true;
};

////////////////////////////////////////////////////////////
// Map
////////////////////////////////////////////////////////////
export var createMap = function createMap(dom, options, events) {
  var __func__ = 'createMap';
  if (!window.AMap) {
    xdebug(__func__, 'fail! no window.AMap!');
    return null;
  }
  if (!dom) {
    xdebug(__func__, 'fail! no dom!');
    return null;
  }
  var map = new window.AMap.Map(dom, _extends({}, options || {}));
  forOwn(events, function (value, key) {
    xdebug(__func__, 'event on ' + key);
    map.on(key, value);
  });
  xdebug(__func__, 'ok!');
  return map;
};

export var updateMap = function updateMap(map, newOptions, newEvents, oldOptions, oldEvents) {
  var operators = {
    view: null,
    layers: function layers(v) {
      return map.setLayers(v);
    },
    zoom: function zoom(v) {
      return map.setZoom(v);
    },
    center: function center(v) {
      return map.setCenter(v);
    },
    labelzIndex: function labelzIndex(v) {
      return map.setlabelzIndex(v);
    },
    zooms: null,
    lang: function lang(v) {
      return map.setLang(v);
    },
    defaultCursor: function defaultCursor(v) {
      return map.setDefaultCursor(v);
    },
    crs: null,
    animateEnable: null,
    isHotspot: function isHotspot(v) {
      return map.setStatus({ isHotspot: v });
    },
    defaultLayer: function defaultLayer(v) {
      return map.setDefaultLayer(v);
    },
    rotateEnable: null,
    resizeEnable: null,
    showIndoorMap: null,
    indoorMap: null,
    expandZoomRange: null,
    dragEnable: function dragEnable(v) {
      return map.setStatus({ dragEnable: v });
    },
    zoomEnable: null,
    doubleClickZoom: function doubleClickZoom(v) {
      return map.setStatus({ doubleClickZoom: v });
    },
    keyboardEnable: function keyboardEnable(v) {
      return map.setStatus({ keyboardEnable: v });
    },
    jogEnable: null,
    scrollWheel: null,
    touchZoom: null,
    touchZoomCenter: null,
    mapStyle: function mapStyle(v) {
      return map.setMapStyle(v);
    },
    features: function features(v) {
      return map.setFeatures(v);
    },
    showBuildingBlock: null,
    viewMode: null,
    pitch: function pitch(v) {
      return 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 var createMarker = function createMarker(options, events) {
  var __func__ = 'createMarker';
  if (!window.AMap) {
    xdebug(__func__, 'fail! no window.AMap!');
    return null;
  }
  if (!options) {
    xdebug(__func__, 'fail! no options!');
    return null;
  }
  if (!options.map) {
    xdebug(__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);
  var entity = new window.AMap.Marker(options);
  forOwn(events, function (value, key) {
    entity.on(key, value);
  });
  xdebug(__func__, 'ok!');
  return entity;
};

export var updateMarker = function updateMarker(entity, newOptions, newEvents, oldOptions, oldEvents) {
  var operators = {
    map: function map(v) {
      return entity.setMap(v);
    },
    position: function position(v) {
      return entity.setPosition(v);
    },
    offset: function offset(v) {
      return entity.setOffset(v);
    },
    icon: function icon(v) {
      setTimeout(function () {
        return entity.setIcon(v);
      }, 0);
    }, // 这里有一个bug,在某些时候页面更改icon时,界面上并不生效.
    content: function content(v) {
      return entity.setContent(v);
    },
    topWhenClick: null,
    bubble: null,
    draggable: function draggable(v) {
      return entity.setDraggable(v);
    },
    raiseOnDrag: null,
    cursor: function cursor(v) {
      return entity.setCursor(v);
    },
    visible: null,
    zIndex: function zIndex(v) {
      return entity.setzIndex(v);
    },
    angle: function angle(v) {
      return entity.setAngle(v);
    },
    autoRotation: null,
    animation: function animation(v) {
      return entity.setAnimation(v);
    },
    shadow: function shadow(v) {
      return entity.setShadow(v);
    },
    title: function title(v) {
      return entity.setTitle(v);
    },
    clickable: function clickable(v) {
      return entity.setClickable(v);
    },
    shape: function shape(v) {
      return entity.setShape(v);
    },
    extData: function extData(v) {
      return entity.setExtData(v);
    },
    label: function label(v) {
      return entity.setLabel(v);
    }
  };

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

////////////////////////////////////////////////////////////
// Traffic layer, warning! is a layer!
////////////////////////////////////////////////////////////
/**
 *
 * @param {*} AMap
 * @param {*} map
 * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
 * @param {*} events
 */
var createTraffic = function createTraffic(options, events) {
  var __func__ = 'createTraffic';
  if (!window.AMap || !options || !options.map) {
    xdebug(__func__, 'fail! parameters!', 'window.AMap:' + !!window.AMap, 'options:' + !!options, 'options.map:' + !!(options && options.map));
    return null;
  }

  var map = options.map,
      restOpts = _objectWithoutProperties(options, ['map']);

  var entity = new window.AMap.TileLayer.Traffic(restOpts);
  forOwn(events, function (value, key) {
    entity.on(key, value);
  });
  entity.setMap(map);
  xdebug(__func__, 'ok!');
  return entity;
};

export { createTraffic };
export var updateTraffic = function updateTraffic(entity, newOptions, newEvents, oldOptions, oldEvents) {
  var operators = {
    map: function map(v) {
      return entity.setMap(v);
    },
    zIndex: function zIndex(v) {
      return entity.setzIndex(v);
    },
    opacity: function opacity(v) {
      return entity.setOpacity(v);
    },
    zooms: null,
    detectRetina: null,
    autoRefresh: null,
    interval: null,
    tileUrl: function tileUrl(v) {
      return entity.setTileUrl(v);
    } // not in options.
  };

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

////////////////////////////////////////////////////////////
// MassMarks, warning! is a layer!
////////////////////////////////////////////////////////////
/**
 *
 * @param {*} AMap
 * @param {*} map
 * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
 * @param {*} events
 */
var createMassMarks = function createMassMarks(options, events) {
  var __func__ = 'createMassMarks';
  if (!window.AMap || !options || !options.map) {
    xdebug(__func__, 'fail! parameters!', 'window.AMap:' + !!window.AMap, 'options:' + !!options, 'options.map:' + !!(options && options.map));
    return null;
  }

  var map = options.map,
      data = options.data,
      style = options.style,
      restOpts = _objectWithoutProperties(options, ['map', 'data', 'style']);

  var entity = new window.AMap.MassMarks(data || [], _extends({}, restOpts, { style: style || [] }));
  forOwn(events, function (value, key) {
    entity.on(key, value);
  });
  entity.setMap(map);
  xdebug(__func__, 'ok!', map, 'layers:', map.getLayers());
  return entity;
};

export { createMassMarks };
export var updateMassMarks = function updateMassMarks(entity, newOptions, newEvents, oldOptions, oldEvents) {
  var operators = {
    zIndex: function zIndex(v) {
      return entity.setzIndex(v);
    },
    opacity: null,
    zooms: null,
    cursor: function cursor(v) {
      return entity.setCursor(v);
    },
    alwaysRender: null,
    style: function style(v) {
      return entity.setStyle(v);
    },
    map: function map(v) {
      xdebug('updateMassMarks', 'setMap', v, 'layers:', v && v.getLayers());
      entity.setMap(v);
    },
    data: function data(v) {
      entity.setData(v);
    }
  };
  xdebug('updateMassMarks', 'mapOld:', oldOptions && oldOptions.map && oldOptions.map.getLayers(), 'mapNew:', newOptions && newOptions.map && newOptions.map.getLayers());

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

// ////////////////////////////////////////////////////////////
// // Traffic, warning! is a layer!
// ////////////////////////////////////////////////////////////
// /**
//  *
//  * @param {*} window.AMap
//  * @param {*} map
//  * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
//  * @param {*} events
//  */
// export const createTraffic = (options, events) => {
//   const __func__ = 'createTraffic';
//   if (!window.AMap || !options || !options.map) {
//     xdebug(__func__, 'fail! parameters!', 'window.AMap:'+!!window.AMap, 'options:'+!!options, 'options.map:'+!!(options&&options.map));
//     return null;
//   }
//   let {map, data, style, ...restOpts} = options;
// //   let entity = new window.AMap.TileLayer.Traffic(data, restOpts);
// let entity = new window.AMap.Traffic(data||[], {...restOpts, style: style||[]});
//   forOwn(events, (value, key) => {
//     entity.on(key, value);
//   });
//   entity.setMap(map);
//   xdebug(__func__, 'ok!', map, 'layers:', map.getLayers());
//   return entity;
// };

// export const updateTraffic = (
//   entity,
//   newOptions,
//   newEvents,
//   oldOptions,
//   oldEvents
// ) => {
//   let operators = {
//     map: v => entity.setMap(v),
//     zIndex: v => entity.setzIndex(v),
//     opacity: v => entity.setOpacity(v),
//     zooms: null,
//     detectRetina: null,
//     autoRefresh: null,
//     interval: null,
//     tileUrl: v => entity.setTileUrl(v), // not in options.
//   };
//   xdebug('updateTraffic', 'mapOld:', (oldOptions && oldOptions.map && oldOptions.map.getLayers()), 'mapNew:', (newOptions && newOptions.map && newOptions.map.getLayers()));

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

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

export var updatePolygon = function updatePolygon(entity, newOptions, newEvents, oldOptions, oldEvents) {
  var operators = {
    map: function map(v) {
      return entity.setMap(v);
    },
    zIndex: function zIndex(v) {
      return entity.setzIndex(v);
    },
    path: function path(v) {
      return entity.setPath(v);
    },
    bubble: null,
    cursor: null,
    strokeColor: null,
    strokeOpacity: null,
    strokeWeight: null,
    fillColor: null,
    fillOpacity: null,
    draggable: null,
    extData: function extData(v) {
      return entity.setExtData(v);
    },
    strokeStyle: null,
    strokeDasharray: null,
    options: function options(v) {
      return 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 var createPolyline = function createPolyline(options, events) {
  var __func__ = 'createPolyline';
  if (!window.AMap || !options || !options.map) {
    xdebug(__func__, 'fail! parameters!', 'window.AMap:' + !!window.AMap, 'options:' + !!options, 'options.map:' + !!(options && options.map));
    return null;
  }
  var entity = new window.AMap.Polyline(options);
  forOwn(events, function (value, key) {
    entity.on(key, value);
  });
  xdebug(__func__, 'ok!');
  return entity;
};

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

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

////////////////////////////////////////////////////////////
// InfoWindow
////////////////////////////////////////////////////////////
/**
 *
 * @param {*} AMap
 * @param {*} map
 * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
 * @param {*} events
 */
export var createInfoWindow = function createInfoWindow(options, events) {
  var __func__ = 'createInfoWindow';
  if (!window.AMap || !options || !options.map) {
    xdebug(__func__, 'fail! parameters!', 'window.AMap:' + !!window.AMap, 'options:' + !!options, 'options.map:' + !!(options && options.map));
    return null;
  }
  var entity = new window.AMap.InfoWindow(options);
  forOwn(events, function (value, key) {
    entity.on(key, value);
  });
  xdebug(__func__, 'ok!');
  return entity;
};

export var updateInfoWindow = function updateInfoWindow(entity, newOptions, newEvents, oldOptions, oldEvents) {
  var operators = {
    isCustom: null,
    autoMove: null,
    closeWhenClickMap: null,
    content: function content(v) {
      return entity.setContent(v);
    },
    size: function size(v) {
      return entity.setSize(v);
    },
    offset: null,
    position: function position(v) {
      return entity.setPosition(v);
    },
    showShadow: null
  };

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