@sword916/vae-map-plus 1.0.0 → 1.0.1

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

@@ -1,101 +0,0 @@
-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

@@ -1,163 +0,0 @@
-.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

@@ -1,272 +0,0 @@
-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

@@ -1,74 +0,0 @@
-<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>