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 { isEmpty, isNil, isEqual, forOwn } from "lodash";
//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");
};

////////////////////////////////////////////////////////////
// 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");
};

////////////////////////////////////////////////////////////
// Circle
////////////////////////////////////////////////////////////
/**
 *
 * @param {*} AMap
 * @param {*} map
 * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom
 * @param {*} events
 */
export var createCircle = function createCircle(options, events) {
  var __func__ = "createCircle";
  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.Circle(options);
  forOwn(events, function (value, key) {
    entity.on(key, value);
  });
  xdebug(__func__, "ok!");
  return entity;
};

export var updateCircle = function updateCircle(entity, newOptions, newEvents, oldOptions, oldEvents) {
  var operators = {
    map: function map(v) {
      return entity.setMap(v);
    },
    zIndex: function zIndex(v) {
      return entity.setzIndex(v);
    },
    center: function center(v) {
      return entity.setCenter(v);
    },
    bubble: null,
    cursor: null,
    radius: function radius(v) {
      return entity.setRadius(v);
    },
    strokeColor: null,
    strokeOpacity: null,
    strokeWeight: null,
    fillColor: null,
    fillOpacity: null,
    strokeStyle: null,
    extData: function extData(v) {
      return entity.setExtData(v);
    },
    strokeDasharray: null,
    options: function options(v) {
      return entity.setOptions(v);
    }
  };

  return commonUpdate(entity, newOptions, newEvents, oldOptions, oldEvents, operators, "updateCircle");
};

////////////////////////////////////////////////////////////
// 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");
};

////////////////////////////////////////////////////////////
// Geolocation
////////////////////////////////////////////////////////////

export var getLocation = function getLocation(options, events) {
  xdebug("准备获取地理位置");
  /***************************************
  由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
  ***************************************/
  var map = options.map;
  if (!map) {
    return false;
  }
  var geolocation = void 0;

  var defaultOptions = {
    enableHighAccuracy: true, //是否使用高精度定位，默认:true
    timeout: 10000, //超过10秒后停止定位，默认：无穷大
    buttonOffset: new window.AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
    zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    buttonPosition: "RB"
  };

  var opts = _extends({}, defaultOptions, options);
  xdebug("准备加载定位插件");

  map.plugin("AMap.Geolocation", function () {
    xdebug("加载定位插件成功");

    geolocation = new window.AMap.Geolocation(opts);
    map.addControl(geolocation);
    geolocation.getCurrentPosition();
    if (events.onComplete) {
      window.AMap.event.addListener(geolocation, "complete", events.onComplete); //返回定位信息
    }
    if (events.onError) {
      window.AMap.event.addListener(geolocation, "error", events.onError); //返回定位出错信息
    }
  });
  return true;
};