1 | "use strict";
|
2 | var __extends = (this && this.__extends) || (function () {
|
3 | var extendStatics = function (d, b) {
|
4 | extendStatics = Object.setPrototypeOf ||
|
5 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
7 | return extendStatics(d, b);
|
8 | }
|
9 | return function (d, b) {
|
10 | extendStatics(d, b);
|
11 | function __() { this.constructor = d; }
|
12 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
13 | };
|
14 | })();
|
15 | var __assign = (this && this.__assign) || function () {
|
16 | __assign = Object.assign || function(t) {
|
17 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
18 | s = arguments[i];
|
19 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
20 | t[p] = s[p];
|
21 | }
|
22 | return t;
|
23 | };
|
24 | return __assign.apply(this, arguments);
|
25 | };
|
26 | var __importStar = (this && this.__importStar) || function (mod) {
|
27 | if (mod && mod.__esModule) return mod;
|
28 | var result = {};
|
29 | if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
|
30 | result["default"] = mod;
|
31 | return result;
|
32 | };
|
33 | var __importDefault = (this && this.__importDefault) || function (mod) {
|
34 | return (mod && mod.__esModule) ? mod : { "default": mod };
|
35 | };
|
36 | Object.defineProperty(exports, "__esModule", { value: true });
|
37 | var React = __importStar(require("react"));
|
38 | var isEqual = require('deep-equal');
|
39 | var diff_1 = __importDefault(require("./util/diff"));
|
40 | var uid_1 = require("./util/uid");
|
41 | var context_1 = require("./context");
|
42 | var types = ['symbol', 'line', 'fill', 'fill-extrusion', 'circle'];
|
43 | var toCamelCase = function (str) {
|
44 | return str
|
45 | .replace(/(?:^\w|[A-Z]|\b\w)/g, function (letter, index) {
|
46 | return index === 0 ? letter.toLowerCase() : letter.toUpperCase();
|
47 | })
|
48 | .replace(/[\s+]|-/g, '');
|
49 | };
|
50 | var eventToHandler = {
|
51 | mousemove: 'OnMouseMove',
|
52 | mouseenter: 'OnMouseEnter',
|
53 | mouseleave: 'OnMouseLeave',
|
54 | mousedown: 'OnMouseDown',
|
55 | mouseup: 'OnMouseUp',
|
56 | click: 'OnClick'
|
57 | };
|
58 | var GeoJSONLayer = (function (_super) {
|
59 | __extends(GeoJSONLayer, _super);
|
60 | function GeoJSONLayer() {
|
61 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
62 | _this.id = _this.props.id || "geojson-" + uid_1.generateID();
|
63 | _this.source = __assign({ type: 'geojson' }, _this.props.sourceOptions, { data: _this.props.data });
|
64 | _this.layerIds = [];
|
65 | _this.buildLayerId = function (type) {
|
66 | return _this.id + "-" + type;
|
67 | };
|
68 | _this.createLayer = function (type) {
|
69 | var _a = _this.props, before = _a.before, layerOptions = _a.layerOptions, map = _a.map;
|
70 | var layerId = _this.buildLayerId(type);
|
71 | _this.layerIds.push(layerId);
|
72 | var paint = _this.props[toCamelCase(type) + "Paint"] || {};
|
73 | var visibility = Object.keys(paint).length ? 'visible' : 'none';
|
74 | var layout = _this.props[toCamelCase(type) + "Layout"] || {
|
75 | visibility: visibility
|
76 | };
|
77 | var layer = __assign({ id: layerId, source: _this.id, type: type, paint: paint, layout: layout }, layerOptions);
|
78 | map.addLayer(layer, before);
|
79 | _this.mapLayerMouseHandlers(type);
|
80 | };
|
81 | _this.mapLayerMouseHandlers = function (type) {
|
82 | var map = _this.props.map;
|
83 | var layerId = _this.buildLayerId(type);
|
84 | var events = Object.keys(eventToHandler);
|
85 | events.forEach(function (event) {
|
86 | var handler = _this.props["" + toCamelCase(type) + eventToHandler[event]] || null;
|
87 | if (handler) {
|
88 | map.on(event, layerId, handler);
|
89 | }
|
90 | });
|
91 | };
|
92 | _this.onStyleDataChange = function () {
|
93 | if (!_this.props.map.getSource(_this.id)) {
|
94 | _this.unbind();
|
95 | _this.initialize();
|
96 | _this.forceUpdate();
|
97 | }
|
98 | };
|
99 | _this.isGeoJSONSource = function (source) {
|
100 | return !!source &&
|
101 | typeof source.setData === 'function';
|
102 | };
|
103 | return _this;
|
104 | }
|
105 | GeoJSONLayer.prototype.initialize = function () {
|
106 | var map = this.props.map;
|
107 | map.addSource(this.id, this.source);
|
108 | this.createLayer('symbol');
|
109 | this.createLayer('line');
|
110 | this.createLayer('fill');
|
111 | this.createLayer('fill-extrusion');
|
112 | this.createLayer('circle');
|
113 | };
|
114 | GeoJSONLayer.prototype.unbind = function () {
|
115 | var _this = this;
|
116 | var map = this.props.map;
|
117 | if (map.getSource(this.id)) {
|
118 | var layers = map.getStyle().layers;
|
119 | if (layers) {
|
120 | layers
|
121 | .filter(function (layer) { return layer.source === _this.id; })
|
122 | .forEach(function (layer) { return map.removeLayer(layer.id); });
|
123 | }
|
124 | map.removeSource(this.id);
|
125 | }
|
126 | types.forEach(function (type) {
|
127 | var events = Object.keys(eventToHandler);
|
128 | events.forEach(function (event) {
|
129 | var prop = toCamelCase(type) + eventToHandler[event];
|
130 | if (_this.props[prop]) {
|
131 | map.off(event, _this.buildLayerId(type), _this.props[prop]);
|
132 | }
|
133 | });
|
134 | });
|
135 | this.layerIds.forEach(function (lId) {
|
136 | if (map.getLayer(lId)) {
|
137 | map.removeLayer(lId);
|
138 | }
|
139 | });
|
140 | };
|
141 | GeoJSONLayer.prototype.componentDidMount = function () {
|
142 | var map = this.props.map;
|
143 | this.initialize();
|
144 | map.on('styledata', this.onStyleDataChange);
|
145 | };
|
146 | GeoJSONLayer.prototype.componentWillUnmount = function () {
|
147 | var map = this.props.map;
|
148 | if (!map || !map.getStyle()) {
|
149 | return;
|
150 | }
|
151 | map.off('styledata', this.onStyleDataChange);
|
152 | this.unbind();
|
153 | };
|
154 | GeoJSONLayer.prototype.componentDidUpdate = function (prevProps) {
|
155 | var _this = this;
|
156 | var data = prevProps.data, before = prevProps.before, layerOptions = prevProps.layerOptions, map = prevProps.map;
|
157 | var source = map.getSource(this.id);
|
158 | if (!this.isGeoJSONSource(source)) {
|
159 | return;
|
160 | }
|
161 | if (this.props.data !== data) {
|
162 | source.setData(this.props.data);
|
163 | this.source = __assign({ type: 'geojson' }, this.props.sourceOptions, { data: this.props.data });
|
164 | }
|
165 | var layerFilterChanged = this.props.layerOptions &&
|
166 | layerOptions &&
|
167 | !isEqual(this.props.layerOptions.filter, layerOptions.filter);
|
168 | types.forEach(function (type) {
|
169 | var layerId = _this.buildLayerId(type);
|
170 | if (_this.props.layerOptions && layerFilterChanged) {
|
171 | map.setFilter(layerId, _this.props.layerOptions.filter || []);
|
172 | }
|
173 | var paintProp = toCamelCase(type) + 'Paint';
|
174 | if (!isEqual(prevProps[paintProp], _this.props[paintProp])) {
|
175 | var paintDiff_1 = diff_1.default(prevProps[paintProp], _this.props[paintProp]);
|
176 | Object.keys(paintDiff_1).forEach(function (key) {
|
177 | map.setPaintProperty(layerId, key, paintDiff_1[key]);
|
178 | });
|
179 | }
|
180 | var layoutProp = toCamelCase(type) + 'Layout';
|
181 | if (!isEqual(prevProps[layoutProp], _this.props[layoutProp])) {
|
182 | var layoutDiff_1 = diff_1.default(prevProps[layoutProp], _this.props[layoutProp]);
|
183 | Object.keys(layoutDiff_1).forEach(function (key) {
|
184 | map.setLayoutProperty(layerId, key, layoutDiff_1[key]);
|
185 | });
|
186 | }
|
187 | var events = Object.keys(eventToHandler);
|
188 | events.forEach(function (event) {
|
189 | var prop = toCamelCase(type) + eventToHandler[event];
|
190 | if (prevProps[prop] !== _this.props[prop]) {
|
191 | if (prevProps[prop]) {
|
192 | map.off(event, layerId, prevProps[prop]);
|
193 | }
|
194 | if (_this.props[prop]) {
|
195 | map.on(event, layerId, _this.props[prop]);
|
196 | }
|
197 | }
|
198 | });
|
199 | if (before !== _this.props.before) {
|
200 | map.moveLayer(layerId, _this.props.before);
|
201 | }
|
202 | });
|
203 | };
|
204 | GeoJSONLayer.prototype.render = function () {
|
205 | return null;
|
206 | };
|
207 | return GeoJSONLayer;
|
208 | }(React.Component));
|
209 | exports.GeoJSONLayer = GeoJSONLayer;
|
210 | exports.default = context_1.withMap(GeoJSONLayer);
|
211 |
|
\ | No newline at end of file |