[fix]添加多个动态图层，改其中一个样式，所有都会变 review by qiw

SuperMap · Nov 12, 2024 · 60b11f4 · 60b11f4
1 parent 21f5315
commit 60b11f4
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 20 deletions.
diff --git a/src/mapboxgl/web-map/layer/animate-marker/__tests__/AnimateMarkerLayer.spec.js b/src/mapboxgl/web-map/layer/animate-marker/__tests__/AnimateMarkerLayer.spec.js
@@ -82,6 +82,7 @@ describe('AnimateMarkerLayer.vue', () => {
     });
     await mapSubComponentLoaded(wrapper);
     expect(wrapper.vm.mapTarget).toBe('map');
+    expect(wrapper.vm.viewModel.markersElement[0].className.includes('smanimatemarkerlayer-')).toBe(true);
     done();
   });
 
@@ -99,6 +100,7 @@ describe('AnimateMarkerLayer.vue', () => {
     });
     await mapSubComponentLoaded(wrapper);
     expect(wrapper.vm.mapTarget).toBe('map');
+    expect(wrapper.vm.viewModel.markersElement[0].className.includes('smanimatemarkerlayer-')).toBe(true);
     done();
   });
 
@@ -116,6 +118,7 @@ describe('AnimateMarkerLayer.vue', () => {
     });
     await mapSubComponentLoaded(wrapper);
     expect(wrapper.vm.mapTarget).toBe('map');
+    expect(wrapper.vm.viewModel.markersElement[0].className.includes('smanimatemarkerlayer-')).toBe(true);
     done();
   });
 
@@ -133,6 +136,7 @@ describe('AnimateMarkerLayer.vue', () => {
     });
     await mapSubComponentLoaded(wrapper);
     expect(wrapper.vm.mapTarget).toBe('map');
+    expect(wrapper.vm.viewModel.markersElement[0].className.includes('smanimatemarkerlayer-')).toBe(true);
     done();
   });
 
@@ -150,6 +154,7 @@ describe('AnimateMarkerLayer.vue', () => {
     });
     await mapSubComponentLoaded(wrapper);
     expect(wrapper.vm.mapTarget).toBe('map');
+    expect(wrapper.vm.viewModel.markersElement[0].className.includes('smanimatemarkerlayer-')).toBe(true);
     done();
   });
 

