f

2gis · Mar 29, 2024 · 996bd53 · 996bd53
1 parent 49d5072
commit 996bd53
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 14 deletions.
diff --git a/demo/mocks.ts b/demo/mocks.ts
@@ -199,13 +199,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                 labelGroups: [
                     {
                         id: '1111',
-                        image: {
-                            url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHJ4PSI0IiBmaWxsPSIjZWFlYWVhIi8+PHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjI2IiBoZWlnaHQ9IjI2IiByeD0iMyIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
-                            size: [38, 38],
-                            stretchX: [[4, 24]],
-                            stretchY: [[4, 24]],
-                            padding: [5, 10, 5, 10],
-                        },
+                        image: 'default',
                         minZoom: 19.7,
                         elevation: 7,
                         fontSize: 12,

diff --git a/src/defaultOptions.ts b/src/defaultOptions.ts
@@ -10,4 +10,5 @@ export const defaultOptions: Required<PluginOptions> = {
         position: 'centerLeft',
     },
     groundCoveringColor: '#F8F8EBCC',
+    zIndex: 0,
 };
diff --git a/src/labelGroups.ts b/src/labelGroups.ts
@@ -1,13 +1,25 @@
-import type { Map as MapGL, Label } from '@2gis/mapgl/types';
-import type { BuildingState, LabelGroupOptions } from './types/plugin';
+import type { Map as MapGL, Label, LabelImage } from '@2gis/mapgl/types';
+import type { BuildingState, LabelGroupOptions, PluginOptions } from './types/plugin';
 import type { GltfPlugin } from './plugin';
 // import { pluginEvents } from './constants';
 // import { createLabelEvenData } from './utils/events';
 
+const DEFAULT_IMAGE: LabelImage = {
+    url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHJ4PSI0IiBmaWxsPSIjZWFlYWVhIi8+PHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjI2IiBoZWlnaHQ9IjI2IiByeD0iMyIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+    size: [38, 38],
+    stretchX: [[4, 24]],
+    stretchY: [[4, 24]],
+    padding: [5, 10, 5, 10],
+};
+
 export class LabelGroups {
     private labelsByGroupId: Map<string, Label[]> = new Map();
 
-    constructor(private map: MapGL, private plugin: GltfPlugin) {}
+    constructor(
+        private map: MapGL,
+        private plugin: GltfPlugin,
+        private options: Required<PluginOptions>,
+    ) {}
 
     public add(groupOptions: LabelGroupOptions, state?: BuildingState) {
         const { id } = groupOptions;
@@ -25,13 +37,13 @@ export class LabelGroups {
                 coordinates, // + label.elevation ?? groupOptions.elevation
                 text,
                 userData,
-                image,
+                image: image === 'default' ? DEFAULT_IMAGE : image,
                 minZoom,
                 maxZoom,
                 color,
                 fontSize,
                 relativeAnchor: [0.5, 1],
-                zIndex: 1, // чтобы были выше моделей
+                zIndex: this.options.zIndex + 0.00001, // чтобы были выше моделей
             });
 
             // pluginEvents.forEach((eventType) => {

diff --git a/src/plugin.ts b/src/plugin.ts
@@ -64,7 +64,7 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
         this.map = map;
         this.options = applyOptionalDefaults(pluginOptions ?? {}, defaultOptions);
         this.models = new Map();
-        this.labelGroups = new LabelGroups(this.map, this);
+        this.labelGroups = new LabelGroups(this.map, this, this.options);
     }
 
     /**
@@ -155,6 +155,7 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
                         color: this.options.hoverOptions.color,
                     },
                     disableAnimation: true,
+                    zIndex: this.options.zIndex,
                 });
 
                 const model: Model = {

diff --git a/src/types/plugin.ts b/src/types/plugin.ts
@@ -59,6 +59,12 @@ export interface PluginOptions {
      * Color for the ground covering when an underground floor's plan is shown.
      */
     groundCoveringColor?: string;
+    /**
+     * Draw order of plugin objects (models and labels).
+     * It may be useful when other map objects (such as markers, shapes, etc.) need to be added
+     * on the map so that user could manage draw order of the plugin and these objects.
+     */
+    zIndex?: number;
 }
 
 /**
@@ -175,7 +181,7 @@ export interface LabelGroupOptions {
     /**
      * Image settings for labels' text background.
      */
-    image?: LabelImage;
+    image?: LabelImage | 'default';
     /**
      * A minimum display styleZoom of a label group.
      */