@vtx/cs-map
Version:
React components for Vortex
401 lines (386 loc) • 15.4 kB
JavaScript
;
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.setRenderer = exports.setEntityStyle = exports.getImgUrl = exports.getImage = exports.getColor = exports.UniqueValue = exports.Simple = exports.Renderer = exports.Polyline = exports.Polygon = exports.Point = exports.Marker = exports.Label = exports.ClassBreaks = void 0;
var _cesium = require("cesium");
var _mapIcon2 = _interopRequireDefault(require("@vtx/map-icon/lib/map-icon"));
var _isObject = _interopRequireDefault(require("../_util/isObject"));
var _transformRgb = _interopRequireDefault(require("../_util/transformRgb"));
var _isFunction = _interopRequireDefault(require("../_util/isFunction"));
var _StyleCache = _interopRequireDefault(require("../_util/StyleCache"));
var _lodash = require("lodash");
var _excluded = ["type", "icon", "image", "color", "size", "text"],
_excluded2 = ["text", "align", "justify", "size", "color", "background", "fontFamily", "offset", "pixelOffset"],
_excluded3 = ["type", "icon", "image", "imageColor", "color", "size", "mapIcon"],
_excluded4 = ["pixelOffset", "ellipse"];
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; }
var Cache = window.__styleCache || new _StyleCache["default"]();
window.__styleCache = Cache;
/***
* 获取图标地址
* @param type MapIcon 的图标绘制类型
* @param options 图标对应的参数
* @returns {*}
*/
var getImgUrl = exports.getImgUrl = function getImgUrl(type) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
// 根据参数生成key
var key = "".concat(type, "-").concat(JSON.stringify(options));
// 判断是否有缓存
if (Cache.has(key)) {
// 直接从缓存中获取
return Cache.get(key);
}
// 生成图标
var imgUrl = new _mapIcon2["default"][type](options).getImgUrl();
// 存入缓存
Cache.set(key, imgUrl);
return imgUrl;
};
var getImage = exports.getImage = function getImage(options) {
var image;
if (typeof options === 'string') {
image = options;
} else if ((0, _isObject["default"])(options)) {
var _options$type = options.type,
type = _options$type === void 0 ? 'CommonIcon2' : _options$type,
icon = options.icon,
_image = options.image,
_options$color = options.color,
color = _options$color === void 0 ? '#1890ff' : _options$color,
size = options.size,
text = options.text,
other = _objectWithoutProperties(options, _excluded);
// 图标类型 CockpitIcon CockpitIcon2 CommonIcon CommonIcon2
if (type === 'PointIcon') {
image = getImgUrl(type, _objectSpread({
size: size,
color: color
}, other));
} else if (_mapIcon2["default"][type] && text) {
image = getImgUrl(type, _objectSpread({
size: size,
color: color,
text: text
}, other));
} else if (_mapIcon2["default"][type] && _mapIcon2["default"].icon[icon]) {
image = getImgUrl(type, _objectSpread({
canvasIcon: icon,
color: color,
size: size
}, other));
} else {
image = _image;
}
}
return image;
};
var getColor = exports.getColor = function getColor(style) {
if ((0, _isObject["default"])(style)) {
var color = style.color,
glowPower = style.glowPower,
opacity = style.opacity,
lineDash = style.lineDash;
var _color = _cesium.Color.fromCssColorString((0, _transformRgb["default"])(color, opacity));
if (glowPower) {
return new _cesium.PolylineGlowMaterialProperty({
glowPower: glowPower,
// 发光强度
color: _color
});
} else if (lineDash) {
return new _cesium.PolylineDashMaterialProperty({
color: _color,
dashLength: lineDash //短划线长度
});
}
return _color;
}
if (typeof style === 'string') {
return _cesium.Color.fromCssColorString(style);
}
};
/**
*
* @param {*} options
* pixelOffset: 偏移量
* @returns
*/
var Label = exports.Label = function Label(options) {
var text = options.text,
align = options.align,
justify = options.justify,
size = options.size,
color = options.color,
background = options.background,
fontFamily = options.fontFamily,
offset = options.offset,
pixelOffset = options.pixelOffset,
v = _objectWithoutProperties(options, _excluded2);
var style = _objectSpread({
text: text,
fillColor: getColor(color),
font: "".concat(size || 16, "px ").concat(fontFamily || 'Helvetica'),
//先字号再字体
showBackground: !!background,
//是否显示背景色,就是文字后面的阴影
backgroundColor: getColor(background),
heightReference: _cesium.HeightReference.CLAMP_TO_GROUND
}, v);
// 垂直
style.verticalOrigin = {
"top": _cesium.VerticalOrigin.BOTTOM,
// 原点在对象的底部，所以标签往上展示
"middle": _cesium.VerticalOrigin.CENTER,
// 原点位于 BASELINE 和 TOP 之间的垂直中心
"bottom": _cesium.VerticalOrigin.TOP,
// 原点在对象的顶部,所以标签往下展示
"baseline": _cesium.VerticalOrigin.BASELINE // 如果对象包含文本，则原点位于文本的基线，否则原点位于对象的底部
}[align || 'bottom'];
// 水平
style.horizontalOrigin = {
"right": _cesium.HorizontalOrigin.LEFT,
// 原点在对象的左侧
"center": _cesium.HorizontalOrigin.CENTER,
// 原点在对象的水平中心
"left": _cesium.HorizontalOrigin.RIGHT // 原点在对象的右侧
}[justify || 'center'];
if (offset) {
if (Array.isArray(offset)) {
style.pixelOffset = new _cesium.Cartesian2(Number(offset[0]), Number(offset[1]));
} else {
style.pixelOffset = new _cesium.Cartesian2(Number(offset), 0);
}
}
if (typeof (pixelOffset === null || pixelOffset === void 0 ? void 0 : pixelOffset.x) == 'number' && typeof (pixelOffset === null || pixelOffset === void 0 ? void 0 : pixelOffset.y) == 'number') {
style.pixelOffset = new _cesium.Cartesian2(pixelOffset === null || pixelOffset === void 0 ? void 0 : pixelOffset.x, pixelOffset === null || pixelOffset === void 0 ? void 0 : pixelOffset.y);
}
return style;
};
/**
*
* @param {*} options
* pixelOffset: 偏移量
* @returns
*/
var Point = exports.Point = function Point(options) {
var radius = options.radius,
fill = options.fill,
stroke = options.stroke,
_options$pixelOffset = options.pixelOffset,
pixelOffset = _options$pixelOffset === void 0 ? {
x: 0,
y: 0
} : _options$pixelOffset;
var style = {
pixelSize: radius // 以像素为单位指定大小
};
if (fill) {
style = _objectSpread(_objectSpread({}, style), {}, {
color: getColor(fill)
});
}
if (stroke) {
style = _objectSpread(_objectSpread({}, style), {}, {
outline: true,
outlineColor: getColor(stroke),
outlineWidth: stroke.width || 2
});
}
if (typeof (pixelOffset === null || pixelOffset === void 0 ? void 0 : pixelOffset.x) == 'number' && typeof (pixelOffset === null || pixelOffset === void 0 ? void 0 : pixelOffset.y) == 'number') {
style.pixelOffset = new _cesium.Cartesian2(pixelOffset === null || pixelOffset === void 0 ? void 0 : pixelOffset.x, pixelOffset === null || pixelOffset === void 0 ? void 0 : pixelOffset.y);
}
if (options !== null && options !== void 0 && options.ellipse) {
style.ellipse = options.ellipse;
}
return style;
};
var Polyline = exports.Polyline = function Polyline(options) {
var style = {
width: 2
};
if (options !== null && options !== void 0 && options.stroke) {
var stroke = options.stroke;
style = _objectSpread(_objectSpread({}, style), {}, {
width: stroke.width || 2,
material: getColor(stroke)
});
}
if (options !== null && options !== void 0 && options.material) {
style.material = options.material;
}
return style;
};
var Polygon = exports.Polygon = function Polygon(options) {
var style = _objectSpread({}, options);
if (options) {
var fill = options.fill,
stroke = options.stroke,
material = options.material;
if (fill) {
style = _objectSpread(_objectSpread({}, style), {}, {
fill: true,
material: material || getColor(fill)
});
}
if (stroke) {
style = _objectSpread(_objectSpread({}, style), {}, {
outline: true,
outlineColor: getColor(stroke),
outlineWidth: stroke.width || 2
});
}
}
return style;
};
var Marker = exports.Marker = function Marker(options) {
var _ref = options || {},
type = _ref.type,
icon = _ref.icon,
image = _ref.image,
imageColor = _ref.imageColor,
color = _ref.color,
size = _ref.size,
mapIcon = _ref.mapIcon,
otherOptions = _objectWithoutProperties(_ref, _excluded3);
var style = _objectSpread({
horizontalOrigin: _cesium.HorizontalOrigin.CENTER,
verticalOrigin: _cesium.VerticalOrigin.BOTTOM,
heightReference: _cesium.HeightReference.CLAMP_TO_GROUND,
clampToGround: true,
mapIcon: _objectSpread({}, options)
}, otherOptions);
if (imageColor) {
style.color = getColor(imageColor);
}
if (options !== null && options !== void 0 && options.mapIcon) {
style.image = getImage(options.mapIcon);
var _mapIcon = new _mapIcon2["default"][type || 'CommonIcon2'](options.mapIcon);
style.width = style.width || (_mapIcon === null || _mapIcon === void 0 ? void 0 : _mapIcon.width) || 44;
style.height = style.height || (_mapIcon === null || _mapIcon === void 0 ? void 0 : _mapIcon.height) || (options.mapIcon.hideFooter ? 44 : 60);
} else if (options) {
var pixelOffset = options.pixelOffset,
ellipse = options.ellipse,
v = _objectWithoutProperties(options, _excluded4);
style.image = getImage(v);
}
if (options !== null && options !== void 0 && options.material) {
style.material = options.material;
}
return style;
};
var TYPE = {
Label: Label,
Point: Point,
Polyline: Polyline,
Polygon: Polygon,
Circle: Point,
Marker: Marker
};
var Renderer = exports.Renderer = function Renderer(type) {
var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (!type) {
new Error('缺少类型');
return;
}
if (!TYPE[type]) {
new Error('没有这个类型类型的样式');
return;
}
return TYPE[type](style);
};
// 简单渲染
var Simple = exports.Simple = function Simple(_ref2) {
var type = _ref2.type,
style = _ref2.style;
return Renderer(type, style);
};
// 唯一值渲染
var UniqueValue = exports.UniqueValue = function UniqueValue(feature, _ref3) {
var field = _ref3.field,
_ref3$render = _ref3.render,
render = _ref3$render === void 0 ? [] : _ref3$render;
var value = feature.properties.properties._value[field];
var renderer = render.find(function (v) {
return String(v.value) === String(value);
});
if (renderer) {
return Simple(renderer);
}
};
// 区间渲染
var ClassBreaks = exports.ClassBreaks = function ClassBreaks(feature, _ref4) {
var field = _ref4.field,
_ref4$render = _ref4.render,
render = _ref4$render === void 0 ? [] : _ref4$render;
var value = feature.properties.properties._value[field];
var renderer = render.find(function (v) {
return Number(value) >= Number(v.value[0]) && Number(value) <= Number(v.value[1]);
});
if (renderer) {
return Simple(renderer);
}
};
// 设置图形对象样式
var setEntityStyle = exports.setEntityStyle = function setEntityStyle(entity, style) {
for (var i in style) {
if (entity.hasOwnProperty(i)) {
if (i === 'material') {
entity[i] = style[i];
} else if (entity[i].setValue) {
entity[i].setValue(style[i]);
} else {
entity[i] = style[i];
}
} else {
entity[i] = style[i];
}
}
};
// 设置渲染方式
var setRenderer = exports.setRenderer = function setRenderer(entity, style) {
var _style$style;
if (style !== null && style !== void 0 && (_style$style = style.style) !== null && _style$style !== void 0 && _style$style.ellipse) {
var _style$style2;
entity.ellipse = style === null || style === void 0 || (_style$style2 = style.style) === null || _style$style2 === void 0 ? void 0 : _style$style2.ellipse;
}
if ((0, _isFunction["default"])(style)) {
var _style = style(entity);
entity.setStyle(Simple(_style));
} else if ((0, _isObject["default"])(style)) {
var mode = style.mode;
if (mode) {
if (mode === 'Simple') {
entity.setStyle(Simple(style));
}
if (mode === 'UniqueValue') {
entity.setStyle(UniqueValue(entity, style));
}
if (mode === 'ClassBreaks') {
entity.setStyle(ClassBreaks(entity, style));
}
} else if (style.style) {
entity.setStyle(style.style);
} else {
entity.setStyle(Simple(_objectSpread({}, style)));
}
} else if ((0, _lodash.isString)(style)) {
// 如果为字符串，判断为内部图标
var image = getImage({
icon: style
});
entity.setStyle({
image: image
});
}
};
//# sourceMappingURL=index.js.map