diff --git a/src/mapboxgl/web-map/layer/animate-marker/marker/BreathingApertureMarker.ts b/src/mapboxgl/web-map/layer/animate-marker/marker/BreathingApertureMarker.ts
@@ -17,7 +17,8 @@ export default class BreathingApertureMarker extends Marker {
 
   public setMarkersWidth(width: number): void {
     this.options.width = width;
-    let pulse = document.getElementsByClassName('sm-component-animate-marker__pulse');
+    let pulse = document.querySelectorAll(`.${this.uuid} .sm-component-animate-marker__pulse`);
+
     for (let i = 0; i < pulse.length; i++) {
       // @ts-ignore
       this._setBreathingApertureWidth(pulse[i].style);
@@ -27,12 +28,12 @@ export default class BreathingApertureMarker extends Marker {
   public setMarkersColors(colors: [string, string]): void {
     this.options.colors = colors;
     if (colors && colors.length && colors.length > 0) {
-      let dot = document.getElementsByClassName('sm-component-animate-marker__dot-point');
+      let dot = document.querySelectorAll(`.${this.uuid} .sm-component-animate-marker__dot-point`);
       for (let i = 0; i < dot.length; i++) {
         // @ts-ignore
         dot[i].style.background = this.options.colors[0];
       }
-      let pulse = document.getElementsByClassName('sm-component-animate-marker__pulse');
+      let pulse = document.querySelectorAll(`.${this.uuid} .sm-component-animate-marker__pulse`);
       for (let i = 0; i < pulse.length; i++) {
         // @ts-ignore
         let style = pulse[i].style;
@@ -45,7 +46,7 @@ export default class BreathingApertureMarker extends Marker {
   _createMarker(): void {
     this.features.features.forEach(point => {
       let markerContainer = document.createElement('div');
-      markerContainer.className = 'sm-component-animate-marker--breathing-aperture';
+      markerContainer.className = `${this.uuid} sm-component-animate-marker--breathing-aperture`;
       let dot = document.createElement('span');
       dot.className = 'sm-component-animate-marker__dot-point';
       let colors;

diff --git a/src/mapboxgl/web-map/layer/animate-marker/marker/DiffusedApertureMarker.ts b/src/mapboxgl/web-map/layer/animate-marker/marker/DiffusedApertureMarker.ts
@@ -17,7 +17,8 @@ export default class DiffusedApertureMarker extends Marker {
 
   public setMarkersWidth(width: number): void {
     this.options.width = width;
-    let markerContainer = document.getElementsByClassName('sm-component-animate-marker--diffused-aperture');
+    let markerContainer = document.querySelectorAll(`.${this.uuid}.sm-component-animate-marker--diffused-aperture`);
+
     for (let i = 0; i < markerContainer.length; i++) {
       // @ts-ignore
       let style = markerContainer[i].style;
@@ -28,7 +29,7 @@ export default class DiffusedApertureMarker extends Marker {
   public setMarkersColors(colors: [string, string]): void {
     this.options.colors = colors;
     if (colors && colors.length && colors.length > 0) {
-      let markerContainer = document.getElementsByClassName('sm-component-animate-marker--diffused-aperture');
+      let markerContainer = document.querySelectorAll(`.${this.uuid}.sm-component-animate-marker--diffused-aperture`);
       for (let i = 0; i < markerContainer.length; i++) {
         // @ts-ignore
         let style = markerContainer[i].style;
@@ -41,7 +42,7 @@ export default class DiffusedApertureMarker extends Marker {
   _createMarker(): void {
     this.features.features.forEach(point => {
       let markerContainer = document.createElement('div');
-      markerContainer.className = 'sm-component-animate-marker--diffused-aperture';
+      markerContainer.className = `${this.uuid} sm-component-animate-marker--diffused-aperture`;
       let wrapper = document.createElement('div');
       wrapper.className = 'sm-component-animate-marker__diffused-aperture-wrapper';
       let bg = document.createElement('div');

diff --git a/src/mapboxgl/web-map/layer/animate-marker/marker/FluorescenceMarker.ts b/src/mapboxgl/web-map/layer/animate-marker/marker/FluorescenceMarker.ts
@@ -17,7 +17,8 @@ export default class FluorescenceMarker extends Marker {
 
   public setMarkersWidth(width: number): void {
     this.options.width = width;
-    let markerContainer = document.getElementsByClassName('sm-component-animate-marker--fluorescence');
+    let markerContainer = document.querySelectorAll(`.${this.uuid}.sm-component-animate-marker--fluorescence`);
+
     for (let i = 0; i < markerContainer.length; i++) {
       // @ts-ignore
       this._setFluorescenceWidth(markerContainer[i].style);
@@ -27,7 +28,7 @@ export default class FluorescenceMarker extends Marker {
   public setMarkersColors(colors: [string, string]): void {
     this.options.colors = colors;
     if (colors && colors.length && colors.length > 0) {
-      let markerContainer = document.getElementsByClassName('sm-component-animate-marker--fluorescence');
+      let markerContainer = document.querySelectorAll(`.${this.uuid}.sm-component-animate-marker--fluorescence`);
       for (let i = 0; i < markerContainer.length; i++) {
         // @ts-ignore
         this._setFluorescenceColor(markerContainer[i].style);
@@ -38,7 +39,7 @@ export default class FluorescenceMarker extends Marker {
   _createMarker(): void {
     this.features.features.forEach(point => {
       let markerContainer = document.createElement('div');
-      markerContainer.className = 'sm-component-animate-marker--fluorescence';
+      markerContainer.className = `${this.uuid} sm-component-animate-marker--fluorescence`;
       let marker = document.createElement('div');
       marker.className = 'sm-component-animate-marker__fluorescence';
       markerContainer.appendChild(marker);

diff --git a/src/mapboxgl/web-map/layer/animate-marker/marker/HaloRingMarker.ts b/src/mapboxgl/web-map/layer/animate-marker/marker/HaloRingMarker.ts
@@ -17,7 +17,7 @@ export default class HaloRingMarker extends Marker {
 
   public setMarkersWidth(width: number): void {
     this.options.width = width;
-    let markerContainer = document.getElementsByClassName('sm-component-animate-marker--halo-ring');
+    let markerContainer = document.querySelectorAll(`.${this.uuid}.sm-component-animate-marker--halo-ring`);
     for (let i = 0; i < markerContainer.length; i++) {
       // @ts-ignore
       let style = markerContainer[i].style;
@@ -31,7 +31,7 @@ export default class HaloRingMarker extends Marker {
   public setMarkersColors(colors: [string, string]): void {
     this.options.colors = colors;
     if (colors && colors.length && colors.length > 0) {
-      let markerContainer = document.getElementsByClassName('sm-component-animate-marker--halo-ring');
+      let markerContainer = document.querySelectorAll(`.${this.uuid}.sm-component-animate-marker--halo-ring`);
       for (let i = 0; i < markerContainer.length; i++) {
         // @ts-ignore
         let style = markerContainer[i].style;
@@ -46,7 +46,7 @@ export default class HaloRingMarker extends Marker {
   _createMarker(): void {
     this.features.features.forEach(point => {
       let markerContainer = document.createElement('div');
-      markerContainer.className = 'sm-component-animate-marker--halo-ring';
+      markerContainer.className = `${this.uuid} sm-component-animate-marker--halo-ring`;
       let childElements = this._createMakerElement(8, 'div', [
         'sm-component-animate-marker__ring',
         'sm-component-animate-marker__halo'

diff --git a/src/mapboxgl/web-map/layer/animate-marker/marker/Marker.ts b/src/mapboxgl/web-map/layer/animate-marker/marker/Marker.ts
@@ -1,5 +1,6 @@
 import { FeatureCollection, Feature } from 'geojson';
 import { getColorWithOpacity } from 'vue-iclient/src/common/_utils/util';
+import UniqueId from 'lodash.uniqueid';
 
 interface markerOptions {
   width?: number;
@@ -9,6 +10,8 @@ interface markerOptions {
   textFontSize?: number;
 }
 export default abstract class Marker {
+  uuid: string;
+
   features: FeatureCollection;
 
   markersElement: HTMLElement[] = [];
@@ -18,6 +21,7 @@ export default abstract class Marker {
   constructor(features: FeatureCollection, options: markerOptions = {}) {
     this.features = features;
     this.options = options;
+    this.uuid = UniqueId(`smanimatemarkerlayer-`);
   }
 
   public setFeatures(features: FeatureCollection): void {

diff --git a/src/mapboxgl/web-map/layer/animate-marker/marker/RotatingApertureMarker.ts b/src/mapboxgl/web-map/layer/animate-marker/marker/RotatingApertureMarker.ts
@@ -20,7 +20,7 @@ export default class RotatingApertureMarker extends Marker {
     if (!this.options.width || this.options.width < 40) {
       return;
     }
-    let dotsMarker = document.getElementsByClassName('sm-component-animate-marker--rotating-aperture');
+    let dotsMarker = document.querySelectorAll(`.${this.uuid}.sm-component-animate-marker--rotating-aperture`);
 
     for (let i = 0; i < dotsMarker.length; i++) {
       // @ts-ignore
@@ -37,7 +37,7 @@ export default class RotatingApertureMarker extends Marker {
   public setMarkersColors(colors: [string, string]): void {
     this.options.colors = colors;
     if (colors && colors.length && colors.length > 0) {
-      let dotsMarker = document.getElementsByClassName('sm-component-animate-marker--rotating-aperture');
+      let dotsMarker = document.querySelectorAll(`.${this.uuid}.sm-component-animate-marker--rotating-aperture`);
       for (let i = 0; i < dotsMarker.length; i++) {
         // @ts-ignore
         let style = dotsMarker[i].style;
@@ -52,7 +52,7 @@ export default class RotatingApertureMarker extends Marker {
     this.features.features.forEach(point => {
       let width = this.options.width && this.options.width >= 40 ? this.options.width : 50;
       let markerContainer = document.createElement('div');
-      markerContainer.className = 'sm-component-animate-marker--rotating-aperture';
+      markerContainer.className = `sm-component-animate-marker--rotating-aperture ${this.uuid}` ;
 
       let childElements = this._createMakerElement(3, 'div', [
         'sm-component-animate-marker__dots',

diff --git a/src/mapboxgl/web-map/layer/animate-marker/marker/RotatingTextBorderMarker.ts b/src/mapboxgl/web-map/layer/animate-marker/marker/RotatingTextBorderMarker.ts
@@ -14,8 +14,7 @@ export default class RotatingTextBorderMarker extends Marker {
   options: markerOptions;
 
   constructor(features: FeatureCollection, options: markerOptions = {}) {
-    super(features);
-    this.options = options;
+    super(features, options);
     this.features && this._createMarker();
   }
 
@@ -81,7 +80,7 @@ export default class RotatingTextBorderMarker extends Marker {
   _createMarker(): void {
     this.features.features.forEach(point => {
       let markerContainer = document.createElement('div');
-      markerContainer.className = 'sm-component-animate-marker--text-boder';
+      markerContainer.className = `${this.uuid} sm-component-animate-marker--text-boder`;
       let border = document.createElement('div');
       border.className = 'sm-component-animate-marker__boder';
 
@@ -123,7 +122,7 @@ export default class RotatingTextBorderMarker extends Marker {
   }
 
   private _setMarkerContainerProperty(properties) {
-    let markerContainer = document.getElementsByClassName('sm-component-animate-marker--text-boder');
+    let markerContainer = document.querySelectorAll(`.${this.uuid}.sm-component-animate-marker--text-boder`);
     for (let i = 0; i < markerContainer.length; i++) {
       // @ts-ignore
       let style = markerContainer[i].style;