@sword916/vae-map-plus 1.0.0 → 1.0.1

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

@@ -1,161 +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-map/vae-lrmap.jsx

@@ -1,237 +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 { useContextMenu } from '@/composables/useContextMenu'
-
-export default defineComponent({
-  name: 'VaeLrmap',
-  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 }) {
-    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 } = useContextMenu({
-      mapRef: map,
-      mapContainerRef,
-      menusRef: toRef(props, 'contextMenu')
-    })
-
-    const createContextInstance = (includeMap) => {
-      const {
-        leafletOptions, requestOptions, treeLayers, visibleKeys,
-        requestServer, queryEntity, showLayers, showLayerSets, 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),
-        showLayers: showLayers.bind(client.value),
-        showLayerSets: showLayerSets.bind(client.value),
-        getThumbnail: getThumbnail.bind(client.value)
-      }
-      const mapFunctions = includeMap ? {
-        refreshMap: () => {
-          refreshTileLayer()
-          setDefaultView()
-        },
-        reloadMap
-      } : null
-
-      return _.merge(properties, layerProperties, requestFunctions, mapFunctions)
-    }
-
-    const openInnerMask = (text) => {
-      innerLoading.value = true
-      innerLoadingText.value = text
-    }
-
-    const closeInnerMask = () => {
-      innerLoading.value = false
-      innerLoadingText.value = ''
-    }
-
-    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.Client(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)
-    }
-
-    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' })
-        })
-      })
-    }
-
-    const mapLoading = computed(() => loading.value || innerLoading.value)
-    const mapLoadingText = computed(() => loadingText.value || innerLoadingText.value)
-
-    watch(
-      () => props.options,
-      () => {
-        if (!inited.value) {
-          requestMeta({ alert: true })
-        }
-      },
-      { deep: true }
-    )
-
-    onMounted(() => {
-      requestMeta({ alert: false })
-    })
-
-    onBeforeUnmount(() => {
-      map.value?.remove()
-    })
-
-    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"
-          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/vae-map.jsx

