@wayz/react-gl
Version:
React Component for DeckGL, Base on AMap, Mapbox GL
212 lines (211 loc) • 8.99 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 { TextLayer } from '@deck.gl/layers';
import TextMapWrapper from './textmap-wrapper';
var MAX_CACHED_ZOOM_LEVEL = 5;
var defaultProps = {
getWeight: { type: 'accessor', value: function (x) { return x.weight || 1; } },
minFontSize: 14,
maxFontSize: 32,
weightThreshold: 1,
};
var TextmapLayer = /** @class */ (function (_super) {
__extends(TextmapLayer, _super);
function TextmapLayer() {
return _super !== null && _super.apply(this, arguments) || this;
}
TextmapLayer.prototype.initializeState = function () {
this.state = {
// Cached tags per zoom level
tagsCache: {},
tags: [],
};
};
TextmapLayer.prototype.shouldUpdateState = function (_a) {
var changeFlags = _a.changeFlags;
return changeFlags.somethingChanged;
};
TextmapLayer.prototype.updateState = function (_a) {
var props = _a.props, oldProps = _a.oldProps, changeFlags = _a.changeFlags;
_super.prototype.updateState.call(this, { props: props, oldProps: oldProps, changeFlags: changeFlags });
var needsUpdate = changeFlags.viewportChanged;
if (changeFlags.dataChanged) {
this.updateTagMapData();
needsUpdate = true;
}
else if (props.minFontSize !== oldProps.minFontSize ||
props.maxFontSize !== oldProps.maxFontSize ||
props.weightThreshold !== oldProps.weightThreshold) {
this.setState({ tagsCache: {} });
needsUpdate = true;
}
if (needsUpdate) {
this.updateTagMapVis();
}
};
TextmapLayer.prototype.updateTagMapData = function () {
var _a = this.props, data = _a.data, getText = _a.getText, getPosition = _a.getPosition, getWeight = _a.getWeight;
var tagMap = new TextMapWrapper();
tagMap.setData(data, { getLabel: getText, getPosition: getPosition, getWeight: getWeight });
this.setState({ tagMap: tagMap, tagsCache: {} });
};
TextmapLayer.prototype.updateTagMapVis = function () {
var _this = this;
var _a = this.state, tagMap = _a.tagMap, tagsCache = _a.tagsCache;
if (!tagMap) {
return;
}
var viewport = this.context.viewport;
var discreteZoomLevel = Math.floor(viewport.zoom);
var tags = tagsCache[discreteZoomLevel];
if (tags) {
this.setState(tags);
return;
}
var _b = this.props, minFontSize = _b.minFontSize, maxFontSize = _b.maxFontSize, weightThreshold = _b.weightThreshold;
var bbox = null;
if (discreteZoomLevel > MAX_CACHED_ZOOM_LEVEL) {
var unproject = viewport.unproject, width = viewport.width, height = viewport.height;
var corners = [
unproject([0, 0]),
unproject([width, 0]),
unproject([0, height]),
unproject([width, height]),
];
bbox = {
minX: Math.min.apply(null, corners.map(function (p) { return p[0]; })),
minY: Math.min.apply(null, corners.map(function (p) { return p[1]; })),
maxX: Math.max.apply(null, corners.map(function (p) { return p[0]; })),
maxY: Math.max.apply(null, corners.map(function (p) { return p[1]; })),
};
}
tags = tagMap.getTags({
bbox: bbox,
minFontSize: minFontSize,
maxFontSize: maxFontSize,
weightThreshold: weightThreshold,
zoom: discreteZoomLevel,
});
var characterSet = new Set();
// 转化tags为输入的初始数据
var data = tags.map(function (tag) {
_this.setCharacterSet(tag.originValue, characterSet);
return Object.assign({}, tag.originValue, { position: tag.position });
});
if (discreteZoomLevel <= MAX_CACHED_ZOOM_LEVEL) {
tagsCache[discreteZoomLevel] = { tags: tags, data: data, characterSet: characterSet };
}
this.setState({ tags: tags, data: data, characterSet: characterSet });
};
// 设置characterSet
TextmapLayer.prototype.setCharacterSet = function (f, characterSet) {
var getText = this.props.getText;
getText = getText ? getText : function (f) { return f.text; };
getText(f)
.split('')
.forEach(function (s) { return characterSet.add(s); });
};
TextmapLayer.prototype.renderLayers = function () {
var _a = this.props, updateTriggers = _a.updateTriggers, characterSet = _a.characterSet;
// const {
// sizeScale,
// sizeUnits,
// sizeMinPixels,
// sizeMaxPixels,
// billboard,
// // @ts-expect-error
// background,
// // @ts-expect-error
// backgroundPadding,
// fontFamily,
// characterSet,
// fontWeight,
// lineHeight,
// fontSettings,
// wordBreak,
// maxWidth,
// // @ts-expect-error
// outlineWidth,
// // @ts-expect-error
// outlineColor,
// } = this.props
var _b = this.props,
//Data Accessors
getText = _b.getText, getSize = _b.getSize, getColor = _b.getColor,
// getAngle,
//Text Alignment Options
// getTextAnchor,
// getAlignmentBaseline,
// getPixelOffset,
getBackgroundColor = _b.getBackgroundColor, getBorderColor = _b.getBorderColor, getBorderWidth = _b.getBorderWidth;
var TextMapLayer = this.getSubLayerClass('textmap', TextLayer);
return [
new TextMapLayer(
// {
// sizeScale,
// sizeUnits,
// sizeMinPixels,
// sizeMaxPixels,
// billboard,
// background,
// backgroundPadding,
// fontFamily,
// fontWeight,
// lineHeight,
// fontSettings,
// wordBreak,
// maxWidth,
// outlineWidth,
// outlineColor,
// },
this.props, this.getSubLayerProps({
id: 'textmap',
updateTriggers: {
getText: updateTriggers.getText,
getPosition: updateTriggers.getPosition,
getSize: updateTriggers.getSize,
getColor: updateTriggers.getColor,
getAngle: updateTriggers.getAngle,
getTextAnchor: updateTriggers.getTextAnchor,
getAlignmentBaseline: updateTriggers.getAlignmentBaseline,
getPixelOffset: updateTriggers.getPixelOffset,
getBackgroundColor: updateTriggers.getBackgroundColor,
getBorderColor: updateTriggers.getBorderColor,
getBorderWidth: updateTriggers.getBorderWidth,
},
}), {
data: this.state.data,
characterSet: characterSet ? characterSet : this.state.characterSet,
getPosition: function (x) { return x.position; },
getText: this.getSubLayerAccessor(getText),
getSize: this.getSubLayerAccessor(getSize),
getColor: this.getSubLayerAccessor(getColor),
// getAngle: this.getSubLayerAccessor(getAngle),
// getTextAnchor: this.getSubLayerAccessor(getTextAnchor),
// getAlignmentBaseline: this.getSubLayerAccessor(getAlignmentBaseline),
// getPixelOffset: this.getSubLayerAccessor(getPixelOffset),
getBackgroundColor: this.getSubLayerAccessor(getBackgroundColor),
getBorderColor: this.getSubLayerAccessor(getBorderColor),
getBorderWidth: this.getSubLayerAccessor(getBorderWidth),
}),
];
};
return TextmapLayer;
}(CompositeLayer));
TextmapLayer.layerName = 'TextmapLayer';
TextmapLayer.defaultProps = defaultProps;
export default TextmapLayer;