@sword916/vae-map-plus 1.0.0

package/src/packages/vae-cloudmap/scripts/Mixin.ContextMenu/index.js

@@ -0,0 +1,101 @@
+import { computed, h, nextTick, onBeforeUnmount, ref, unref, watch } from 'vue'
+import ContextMenu from '../../ctrl-context-menu/index.vue'
+
+function resolveElement(target) {
+  return target?.$el ?? target ?? null
+}
+
+export function useCloudmapContextMenu({ mapRef, mapContainerRef, menusRef }) {
+  const contextMenuRef = ref(null)
+  const showContextMenu = ref(false)
+  const contextMenuEvent = ref(null)
+  const contextMenuLeft = ref(0)
+  const contextMenuTop = ref(0)
+
+  const menuList = computed(() => unref(menusRef) ?? [])
+
+  const hideContextMenu = () => {
+    const map = unref(mapRef)
+    map?.off('click', hideContextMenu)
+    showContextMenu.value = false
+    contextMenuEvent.value = null
+  }
+
+  const handleCallback = (callback) => {
+    showContextMenu.value = false
+    if (callback && _.isFunction(callback)) {
+      callback(contextMenuEvent.value)
+    }
+  }
+
+  const handleRightClick = async (event) => {
+    showContextMenu.value = true
+    contextMenuEvent.value = event
+    await nextTick()
+
+    const menuEl = resolveElement(contextMenuRef.value)
+    const containerEl = resolveElement(unref(mapContainerRef))
+    if (!menuEl || !containerEl) {
+      return
+    }
+
+    const menuHeight = menuEl.scrollHeight
+    const menuWidth = menuEl.scrollWidth
+    const containerHeight = containerEl.scrollHeight
+    const containerWidth = containerEl.scrollWidth
+
+    contextMenuLeft.value = event.containerPoint.x
+    contextMenuTop.value = event.containerPoint.y
+
+    if (contextMenuLeft.value + menuWidth > containerWidth && containerWidth > menuWidth) {
+      contextMenuLeft.value = containerWidth - menuWidth
+    }
+
+    if (contextMenuTop.value + menuHeight > containerHeight && containerHeight > menuHeight) {
+      contextMenuTop.value = containerHeight - menuHeight
+    }
+
+    unref(mapRef)?.on('click', hideContextMenu)
+  }
+
+  const addContextMenu = () => {
+    const map = unref(mapRef)
+    if (!map) {
+      return
+    }
+    map.off('contextmenu', handleRightClick)
+    if (menuList.value.length > 0) {
+      map.on('contextmenu', handleRightClick)
+    }
+  }
+
+  watch(menuList, addContextMenu, { deep: true })
+
+  onBeforeUnmount(() => {
+    const map = unref(mapRef)
+    map?.off('contextmenu', handleRightClick)
+    map?.off('click', hideContextMenu)
+  })
+
+  const renderContextMenu = () => {
+    if (menuList.value.length === 0 || !showContextMenu.value) {
+      return null
+    }
+
+    return h(ContextMenu, {
+      ref: contextMenuRef,
+      menus: menuList.value,
+      left: contextMenuLeft.value,
+      top: contextMenuTop.value,
+      onCallback: handleCallback
+    })
+  }
+
+  return {
+    addContextMenu,
+    hideContextMenu,
+    renderContextMenu
+  }
+}
+
+export default useCloudmapContextMenu

package/src/packages/vae-cloudmap/style.less

