@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(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
// 在 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