From 39e791a76b7fe29a929619c88e40bb4b6cb0d507 Mon Sep 17 00:00:00 2001
From: huangli <naivemap@163.com>
Date: Thu, 8 Jun 2023 22:22:20 +0800
Subject: [PATCH] =?UTF-8?q?bug(echarts-layer):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=A4=9A=E4=B8=AA=E5=AE=9E=E4=BE=8B=E5=9D=90=E6=A0=87=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E5=A4=B1=E6=95=88=E9=97=AE=E9=A2=98=20#5=20(#6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mapbox-gl-echarts-layer/lib/index.ts | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/mapbox-gl-echarts-layer/lib/index.ts b/packages/mapbox-gl-echarts-layer/lib/index.ts
index 52968ea..9b7c6ef 100644
--- a/packages/mapbox-gl-echarts-layer/lib/index.ts
+++ b/packages/mapbox-gl-echarts-layer/lib/index.ts
@@ -1,6 +1,7 @@
 import {
   init,
   registerCoordinateSystem,
+  getCoordinateSystemDimensions,
   ComposeOption,
   EffectScatterSeriesOption,
   LegendComponentOption,
@@ -21,24 +22,26 @@ export type ECOption = ComposeOption<
 const COORDINATE_SYSTEM_NAME = 'mapboxgl-echarts'
 
 class CoordinateSystem {
-  map: mapboxgl.Map
+  id: string
   dimensions = ['x', 'y']
+  private _map: mapboxgl.Map
   private _mapOffset = [0, 0]
 
-  constructor(map: mapboxgl.Map) {
-    this.map = map
+  constructor(id: string, map: mapboxgl.Map) {
+    this.id = id
+    this._map = map
   }
 
   create(ecModel: any) {
     ecModel.eachSeries((seriesModel: any) => {
-      if (seriesModel.get('coordinateSystem') === COORDINATE_SYSTEM_NAME) {
-        seriesModel.coordinateSystem = new CoordinateSystem(this.map)
+      if (seriesModel.get('coordinateSystem') === this.id) {
+        seriesModel.coordinateSystem = new CoordinateSystem(this.id, this._map)
       }
     })
   }
 
   dataToPoint(data: [number, number]) {
-    const px = this.map.project(data)
+    const px = this._map.project(data)
     const mapOffset = this._mapOffset
 
     return [px.x - mapOffset[0], px.y - mapOffset[1]]
@@ -46,7 +49,7 @@ class CoordinateSystem {
 
   pointToData(pt: [number, number]) {
     const mapOffset = this._mapOffset
-    const data = this.map.unproject([pt[0] + mapOffset[0], pt[1] + mapOffset[1]])
+    const data = this._map.unproject([pt[0] + mapOffset[0], pt[1] + mapOffset[1]])
     return [data.lng, data.lat]
   }
 
@@ -76,20 +79,23 @@ export default class EChartsLayer implements mapboxgl.CustomLayerInterface {
   private _map!: mapboxgl.Map
   private _ec: echarts.ECharts | undefined
   private _coordSystemName: string
-  private _registered = false
   private _ecOption: ECOption
 
   constructor(id: string, ecOption: ECOption) {
     this.id = id
     this.type = 'custom'
     this.renderingMode = '2d'
-    this._coordSystemName = COORDINATE_SYSTEM_NAME
+    this._coordSystemName = COORDINATE_SYSTEM_NAME + '-' + Math.random().toString(16).substring(2)
     this._ecOption = ecOption
   }
 
   onAdd(map: mapboxgl.Map) {
     this._map = map
     this._createLayerContainer()
+    if (!getCoordinateSystemDimensions(this._coordSystemName)) {
+      const coordinateSystem = new CoordinateSystem(this._coordSystemName, this._map)
+      registerCoordinateSystem(this._coordSystemName, coordinateSystem as any)
+    }
   }
 
   onRemove() {
@@ -123,11 +129,6 @@ export default class EChartsLayer implements mapboxgl.CustomLayerInterface {
   }
 
   private _prepareECharts() {
-    if (!this._registered) {
-      const coordinateSystem = new CoordinateSystem(this._map)
-      registerCoordinateSystem(this._coordSystemName, coordinateSystem as any)
-      this._registered = true
-    }
     const series = this._ecOption.series as any[]
     if (series) {
       for (let i = series.length - 1; i >= 0; i--) {