@wayz/react-gl
Version:
React Component for DeckGL, Base on AMap, Mapbox GL
98 lines (97 loc) • 4.23 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { CompositeLayer } from '@deck.gl/core';
import { IconLayer } from '@deck.gl/layers';
import Supercluster from 'supercluster';
var IconClusterLayer = /** @class */ (function (_super) {
__extends(IconClusterLayer, _super);
function IconClusterLayer() {
return _super !== null && _super.apply(this, arguments) || this;
}
IconClusterLayer.prototype.shouldUpdateState = function (_a) {
var changeFlags = _a.changeFlags;
return changeFlags.somethingChanged;
};
IconClusterLayer.prototype.updateState = function (_a) {
var _this = this;
var _b;
var props = _a.props, oldProps = _a.oldProps, changeFlags = _a.changeFlags;
var rebuildIndex = changeFlags.dataChanged || props.sizeScale !== oldProps.sizeScale;
if (rebuildIndex) {
var index = new Supercluster({
maxZoom: 20,
radius: ((_b = props.sizeScale) !== null && _b !== void 0 ? _b : 1) * Math.sqrt(2),
});
index.load(props.data.map(function (d) {
var _a;
return ({
geometry: { coordinates: (_a = props.getPosition) === null || _a === void 0 ? void 0 : _a.call(props, d) },
properties: d,
});
}));
this.setState({ index: index });
}
var z = Math.floor(this.context.viewport.zoom);
if (rebuildIndex || z !== this.state.z) {
this.setState({
data: this.state.index.getClusters([-180, -85, 180, 85], z).map(function (object) {
if (object.properties.cluster) {
object.objects = _this.state.index
.getLeaves(object.properties.cluster_id, 25)
.map(function (f) { return f.properties; });
}
return object;
}),
z: z,
});
}
};
IconClusterLayer.prototype.getPickingInfo = function (_a) {
var info = _a.info, mode = _a.mode;
var pickedObject = info.object && info.object.properties;
if (pickedObject) {
if (pickedObject.cluster && mode !== 'hover') {
info.objects = this.state.index
.getLeaves(pickedObject.cluster_id, 25)
.map(function (f) { return f.properties; });
}
info.object = pickedObject;
}
return info;
};
IconClusterLayer.prototype.renderLayers = function () {
var data = this.state.data;
var updateTriggers = this.props.updateTriggers;
var IconClusterLayer = this.getSubLayerClass('cluster', IconLayer);
return new IconClusterLayer(this.props, this.getSubLayerProps({
id: 'cluster',
updateTriggers: {
getIcon: updateTriggers.getIcon,
getPosition: updateTriggers.getPosition,
getColor: updateTriggers.getColor,
getAngle: updateTriggers.getAngle,
getPixelOffset: updateTriggers.getPixelOffset,
getSize: updateTriggers.getSize,
},
}), {
data: data,
getPosition: function (d) { return d.geometry.coordinates; },
});
};
return IconClusterLayer;
}(CompositeLayer));
IconClusterLayer.layerName = 'IconClusterLayer';
export default IconClusterLayer;