@@ -0,0 +1,163 @@
+.vae-map,
+.vae-lrmap {
+    position: relative;
+
+    .leaflet-map {
+        height: 100%;
+        width: 100%;
+        background: transparent;
+
+        #tooltips();
+    }
+
+    .loading-mask {
+        position: absolute;
+        z-index: 2000;
+        background: rgba(255, 255, 255, 0.8);
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transition: opacity 0.3s;
+
+        
+
+        .wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+
+            .loading-icon {
+                font-size: 42px;
+                color: #409eff;
+            }
+
+            .loading-text {
+                font-size: 14px;
+                color: #409eff;
+                margin-top: 5px;
+            }
+        }
+    }
+}
+
+#tooltips() {
+    .icon--simple-text {
+        background: rgba(255, 255, 255, 0.8);
+        border: 1px solid #dcdfe6;
+        color: #303133;
+        font-size: 12px;
+        font-weight: bold;
+        padding: 2px 4px;
+        text-align: center;
+        margin-top: -25px !important;
+        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
+
+        &.dark {
+            color: white;
+            background: #343a40;
+        }
+    }
+
+    .ht-tooltip {
+        font-size: 12px;
+        padding: 2px 4px;
+
+        .action {
+            margin-right: 2px;
+        }
+
+        .green {
+            color: seagreen;
+            font-weight: bold;
+        }
+
+        .red {
+            color: firebrick;
+            font-weight: bold;
+        }
+    }
+}
+
+.vae-map-ctrl--draw {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    z-index: 1000;
+    border-radius: 5px;
+
+    .item-group {
+        background: #f4f4f5;
+        border-radius: 4px;
+        box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.2);
+
+        &:not(:first-child) {
+            margin-top: 6px;
+        }
+
+        .item {
+            display: flex;
+            align-items: center;
+            position: relative;
+
+            &:not(:first-child) {
+                border-top: 1px solid #e4e7ed;
+            }
+
+            .item-icon {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                height: 34px;
+                width: 36px;
+                color: #606266;
+                font-size: 16px;
+                cursor: pointer;
+
+                &:hover {
+                    color: #409eff;
+                }
+
+                &.disabled {
+                    color: #909399;
+                }
+            }
+
+            .tooltips {
+                position: absolute;
+                font-size: 12px;
+                color: #606266;
+                left: 100%;
+                margin-left: 6px;
+                width: max-content;
+
+                span {
+                    padding: 6px 9px;
+                    background: #3a8ee6;
+                    color: white;
+                    cursor: pointer;
+
+                    &:hover {
+                        background: #409eff;
+                    }
+
+                    &:not(:first-child) {
+                        border-left: 1px solid white;
+                    }
+
+                    &:first-child {
+                        border-top-left-radius: 2px;
+                        border-bottom-left-radius: 2px;
+                    }
+
+                    &:last-child {
+                        border-top-right-radius: 2px;
+                        border-bottom-right-radius: 2px;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/packages/vae-cloudmap/vae-cloudmap.jsx

@@ -0,0 +1,272 @@
+import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
+import { idGen } from '@/utils'
+import ResizeListener from '@/components/resize-listener/index.js'
+import { useAutoMessage } from '@/composables/useAutoMessage'
+import { useCloudmapContextMenu } from './scripts/Mixin.ContextMenu'
+
+export default defineComponent({
+  name: 'VaeCloudmap',
+  props: {
+    height: {
+      type: String,
+      default: '100%'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    beforeCreate: {
+      type: Function,
+      default: _.noop
+    },
+    contextMenu: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['init-map', 'reload-map'],
+  setup(props, { emit, expose }) {
+    const autoMessage = useAutoMessage()
+    const destroyed = ref(false)
+    const client = ref(null)
+    const uuid = ref(`vae_lrmap_${idGen()}`)
+    const map = ref(null)
+    const inited = ref(false)
+    const loading = ref(false)
+    const loadingText = ref('')
+    const innerLoading = ref(false)
+    const innerLoadingText = ref('')
+    const tileLayer = ref(null)
+    const mapContainerRef = ref(null)
+    const { addContextMenu, renderContextMenu } = useCloudmapContextMenu({
+      mapRef: map,
+      mapContainerRef,
+      menusRef: toRef(props, 'contextMenu')
+    })
+
+    const mapLoading = computed(() => loading.value || innerLoading.value)
+    const mapLoadingText = computed(() => loadingText.value || innerLoadingText.value)
+
+    const createContextInstance = (includeMap) => {
+      const {
+        leafletOptions, requestOptions, treeLayers, visibleKeys,
+        requestServer, queryEntity, getFeatureDict, showLayers, showLayerSets, getLayerSetsKeys, getThumbnail
+      } = client.value
+
+      const properties = _.merge({ el: uuid.value, client: client.value }, leafletOptions, requestOptions)
+      const layerProperties = includeMap ? { treeLayers, visibleKeys } : {}
+      const requestFunctions = {
+        requestServer: requestServer.bind(client.value),
+        queryEntity: queryEntity.bind(client.value),
+        getFeatureDict: getFeatureDict.bind(client.value),
+        showLayers: showLayers.bind(client.value),
+        showLayerSets: showLayerSets.bind(client.value),
+        getLayerSetsKeys: getLayerSetsKeys.bind(client.value),
+        getThumbnail: getThumbnail.bind(client.value)
+      }
+      const mapFunctions = includeMap ? {
+        refreshMap: () => {
+          refreshTileLayer()
+          setDefaultView()
+        },
+        reloadMap
+      } : null
+
+      return _.merge(properties, layerProperties, requestFunctions, mapFunctions)
+    }
+
+    const openMask = (text) => {
+      loading.value = true
+      loadingText.value = text
+    }
+
+    const closeMask = () => {
+      loading.value = false
+      loadingText.value = ''
+    }
+
+    const openInnerMask = (text) => {
+      innerLoading.value = true
+      innerLoadingText.value = text
+    }
+
+    const closeInnerMask = () => {
+      innerLoading.value = false
+      innerLoadingText.value = ''
+    }
+
+    const onFail = (obj) => {
+      if (typeof props.options?.onFail === 'function') {
+        props.options.onFail(obj.message)
+      }
+    }
+
+    const refreshTileLayer = () => {
+      if (!map.value || !client.value) {
+        return
+      }
+      if (tileLayer.value) {
+        map.value.removeLayer(tileLayer.value)
+      }
+      tileLayer.value = client.value.currentTileLayer().addTo(map.value)
+    }
+
+    const refreshClient = () => {
+      client.value = new L.Vae.CloudClient(L.extend({ uid: uuid.value }, props.options))
+      client.value.on('message', (event) => {
+        autoMessage({
+          message: event.message,
+          type: event.messageType
+        })
+      })
+      client.value.on('openmask', (event) => {
+        openInnerMask(event.text)
+      })
+      client.value.on('closemask', closeInnerMask)
+      client.value.on('refreshtilelayer', refreshTileLayer)
+      client.value.on('fail', onFail)
+    }
+
+    const setDefaultView = (animate = true) => {
+      if (map.value) {
+        if (props.options.zoom && props.options.center) {
+          return
+        }
+        map.value.fitBounds(client.value.leafletOptions.bounds, { animate })
+      }
+    }
+
+    const createMap = () => {
+      if (!map.value) {
+        const options = L.extend(
+          {
+            zoomControl: false,
+            attributionControl: false,
+            doubleClickZoom: false
+          },
+          _.omit(props.options, ['url', 'dsname', 'layerTreeType', 'defaultLayers', 'defaultLayerSets']),
+          _.pick(client.value.leafletOptions, ['crs', 'center', 'maxZoom'])
+        )
+        map.value = L.map(uuid.value, options)
+        setDefaultView(false)
+
+        return new Promise((resolve) => {
+          map.value.whenReady(resolve)
+        })
+      }
+
+      return Promise.resolve()
+    }
+
+    const extendMapInstance = () => {
+      map.value.vae = {}
+      _.merge(map.value.vae, createContextInstance(true))
+    }
+
+    const requestMeta = ({ event = 'init-map', alert = true } = {}) => {
+      refreshClient()
+      client.value.start(alert).then(async (metaReady) => {
+        if (!metaReady) {
+          return
+        }
+
+        await props.beforeCreate(createContextInstance(false))
+        await client.value.setDefaultLayers()
+        await createMap()
+        addContextMenu()
+        refreshTileLayer()
+        extendMapInstance()
+        emit(event, map.value)
+
+        if (event === 'init-map') {
+          inited.value = true
+        }
+      })
+    }
+
+    const resizeMap = () => {
+      map.value?.invalidateSize()
+    }
+
+    const reloadMap = () => {
+      map.value?.remove()
+      map.value = null
+      tileLayer.value = null
+      destroyed.value = true
+      nextTick(() => {
+        destroyed.value = false
+        nextTick(() => {
+          requestMeta({ event: 'reload-map' })
+        })
+      })
+    }
+
+    watch(
+      () => props.options,
+      () => {
+        if (!inited.value) {
+          requestMeta({ alert: true })
+        }
+      },
+      { deep: true }
+    )
+
+    onMounted(() => {
+      requestMeta({ alert: false })
+    })
+
+    onBeforeUnmount(() => {
+      map.value?.remove()
+    })
+
+    expose({
+      requestMeta,
+      refreshClient,
+      createMap,
+      extendMapInstance,
+      createContextInstance,
+      refreshTileLayer,
+      setDefaultView,
+      openMask,
+      closeMask,
+      openInnerMask,
+      closeInnerMask,
+      resizeMap,
+      reloadMap,
+      onFail
+    })
+
+    return () => {
+      if (destroyed.value) {
+        return null
+      }
+
+      const loadingMask = mapLoading.value ? (
+        <div class="loading-mask">
+          <div class="wrapper">
+            <div class="loading-icon">
+              <i class="fas fa-circle-notch fa-spin"></i>
+            </div>
+            <div class="loading-text">{mapLoadingText.value}</div>
+          </div>
+        </div>
+      ) : null
+
+      return (
+        <ResizeListener
+          ref={mapContainerRef}
+          class="vae-lrmap cloudmap"
+          style={{ height: props.height, width: props.width }}
+          onResize={resizeMap}>
+          <div class="leaflet-map" id={uuid.value}></div>
+          {renderContextMenu()}
+          {loadingMask}
+        </ResizeListener>
+      )
+    }
+  }
+})

package/src/packages/vae-map/ctrl-context-menu/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="vae-map-ctrl--context-menu" :style="style">
+    <template v-for="item in menus" :key="item.text">
+      <div class="item" :class="{ 'is-disabled': item.disabled, 'is-divided': item.divided }" @click="handleItemClick(item)">
+        {{ item.text }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  left: {
+    type: Number,
+    default: 0
+  },
+  top: {
+    type: Number,
+    default: 0
+  },
+  menus: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['callback'])
+
+const handleItemClick = (item) => {
+  if (!item.disabled) {
+    emit('callback', item.callback)
+  }
+}
+
+const style = computed(() => ({
+  left: `${props.left}px`,
+  top: `${props.top}px`
+}))
+</script>
+
+<style lang="less" scoped>
+.vae-map-ctrl--context-menu {
+  position: absolute;
+  width: 200px;
+  background-color: white;
+  padding: 3px 0;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  z-index: 2000;
+
+  .item {
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+    padding: 0 12px;
+    letter-spacing: 1px;
+    cursor: default;
+
+    &:not(:first-child).is-divided {
+      border-top: 1px solid #dcdfe6;
+    }
+
+    &:hover {
+      background-color: #eee;
+    }
+
+    &.is-disabled {
+      color: #c0c4cc;
+      background-color: white;
+    }
+  }
+}
+</style>