@@ -1,135 +0,0 @@
-import { defineComponent, nextTick, onBeforeUnmount, ref, toRef, watch } from 'vue'
-import { idGen } from '@/utils'
-import ResizeListener from '@/components/resize-listener/index.js'
-import { useContextMenu } from '@/composables/useContextMenu'
-
-export default defineComponent({
-  name: 'VaeMap',
-  props: {
-    height: {
-      type: String,
-      default: '100%'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    baseLayers: {
-      type: [String, Array],
-      default: () => []
-    },
-    contextMenu: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: ['init-map'],
-  setup(props, { emit }) {
-    const destroyed = ref(false)
-    const uuid = ref(`vae_map_${idGen()}`)
-    const map = ref(null)
-    const tileLayers = ref(null)
-    const mapContainerRef = ref(null)
-
-    const { addContextMenu, renderContextMenu } = useContextMenu({
-      mapRef: map,
-      mapContainerRef,
-      menusRef: toRef(props, 'contextMenu')
-    })
-
-    const initTileLayers = () => {
-      if (!map.value) {
-        return
-      }
-
-      if (!tileLayers.value) {
-        tileLayers.value = L.layerGroup().addTo(map.value)
-      }
-
-      tileLayers.value.clearLayers()
-      let layers = props.baseLayers
-      if (_.isString(layers)) {
-        layers = [layers]
-      }
-      if (Array.isArray(layers)) {
-        layers.forEach((value) => {
-          L.tileLayer.chinaProvider(value).addTo(tileLayers.value)
-        })
-      }
-    }
-
-    const createMap = () => {
-      if (!map.value) {
-        const options = L.extend({
-          center: [34.2943, 117.357],
-          zoom: 12,
-          maxZoom: 25,
-          zoomControl: false,
-          attributionControl: false
-        }, props.options)
-
-        map.value = L.map(uuid.value, options)
-        map.value.whenReady(() => {
-          addContextMenu()
-          initTileLayers()
-          emit('init-map', map.value)
-        })
-      }
-    }
-
-    const resizeMap = () => {
-      if (!map.value) {
-        createMap()
-      }
-      map.value?.invalidateSize()
-    }
-
-    const reloadMap = () => {
-      map.value?.remove()
-      map.value = null
-      tileLayers.value = null
-      destroyed.value = true
-      nextTick(() => {
-        destroyed.value = false
-        nextTick(() => {
-          createMap()
-        })
-      })
-    }
-
-    watch(
-      () => props.baseLayers,
-      () => {
-        if (map.value) {
-          initTileLayers()
-        }
-      },
-      { deep: true }
-    )
-
-    onBeforeUnmount(() => {
-      map.value?.remove()
-    })
-
-    return () => {
-      if (destroyed.value) {
-        return null
-      }
-
-      return (
-        <ResizeListener
-          ref={mapContainerRef}
-          class="vae-map"
-          style={{ height: props.height, width: props.width }}
-          onResize={resizeMap}>
-          <div class="leaflet-map" id={uuid.value}></div>
-          {renderContextMenu()}
-        </ResizeListener>
-      )
-    }
-  }
-})

package/src/plugins/L.AnimatedMarker/index.js

@@ -1,158 +0,0 @@
-// 计算两点距离
-function calcDistance(p1, p2) {
-    function toPoint(v) {
-        if (Array.isArray(v) && v.length == 2) {
-            return { x: v[0], y: v[1] }
-        } else if (v.lat && v.lng) {
-            return { x: v.lat, y: v.lng }
-        } else {
-            return v
-        }
-    }
-    p1 = toPoint(p1)
-    p2 = toPoint(p2)
-
-    return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y))
-}
-
-// 活动Marker
-L.AnimatedMarker = L.Marker.extend({
-
-    /**
-     * 活动状态
-     * 1. disabled 不可用
-     * 2. free 空闲
-     * 3. move 移动中
-     * 4. pause 暂停中
-     */
-    _status: 'disabled',
-
-    chunkMoveTimer: null,
-
-    options: {
-        // 持续时间
-        duration: 5000,
-        // 轨迹序列
-        latLngs: [],
-        // 浮于其他Marker上层
-        zIndexOffset: 1000
-    },
-
-    initialize(options) {
-        L.setOptions(this, options)
-        const latLngs = this.options.latLngs
-        if (latLngs && latLngs.length > 1) {
-            L.Marker.prototype.initialize.call(this, latLngs[0], this.options)
-            this._status = 'free'
-        } else {
-            console.error('invalid latLngs')
-        }
-    },
-
-    // 开始动画
-    startMove() {
-        if (this._status == 'free') {
-            const { duration, latLngs } = this.options
-            let totalDistance = 0
-            let stepDistances = []
-            let stepDurations = []
-            for (let i = 0; i < latLngs.length - 1; i++) {
-                const d = calcDistance(latLngs[i], latLngs[i + 1])
-                totalDistance += d
-                stepDistances.push(d)
-            }
-            stepDistances.forEach(v => {
-                stepDurations.push(v / totalDistance * duration)
-            })
-            this.stepDurations = stepDurations
-            this.chunkIndex = 0
-            this._status = 'move'
-
-            // 加入延迟，确保popup和tooltip显示正常
-            this.setLatLng(latLngs[0])
-            _.delay(() => {
-                this.chunkMove()
-                this.fire('startmove')
-            })
-        } else {
-            console.error('instance is not free')
-        }
-    },
-
-    // 分段移动
-    chunkMove() {
-        if (this.chunkIndex < this.stepDurations.length) {
-            if (this._status == 'pause') {
-                return
-            }
-            const stepDuration = this.stepDurations[this.chunkIndex]
-            const transition = `transform ${stepDuration}ms linear`
-            this.setTransition(transition)
-            this.chunkIndex += 1
-            _.delay(() => {
-                this.fire('chunkmove', { index: this.chunkIndex, duration: stepDuration })
-                this.setLatLng(this.options.latLngs[this.chunkIndex])
-                this.chunkMoveTimer = _.delay(this.chunkMove.bind(this), stepDuration)
-            })
-        } else {
-            this.stopMove()
-        }
-    },
-
-    // 设置动画参数
-    setTransition(transition) {
-        const transitionProperties = L.DomUtil.TRANSITION
-        const iconStyle = this._icon ? this._icon.style : ""
-        if (iconStyle) {
-            iconStyle[transitionProperties] = transition
-        }
-        const shadowStyle = this._shadow ? this._shadow.style : ""
-        if (shadowStyle) {
-            shadowStyle[transitionProperties] = transition
-        }
-        const toolTip = this.getTooltip()
-        const toolTipStyle = (toolTip && toolTip._container) ? toolTip._container.style : ""
-        if (toolTipStyle) {
-            toolTipStyle[transitionProperties] = transition
-        }
-        const popup = this.getPopup()
-        const popupStyle = (popup && popup._container) ? popup._container.style : ""
-        if (popupStyle) {
-            popupStyle[transitionProperties] = transition
-        }
-    },
-
-    // 停止动画
-    stopMove() {
-        this._status = 'free'
-        this.setTransition(null)
-        if (this.chunkMoveTimer) {
-            clearTimeout(this.chunkMoveTimer)
-            this.chunkMoveTimer = null
-        }
-        this.setLatLng(_.last(this.options.latLngs))
-        this.fire('stopmove')
-    },
-
-    // 暂停动画
-    pauseMove() {
-        if (this._status == 'move') {
-            this._status = 'pause'
-            this.fire('pausemove')
-        }
-    },
-
-    // 继续动画
-    continueMove() {
-        if (this._status == 'pause') {
-            this._status = 'move'
-            this.fire('continuemove')
-            this.chunkMove()
-        }
-    }
-
-})
-
-L.animatedMarker = (options) => {
-    return new L.AnimatedMarker(options)
-}