@sword916/vae-map-plus 1.0.0

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

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

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

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

@@ -0,0 +1,158 @@
+// 计算两点距离
+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)
+}