@vtx/cs-map
Version:
React components for Vortex
712 lines (653 loc) • 27.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _cesium = require("cesium");
var _createFeatureCollection = require("./createFeatureCollection");
var _Label = _interopRequireDefault(require("../label/Label"));
var _Marker = _interopRequireDefault(require("../marker/Marker"));
var _Polyline = _interopRequireDefault(require("../polyline/Polyline"));
var _Polygon = _interopRequireDefault(require("../polygon/Polygon"));
var _renderer = require("../renderer");
var _isObject = _interopRequireDefault(require("../_util/isObject"));
var _isFunction = _interopRequireDefault(require("../_util/isFunction"));
var _layer = require("../_util/layer");
var _encryptParams = _interopRequireDefault(require("../_util/encryptParams"));
var _customClusterStyle = _interopRequireDefault(require("./customClusterStyle"));
var _transformRgb = _interopRequireDefault(require("../_util/transformRgb"));
var _excluded = ["icon", "iconSrc", "type"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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; }
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 _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); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _superPropSet(t, e, o, r, p, f) { return _set(_getPrototypeOf(f ? t.prototype : t), e, o, r, p); }
function set(e, r, t, o) { return set = "undefined" != typeof Reflect && Reflect.set ? Reflect.set : function (e, r, t, o) { var f, i = _superPropBase(e, r); if (i) { if ((f = Object.getOwnPropertyDescriptor(i, r)).set) return f.set.call(o, t), !0; if (!f.writable) return !1; } if (f = Object.getOwnPropertyDescriptor(o, r)) { if (!f.writable) return !1; f.value = t, Object.defineProperty(o, r, f); } else _defineProperty(o, r, t); return !0; }, set(e, r, t, o); }
function _set(e, r, t, o, f) { if (!set(e, r, t, o || e) && f) throw new TypeError("failed to set property"); return t; }
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 _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
var P = {
Label: _Label["default"],
Point: _Marker["default"],
Marker: _Marker["default"],
Polyline: _Polyline["default"],
Polygon: _Polygon["default"],
LineString: _Polyline["default"],
MultiLineString: _Polyline["default"]
};
var createFeature = function createFeature(v) {
var geometry = v.geometry,
label = v.label;
var type = geometry.type,
coordinates = geometry.coordinates;
if (P[type]) {
return new P[type]({
geometry: coordinates,
properties: v,
label: label
});
}
};
var FeatureLayer = /*#__PURE__*/function (_CustomDataSource) {
function FeatureLayer(opt_options) {
var _this2;
_classCallCheck(this, FeatureLayer);
var options = opt_options || {};
var url = options.url,
params = options.params,
data = options.data,
key = options.key,
name = options.name,
dataField = options.dataField,
label = options.label,
labelField = options.labelField,
template = options.template,
autoRefresh = options.autoRefresh,
method = options.method,
renderMode = options.renderMode,
style = options.style,
markerStyle = options.markerStyle,
_options$show = options.show,
show = _options$show === void 0 ? true : _options$show,
_options$layerControl = options.layerControl,
layerControl = _options$layerControl === void 0 ? true : _options$layerControl,
afterGetData = options.afterGetData,
viewOnly = options.viewOnly,
legend = options.legend,
group = options.group,
map = options.map,
cluster = options.cluster,
zIndex = options.zIndex,
cancelPopup = options.cancelPopup,
encrypt = options.encrypt,
tipTemplate = options.tipTemplate;
var defaultShow = show;
if (group !== null && group !== void 0 && group.length) {
defaultShow = false;
if (!show) {
group.map(function (f) {
f.show = false;
});
} else {
group.map(function (f) {
var _f$show;
f.show = (_f$show = f.show) !== null && _f$show !== void 0 ? _f$show : true;
if (f.show) {
defaultShow = true;
}
});
}
}
_this2 = _callSuper(this, FeatureLayer, [options]);
// 参数
_this2._options = opt_options;
_superPropSet((_this2, FeatureLayer), "show", show, _this2, 1, 1);
// 接口地址
_this2.url = url;
// 接口地址请求类型
_this2.method = method;
// 接口查询参数
_this2.params = params;
// 图层标识
_this2.key = key;
// 图层名称
_this2.name = name;
// 渲染
_this2.style = style;
//marker样式
_this2.markerStyle = markerStyle;
// 标签
_this2.label = label;
// 标签字段
_this2.labelField = labelField;
// 自动刷新标识
_this2.autoRefresh = autoRefresh;
// 模版内容
_this2.template = template;
// 渲染模式
_this2.renderMode = renderMode || 'marker';
// 图例
_this2.legend = legend;
// 过滤
_this2.group = group;
// 地图
_this2.map = map;
// 图层控制
_this2.layerControl = layerControl;
// 聚合
_this2.cluster = cluster;
// 层级
_this2.zIndex = zIndex;
// 数据
_this2.data = data;
// 数据取值字段
_this2.dataField = dataField || 'geometryInfo';
// 处理获取的数据
_this2.afterGetData = afterGetData;
// 是否初始化
_this2.inited = false;
// 取消气泡
_this2.cancelPopup = cancelPopup;
// 加密
_this2.encrypt = encrypt;
// 气泡模板
_this2.tipTemplate = tipTemplate;
// 仅展示
_this2.viewOnly = viewOnly;
// 默认是否展示
if (defaultShow) {
_this2.init();
}
return _this2;
}
// 重写父类的属性访问器
_inherits(FeatureLayer, _CustomDataSource);
return _createClass(FeatureLayer, [{
key: "show",
get: function get() {
return _superPropGet(FeatureLayer, "show", this, 1);
},
set: function set(value) {
this.setVisible(value);
}
}, {
key: "label",
set: function set(val) {
this._options.label = val;
this.setStyle();
}
// 初始化数据
}, {
key: "init",
value: function init() {
// 是否存在地址
if (this.url) {
// 执行
this.loadUrlData(this.url, this.params, this.method);
}
// 直接加载数据
if (this.data) {
// 执行
this.loadData(this.data);
}
this.inited = true;
}
// 获取地图
}, {
key: "getMap",
value: function getMap() {
return this.map;
}
// 根据条件获取图形数据
}, {
key: "getFeatureByFieldValue",
value: function getFeatureByFieldValue(field, value) {
return this.getFeatures().find(function (v) {
var _v$properties;
return String(v === null || v === void 0 || (_v$properties = v.properties) === null || _v$properties === void 0 || (_v$properties = _v$properties[field]) === null || _v$properties === void 0 ? void 0 : _v$properties._value) === String(value);
});
}
// 获取当前图层的所有图形
}, {
key: "getFeatures",
value: function getFeatures() {
return this.entities.values;
}
// 根据条件获取图形数据,用于地图搜索
}, {
key: "getFeaturesBySearch",
value: function getFeaturesBySearch(field, value) {
return (0, _layer.getVectorFeatureInfoByText)(this, field, value);
}
// 设置图层显示隐藏
}, {
key: "setVisible",
value: function setVisible(visible) {
_superPropSet(FeatureLayer, "show", visible, this, 1, 1); // 将属性传递给父类
var map = this.getMap && this.getMap();
if (map) {
map.layers.emit('visible', this, visible);
}
// 判断是否完成过初始化,没有的话就加载一波数据
if (!this.inited) {
this.init();
}
}
// 设置过滤条件
}, {
key: "setGroup",
value: function setGroup(group) {
var map = this.getMap && this.getMap();
if (group !== null && group !== void 0 && group.length) {
var features = this.getFeatures();
if (features !== null && features !== void 0 && features.length) {
features.map(function (feature) {
var show = false;
group.map(function (v) {
if (!v.hasOwnProperty('show') || v.show) {
var properties = map.getProperties(feature);
if (v.filter(properties)) {
show = true;
}
}
});
feature.show = show;
});
}
this.group = group;
this.setVisibleByGroup();
}
}
// 根据过滤条件组显示图层
}, {
key: "setVisibleByGroup",
value: function setVisibleByGroup() {
var group = this.group;
if (group !== null && group !== void 0 && group.length) {
var visible = false;
group.map(function (v) {
if (!v.hasOwnProperty('show') || v.show) {
visible = true;
}
});
this.setVisible(visible);
}
}
// 设置渲染模式
}, {
key: "setRenderMode",
value: function setRenderMode(renderMode) {
this.hideClustering();
// 展示聚合时设置样式为 marker 并且开启聚合监听
if (renderMode === 'clustering') {
this.renderMode = 'marker';
this.setStyle();
this.showClustering();
} else {
this.renderMode = renderMode;
this.setStyle();
}
}
// 自动刷新
}, {
key: "refresh",
value: function refresh() {
var params = this.params;
if (this.encrypt) {
params = (0, _encryptParams["default"])(params, this.encrypt);
}
(0, _createFeatureCollection.getDataByHttpByParams)({
url: this.url,
params: params,
method: this.method,
afterGetData: this.afterGetData,
field: this.dataField
}).then(function (res) {
var _res$features;
if (res !== null && res !== void 0 && (_res$features = res.features) !== null && _res$features !== void 0 && _res$features.length) {}
});
}
// 加载数据
}, {
key: "loadData",
value: function loadData(data) {
this.entities.removeAll();
var geoJsonData = (0, _createFeatureCollection.createFeatureCollection)(Array.isArray(data) ? data : [data], this.dataField);
this.render(geoJsonData);
}
// 加载接口数据
}, {
key: "loadUrlData",
value: function loadUrlData(url, params, method) {
var _this3 = this;
var afterGetData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.afterGetData;
this.entities.removeAll();
if (this.encrypt) {
params = (0, _encryptParams["default"])(params, this.encrypt);
}
(0, _createFeatureCollection.getDataByHttpByParams)({
url: url,
params: params,
method: method,
afterGetData: afterGetData,
field: this.dataField
}).then(function (res) {
var _res$features2;
if (res !== null && res !== void 0 && (_res$features2 = res.features) !== null && _res$features2 !== void 0 && _res$features2.length) {
_this3.render(res);
}
});
}
// 加载图形数据
}, {
key: "loadFeatures",
value: function loadFeatures(features) {
this.entities.removeAll();
this.entities.addFeatures(features);
}
// 渲染
}, {
key: "render",
value: function render(geoJsonData) {
this.geoJsonData = geoJsonData;
if (geoJsonData) {
if (this.renderMode === 'marker') {
this.setStyle();
} else {
this.setRenderMode(this.renderMode);
}
}
}
}, {
key: "getLabelStyle",
value: function getLabelStyle(v) {
var label = this._options.label;
if (label) {
if ((0, _isFunction["default"])(label)) {
return label(v);
}
var labelOptions = _typeof(label) === 'object' ? label : {};
return _objectSpread({
text: v.properties[labelOptions.labelField || this.labelField],
size: 12,
color: '#FFF',
background: 'rgb(0,128,255)',
pixelOffset: {
x: 0,
y: 10
}
}, labelOptions);
}
return null;
}
// 设置样式
}, {
key: "setStyle",
value: function setStyle() {
var _this4 = this;
this.entities.removeAll();
var _ref = this.geoJsonData || {},
features = _ref.features;
var group = this.group;
if (features !== null && features !== void 0 && features.length) {
features.map(function (v) {
var entity = createFeature(_objectSpread(_objectSpread({}, v), {}, {
label: _this4.getLabelStyle(v)
}));
if (entity) {
var _this4$group;
var show = true;
var style = _this4.style;
// 针对过滤时的处理
if ((_this4$group = _this4.group) !== null && _this4$group !== void 0 && _this4$group.length) {
show = false;
group.map(function (f) {
if (f.filter(v.properties)) {
style = f.style;
if (!f.hasOwnProperty('show') || f.show) {
show = true;
}
}
});
}
if (_this4.renderMode === 'marker') {
(0, _renderer.setRenderer)(entity, style);
if (style) {
var _style = style;
if ((0, _isFunction["default"])(style)) {
_style = style(entity);
}
if (_style.type === 'Marker' && _style.style) {
var _style$style = _style.style,
image = _style$style.image,
imageType = _style$style.imageType,
imageKey = _style$style.imageKey,
color = _style$style.color;
if (image && imageType) {
if (imageType === 'gif') {
entity.setGifImage(image, imageKey);
}
}
if (color && entity.label && typeof _this4._options.label === 'boolean') {
entity.label.backgroundColor._value = _cesium.Color.fromCssColorString((0, _transformRgb["default"])(color, 0.6));
}
}
}
} else if (_this4.renderMode === 'point') {
(0, _renderer.setRenderer)(entity, {
type: 'Marker',
style: _objectSpread({
type: 'PointIcon',
size: 15
}, (0, _isObject["default"])(_this4.markerStyle) ? _this4.markerStyle : {})
});
}
entity.show = show;
entity.type = _this4.modalType || _this4.key;
entity.key = _this4.key;
entity.properties = v.properties || {};
_this4.entities.add(entity);
}
});
}
}
// 展示聚合
}, {
key: "showClustering",
value: function showClustering() {
var _this$cluster,
_this$cluster2,
_this5 = this;
// 是否聚合
this.customStyle();
// 聚合点的判定范围(像素单位)
this.clustering.pixelRange = ((_this$cluster = this.cluster) === null || _this$cluster === void 0 ? void 0 : _this$cluster.pixelRange) || 100;
// 最小簇大小
this.clustering.minimumClusterSize = ((_this$cluster2 = this.cluster) === null || _this$cluster2 === void 0 ? void 0 : _this$cluster2.minimumClusterSize) || 2;
// 默认关闭,延时开启,避免一开始不生效
this.clustering.enabled = false;
setTimeout(function () {
var _this5$cluster;
// 解决一开始不聚合的问题
_this5.clustering.pixelRange = 0;
_this5.clustering.pixelRange = ((_this5$cluster = _this5.cluster) === null || _this5$cluster === void 0 ? void 0 : _this5$cluster.pixelRange) || 100;
_this5.clustering.enabled = true;
}, 50);
// 高度监听
this.heightListerHeight();
}
}, {
key: "heightListerHeight",
value: function heightListerHeight() {
if ((0, _cesium.defined)(this.removeListenerHeight) && this.removeListenerHeight) {
this.removeListenerHeight();
this.removeListenerHeight = undefined;
}
var viewer = this.map;
var _this = this;
// 监听scene的postRender事件
this.removeListenerHeight = viewer.scene.postRender.addEventListener(function () {
// 获取当前的相机高度
var currentCameraHeight = viewer.camera.positionCartographic.height;
_this.clustering.enabled = true;
if (_this.cluster && _this.cluster.height) {
var height = _this.cluster.height;
if (currentCameraHeight <= height) {
_this.clustering.enabled = false;
}
} else if (currentCameraHeight <= (viewer.fitViewHeight || 5000) + 1000) {
// 当高度小于阈值时禁用聚合
_this.clustering.enabled = false;
}
});
}
// 隐藏聚合
}, {
key: "hideClustering",
value: function hideClustering() {
this.clustering.enabled = false;
if ((0, _cesium.defined)(this.removeListener) && this.removeListener) {
this.removeListener();
this.removeListener = undefined;
}
if ((0, _cesium.defined)(this.removeListenerHeight) && this.removeListenerHeight) {
this.removeListenerHeight();
this.removeListenerHeight = undefined;
}
}
// 自定义样式
}, {
key: "customStyle",
value: function customStyle() {
var _this = this;
if ((0, _cesium.defined)(this.removeListener) && this.removeListener) {
this.removeListener();
this.removeListener = undefined;
}
this.removeListener = this.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
cluster.label.show = false;
cluster.billboard.show = true;
cluster.billboard.id = cluster.label.id;
cluster.billboard.verticalOrigin = _cesium.VerticalOrigin.BOTTOM;
cluster.billboard.heightReference = _cesium.HeightReference.CLAMP_TO_GROUND;
cluster.billboard.horizontalOrigin = _cesium.HorizontalOrigin.CENTER;
var text = clusteredEntities.length;
if (_this.cluster) {
var style = _this.cluster.style;
var image,
scale = 1;
if ((0, _isFunction["default"])(style)) {
image = style(clusteredEntities);
} else if ((0, _isObject["default"])(style)) {
var icon = style.icon,
iconSrc = style.iconSrc,
type = style.type,
otherStyle = _objectWithoutProperties(style, _excluded);
if (iconSrc) {
image = (0, _customClusterStyle["default"])(iconSrc, _objectSpread({
type: type,
text: text
}, otherStyle));
} else {
image = (0, _renderer.getImgUrl)(type || 'CommonIcon2', _objectSpread({
canvasIcon: icon,
color: 'rgb(0,128,255)',
hideFooter: true,
info: [{
text: text,
fontSize: 24
}]
}, otherStyle));
}
scale = style === null || style === void 0 ? void 0 : style.scale;
} else if (typeof style === 'string') {
image = (0, _renderer.getImgUrl)('CommonIcon2', {
canvasIcon: style,
color: 'rgb(0,128,255)',
hideFooter: true,
info: [{
text: text,
fontSize: 24
}]
});
}
cluster.billboard.image = image;
cluster.billboard.scale = scale || 1;
} else if ((0, _isObject["default"])(_this.style) || typeof _this.style === 'string') {
var _icon = _this.style,
_type = 'CommonIcon2';
if ((0, _isObject["default"])(_this.style) && _this.style.type === 'Marker') {
_icon = _this.style.style.icon || _icon;
_type = _this.style.style.type || _type;
}
var color = 'rgb(9,220,107)';
if (clusteredEntities.length >= 50) {
text = '50+';
color = 'rgb(220,33,9)';
} else if (clusteredEntities.length >= 40) {
text = '40+';
color = 'rgb(232,119,5)';
} else if (clusteredEntities.length >= 30) {
text = '30+';
color = 'rgb(232,194,4)';
} else if (clusteredEntities.length >= 20) {
text = '20+';
color = 'rgba(20, 232, 4, 1)';
} else if (clusteredEntities.length >= 10) {
text = '10+';
color = 'rgb(0,128,255)';
}
cluster.billboard.image = (0, _renderer.getImgUrl)(_type, {
canvasIcon: _icon,
color: color,
hideFooter: true,
info: [{
text: text,
fontSize: 24
}]
});
}
});
}
// 根据条件展示对应的视角
}, {
key: "fitViewByFilter",
value: function fitViewByFilter(filter) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _ref2 = this.geoJsonData || {},
features = _ref2.features;
if (features !== null && features !== void 0 && features.length) {
var geoJsonData = JSON.parse(JSON.stringify(this.geoJsonData));
if (filter) {
geoJsonData.features = features.filter(function (v) {
return filter(v.properties);
});
}
this.map.fitView({
geoJson: geoJsonData,
options: _objectSpread({
padding: [3000, 3000]
}, options)
});
}
}
}]);
}(_cesium.CustomDataSource);
var _default = exports["default"] = FeatureLayer;
//# sourceMappingURL=FeatureLayer.js.map