venue-js 1.2.0-next.6 → 1.2.0-next.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +162 -13
- package/dist/index.d.ts +162 -13
- package/dist/index.js +417 -597
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +410 -595
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -49,6 +49,7 @@ __export(index_exports, {
|
|
|
49
49
|
MARKER_LAYER_NAME: () => MARKER_LAYER_NAME,
|
|
50
50
|
NONIMDF_FEATURE_TYPES: () => NONIMDF_FEATURE_TYPES,
|
|
51
51
|
ORIGIN_MARKER_ID: () => ORIGIN_MARKER_ID,
|
|
52
|
+
OccupantHelpers: () => occupant_helper_exports,
|
|
52
53
|
POI_MARKER_LAYER_NAME: () => POI_MARKER_LAYER_NAME,
|
|
53
54
|
QueryObserver: () => import_query_core2.QueryObserver,
|
|
54
55
|
USER_LOCATION_ELEMENT_ID: () => USER_LOCATION_ELEMENT_ID,
|
|
@@ -76,6 +77,16 @@ __export(index_exports, {
|
|
|
76
77
|
getRelatedLocationsByOccupant: () => getRelatedLocationsByOccupant,
|
|
77
78
|
getSuitablyValueBetweenBearings: () => getSuitablyValueBetweenBearings,
|
|
78
79
|
isClickableFeature: () => isClickableFeature,
|
|
80
|
+
isValidCoordinate: () => isValidCoordinate,
|
|
81
|
+
isValidLineString: () => isValidLineString,
|
|
82
|
+
isValidLineStringCoordinates: () => isValidLineStringCoordinates,
|
|
83
|
+
isValidMultiPolygon: () => isValidMultiPolygon,
|
|
84
|
+
isValidMultiPolygonCoordinates: () => isValidMultiPolygonCoordinates,
|
|
85
|
+
isValidPoint: () => isValidPoint,
|
|
86
|
+
isValidPolygon: () => isValidPolygon,
|
|
87
|
+
isValidPolygonCoordinates: () => isValidPolygonCoordinates,
|
|
88
|
+
matchFilter: () => matchFilter,
|
|
89
|
+
matchFilters: () => matchFilters,
|
|
79
90
|
safeFetchFeature: () => safeFetchFeature,
|
|
80
91
|
styledFeatureGenerator: () => styledFeatureGenerator
|
|
81
92
|
});
|
|
@@ -274,6 +285,115 @@ var safeFetchFeature = async (featureType, params) => {
|
|
|
274
285
|
}
|
|
275
286
|
};
|
|
276
287
|
|
|
288
|
+
// src/data/utils/geometry-validator.ts
|
|
289
|
+
var isValidCoordinate = (point2) => {
|
|
290
|
+
return point2.length === 2 && point2.every((coord) => typeof coord === "number");
|
|
291
|
+
};
|
|
292
|
+
function isValidLinearRingCoordinates(ring) {
|
|
293
|
+
if (ring.length < 4) {
|
|
294
|
+
return false;
|
|
295
|
+
}
|
|
296
|
+
return ring.every(isValidCoordinate) && ring[0][0] === ring[ring.length - 1][0] && ring[0][1] === ring[ring.length - 1][1];
|
|
297
|
+
}
|
|
298
|
+
var isValidPolygonCoordinates = (polygon) => {
|
|
299
|
+
if (Array.isArray(polygon[0]) && (polygon[0].length === 0 || typeof polygon[0][0] === "number")) {
|
|
300
|
+
return isValidLinearRingCoordinates(polygon);
|
|
301
|
+
}
|
|
302
|
+
if (Array.isArray(polygon) && polygon.length > 0 && Array.isArray(polygon[0])) {
|
|
303
|
+
if (!isValidLinearRingCoordinates(polygon[0])) {
|
|
304
|
+
return false;
|
|
305
|
+
}
|
|
306
|
+
for (let i = 1; i < polygon.length; i++) {
|
|
307
|
+
if (!isValidLinearRingCoordinates(polygon[i])) {
|
|
308
|
+
return false;
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
return true;
|
|
312
|
+
}
|
|
313
|
+
return false;
|
|
314
|
+
};
|
|
315
|
+
var isValidMultiPolygonCoordinates = (multipolygon) => {
|
|
316
|
+
return multipolygon.every(isValidPolygonCoordinates);
|
|
317
|
+
};
|
|
318
|
+
var isValidLineStringCoordinates = (lineString2) => {
|
|
319
|
+
if (!Array.isArray(lineString2) || lineString2.length < 2) {
|
|
320
|
+
return false;
|
|
321
|
+
}
|
|
322
|
+
const firstPoint = lineString2[0];
|
|
323
|
+
const lastPoint = lineString2[lineString2.length - 1];
|
|
324
|
+
if (firstPoint[0] === lastPoint[0] && firstPoint[1] === lastPoint[1]) {
|
|
325
|
+
return false;
|
|
326
|
+
}
|
|
327
|
+
return lineString2.every(isValidCoordinate);
|
|
328
|
+
};
|
|
329
|
+
var isValidMultiPolygon = (geometry) => {
|
|
330
|
+
const { type, coordinates } = geometry;
|
|
331
|
+
return type === "MultiPolygon" && isValidMultiPolygonCoordinates(coordinates);
|
|
332
|
+
};
|
|
333
|
+
var isValidPolygon = (geometry) => {
|
|
334
|
+
const { type, coordinates } = geometry;
|
|
335
|
+
return type === "Polygon" && isValidPolygonCoordinates(coordinates);
|
|
336
|
+
};
|
|
337
|
+
var isValidLineString = (geometry) => {
|
|
338
|
+
const { type, coordinates } = geometry;
|
|
339
|
+
return type === "LineString" && isValidLineStringCoordinates(coordinates);
|
|
340
|
+
};
|
|
341
|
+
var isValidPoint = (geometry) => {
|
|
342
|
+
const { type, coordinates } = geometry;
|
|
343
|
+
return type === "Point" && isValidCoordinate(coordinates);
|
|
344
|
+
};
|
|
345
|
+
|
|
346
|
+
// src/data/utils/match-filters.ts
|
|
347
|
+
function isInFilter(filter) {
|
|
348
|
+
return typeof filter === "object" && filter !== null && "$in" in filter && Array.isArray(filter.$in);
|
|
349
|
+
}
|
|
350
|
+
var someIntersect = (a, b) => a.some((v) => b.includes(v));
|
|
351
|
+
function matchFilter(value, filter) {
|
|
352
|
+
if (Array.isArray(value)) {
|
|
353
|
+
if (isInFilter(filter)) return someIntersect(value, filter.$in);
|
|
354
|
+
return value.includes(filter);
|
|
355
|
+
} else {
|
|
356
|
+
if (isInFilter(filter)) return filter.$in.includes(value);
|
|
357
|
+
return value === filter;
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
function matchFilters(item, filters) {
|
|
361
|
+
return Object.entries(filters).every(([key, filter]) => {
|
|
362
|
+
return matchFilter(item.properties[key], filter);
|
|
363
|
+
});
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
// src/data/utils/occupant-helper.ts
|
|
367
|
+
var occupant_helper_exports = {};
|
|
368
|
+
__export(occupant_helper_exports, {
|
|
369
|
+
getOccupantCorrelatedLocations: () => getOccupantCorrelatedLocations,
|
|
370
|
+
getOccupantMainLocation: () => getOccupantMainLocation,
|
|
371
|
+
getOccupantMarkerLocations: () => getOccupantMarkerLocations
|
|
372
|
+
});
|
|
373
|
+
var import_compact = __toESM(require("lodash/compact"));
|
|
374
|
+
var getOccupantMainLocation = (occupant) => {
|
|
375
|
+
return occupant.properties.kiosk || occupant.properties.unit;
|
|
376
|
+
};
|
|
377
|
+
var getOccupantCorrelatedLocations = (occupant) => {
|
|
378
|
+
const allCorrelatedLocations = [
|
|
379
|
+
...occupant.properties.units,
|
|
380
|
+
...occupant.properties.kiosks
|
|
381
|
+
];
|
|
382
|
+
return (0, import_compact.default)(allCorrelatedLocations);
|
|
383
|
+
};
|
|
384
|
+
var getOccupantMarkerLocations = (occupant, options) => {
|
|
385
|
+
const placementType = options?.type ? options.type : occupant.properties.show_name_on_all_units ? "ALL_LOCATIONS" : "ONCE_PER_LEVEL";
|
|
386
|
+
const mainLocation = getOccupantMainLocation(occupant);
|
|
387
|
+
const mainLocationLevel = mainLocation?.properties?.level_id;
|
|
388
|
+
const allCorrelatedLocations = getOccupantCorrelatedLocations(occupant);
|
|
389
|
+
if (placementType === "ALL_LOCATIONS") {
|
|
390
|
+
return (0, import_compact.default)([mainLocation, ...allCorrelatedLocations]);
|
|
391
|
+
}
|
|
392
|
+
const otherLevelLocations = allCorrelatedLocations.filter((f) => f.properties.level_id !== mainLocationLevel);
|
|
393
|
+
const onePerLevelLocations = [...new Map(otherLevelLocations.map((loc) => [loc.properties.level_id, loc])).values()];
|
|
394
|
+
return (0, import_compact.default)([mainLocation, ...onePerLevelLocations]);
|
|
395
|
+
};
|
|
396
|
+
|
|
277
397
|
// src/data/getDataClient.ts
|
|
278
398
|
var import_query_core = require("@tanstack/query-core");
|
|
279
399
|
|
|
@@ -429,8 +549,8 @@ var createPopulator = ({
|
|
|
429
549
|
venue,
|
|
430
550
|
promotions,
|
|
431
551
|
privileges,
|
|
432
|
-
kiosk,
|
|
433
|
-
unit,
|
|
552
|
+
kiosk: kiosk ? await populateKiosk(kiosk) : null,
|
|
553
|
+
unit: unit ? await populateUnit(unit) : null,
|
|
434
554
|
kiosks: await Promise.all(kiosks.map(populateKiosk)),
|
|
435
555
|
units: await Promise.all(units.map(populateUnit))
|
|
436
556
|
}
|
|
@@ -522,26 +642,6 @@ var createPopulator = ({
|
|
|
522
642
|
};
|
|
523
643
|
};
|
|
524
644
|
|
|
525
|
-
// src/data/utils/match-filters.ts
|
|
526
|
-
function isInFilter(filter) {
|
|
527
|
-
return typeof filter === "object" && filter !== null && "$in" in filter && Array.isArray(filter.$in);
|
|
528
|
-
}
|
|
529
|
-
var someIntersect = (a, b) => a.some((v) => b.includes(v));
|
|
530
|
-
function matchFilter(value, filter) {
|
|
531
|
-
if (Array.isArray(value)) {
|
|
532
|
-
if (isInFilter(filter)) return someIntersect(value, filter.$in);
|
|
533
|
-
return value.includes(filter);
|
|
534
|
-
} else {
|
|
535
|
-
if (isInFilter(filter)) return filter.$in.includes(value);
|
|
536
|
-
return value === filter;
|
|
537
|
-
}
|
|
538
|
-
}
|
|
539
|
-
function matchFilters(item, filters) {
|
|
540
|
-
return Object.entries(filters).every(([key, filter]) => {
|
|
541
|
-
return matchFilter(item.properties[key], filter);
|
|
542
|
-
});
|
|
543
|
-
}
|
|
544
|
-
|
|
545
645
|
// src/data/getDataClient.ts
|
|
546
646
|
var getDataClient = (options) => {
|
|
547
647
|
const observers = /* @__PURE__ */ new Map();
|
|
@@ -752,7 +852,7 @@ function isNumber(num) {
|
|
|
752
852
|
// src/IndoorMap/IndoorMap.ts
|
|
753
853
|
var import_distance = __toESM(require("@turf/distance"));
|
|
754
854
|
var import_center4 = __toESM(require("@turf/center"));
|
|
755
|
-
var
|
|
855
|
+
var import_three7 = require("three");
|
|
756
856
|
var import_maptalks9 = require("maptalks.three");
|
|
757
857
|
|
|
758
858
|
// src/IndoorMap/constants.ts
|
|
@@ -1749,18 +1849,6 @@ var loadModel3d = (model3d, coordinate, threeLayer) => {
|
|
|
1749
1849
|
);
|
|
1750
1850
|
});
|
|
1751
1851
|
};
|
|
1752
|
-
var create3DModels = async (models, defaultCoordinate, properties, threeLayer) => {
|
|
1753
|
-
let modelObjs = [];
|
|
1754
|
-
for (let j = 0; j < models.length; j++) {
|
|
1755
|
-
const model = models[j];
|
|
1756
|
-
const positionCoord = import_lodash4.default.get(model, "properties.position");
|
|
1757
|
-
const coord = positionCoord || defaultCoordinate;
|
|
1758
|
-
const object = await loadModel3d(model, coord, threeLayer);
|
|
1759
|
-
object.properties = properties;
|
|
1760
|
-
modelObjs.push(object);
|
|
1761
|
-
}
|
|
1762
|
-
return modelObjs;
|
|
1763
|
-
};
|
|
1764
1852
|
var createExtrudePolygon = (geometry, threeLayer, material, height, properties = {}, options) => {
|
|
1765
1853
|
const { offset = 0, altitude = 0 } = options;
|
|
1766
1854
|
const offsetGeometry = (0, import_buffer.default)(geometry, offset, { units: "meters" });
|
|
@@ -2668,44 +2756,6 @@ var styledFeatureGenerator = (mapTheme) => {
|
|
|
2668
2756
|
markerProperties
|
|
2669
2757
|
);
|
|
2670
2758
|
},
|
|
2671
|
-
createVenue3DModel: async (venue, threeLayer) => {
|
|
2672
|
-
const { id, feature_type, properties } = venue;
|
|
2673
|
-
const { category, model3d } = properties;
|
|
2674
|
-
const modelProperty = {
|
|
2675
|
-
id,
|
|
2676
|
-
feature_type,
|
|
2677
|
-
category
|
|
2678
|
-
};
|
|
2679
|
-
const center2 = (0, import_center2.default)(venue);
|
|
2680
|
-
const centerCoord = import_lodash4.default.get(center2, "geometry.coordinates");
|
|
2681
|
-
const modelPosition = import_lodash4.default.get(model3d, "properties.position", centerCoord);
|
|
2682
|
-
const models = await create3DModels(
|
|
2683
|
-
model3d,
|
|
2684
|
-
modelPosition,
|
|
2685
|
-
modelProperty,
|
|
2686
|
-
threeLayer
|
|
2687
|
-
);
|
|
2688
|
-
return models;
|
|
2689
|
-
},
|
|
2690
|
-
create3DFixture: async (fixture, threeLayer) => {
|
|
2691
|
-
const { id, feature_type, properties } = fixture;
|
|
2692
|
-
const { category, ordinal, model3d } = properties;
|
|
2693
|
-
const modelProperty = {
|
|
2694
|
-
id,
|
|
2695
|
-
feature_type,
|
|
2696
|
-
category,
|
|
2697
|
-
ordinal
|
|
2698
|
-
};
|
|
2699
|
-
const center2 = (0, import_center2.default)(fixture);
|
|
2700
|
-
const coordinate = import_lodash4.default.get(center2, "geometry.coordinates");
|
|
2701
|
-
const models = await create3DModels(
|
|
2702
|
-
model3d,
|
|
2703
|
-
coordinate,
|
|
2704
|
-
modelProperty,
|
|
2705
|
-
threeLayer
|
|
2706
|
-
);
|
|
2707
|
-
return models;
|
|
2708
|
-
},
|
|
2709
2759
|
createExtrudedUnit: (unit, threeLayer, options) => {
|
|
2710
2760
|
const extrudeHeight = import_lodash4.default.get(options, "height");
|
|
2711
2761
|
if (!extrudeHeight) return;
|
|
@@ -2745,24 +2795,6 @@ var styledFeatureGenerator = (mapTheme) => {
|
|
|
2745
2795
|
options3d
|
|
2746
2796
|
);
|
|
2747
2797
|
return object;
|
|
2748
|
-
},
|
|
2749
|
-
createAmbientLight: (config) => {
|
|
2750
|
-
const { color: colorString = "0xffffff", intensity = 1 } = config;
|
|
2751
|
-
const color = parseInt(colorString, 16);
|
|
2752
|
-
const ambientLight = new import_three5.AmbientLight(color, intensity);
|
|
2753
|
-
return ambientLight;
|
|
2754
|
-
},
|
|
2755
|
-
createDirectionalLight: (config) => {
|
|
2756
|
-
const {
|
|
2757
|
-
color: colorString = "0xffffff",
|
|
2758
|
-
intensity = 1,
|
|
2759
|
-
position: positionString = [0, 0, 0]
|
|
2760
|
-
} = config;
|
|
2761
|
-
const color = parseInt(colorString, 16);
|
|
2762
|
-
const [x, y, z] = positionString;
|
|
2763
|
-
const light = new import_three5.DirectionalLight(color, intensity);
|
|
2764
|
-
light.position.set(x, y, z).normalize();
|
|
2765
|
-
return light;
|
|
2766
2798
|
}
|
|
2767
2799
|
};
|
|
2768
2800
|
};
|
|
@@ -3127,7 +3159,7 @@ var THREE3 = __toESM(require("three"));
|
|
|
3127
3159
|
|
|
3128
3160
|
// src/IndoorMap/renderer/3d/Element3DRenderer.ts
|
|
3129
3161
|
var maptalks4 = __toESM(require("maptalks-gl"));
|
|
3130
|
-
var
|
|
3162
|
+
var THREE = __toESM(require("three"));
|
|
3131
3163
|
var import_buffer2 = __toESM(require("@turf/buffer"));
|
|
3132
3164
|
|
|
3133
3165
|
// src/IndoorMap/renderer/3d/element3DRendererOptions.ts
|
|
@@ -3140,6 +3172,7 @@ var element3DRendererOptions = {
|
|
|
3140
3172
|
unenclosedarea: { color: "#cccccc", height: 0.2 },
|
|
3141
3173
|
nonpublic: { color: "#999999", height: 0.3 },
|
|
3142
3174
|
escalator: { height: 0.2 },
|
|
3175
|
+
parking: { height: 0.1 },
|
|
3143
3176
|
room: { color: "#ffffff", height: 2, bottomHeight: 0.12 }
|
|
3144
3177
|
}
|
|
3145
3178
|
},
|
|
@@ -3155,259 +3188,61 @@ var element3DRendererOptions = {
|
|
|
3155
3188
|
}
|
|
3156
3189
|
};
|
|
3157
3190
|
|
|
3158
|
-
// src/IndoorMap/renderer/3d/
|
|
3159
|
-
var
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
// src/IndoorMap/renderer/utils/interpolateStops.ts
|
|
3165
|
-
var interpolateStops = ({ stops }, zoom) => {
|
|
3166
|
-
if (zoom <= stops[0][0]) return stops[0][1];
|
|
3167
|
-
if (zoom >= stops[stops.length - 1][0]) return stops[stops.length - 1][1];
|
|
3168
|
-
for (let i = 0; i < stops.length - 1; i++) {
|
|
3169
|
-
const [z1, v1] = stops[i];
|
|
3170
|
-
const [z2, v2] = stops[i + 1];
|
|
3171
|
-
if (zoom >= z1 && zoom <= z2) {
|
|
3172
|
-
const t = (zoom - z1) / (z2 - z1);
|
|
3173
|
-
return v1 + t * (v2 - v1);
|
|
3174
|
-
}
|
|
3175
|
-
}
|
|
3191
|
+
// src/IndoorMap/renderer/3d/Element3DRenderer.ts
|
|
3192
|
+
var DEFAULT_POLYGON_OPTION = {
|
|
3193
|
+
color: "#FFFFFF",
|
|
3194
|
+
offset: 0,
|
|
3195
|
+
altitude: 0
|
|
3176
3196
|
};
|
|
3177
|
-
|
|
3178
|
-
|
|
3179
|
-
var
|
|
3180
|
-
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
|
|
3187
|
-
background: "rgba(0, 0, 0, 0.2)",
|
|
3188
|
-
lineHeight: 32,
|
|
3189
|
-
padding: 8,
|
|
3190
|
-
strokeColor: "#000000",
|
|
3191
|
-
strokeWidth: 6,
|
|
3192
|
-
strokeStyle: "round",
|
|
3193
|
-
// Sprite options
|
|
3194
|
-
/* Overall scale multiplier */
|
|
3195
|
-
scale: 1,
|
|
3196
|
-
altitude: 0,
|
|
3197
|
-
opacity: 1
|
|
3197
|
+
var HEIGHT_METER = 4;
|
|
3198
|
+
var MULTIORDINAL_HEIGHT_METER = 9;
|
|
3199
|
+
var getGeometryOption = (feature2, options) => {
|
|
3200
|
+
try {
|
|
3201
|
+
const option = options[feature2.feature_type] ?? element3DRendererOptions[feature2.feature_type];
|
|
3202
|
+
const category = feature2.properties.category;
|
|
3203
|
+
return (category && option.byCategory?.[category]) ?? option?.default ?? DEFAULT_POLYGON_OPTION;
|
|
3204
|
+
} catch (err) {
|
|
3205
|
+
console.log(err.message, { options, feature: feature2 });
|
|
3206
|
+
}
|
|
3198
3207
|
};
|
|
3199
|
-
var
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
|
|
3208
|
+
var Element3DRenderer = class extends EventTarget {
|
|
3209
|
+
options;
|
|
3210
|
+
map;
|
|
3211
|
+
gltfLayer;
|
|
3212
|
+
threeLayer;
|
|
3213
|
+
// private dracoLoader: DRACOLoader
|
|
3214
|
+
lineMaterial;
|
|
3215
|
+
materialByColorMap;
|
|
3216
|
+
// Renderer is Ready
|
|
3217
|
+
isReady = false;
|
|
3218
|
+
constructor(map, options) {
|
|
3203
3219
|
super();
|
|
3204
|
-
this.
|
|
3205
|
-
this.
|
|
3206
|
-
this.
|
|
3207
|
-
this.
|
|
3208
|
-
|
|
3209
|
-
this.
|
|
3210
|
-
this.
|
|
3211
|
-
this.type = "TextSpriteMarker";
|
|
3220
|
+
this.options = options;
|
|
3221
|
+
this.map = map;
|
|
3222
|
+
const groupLayer = this.map.getLayer("group");
|
|
3223
|
+
this.threeLayer = groupLayer.getLayer("three");
|
|
3224
|
+
this.gltfLayer = groupLayer.getLayer("gltf");
|
|
3225
|
+
this.lineMaterial = new THREE.LineBasicMaterial({ color: "#000" });
|
|
3226
|
+
this.render();
|
|
3212
3227
|
}
|
|
3213
|
-
|
|
3214
|
-
|
|
3228
|
+
animation() {
|
|
3229
|
+
this.threeLayer._needsUpdate = !this.threeLayer._needsUpdate;
|
|
3230
|
+
if (this.threeLayer._needsUpdate) {
|
|
3231
|
+
this.threeLayer.redraw();
|
|
3232
|
+
}
|
|
3233
|
+
requestAnimationFrame(this.animation);
|
|
3215
3234
|
}
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
const
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
const w = texture.image.width;
|
|
3226
|
-
const h = texture.image.height;
|
|
3227
|
-
const base = 1 / 16;
|
|
3228
|
-
const normalizedScale = options.scale / this.getMap().getGLRes();
|
|
3229
|
-
sprite.scale.set(w * base * normalizedScale, h * base * normalizedScale, 1);
|
|
3230
|
-
this.#altitudeOffset = Math.max(
|
|
3231
|
-
h * base * options.scale * 0.5,
|
|
3232
|
-
0.05
|
|
3233
|
-
// minimum lift in world units
|
|
3234
|
-
);
|
|
3235
|
-
return sprite;
|
|
3235
|
+
/** Materials */
|
|
3236
|
+
getOrCreateMaterialByColor(color) {
|
|
3237
|
+
if (!this.materialByColorMap) this.materialByColorMap = /* @__PURE__ */ new Map();
|
|
3238
|
+
const existingMaterial = this.materialByColorMap.get(color);
|
|
3239
|
+
if (existingMaterial) return existingMaterial;
|
|
3240
|
+
const created = new THREE.MeshLambertMaterial({ color, transparent: true });
|
|
3241
|
+
created.toneMapped = false;
|
|
3242
|
+
this.materialByColorMap.set(color, created);
|
|
3243
|
+
return created;
|
|
3236
3244
|
}
|
|
3237
|
-
|
|
3238
|
-
const {
|
|
3239
|
-
padding,
|
|
3240
|
-
fontSize,
|
|
3241
|
-
fontFamily,
|
|
3242
|
-
fontWeight,
|
|
3243
|
-
lineHeight,
|
|
3244
|
-
background,
|
|
3245
|
-
color,
|
|
3246
|
-
textAlign,
|
|
3247
|
-
strokeColor,
|
|
3248
|
-
strokeWidth,
|
|
3249
|
-
maxWidth
|
|
3250
|
-
} = options || {};
|
|
3251
|
-
const canvas = document.createElement("canvas");
|
|
3252
|
-
const ctx = canvas.getContext("2d");
|
|
3253
|
-
ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
3254
|
-
const paragraphs = String(text).split("\n");
|
|
3255
|
-
const wrappedLines = [];
|
|
3256
|
-
paragraphs.forEach((paragraph) => {
|
|
3257
|
-
if ((0, import_lodash6.isNil)(maxWidth) || isNaN(maxWidth)) {
|
|
3258
|
-
wrappedLines.push(paragraph);
|
|
3259
|
-
return;
|
|
3260
|
-
}
|
|
3261
|
-
const words = paragraph.split(/\s+/);
|
|
3262
|
-
let currentLine = "";
|
|
3263
|
-
words.forEach((word) => {
|
|
3264
|
-
const testLine = currentLine ? currentLine + " " + word : word;
|
|
3265
|
-
const testWidth = ctx.measureText(testLine).width;
|
|
3266
|
-
if (testWidth > maxWidth && currentLine) {
|
|
3267
|
-
wrappedLines.push(currentLine);
|
|
3268
|
-
currentLine = word;
|
|
3269
|
-
} else {
|
|
3270
|
-
currentLine = testLine;
|
|
3271
|
-
}
|
|
3272
|
-
});
|
|
3273
|
-
if (currentLine) {
|
|
3274
|
-
wrappedLines.push(currentLine);
|
|
3275
|
-
}
|
|
3276
|
-
});
|
|
3277
|
-
const lines = wrappedLines.length ? wrappedLines : [""];
|
|
3278
|
-
const widest = Math.max(...lines.map((l) => ctx.measureText(l).width), 0);
|
|
3279
|
-
const finalWidth = (maxWidth ? Math.min(widest, maxWidth) : widest) + padding * 2;
|
|
3280
|
-
const finalHeight = lineHeight * lines.length + padding * 2;
|
|
3281
|
-
canvas.width = finalWidth;
|
|
3282
|
-
canvas.height = finalHeight;
|
|
3283
|
-
const ctx2 = canvas.getContext("2d");
|
|
3284
|
-
ctx2.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
3285
|
-
ctx2.textAlign = textAlign;
|
|
3286
|
-
if (background && background !== "transparent") {
|
|
3287
|
-
ctx2.fillStyle = background;
|
|
3288
|
-
ctx2.fillRect(0, 0, canvas.width, canvas.height);
|
|
3289
|
-
}
|
|
3290
|
-
lines.forEach((line, i) => {
|
|
3291
|
-
const y = padding + lineHeight * (i + 0.8);
|
|
3292
|
-
let x = padding;
|
|
3293
|
-
if (textAlign === "center") x = canvas.width / 2;
|
|
3294
|
-
if (textAlign === "right" || textAlign === "end")
|
|
3295
|
-
x = canvas.width - padding;
|
|
3296
|
-
if (strokeWidth > 0) {
|
|
3297
|
-
ctx2.lineWidth = strokeWidth;
|
|
3298
|
-
ctx2.lineJoin = "round";
|
|
3299
|
-
ctx2.miterLimit = 2;
|
|
3300
|
-
ctx2.strokeStyle = strokeColor;
|
|
3301
|
-
ctx2.strokeText(line, x, y);
|
|
3302
|
-
}
|
|
3303
|
-
ctx2.fillStyle = color;
|
|
3304
|
-
ctx2.fillText(line, x, y);
|
|
3305
|
-
});
|
|
3306
|
-
const texture = new THREE.CanvasTexture(canvas);
|
|
3307
|
-
texture.needsUpdate = true;
|
|
3308
|
-
texture.minFilter = THREE.LinearFilter;
|
|
3309
|
-
return texture;
|
|
3310
|
-
}
|
|
3311
|
-
_updatePosition() {
|
|
3312
|
-
const options = this.getOptions();
|
|
3313
|
-
const layer = options.layer;
|
|
3314
|
-
if (!layer) return;
|
|
3315
|
-
const altitude = (options.altitude || 0) + this.#altitudeOffset;
|
|
3316
|
-
const z = layer.altitudeToVector3(altitude, altitude).x;
|
|
3317
|
-
const position = layer.coordinateToVector3(this._coordinate, z);
|
|
3318
|
-
(0, import_lodash6.set)(this.properties, "default.position", position);
|
|
3319
|
-
this.getObject3d().position.copy(position);
|
|
3320
|
-
}
|
|
3321
|
-
_animation() {
|
|
3322
|
-
const layer = this.getLayer();
|
|
3323
|
-
if (!this.isAdd || !layer) return;
|
|
3324
|
-
if (this._visible === true) {
|
|
3325
|
-
const zoom = layer.map.getZoom();
|
|
3326
|
-
const object3d = this.getObject3d();
|
|
3327
|
-
const { opacity } = this.getOptions();
|
|
3328
|
-
let opacityValue;
|
|
3329
|
-
if (typeof opacity === "number") {
|
|
3330
|
-
opacityValue = opacity ?? 1;
|
|
3331
|
-
} else if (Array.isArray(opacity.stops)) {
|
|
3332
|
-
opacityValue = interpolateStops(opacity, zoom);
|
|
3333
|
-
} else {
|
|
3334
|
-
throw new Error(`Unknown opacity value ${opacity}`);
|
|
3335
|
-
}
|
|
3336
|
-
const visible = opacityValue > 0.5;
|
|
3337
|
-
object3d.visible = visible;
|
|
3338
|
-
}
|
|
3339
|
-
}
|
|
3340
|
-
setText(text) {
|
|
3341
|
-
const options = this.getOptions();
|
|
3342
|
-
options.text = text;
|
|
3343
|
-
const newSprite = this._createSprite();
|
|
3344
|
-
const group = this.getObject3d();
|
|
3345
|
-
group.children.forEach((child) => group.remove(child));
|
|
3346
|
-
group.add(newSprite);
|
|
3347
|
-
this._updatePosition();
|
|
3348
|
-
}
|
|
3349
|
-
setAltitude(altitude) {
|
|
3350
|
-
const bottomHeight = this.options.bottomHeight ?? 0;
|
|
3351
|
-
return super.setAltitude(altitude + bottomHeight + this.#altitudeOffset);
|
|
3352
|
-
}
|
|
3353
|
-
};
|
|
3354
|
-
|
|
3355
|
-
// src/IndoorMap/renderer/3d/Element3DRenderer.ts
|
|
3356
|
-
var DEFAULT_POLYGON_OPTION = {
|
|
3357
|
-
color: "#FFFFFF",
|
|
3358
|
-
offset: 0,
|
|
3359
|
-
altitude: 0
|
|
3360
|
-
};
|
|
3361
|
-
var HEIGHT_METER = 4;
|
|
3362
|
-
var MULTIORDINAL_HEIGHT_METER = 9;
|
|
3363
|
-
var getGeometryOption = (feature2, options) => {
|
|
3364
|
-
try {
|
|
3365
|
-
const option = options[feature2.feature_type] ?? element3DRendererOptions[feature2.feature_type];
|
|
3366
|
-
const category = feature2.properties.category;
|
|
3367
|
-
return (category && option.byCategory?.[category]) ?? option?.default ?? DEFAULT_POLYGON_OPTION;
|
|
3368
|
-
} catch (err) {
|
|
3369
|
-
console.log(err.message, { options, feature: feature2 });
|
|
3370
|
-
}
|
|
3371
|
-
};
|
|
3372
|
-
var Element3DRenderer = class extends EventTarget {
|
|
3373
|
-
options;
|
|
3374
|
-
map;
|
|
3375
|
-
gltfLayer;
|
|
3376
|
-
threeLayer;
|
|
3377
|
-
// private dracoLoader: DRACOLoader
|
|
3378
|
-
lineMaterial;
|
|
3379
|
-
materialByColorMap;
|
|
3380
|
-
markerRenderer;
|
|
3381
|
-
// Renderer is Ready
|
|
3382
|
-
isReady = false;
|
|
3383
|
-
constructor(map, options) {
|
|
3384
|
-
super();
|
|
3385
|
-
this.options = options;
|
|
3386
|
-
this.map = map;
|
|
3387
|
-
const groupLayer = this.map.getLayer("group");
|
|
3388
|
-
this.threeLayer = groupLayer.getLayer("three");
|
|
3389
|
-
this.gltfLayer = groupLayer.getLayer("gltf");
|
|
3390
|
-
this.lineMaterial = new THREE2.LineBasicMaterial({ color: "#000" });
|
|
3391
|
-
this.render();
|
|
3392
|
-
}
|
|
3393
|
-
animation() {
|
|
3394
|
-
this.threeLayer._needsUpdate = !this.threeLayer._needsUpdate;
|
|
3395
|
-
if (this.threeLayer._needsUpdate) {
|
|
3396
|
-
this.threeLayer.redraw();
|
|
3397
|
-
}
|
|
3398
|
-
requestAnimationFrame(this.animation);
|
|
3399
|
-
}
|
|
3400
|
-
/** Materials */
|
|
3401
|
-
getOrCreateMaterialByColor(color) {
|
|
3402
|
-
if (!this.materialByColorMap) this.materialByColorMap = /* @__PURE__ */ new Map();
|
|
3403
|
-
const existingMaterial = this.materialByColorMap.get(color);
|
|
3404
|
-
if (existingMaterial) return existingMaterial;
|
|
3405
|
-
const created = new THREE2.MeshLambertMaterial({ color, transparent: true });
|
|
3406
|
-
created.toneMapped = false;
|
|
3407
|
-
this.materialByColorMap.set(color, created);
|
|
3408
|
-
return created;
|
|
3409
|
-
}
|
|
3410
|
-
createGeometry = (feature2) => {
|
|
3245
|
+
createGeometry = (feature2) => {
|
|
3411
3246
|
const {
|
|
3412
3247
|
offset = 0,
|
|
3413
3248
|
height: heightOptions,
|
|
@@ -3527,19 +3362,6 @@ var Element3DRenderer = class extends EventTarget {
|
|
|
3527
3362
|
}
|
|
3528
3363
|
});
|
|
3529
3364
|
}
|
|
3530
|
-
createMarker = (coordinates, ordinal, text) => {
|
|
3531
|
-
const options = {
|
|
3532
|
-
// scale: 0.05,
|
|
3533
|
-
// altitude: ordinal * HEIGHT_METER,
|
|
3534
|
-
text
|
|
3535
|
-
// interactive: true,
|
|
3536
|
-
};
|
|
3537
|
-
const marker = new TextSpriteMarker(coordinates, options, this.threeLayer);
|
|
3538
|
-
this.threeLayer.addMesh([marker]);
|
|
3539
|
-
return marker;
|
|
3540
|
-
};
|
|
3541
|
-
removeMarker = () => {
|
|
3542
|
-
};
|
|
3543
3365
|
render() {
|
|
3544
3366
|
this.threeLayer._needsUpdate = !this.threeLayer._needsUpdate;
|
|
3545
3367
|
if (this.threeLayer._needsUpdate) {
|
|
@@ -3677,6 +3499,7 @@ var Marker2DRenderer = class extends EventTarget {
|
|
|
3677
3499
|
markerLayer;
|
|
3678
3500
|
constructor(map) {
|
|
3679
3501
|
super();
|
|
3502
|
+
this.map = map;
|
|
3680
3503
|
}
|
|
3681
3504
|
createMarker = (coordinates, ordinal, content) => {
|
|
3682
3505
|
const marker = new maptalks6.ui.UIMarker(coordinates, {
|
|
@@ -3698,73 +3521,203 @@ var Marker2DRenderer = class extends EventTarget {
|
|
|
3698
3521
|
};
|
|
3699
3522
|
|
|
3700
3523
|
// src/IndoorMap/renderer/3d/Marker3DRenderer.ts
|
|
3701
|
-
var maptalks7 = __toESM(require("maptalks"));
|
|
3524
|
+
var maptalks7 = __toESM(require("maptalks-gl"));
|
|
3702
3525
|
|
|
3703
|
-
// src/IndoorMap/renderer/
|
|
3704
|
-
var
|
|
3705
|
-
var
|
|
3706
|
-
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
img.onerror = function(error) {
|
|
3722
|
-
reject(error);
|
|
3723
|
-
};
|
|
3724
|
-
img.src = url;
|
|
3725
|
-
});
|
|
3526
|
+
// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
|
|
3527
|
+
var import_maptalks7 = require("maptalks");
|
|
3528
|
+
var THREE2 = __toESM(require("three"));
|
|
3529
|
+
var import_maptalks8 = require("maptalks.three");
|
|
3530
|
+
var import_lodash6 = require("lodash");
|
|
3531
|
+
|
|
3532
|
+
// src/IndoorMap/renderer/utils/interpolateStops.ts
|
|
3533
|
+
var interpolateStops = ({ stops }, zoom) => {
|
|
3534
|
+
if (zoom <= stops[0][0]) return stops[0][1];
|
|
3535
|
+
if (zoom >= stops[stops.length - 1][0]) return stops[stops.length - 1][1];
|
|
3536
|
+
for (let i = 0; i < stops.length - 1; i++) {
|
|
3537
|
+
const [z1, v1] = stops[i];
|
|
3538
|
+
const [z2, v2] = stops[i + 1];
|
|
3539
|
+
if (zoom >= z1 && zoom <= z2) {
|
|
3540
|
+
const t = (zoom - z1) / (z2 - z1);
|
|
3541
|
+
return v1 + t * (v2 - v1);
|
|
3542
|
+
}
|
|
3543
|
+
}
|
|
3726
3544
|
};
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3545
|
+
|
|
3546
|
+
// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
|
|
3547
|
+
var OPTIONS4 = {
|
|
3548
|
+
// Texture options
|
|
3549
|
+
text: "",
|
|
3550
|
+
textAlign: "center",
|
|
3551
|
+
color: "#ffffff",
|
|
3552
|
+
fontFamily: "sans-serif",
|
|
3553
|
+
fontSize: 28,
|
|
3554
|
+
fontWeight: 400,
|
|
3555
|
+
background: "transparent",
|
|
3556
|
+
lineHeight: 32,
|
|
3557
|
+
padding: 8,
|
|
3558
|
+
strokeColor: "#000000",
|
|
3559
|
+
strokeWidth: 3,
|
|
3560
|
+
strokeStyle: "round",
|
|
3561
|
+
// Sprite options
|
|
3562
|
+
/* Overall scale multiplier */
|
|
3563
|
+
scale: 1,
|
|
3564
|
+
altitude: 0,
|
|
3565
|
+
opacity: 1
|
|
3566
|
+
};
|
|
3567
|
+
var TextSpriteMarker = class extends import_maptalks8.BaseObject {
|
|
3568
|
+
#altitudeOffset = 0;
|
|
3569
|
+
constructor(coordinate, options, layer, properties = {}) {
|
|
3570
|
+
options = import_maptalks7.Util.extend({}, OPTIONS4, options, { layer });
|
|
3571
|
+
super();
|
|
3572
|
+
this._coordinate = new import_maptalks7.Coordinate(coordinate);
|
|
3573
|
+
this._initOptions(options);
|
|
3574
|
+
this._createGroup();
|
|
3575
|
+
this.properties = { ...properties };
|
|
3576
|
+
const sprite = this._createSprite();
|
|
3577
|
+
this.getObject3d().add(sprite);
|
|
3578
|
+
this._updatePosition();
|
|
3579
|
+
this.type = "TextSpriteMarker";
|
|
3580
|
+
}
|
|
3581
|
+
getOptions() {
|
|
3582
|
+
return super.getOptions();
|
|
3583
|
+
}
|
|
3584
|
+
_createSprite() {
|
|
3585
|
+
const options = this.getOptions();
|
|
3586
|
+
const texture = this._createTextTexture(options.text, options);
|
|
3587
|
+
const material = new THREE2.SpriteMaterial({
|
|
3588
|
+
map: texture,
|
|
3589
|
+
transparent: true,
|
|
3590
|
+
alphaTest: 0.1
|
|
3591
|
+
});
|
|
3592
|
+
const sprite = new THREE2.Sprite(material);
|
|
3593
|
+
const w = texture.image.width;
|
|
3594
|
+
const h = texture.image.height;
|
|
3595
|
+
const base = 1 / 16;
|
|
3596
|
+
const normalizedScale = options.scale / this.getMap().getGLRes();
|
|
3597
|
+
sprite.scale.set(w * base * normalizedScale, h * base * normalizedScale, 1);
|
|
3598
|
+
this.#altitudeOffset = Math.max(
|
|
3599
|
+
h * base * options.scale * 0.5,
|
|
3600
|
+
0.05
|
|
3601
|
+
// minimum lift in world units
|
|
3742
3602
|
);
|
|
3603
|
+
return sprite;
|
|
3743
3604
|
}
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
|
|
3756
|
-
|
|
3757
|
-
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3605
|
+
_createTextTexture(text, options = {}) {
|
|
3606
|
+
const {
|
|
3607
|
+
padding,
|
|
3608
|
+
fontSize,
|
|
3609
|
+
fontFamily,
|
|
3610
|
+
fontWeight,
|
|
3611
|
+
lineHeight,
|
|
3612
|
+
background,
|
|
3613
|
+
color,
|
|
3614
|
+
textAlign,
|
|
3615
|
+
strokeColor,
|
|
3616
|
+
strokeWidth,
|
|
3617
|
+
maxWidth
|
|
3618
|
+
} = options || {};
|
|
3619
|
+
const canvas = document.createElement("canvas");
|
|
3620
|
+
const ctx = canvas.getContext("2d");
|
|
3621
|
+
ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
3622
|
+
const paragraphs = String(text).split("\n");
|
|
3623
|
+
const wrappedLines = [];
|
|
3624
|
+
paragraphs.forEach((paragraph) => {
|
|
3625
|
+
if ((0, import_lodash6.isNil)(maxWidth) || isNaN(maxWidth)) {
|
|
3626
|
+
wrappedLines.push(paragraph);
|
|
3627
|
+
return;
|
|
3628
|
+
}
|
|
3629
|
+
const words = paragraph.split(/\s+/);
|
|
3630
|
+
let currentLine = "";
|
|
3631
|
+
words.forEach((word) => {
|
|
3632
|
+
const testLine = currentLine ? currentLine + " " + word : word;
|
|
3633
|
+
const testWidth = ctx.measureText(testLine).width;
|
|
3634
|
+
if (testWidth > maxWidth && currentLine) {
|
|
3635
|
+
wrappedLines.push(currentLine);
|
|
3636
|
+
currentLine = word;
|
|
3637
|
+
} else {
|
|
3638
|
+
currentLine = testLine;
|
|
3639
|
+
}
|
|
3762
3640
|
});
|
|
3641
|
+
if (currentLine) {
|
|
3642
|
+
wrappedLines.push(currentLine);
|
|
3643
|
+
}
|
|
3763
3644
|
});
|
|
3764
|
-
|
|
3765
|
-
|
|
3645
|
+
const lines = wrappedLines.length ? wrappedLines : [""];
|
|
3646
|
+
const widest = Math.max(...lines.map((l) => ctx.measureText(l).width), 0);
|
|
3647
|
+
const finalWidth = (maxWidth ? Math.min(widest, maxWidth) : widest) + padding * 2;
|
|
3648
|
+
const finalHeight = lineHeight * lines.length + padding * 2;
|
|
3649
|
+
canvas.width = finalWidth;
|
|
3650
|
+
canvas.height = finalHeight;
|
|
3651
|
+
const ctx2 = canvas.getContext("2d");
|
|
3652
|
+
ctx2.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
3653
|
+
ctx2.textAlign = textAlign;
|
|
3654
|
+
if (background && background !== "transparent") {
|
|
3655
|
+
ctx2.fillStyle = background;
|
|
3656
|
+
ctx2.fillRect(0, 0, canvas.width, canvas.height);
|
|
3657
|
+
}
|
|
3658
|
+
lines.forEach((line, i) => {
|
|
3659
|
+
const y = padding + lineHeight * (i + 0.8);
|
|
3660
|
+
let x = padding;
|
|
3661
|
+
if (textAlign === "center") x = canvas.width / 2;
|
|
3662
|
+
if (textAlign === "right" || textAlign === "end")
|
|
3663
|
+
x = canvas.width - padding;
|
|
3664
|
+
if (strokeWidth > 0) {
|
|
3665
|
+
ctx2.lineWidth = strokeWidth;
|
|
3666
|
+
ctx2.lineJoin = "round";
|
|
3667
|
+
ctx2.miterLimit = 2;
|
|
3668
|
+
ctx2.strokeStyle = strokeColor;
|
|
3669
|
+
ctx2.strokeText(line, x, y);
|
|
3670
|
+
}
|
|
3671
|
+
ctx2.fillStyle = color;
|
|
3672
|
+
ctx2.fillText(line, x, y);
|
|
3673
|
+
});
|
|
3674
|
+
const texture = new THREE2.CanvasTexture(canvas);
|
|
3675
|
+
texture.needsUpdate = true;
|
|
3676
|
+
texture.minFilter = THREE2.LinearFilter;
|
|
3677
|
+
return texture;
|
|
3678
|
+
}
|
|
3679
|
+
_updatePosition() {
|
|
3680
|
+
const options = this.getOptions();
|
|
3681
|
+
const layer = options.layer;
|
|
3682
|
+
if (!layer) return;
|
|
3683
|
+
const altitude = (options.altitude || 0) + this.#altitudeOffset;
|
|
3684
|
+
const z = layer.altitudeToVector3(altitude, altitude).x;
|
|
3685
|
+
const position = layer.coordinateToVector3(this._coordinate, z);
|
|
3686
|
+
(0, import_lodash6.set)(this.properties, "default.position", position);
|
|
3687
|
+
this.getObject3d().position.copy(position);
|
|
3688
|
+
}
|
|
3689
|
+
_animation() {
|
|
3690
|
+
const layer = this.getLayer();
|
|
3691
|
+
if (!this.isAdd || !layer) return;
|
|
3692
|
+
if (this._visible === true) {
|
|
3693
|
+
const zoom = layer.map.getZoom();
|
|
3694
|
+
const object3d = this.getObject3d();
|
|
3695
|
+
const { opacity } = this.getOptions();
|
|
3696
|
+
let opacityValue;
|
|
3697
|
+
if (typeof opacity === "number") {
|
|
3698
|
+
opacityValue = opacity ?? 1;
|
|
3699
|
+
} else if (Array.isArray(opacity.stops)) {
|
|
3700
|
+
opacityValue = interpolateStops(opacity, zoom);
|
|
3701
|
+
} else {
|
|
3702
|
+
throw new Error(`Unknown opacity value ${opacity}`);
|
|
3703
|
+
}
|
|
3704
|
+
const visible = opacityValue > 0.5;
|
|
3705
|
+
object3d.visible = visible;
|
|
3706
|
+
}
|
|
3707
|
+
}
|
|
3708
|
+
setText(text) {
|
|
3709
|
+
const options = this.getOptions();
|
|
3710
|
+
options.text = text;
|
|
3711
|
+
const newSprite = this._createSprite();
|
|
3712
|
+
const group = this.getObject3d();
|
|
3713
|
+
group.children.forEach((child) => group.remove(child));
|
|
3714
|
+
group.add(newSprite);
|
|
3715
|
+
this._updatePosition();
|
|
3716
|
+
}
|
|
3717
|
+
setAltitude(altitude) {
|
|
3718
|
+
const bottomHeight = this.options.bottomHeight ?? 0;
|
|
3719
|
+
return super.setAltitude(altitude + bottomHeight + this.#altitudeOffset);
|
|
3766
3720
|
}
|
|
3767
|
-
return material;
|
|
3768
3721
|
};
|
|
3769
3722
|
|
|
3770
3723
|
// src/IndoorMap/renderer/3d/Marker3DRenderer.ts
|
|
@@ -3815,40 +3768,41 @@ var Marker3DRenderer = class extends EventTarget {
|
|
|
3815
3768
|
});
|
|
3816
3769
|
}
|
|
3817
3770
|
/** Marker */
|
|
3818
|
-
getOrCreateIconMaterial(key) {
|
|
3819
|
-
|
|
3820
|
-
|
|
3821
|
-
|
|
3822
|
-
|
|
3823
|
-
|
|
3824
|
-
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
|
|
3846
|
-
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
|
|
3850
|
-
|
|
3851
|
-
|
|
3771
|
+
// getOrCreateIconMaterial(key) {
|
|
3772
|
+
// if (!this.materialByKey) this.materialByKey = new Map()
|
|
3773
|
+
// const existingMaterial = this.materialByKey.get(key)
|
|
3774
|
+
// if (existingMaterial) return existingMaterial
|
|
3775
|
+
// // Create new
|
|
3776
|
+
// const baseSymbol: maptalks.Path = {
|
|
3777
|
+
// markerType: "path",
|
|
3778
|
+
// markerPath: [
|
|
3779
|
+
// {
|
|
3780
|
+
// path: "M20.775 1.2H1.225V20.35H8.215L11.3 22.8L14.385 20.35H20.775V1.2Z",
|
|
3781
|
+
// fill: "#ff0000",
|
|
3782
|
+
// },
|
|
3783
|
+
// ],
|
|
3784
|
+
// markerPathWidth: 24,
|
|
3785
|
+
// markerPathHeight: 24
|
|
3786
|
+
// }
|
|
3787
|
+
// const markerSymbol: maptalks.PathMarkerSymbol = {
|
|
3788
|
+
// markerType: "path",
|
|
3789
|
+
// markerPath: [],
|
|
3790
|
+
// // TODO: Get Path by featureType.category
|
|
3791
|
+
// // markerPath: [{ fill: "#FFFFFF", path: "M 19 3 H 5 c -1.1 0 -2 0.9 -2 2 v 14 c 0 1.1 0.9 2 2 2 h 14 c 1.1 0 2 -0.9 2 -2 V 5 c 0 -1.1 -0.9 -2 -2 -2 Z m -2 6 h -1.7 l -5 9 H 7 c -0.83 0 -1.5 -0.67 -1.5 -1.5 S 6.17 15 7 15 h 1.7 l 5 -9 H 17 c 0.83 0 1.5 0.67 1.5 1.5 S 17.83 9 17 9 Z" }],
|
|
3792
|
+
// markerPathWidth: 24,
|
|
3793
|
+
// markerPathHeight: 24,
|
|
3794
|
+
// markerWidth: 24,
|
|
3795
|
+
// markerHeight: 24,
|
|
3796
|
+
// markerDy: 1.5,
|
|
3797
|
+
// markerDx: 1.5,
|
|
3798
|
+
// }
|
|
3799
|
+
// const created = createSpriteMaterialByLabelSymbol([
|
|
3800
|
+
// baseSymbol,
|
|
3801
|
+
// markerSymbol,
|
|
3802
|
+
// ])
|
|
3803
|
+
// this.materialByKey.set(key, created)
|
|
3804
|
+
// return created
|
|
3805
|
+
// }
|
|
3852
3806
|
};
|
|
3853
3807
|
|
|
3854
3808
|
// src/IndoorMap/renderer/utils/angleBetweenLineString.ts
|
|
@@ -3870,6 +3824,9 @@ var angleBetweenLineStrings = (line1, line2) => {
|
|
|
3870
3824
|
};
|
|
3871
3825
|
|
|
3872
3826
|
// src/IndoorMap/renderer/RendererManager.ts
|
|
3827
|
+
function delay(ms) {
|
|
3828
|
+
return new Promise((resolve) => setTimeout(resolve, ms));
|
|
3829
|
+
}
|
|
3873
3830
|
var RendererManager = class extends EventTarget {
|
|
3874
3831
|
map;
|
|
3875
3832
|
options;
|
|
@@ -3953,6 +3910,7 @@ var RendererManager = class extends EventTarget {
|
|
|
3953
3910
|
}
|
|
3954
3911
|
};
|
|
3955
3912
|
async #createElements() {
|
|
3913
|
+
await delay(this.options.delayBeforeCreateElements ?? 0);
|
|
3956
3914
|
const levels = await this.#dataClient.filterByType("level", {
|
|
3957
3915
|
populate: true
|
|
3958
3916
|
});
|
|
@@ -4275,7 +4233,7 @@ var IndoorMap = class extends EventTarget {
|
|
|
4275
4233
|
const scene = this.threeLayer.getScene();
|
|
4276
4234
|
if (scene) {
|
|
4277
4235
|
scene.children = scene.children.filter(
|
|
4278
|
-
(children) => children instanceof
|
|
4236
|
+
(children) => children instanceof import_three7.PerspectiveCamera
|
|
4279
4237
|
);
|
|
4280
4238
|
}
|
|
4281
4239
|
}
|
|
@@ -4300,33 +4258,15 @@ var IndoorMap = class extends EventTarget {
|
|
|
4300
4258
|
create3DFootprint,
|
|
4301
4259
|
create3DGroundLabel,
|
|
4302
4260
|
create3DBillboard,
|
|
4303
|
-
createVenue3DModel,
|
|
4304
4261
|
createExtrudedUnit,
|
|
4305
|
-
create3DFixture,
|
|
4306
4262
|
create3DAmenityMarker,
|
|
4307
4263
|
create3DOccupantAmenityMarker,
|
|
4308
4264
|
create3DOpeningMarker,
|
|
4309
|
-
createOccupantGroundLabel
|
|
4310
|
-
// Light
|
|
4311
|
-
createAmbientLight,
|
|
4312
|
-
createDirectionalLight
|
|
4265
|
+
createOccupantGroundLabel
|
|
4313
4266
|
} = this.#styler;
|
|
4314
4267
|
let elements = {};
|
|
4315
4268
|
let object3ds = [];
|
|
4316
4269
|
const scene = this.threeLayer.getScene();
|
|
4317
|
-
if (scene) {
|
|
4318
|
-
const {
|
|
4319
|
-
ambientLight: ambientLightConfig = {},
|
|
4320
|
-
directionalLight: directionalLightConfig = {}
|
|
4321
|
-
} = import_lodash7.default.get(this.#mapConfig, "light", {
|
|
4322
|
-
ambientLight: {},
|
|
4323
|
-
directionalLight: {}
|
|
4324
|
-
});
|
|
4325
|
-
const ambientLight = createAmbientLight(ambientLightConfig);
|
|
4326
|
-
scene.add(ambientLight);
|
|
4327
|
-
const light = createDirectionalLight(directionalLightConfig);
|
|
4328
|
-
scene.add(light);
|
|
4329
|
-
}
|
|
4330
4270
|
for (const feature2 of this.#features) {
|
|
4331
4271
|
try {
|
|
4332
4272
|
const { feature_type: featureType, properties, id } = feature2;
|
|
@@ -4349,16 +4289,6 @@ var IndoorMap = class extends EventTarget {
|
|
|
4349
4289
|
feature2
|
|
4350
4290
|
);
|
|
4351
4291
|
switch (featureType) {
|
|
4352
|
-
case "venue": {
|
|
4353
|
-
geometry = createVenue(feature2).addTo(layer);
|
|
4354
|
-
const models = await createVenue3DModel(feature2, this.threeLayer);
|
|
4355
|
-
models.forEach((model) => {
|
|
4356
|
-
model.on("click", this.handleClickElement);
|
|
4357
|
-
object3ds.push(model);
|
|
4358
|
-
this.#venueObjects.push(model);
|
|
4359
|
-
});
|
|
4360
|
-
break;
|
|
4361
|
-
}
|
|
4362
4292
|
case "amenity": {
|
|
4363
4293
|
if (feature2.properties.is_featured) {
|
|
4364
4294
|
const billboardObj = create3DBillboard(feature2, this.threeLayer);
|
|
@@ -4402,127 +4332,6 @@ var IndoorMap = class extends EventTarget {
|
|
|
4402
4332
|
geometry = createSection(feature2)?.addTo(layer);
|
|
4403
4333
|
break;
|
|
4404
4334
|
}
|
|
4405
|
-
case "occupant": {
|
|
4406
|
-
switch (category) {
|
|
4407
|
-
// Create only marker if it is amenity occupant
|
|
4408
|
-
case "currencyexchange":
|
|
4409
|
-
case "donationcenter":
|
|
4410
|
-
case "postoffice":
|
|
4411
|
-
const markerFeature = {
|
|
4412
|
-
...feature2,
|
|
4413
|
-
geometry: feature2.properties?.anchor?.geometry
|
|
4414
|
-
};
|
|
4415
|
-
const marker3d = create3DOccupantAmenityMarker(
|
|
4416
|
-
markerFeature,
|
|
4417
|
-
this.threeLayer,
|
|
4418
|
-
extrudeConfig
|
|
4419
|
-
)?.on("click", this.handleClickElement);
|
|
4420
|
-
object3ds.push(marker3d);
|
|
4421
|
-
break;
|
|
4422
|
-
default: {
|
|
4423
|
-
const { kiosk, anchor } = feature2.properties;
|
|
4424
|
-
const { unit } = anchor.properties;
|
|
4425
|
-
let mainLocation = kiosk || unit || null;
|
|
4426
|
-
const relatedLocations = [
|
|
4427
|
-
...feature2.properties.units,
|
|
4428
|
-
...feature2.properties.kiosks
|
|
4429
|
-
].filter((f) => f.properties.ordinal !== properties.ordinal);
|
|
4430
|
-
const occupantLocations = [mainLocation, ...relatedLocations];
|
|
4431
|
-
const renderType = feature2.properties.render_type;
|
|
4432
|
-
occupantLocations.forEach((location, index) => {
|
|
4433
|
-
const isMainLocation = index === 0;
|
|
4434
|
-
if (renderType === "Label") {
|
|
4435
|
-
const occupantGroundLabel = createOccupantGroundLabel(
|
|
4436
|
-
feature2,
|
|
4437
|
-
location,
|
|
4438
|
-
{ textMarkerType, extrudeConfig },
|
|
4439
|
-
this.threeLayer
|
|
4440
|
-
);
|
|
4441
|
-
if (occupantGroundLabel instanceof GroundLabel) {
|
|
4442
|
-
occupantGroundLabel.on("click", this.handleClickElement);
|
|
4443
|
-
occupantGroundLabel.addTo(this.threeLayer);
|
|
4444
|
-
object3ds.push(occupantGroundLabel);
|
|
4445
|
-
this.#groundObjects.push(occupantGroundLabel);
|
|
4446
|
-
}
|
|
4447
|
-
} else {
|
|
4448
|
-
const occupantMarker = createOccupant(feature2, location, {
|
|
4449
|
-
textMarkerType,
|
|
4450
|
-
extrudeConfig
|
|
4451
|
-
});
|
|
4452
|
-
if (occupantMarker instanceof import_maptalks_gl.ui.UIMarker) {
|
|
4453
|
-
occupantMarker.addTo(this.map);
|
|
4454
|
-
} else {
|
|
4455
|
-
occupantMarker?.on("click", this.handleClickElement);
|
|
4456
|
-
occupantMarker?.addTo(layer);
|
|
4457
|
-
}
|
|
4458
|
-
if (isMainLocation) {
|
|
4459
|
-
geometry = occupantMarker;
|
|
4460
|
-
} else {
|
|
4461
|
-
elements[`${feature2.id}_${index}`] = {
|
|
4462
|
-
geometry: occupantMarker,
|
|
4463
|
-
properties: location.properties,
|
|
4464
|
-
featureType: "occupant",
|
|
4465
|
-
feature: feature2
|
|
4466
|
-
};
|
|
4467
|
-
}
|
|
4468
|
-
}
|
|
4469
|
-
});
|
|
4470
|
-
}
|
|
4471
|
-
}
|
|
4472
|
-
break;
|
|
4473
|
-
}
|
|
4474
|
-
case "fixture": {
|
|
4475
|
-
const models = await create3DFixture(feature2, this.threeLayer);
|
|
4476
|
-
models.forEach((model) => {
|
|
4477
|
-
model.on("click", this.handleClickElement);
|
|
4478
|
-
object3ds.push(model);
|
|
4479
|
-
this.#glbObjects.push(model);
|
|
4480
|
-
});
|
|
4481
|
-
if (!featureExtrudeConfig) {
|
|
4482
|
-
geometry = createFixture(feature2)?.addTo(layer);
|
|
4483
|
-
} else {
|
|
4484
|
-
const locatedLevel = feature2?.properties?.level;
|
|
4485
|
-
const levelExtrudeConfig = getExtrudeConfigByFeature(
|
|
4486
|
-
extrudeConfig,
|
|
4487
|
-
locatedLevel
|
|
4488
|
-
);
|
|
4489
|
-
const levelHeight = import_lodash7.default.get(levelExtrudeConfig, "height", 0);
|
|
4490
|
-
const option = { ...featureExtrudeConfig, altitude: levelHeight };
|
|
4491
|
-
const extrudedFixture = createExtrudedUnit(
|
|
4492
|
-
feature2,
|
|
4493
|
-
this.threeLayer,
|
|
4494
|
-
option
|
|
4495
|
-
);
|
|
4496
|
-
object3ds.push(extrudedFixture);
|
|
4497
|
-
}
|
|
4498
|
-
break;
|
|
4499
|
-
}
|
|
4500
|
-
case "footprint": {
|
|
4501
|
-
const objects = await create3DFootprint(
|
|
4502
|
-
feature2,
|
|
4503
|
-
this.threeLayer,
|
|
4504
|
-
featureExtrudeConfig
|
|
4505
|
-
);
|
|
4506
|
-
objects.forEach((object) => {
|
|
4507
|
-
object.on("click", () => {
|
|
4508
|
-
const {
|
|
4509
|
-
geometry: { coordinates }
|
|
4510
|
-
} = (0, import_center4.default)(feature2);
|
|
4511
|
-
this.camera.animateTo({ center: coordinates, pitch: 45 });
|
|
4512
|
-
});
|
|
4513
|
-
object3ds.push(object);
|
|
4514
|
-
this.#objects.push(object);
|
|
4515
|
-
});
|
|
4516
|
-
if (feature2.properties.logo) {
|
|
4517
|
-
const footprintMarker = create3DBillboard(
|
|
4518
|
-
feature2,
|
|
4519
|
-
this.threeLayer
|
|
4520
|
-
);
|
|
4521
|
-
object3ds.push(footprintMarker);
|
|
4522
|
-
this.#billboardObjects.push(footprintMarker);
|
|
4523
|
-
}
|
|
4524
|
-
break;
|
|
4525
|
-
}
|
|
4526
4335
|
default:
|
|
4527
4336
|
break;
|
|
4528
4337
|
}
|
|
@@ -5191,6 +5000,7 @@ var IndoorMap = class extends EventTarget {
|
|
|
5191
5000
|
MARKER_LAYER_NAME,
|
|
5192
5001
|
NONIMDF_FEATURE_TYPES,
|
|
5193
5002
|
ORIGIN_MARKER_ID,
|
|
5003
|
+
OccupantHelpers,
|
|
5194
5004
|
POI_MARKER_LAYER_NAME,
|
|
5195
5005
|
QueryObserver,
|
|
5196
5006
|
USER_LOCATION_ELEMENT_ID,
|
|
@@ -5218,6 +5028,16 @@ var IndoorMap = class extends EventTarget {
|
|
|
5218
5028
|
getRelatedLocationsByOccupant,
|
|
5219
5029
|
getSuitablyValueBetweenBearings,
|
|
5220
5030
|
isClickableFeature,
|
|
5031
|
+
isValidCoordinate,
|
|
5032
|
+
isValidLineString,
|
|
5033
|
+
isValidLineStringCoordinates,
|
|
5034
|
+
isValidMultiPolygon,
|
|
5035
|
+
isValidMultiPolygonCoordinates,
|
|
5036
|
+
isValidPoint,
|
|
5037
|
+
isValidPolygon,
|
|
5038
|
+
isValidPolygonCoordinates,
|
|
5039
|
+
matchFilter,
|
|
5040
|
+
matchFilters,
|
|
5221
5041
|
safeFetchFeature,
|
|
5222
5042
|
styledFeatureGenerator
|
|
5223
5043
|
});
|