@wayz/react-gl
Version:
React Component for DeckGL, Base on AMap, Mapbox GL
163 lines (162 loc) • 8.06 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 __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { PolygonLayer } from '@deck.gl/layers';
import { CompositeLayer } from '@deck.gl/core';
import { polygon } from '@turf/helpers';
import centerOfMass from '@turf/center-of-mass';
import TextmapLayer from '../textmap-layer/textmap-layer';
var defaultProps = __assign(__assign({}, PolygonLayer.defaultProps), {
// Label for each feature
getLabel: { type: 'accessor', value: function (x) { return x.text; } },
// Label size for each feature
getLabelSize: { type: 'accessor', value: 32 },
// Label color for each feature
getLabelColor: { type: 'accessor', value: [0, 0, 0, 255] },
// Whether to render background for the text blocks
background: false,
// Label background color
getLabelBackground: { type: 'accessor', value: [255, 255, 255, 255] },
// Label not facing the camera
billboard: true,
// Label size units
labelSizeUnits: 'pixels',
// Label font
fontFamily: 'Monaco, monospace' });
var LabeledPolygonLayer = /** @class */ (function (_super) {
__extends(LabeledPolygonLayer, _super);
function LabeledPolygonLayer() {
return _super !== null && _super.apply(this, arguments) || this;
}
LabeledPolygonLayer.prototype.updateState = function (_a) {
var _this = this;
var changeFlags = _a.changeFlags;
var data = this.props.data;
if (changeFlags.dataChanged && data) {
var characterSet_1 = new Set();
var labelData = data.flatMap(function (f, index) {
_this.setCharacterSet(f, characterSet_1);
var labelAnchors = _this.getLabelAnchors(f);
return labelAnchors.map(function (p) { return _this.getSubLayerRow({ position: p }, f, index); });
});
this.setState({ labelData: labelData, characterSet: characterSet_1 });
}
};
// get center mass
LabeledPolygonLayer.prototype.getLabelAnchors = function (f) {
var getPolygon = this.props.getPolygon;
getPolygon = getPolygon ? getPolygon : function (f) { return f.polygon; };
var pl = getPolygon(f);
return [centerOfMass(polygon(pl)).geometry.coordinates];
};
// set characterSet
LabeledPolygonLayer.prototype.setCharacterSet = function (f, characterSet) {
var getLabel = this.props.getLabel;
getLabel = getLabel ? getLabel : function (f) { return f.text; };
getLabel(f)
.split('')
.forEach(function (s) { return characterSet.add(s); });
};
LabeledPolygonLayer.prototype.renderLayers = function () {
// Layer prop
var data = this.props.data;
// Rendering props underlying layer
var _a = this.props, elevationScale = _a.elevationScale, extruded = _a.extruded, wireframe = _a.wireframe, filled = _a.filled, stroked = _a.stroked, lineWidthUnits = _a.lineWidthUnits, lineWidthScale = _a.lineWidthScale, lineWidthMinPixels = _a.lineWidthMinPixels, lineWidthMaxPixels = _a.lineWidthMaxPixels, lineJointRounded = _a.lineJointRounded, lineMiterLimit = _a.lineMiterLimit, getPolygon = _a.getPolygon, getPolygonOffset = _a.getPolygonOffset, getElevation = _a.getElevation, getFillColor = _a.getFillColor, getLineColor = _a.getLineColor, getLineWidth = _a.getLineWidth,
//@ts-ignore
lineDashJustified = _a.lineDashJustified,
//@ts-ignore
getLineDashArray = _a.getLineDashArray;
var _b = this.props, fontFamily = _b.fontFamily, billboard = _b.billboard, labelSizeUnits = _b.labelSizeUnits, background = _b.background, characterSet = _b.characterSet, getLabel = _b.getLabel, getLabelColor = _b.getLabelColor, getLabelSize = _b.getLabelSize, getLabelBackground = _b.getLabelBackground;
// Accessor props for underlying layers
var _c = this.props, updateTriggers = _c.updateTriggers, material = _c.material;
// Filled Polygon Layer
var CellLayer = this.getSubLayerClass('labeled-cell', PolygonLayer);
return [
new CellLayer({
filled: filled,
wireframe: wireframe,
extruded: extruded,
elevationScale: elevationScale,
stroked: stroked,
lineWidthUnits: lineWidthUnits,
lineWidthScale: lineWidthScale,
lineWidthMinPixels: lineWidthMinPixels,
lineWidthMaxPixels: lineWidthMaxPixels,
lineJointRounded: lineJointRounded,
lineMiterLimit: lineMiterLimit,
lineDashJustified: lineDashJustified,
material: material,
getPolygon: getPolygon,
getPolygonOffset: getPolygonOffset,
getElevation: getElevation,
getFillColor: getFillColor,
getLineColor: getLineColor,
getLineWidth: getLineWidth,
getLineDashArray: getLineDashArray,
}, this.getSubLayerProps({
id: 'labeled-cell',
updateTriggers: {
getPolygon: updateTriggers.getPolygon,
getPolygonOffset: updateTriggers.getPolygonOffset,
getElevation: updateTriggers.getElevation,
getFillColor: updateTriggers.getFillColor,
getLineColor: updateTriggers.getLineColor,
getLineWidth: updateTriggers.getLineWidth,
getLineDashArray: updateTriggers.getLineDashArray,
},
}), {
data: data,
}),
new TextmapLayer({
data: this.state.labelData,
characterSet: characterSet ? characterSet : this.state.characterSet,
sizeUnits: labelSizeUnits,
background: background,
fontFamily: fontFamily,
billboard: billboard,
}, this.getSubLayerProps({
id: 'textamap',
updateTriggers: {
getPosition: updateTriggers.getPosition,
getText: updateTriggers.getLabel,
getSize: updateTriggers.getLabelSize,
getColor: updateTriggers.getLabelColor,
getBackgroundColor: updateTriggers.getLabelBackground,
},
}), {
getPosition: function (d) { return d.position; },
getText: this.getSubLayerAccessor(getLabel),
getSize: this.getSubLayerAccessor(getLabelSize),
getColor: this.getSubLayerAccessor(getLabelColor),
getBackgroundColor: this.getSubLayerAccessor(getLabelBackground),
}),
];
};
return LabeledPolygonLayer;
}(CompositeLayer));
LabeledPolygonLayer.layerName = 'LabeledPolygonLayer';
LabeledPolygonLayer.defaultProps = defaultProps;
export default LabeledPolygonLayer;