fix: fix the problem of failing to get viewer through useVueCesium

zouyaoji · Aug 12, 2022 · dd6df58 · dd6df58
1 parent 5d3e2b8
commit dd6df58
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 23 deletions.
diff --git a/packages/components/geometry-instance/src/index.ts b/packages/components/geometry-instance/src/index.ts
@@ -1,10 +1,10 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-09-16 09:28:13
- * @LastEditTime: 2022-04-20 09:33:54
+ * @LastEditTime: 2022-08-12 11:48:54
  * @LastEditors: zouyaoji
  * @Description:
- * @FilePath: \vue-cesium@next\packages\components\geometry-instance\src\index.ts
+ * @FilePath: \10_vue-cesium\packages\components\geometry-instance\src\index.ts
  */
 import type { VcComponentInternalInstance, VcComponentPublicInstance, VcGeometry, VcReadyObject } from '@vue-cesium/utils/types'
 import { defineComponent, getCurrentInstance, createCommentVNode, PropType, ref, h, provide, VNode } from 'vue'
@@ -91,7 +91,6 @@ export default defineComponent({
 
     // provide
     provide(vcKey, getServices())
-    instance.appContext.config.globalProperties.$VueCesium = getServices()
 
     // expose public methods
     Object.assign(instance.proxy, {

diff --git a/packages/components/viewer/src/defaultProps.ts b/packages/components/viewer/src/defaultProps.ts
@@ -205,5 +205,6 @@ export default {
     default: '1000'
   },
   viewerCreator: Function as PropType<VcViewerCreatorFunction>,
-  mars3dConfig: Object as PropType<Mars3dConfig>
+  mars3dConfig: Object as PropType<Mars3dConfig>,
+  containerId: String
 }
diff --git a/packages/components/viewer/src/index.ts b/packages/components/viewer/src/index.ts
@@ -1,12 +1,12 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-09-16 09:28:13
- * @LastEditTime: 2022-04-12 14:56:24
+ * @LastEditTime: 2022-08-12 11:40:04
  * @LastEditors: zouyaoji
  * @Description:
- * @FilePath: \vue-cesium@next\packages\components\viewer\src\index.ts
+ * @FilePath: \10_vue-cesium\packages\components\viewer\src\index.ts
  */
-import { defineComponent, provide, getCurrentInstance, h, createCommentVNode, withDirectives } from 'vue'
+import { defineComponent, provide, getCurrentInstance, h, createCommentVNode, withDirectives, computed } from 'vue'
 import type { VNode } from 'vue'
 import useViewer, { viewerProps } from './useViewer'
 import type { VcViewerProps } from './useViewer'
@@ -98,9 +98,14 @@ export default defineComponent({
     instance.cesiumMembersEvents = viewerEvents
     const viewerStates = useViewer(props, ctx, instance)
 
+    const containerId = computed<string>(() => {
+      return props.containerId || (ctx.attrs.id as string) || 'cesiumContainer'
+    })
+
     // provide
     provide<VcViewerProvider>(vcKey, viewerStates.getServices())
-    instance.appContext.config.globalProperties.$VueCesium = viewerStates.getServices()
+    instance.appContext.config.globalProperties.$VueCesium = instance.appContext.config.globalProperties.$VueCesium || {}
+    instance.appContext.config.globalProperties.$VueCesium[containerId.value] = viewerStates.getServices()
     // expose public methods
     Object.assign(instance.proxy, {
       creatingPromise: viewerStates.creatingPromise,
@@ -135,7 +140,7 @@ export default defineComponent({
             {
               ref: viewerStates.viewerRef,
               class: kebabCase(instance.proxy?.$options.name || ''),
-              id: ctx.attrs.id || 'cesiumContainer',
+              id: containerId.value,
               style: ctx.attrs.style || { width: '100%', height: '100%' }
             },
             hSlot(ctx.slots.default)

diff --git a/packages/components/viewer/src/useViewer.ts b/packages/components/viewer/src/useViewer.ts
@@ -1615,7 +1615,14 @@ export interface VcViewerProps {
    * Default value: 1000
    */
   touchHoldArg?: string
+  /**
+   * for mars3d only.
+   */
   mars3dConfig?: Mars3dConfig
+  /**
+   * Specifies the container id of the viewer.
+   */
+  containerId?: string
   /**
    * Specify the initialization method of the viewer when loading non-standard third-party Cesium libraries.
    */

diff --git a/packages/composables/use-datasources/index.ts b/packages/composables/use-datasources/index.ts
@@ -141,7 +141,7 @@ export default function (props, ctx, vcInstance: VcComponentInternalInstance) {
 
   // provide
   provide(vcKey, getServices())
-  vcInstance.appContext.config.globalProperties.$VueCesium = getServices()
+
   return {
     transformProps: commonState.transformProps,
     unwatchFns: commonState.unwatchFns,

diff --git a/packages/composables/use-drawing/use-drawing-fab.ts b/packages/composables/use-drawing/use-drawing-fab.ts
@@ -1,10 +1,10 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-10-13 09:45:59
- * @LastEditTime: 2022-06-06 17:54:52
+ * @LastEditTime: 2022-08-12 11:47:07
  * @LastEditors: zouyaoji
  * @Description:
- * @FilePath: \vue-cesium@next\packages\composables\use-drawing\use-drawing-fab.ts
+ * @FilePath: \10_vue-cesium\packages\composables\use-drawing\use-drawing-fab.ts
  */
 import { VcCollectionPrimitive } from '@vue-cesium/components/primitive-collections'
 import type { VcFabProps, VcFabRef } from '@vue-cesium/components/ui'
@@ -312,7 +312,6 @@ export default function (
   }
 
   provide<VcDrawingProvider>(vcKey, getServices())
-  instance.appContext.config.globalProperties.$VueCesium = getServices()
 
   // expose public methods
   Object.assign(instance.proxy, {

diff --git a/packages/composables/use-primitive-collections/index.ts b/packages/composables/use-primitive-collections/index.ts
@@ -1,10 +1,10 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-06-04 13:55:35
- * @LastEditTime: 2022-02-15 09:15:08
+ * @LastEditTime: 2022-08-12 11:47:16
  * @LastEditors: zouyaoji
  * @Description:
- * @FilePath: \vue-cesium@next\packages\composables\use-primitive-collections\index.ts
+ * @FilePath: \10_vue-cesium\packages\composables\use-primitive-collections\index.ts
  */
 /**
  * for
@@ -15,7 +15,7 @@
  * PolylineCollection
  */
 
-import { VcComponentInternalInstance } from '@vue-cesium/utils/types'
+import { VcComponentInternalInstance, VcViewerProvider } from '@vue-cesium/utils/types'
 import useCommon from '../use-common'
 import { mergeDescriptors } from '@vue-cesium/utils/merge-descriptors'
 import { provide } from 'vue'
@@ -47,7 +47,7 @@ export default function (props, ctx, vcInstance: VcComponentInternalInstance) {
     return primitives && primitives.remove(collection)
   }
 
-  const getServices = () => {
+  const getServices = (): VcViewerProvider => {
     return mergeDescriptors(commonState.getServices(), {
       get primitives() {
         return vcInstance.cesiumObject as Collection
@@ -57,7 +57,6 @@ export default function (props, ctx, vcInstance: VcComponentInternalInstance) {
 
   // provide
   provide(vcKey, getServices())
-  vcInstance.appContext.config.globalProperties.$VueCesium = getServices()
 
   return {
     transformProps: commonState.transformProps,

diff --git a/packages/composables/use-primitives/index.ts b/packages/composables/use-primitives/index.ts
@@ -104,7 +104,6 @@ export default function (props, ctx, vcInstance: VcComponentInternalInstance) {
 
   // provide
   provide(vcKey, getServices())
-  vcInstance.appContext.config.globalProperties.$VueCesium = getServices()
 
   // expose public methods
   Object.assign(vcInstance.proxy, {

diff --git a/packages/composables/use-vue-cesium/index.ts b/packages/composables/use-vue-cesium/index.ts
@@ -1,21 +1,21 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-04-06 09:21:02
- * @LastEditTime: 2022-03-04 00:59:58
+ * @LastEditTime: 2022-08-12 11:50:40
  * @LastEditors: zouyaoji
  * @Description:
- * @FilePath: \vue-cesium@next\packages\composables\use-vue-cesium\index.ts
+ * @FilePath: \10_vue-cesium\packages\composables\use-vue-cesium\index.ts
  */
 import { getCurrentInstance, inject } from 'vue'
 import { VcViewerProvider } from '@vue-cesium/utils/types'
 import useLog from '@vue-cesium/composables/private/use-log'
 import { vcKey } from '@vue-cesium/utils/config'
 
-export default function useVueCesium(): VcViewerProvider {
+export default function useVueCesium(containerId?: string): VcViewerProvider {
   const instance = getCurrentInstance()
   const logger = useLog(undefined)
   if (instance) {
-    return inject<VcViewerProvider>(vcKey) || (instance.appContext.config.globalProperties.$VueCesium as VcViewerProvider)
+    return containerId ? (instance.appContext.config.globalProperties.$VueCesium[containerId] as VcViewerProvider) : inject<VcViewerProvider>(vcKey)
   } else {
     logger.warn('VueCesium useVueCesium() can only be used inside setup().')
   }