@vtx/cs-map/lib/feature-layer/customClusterStyle.js

React components for Vortex

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _cesium = require("cesium");
var _mapIcon = _interopRequireDefault(require("@vtx/map-icon/lib/map-icon"));
var _excluded = ["type", "text", "width", "height", "x", "y"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
// 在 drawCanvas 函数外定义一个缓存 map
var iconCache = new window.Map();

// 加载图片
var loadCachedImage = function loadCachedImage(url, options) {
  // 根据参数生成key
  var key = "".concat(url, "_").concat(JSON.stringify(options));
  if (iconCache.has(key)) {
    return Promise.resolve(iconCache.get(key));
  }
  return _cesium.Resource.fetchImage({
    url: url
  }).then(function (image) {
    iconCache.set(key, image);
    return image;
  });
};

// 获取图标
var getMapIcon = function getMapIcon(type) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  // 根据参数生成key
  var key = "".concat(type, "-").concat(JSON.stringify(options));

  // 判断是否有缓存
  if (iconCache.has(key)) {
    // 直接从缓存中获取
    return iconCache.get(key);
  }

  // 生成图标
  var imgUrl = new _mapIcon["default"][type](options);

  // 存入缓存
  iconCache.set(key, imgUrl);
  return imgUrl;
};

// 根据图片和文字绘制 canvas
var customClusterStyle = function customClusterStyle(img, options) {
  var type = options.type,
    text = options.text,
    width = options.width,
    height = options.height,
    x = options.x,
    y = options.y,
    other = _objectWithoutProperties(options, _excluded);
  // 通过 map-icon 中的聚合图标绘制

  var icon = getMapIcon(type || 'CommonIcon2', _objectSpread({
    hideFooter: true,
    info: {
      text: text,
      fontSize: 18
    }
  }, other));
  var ctx = icon.ctx;

  // 大小
  width = width || 22;
  height = height || 22;

  // 起始位置
  x = x || icon.settings.iconWrapSize / 2 - width / 2;
  y = y || icon.settings.iconWrapSize / 2 - height / 2;
  return loadCachedImage(img, _objectSpread({
    text: text,
    width: width,
    height: height,
    x: x,
    y: y
  }, other)).then(function (image) {
    // 插入图标
    ctx.drawImage(image, x, y, width, height);
    return icon.getCanvas();
  });
};
var _default = exports["default"] = customClusterStyle;
//# sourceMappingURL=customClusterStyle.js.map