@wayz/react-gl
Version:
React Component for DeckGL, Base on AMap, Mapbox GL
136 lines (135 loc) • 6.24 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 { GeoJsonLayer } from '@deck.gl/layers';
import { CompositeLayer } from '@deck.gl/core';
import { polygon } from '@turf/helpers';
import centerOfMass from '@turf/center-of-mass';
import area from '@turf/area';
import TextmapLayer from '../textmap-layer/textmap-layer';
var defaultProps = __assign(__assign({}, GeoJsonLayer.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' });
// Extract anchor positions from features. We will be placing labels at these positions.
function getLabelAnchors(feature) {
var _a = feature.geometry, type = _a.type, coordinates = _a.coordinates;
switch (type) {
case 'Point':
return [coordinates];
case 'MultiPoint':
return coordinates;
case 'Polygon':
return [centerOfMass(feature).geometry.coordinates];
case 'MultiPolygon':
var polygons = coordinates.map(function (rings) { return polygon(rings); });
var areas_1 = polygons.map(area);
var maxArea_1 = Math.max.apply(null, areas_1);
// Filter out the areas that are too small
return polygons
.filter(function (f, index) { return areas_1[index] > maxArea_1 * 0.5; })
.map(function (f) { return centerOfMass(f).geometry.coordinates; });
default:
return [];
}
}
var LabeledGeoJsonLayer = /** @class */ (function (_super) {
__extends(LabeledGeoJsonLayer, _super);
function LabeledGeoJsonLayer() {
return _super !== null && _super.apply(this, arguments) || this;
}
LabeledGeoJsonLayer.prototype.updateState = function (_a) {
var _this = this;
var changeFlags = _a.changeFlags;
var data = this.props.data;
if (changeFlags.dataChanged && data) {
var labelData = (data.features || data).flatMap(function (feature, index) {
var labelAnchors = getLabelAnchors(feature);
return labelAnchors.map(function (p) { return _this.getSubLayerRow({ position: p }, feature, index); });
});
this.setState({ labelData: labelData });
}
};
// set characterSet
LabeledGeoJsonLayer.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); });
};
LabeledGeoJsonLayer.prototype.renderLayers = function () {
var data = this.props.data;
var _a = this.props, fontFamily = _a.fontFamily, billboard = _a.billboard, labelSizeUnits = _a.labelSizeUnits, background = _a.background, characterSet = _a.characterSet, getLabel = _a.getLabel, getLabelColor = _a.getLabelColor, getLabelSize = _a.getLabelSize, getLabelBackground = _a.getLabelBackground;
// Accessor props for underlying layers
var updateTriggers = this.props.updateTriggers;
return [
new GeoJsonLayer(this.props, this.getSubLayerProps({ id: 'labeled-geojson' }), {
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 LabeledGeoJsonLayer;
}(CompositeLayer));
LabeledGeoJsonLayer.layerName = 'LabeledGeoJsonLayer';
LabeledGeoJsonLayer.defaultProps = defaultProps;
export default LabeledGeoJsonLayer;