gis-common 2.1.2 → 2.2.3

package/src/core/WebSocketClient.js

@@ -0,0 +1,104 @@
+import EventType from '../constant/EventTypeConstant'
+import EventDispatcher from './EventDispatcher'
+export default class WebSocketClient extends EventDispatcher {
+    constructor(url = 'ws://127.0.0.1:10088') {
+        super()
+        this.maxCheckTimes = 10
+        this.url = url
+        this.checkTimes = 0
+        this.connectStatus = false
+        this.connect()
+        this.connCheckStatus(this.maxCheckTimes)
+        // this.heartbeat()
+        WebSocketClient.instance = this
+    }
+    connect() {
+        this.disconnect()
+        if (this.url) {
+            try {
+                console.info('创建ws连接>>>' + this.url)
+                this.client = new WebSocket(this.url)
+                if (this.client) {
+                    const self = this
+                    this.client.onopen = function (message) {
+                        self.dispatchEvent({
+                            type: EventType.WEB_SOCKET_CONNECT,
+                            message,
+                        })
+                    }
+                    this.client.onmessage = function (message) {
+                        self.connectStatus = true
+                        self.dispatchEvent({
+                            type: EventType.WEB_SOCKET_MESSAGE,
+                            message,
+                        })
+                    }
+                    this.client.onclose = function (message) {
+                        self.dispatchEvent({
+                            type: EventType.WEB_SOCKET_CLOSE,
+                            message,
+                        })
+                    }
+                    if (this.checkTimes === this.maxCheckTimes) {
+                        this.client.onerror = function (message) {
+                            self.dispatchEvent({
+                                type: EventType.WEB_SOCKET_ERROR,
+                                message,
+                            })
+                        }
+                    }
+                }
+            } catch (ex) {
+                console.error('创建ws连接失败' + this.url + ':' + ex)
+            }
+        }
+    }
+    disconnect() {
+        if (this.client) {
+            try {
+                console.log('ws断开连接' + this.url)
+                this.client.close()
+                this.client = null
+            } catch (ex) {
+                this.client = null
+            }
+        }
+    }
+    connCheckStatus(times) {
+        if (this.checkTimes > times) return
+        setTimeout(() => {
+            this.checkTimes++
+            if (this.client && this.client.readyState !== 0 && this.client.readyState !== 1) {
+                this.connect()
+            }
+            this.connCheckStatus(times)
+        }, 2000)
+    }
+    send(message) {
+        if (this.client && this.client.readyState === 1) {
+            this.client.send(message)
+            return true
+        }
+        console.error(this.url + '消息发送失败：' + message)
+        return false
+    }
+    heartbeat() {
+        setTimeout(() => {
+            if (this.client && this.client.readyState === 1) {
+                this.send('HeartBeat')
+            }
+            console.log('HeartBeat,' + this.url)
+            setTimeout(this.heartbeat, 30000)
+        }, 1000)
+    }
+    static getInstance() {
+        if (WebSocketClient.instance) {
+            return WebSocketClient.instance
+        } else {
+            return Object.freeze(new WebSocketClient())
+        }
+    }
+    static get _instance() {
+        return this.getInstance()
+    }
+}

package/src/core/WebStorage.js

@@ -0,0 +1,73 @@
+import ErrorType from "../constant/ErrorTypeConstant";
+export default class WebStorage {
+    constructor(type = 1) {
+        this.cacheType = type;
+        if (type === 1) {
+            this.storage = window.localStorage;
+        } else if (type === 2) {
+            this.storage = window.sessionStorage;
+        } else {
+            throw new Error(ErrorType.PARAMETER_ERROR);
+        }
+    }
+
+    /**
+     * 设置带过期时间的LocalStorage
+     * @param key       缓存关键字
+     * @param value     缓存对象，可以是任意类型
+     * @param expired   以秒为单位，默认为1小时
+     * @returns {Object}
+     */
+    setItem(key, value, expired) {
+        const tempObj = { key, value };
+        if (this.cacheType === 1) {
+            const currTime = Date.now();
+            if (expired) {
+                tempObj.expired = currTime + expired * 1000;
+            }
+        }
+        this.storage[key] = JSON.stringify(tempObj);
+        return tempObj;
+    }
+
+    /***
+     * 获取带过期时间的缓存
+     * @param key
+     * @returns {null|*}
+     */
+    getItem(key) {
+        const storageData = this.storage.getItem(key) || null;
+        const tempObj = JSON.parse(storageData) || {};
+        if (this.cacheType === 1) {
+            const expired = tempObj.expired || Date.now();
+            if (Date.now() > expired) {
+                this.remove(key);
+                return null;
+            }
+        }
+        return tempObj.value;
+    }
+
+    /**
+     * 移除指定缓存
+     * @param keys
+     */
+    remove(keys) {
+        if (keys) {
+            if (keys.indexOf(",") > -1) {
+                keys.split(",").forEach(key => {
+                    this.storage.removeItem(key);
+                });
+            } else {
+                this.storage.removeItem(keys);
+            }
+        }
+    }
+
+    /**
+     * 移出全部缓存
+     */
+    clear() {
+        this.storage.clear();
+    }
+}

package/src/index.js

@@ -0,0 +1,10 @@
+export * from './utils'
+export * from './constant'
+export { default as AudioPlayer } from './core/AudioPlayer'
+export { default as CanvasDrawer } from './core/CanvasDrawer'
+export { default as ElQuery } from './core/ElQuery'
+export { default as EventDispatcher } from './core/EventDispatcher'
+export { default as HashMap } from './core/HashMap'
+export { default as WebSocketClient } from './core/WebSocketClient'
+export { default as WebStorage } from './core/WebStorage'
+export { default as DevicePixelRatio } from './core/DevicePixelRatio'

package/src/utils/AnimateUtils.js

@@ -0,0 +1,78 @@
+export default {
+    /**
+     *  多属性的动画函数
+     * @param {*} ele 需要运动的节点
+     * @param {*} attr_options 传入的是一个需要运动的属性包括运动的目标值，操作的节点属性
+     * @param {*} timefn 运动的形式，默认是缓冲运动
+     * @param {*} speed  运动的速度
+     */
+    animate(ele, attr_options, callback, timefn = "swing", speed = 5) {
+        for (var attr in attr_options) {
+            attr_options[attr] = {
+                target:
+                    attr === "opacity"
+                        ? parseInt(attr_options[attr] * 100)
+                        : attr_options[attr],
+                // 需要计算得到
+                iNow:
+                    attr === "opacity"
+                        ? parseInt(getComputedStyle(ele)[attr] * 100)
+                        : parseInt(getComputedStyle(ele)[attr])
+            };
+        }
+
+        // 判断是不是匀速运动
+        if (timefn === "liner") {
+            speed =
+                attr_options[attr].iNow < attr_options[attr].target
+                    ? Math.abs(speed)
+                    : -Math.abs(speed);
+        }
+        //    为了防止每个节点的定时器冲突，每次进入的时候我们需要先清理下节点的定时器
+        clearInterval(ele.timer);
+        //    然后再去设置定时器
+        ele.timer = setInterval(function() {
+            // 因为是多属性运动，我们首先循环遍历每一个属性
+            for (var attr in attr_options) {
+                var target = attr_options[attr].target;
+
+                var iNow = attr_options[attr].iNow;
+
+                // 计算speed 判断是不是缓冲运动
+                if (timefn === "swing") {
+                    speed = (target - iNow) / 20;
+                    // 为了防止速度无法达到一个整数
+                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
+                }
+
+                // 运动之中条件的判断
+                if (Math.abs(target - iNow) <= Math.abs(speed)) {
+                    if (attr === "opacity") {
+                        ele.style[attr] = target / 100;
+                    } else {
+                        ele.style[attr] = target + "px";
+                    }
+
+                    // 每次一个属性运动完成之后我们就直接将它删除
+                    delete attr_options[attr];
+
+                    // 每次都去循环看一下还有没有属性需要操作
+                    for (var num in attr_options) {
+                        return false;
+                    }
+                    // 清理定时器 因为我们是一个定时器绑定多个属性操作所以我们需要保证所有的属性都完成之后我们才可以将定时器清除
+                    clearInterval(ele.timer);
+                    // 等结束之后我们需要判断这个回到函数是函数我们就回调
+                    typeof callback === "function" ? callback() : "";
+                } else {
+                    attr_options[attr].iNow += speed;
+                    if (attr === "opacity") {
+                        ele.style[attr] = attr_options[attr].iNow / 100;
+                    } else {
+                        ele.style[attr] = attr_options[attr].iNow + "px";
+                    }
+                }
+            }
+        }, 30);
+    }
+};

package/src/utils/ArrayUtils.js

@@ -0,0 +1,82 @@
+import CommUtils from './CommUtils'
+/**
+ * 分组函数，暂时无法进行多层分组。如有需要可以使用groupBy+map+flat方法打平
+ * @param {*} f
+ */
+Array.prototype.groupBy = function (f) {
+    var groups = {}
+    this.forEach(function (o) {
+        var group = JSON.stringify(f(o))
+        groups[group] = groups[group] || []
+        groups[group].push(o)
+    })
+    return Object.keys(groups).map((group) => groups[group])
+}
+/**
+ * 用于数组对象去重
+ * 单纯数组可用[...new Set(arr)]
+ * @param {*} f
+ */
+Array.prototype.distinct = function (f) {
+    const arr = [],
+        obj = {}
+    this.forEach((item) => {
+        const val = f(item)
+        !obj[val] && (obj[val] = arr.push(item))
+    })
+    return arr
+}
+Array.prototype.max = function () {
+    return Math.max.apply({}, this)
+}
+Array.prototype.min = function () {
+    return Math.min.apply({}, this)
+}
+Array.prototype.sum = function () {
+    return this.length > 0 ? this.reduce((prev = 0, curr = 0) => prev + curr) : 0
+}
+Array.prototype.avg = function () {
+    return this.length ? this.sum() / this.length : 0
+}
+Array.prototype.desc = function (f) {
+    return this.sort((n1, n2) => (f ? f(n2) : n2) - (f ? f(n1) : n1))
+}
+Array.prototype.asc = function (f) {
+    return this.sort((n1, n2) => (f ? f(n1) : n1) - (f ? f(n2) : n2))
+}
+Array.prototype.clear = function () {
+    this.length = 0
+    return this
+}
+export default {
+    asArray(obj) {
+        return CommUtils.isEmpty(obj) ? [] : Array.isArray(obj) ? obj : [obj]
+    },
+    generateArray(length) {
+        return [...new Array(length).keys()]
+    },
+    union(...args) {
+        let res = []
+        args.forEach((arg) => {
+            if (Array.isArray(arg)) {
+                res = res.concat(arg.filter((v) => !res.includes(v)))
+            }
+        })
+        return res
+    },
+    intersection(...args) {
+        let res = args[0] || []
+        args.forEach((arg) => {
+            if (Array.isArray(arg)) {
+                res = res.filter((v) => arg.includes(v))
+            }
+        })
+        return res
+    },
+    unionAll(...args) {
+        return [...args].flat().filter((d) => !!d)
+    },
+    difference(...args) {
+        return this.union(...args).filter((d) => !this.intersection(...args).includes(d))
+    },
+}

package/src/utils/BrowserUtils.js

@@ -0,0 +1,107 @@
+export default {
+    getUrlParams(href = window.location.href, needDecode = true) {
+        const reg = /([^&=]+)=([\w\W]*?)(&|$|#)/g
+        const { search, hash } = new URL(href)
+        const args = [search, hash]
+        let obj = {}
+        for (let i = 0; i < args.length; i++) {
+            const str = args[i]
+            if (str) {
+                const s = str.replace(/#|\//g, '')
+                const arr = s.split('?')
+                if (arr.length > 1) {
+                    for (let i = 1; i < arr.length; i++) {
+                        let res
+                        while ((res = reg.exec(arr[i]))) {
+                            obj[res[1]] = needDecode ? decodeURIComponent(res[2]) : res[2]
+                        }
+                    }
+                }
+            }
+        }
+        return obj
+    },
+    getExplorer() {
+        var explorer = window.navigator.userAgent
+        if (explorer.indexOf('MSIE') >= 0) {
+            return 'IE'
+        }
+        if (!!window.ActiveXObject || 'ActiveXObject' in window) {
+            // IE
+            return 'IE'
+        } else if (explorer.indexOf('Firefox') >= 0) {
+            // Firefox
+            return 'Firefox'
+        } else if (explorer.indexOf('Chrome') >= 0) {
+            // Chrome
+            return 'Chrome'
+        } else if (explorer.indexOf('Opera') >= 0) {
+            // Opera
+            return 'Opera'
+        } else if (explorer.indexOf('Safari') >= 0) {
+            // Safari
+            return 'Safari'
+        }
+    },
+    detectOS() {
+        let os_type = ''
+        const windows = navigator.userAgent.indexOf('Windows', 0) != -1 ? 1 : 0
+        const mac = navigator.userAgent.indexOf('mac', 0) != -1 ? 1 : 0
+        const linux = navigator.userAgent.indexOf('Linux', 0) != -1 ? 1 : 0
+        const unix = navigator.userAgent.indexOf('X11', 0) != -1 ? 1 : 0
+        if (windows) os_type = 'MS Windows'
+        else if (mac) os_type = 'Apple mac'
+        else if (linux) os_type = 'Linux'
+        else if (unix) os_type = 'Unix'
+        return os_type
+    },
+    switchFullScreen(status) {
+        if (status) {
+            const element = document.documentElement
+            if (element.requestFullscreen) {
+                element.requestFullscreen()
+            } else if (element.msRequestFullscreen) {
+                element.msRequestFullscreen()
+            } else if (element.mozRequestFullScreen) {
+                element.mozRequestFullScreen()
+            } else if (element.webkitRequestFullscreen) {
+                element.webkitRequestFullscreen()
+            }
+        } else {
+            if (document.exitFullscreen) {
+                document.exitFullscreen()
+            } else if (document.msExitFullscreen) {
+                document.msExitFullscreen()
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen()
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen()
+            }
+        }
+    },
+    /**
+     * scale屏幕适配方案
+     */
+    refreshScale() {
+        const baseWidth = document.documentElement.clientWidth
+        const baseHeight = document.documentElement.clientHeight
+        const appStyle = document.getElementById('app').style
+        const realRatio = baseWidth / baseHeight
+        const designRatio = 16 / 9
+        let scaleRate = baseWidth / 1920
+        if (realRatio > designRatio) {
+            scaleRate = baseHeight / 1080
+        }
+        appStyle.transformOrigin = 'left top'
+        appStyle.transform = `scale(${scaleRate}) translateX(-49.99%)`
+        appStyle.width = `${baseWidth / scaleRate}px`
+    },
+    /**
+     * rem屏幕适配方案
+     */
+    getHtmlFontSize() {
+        const htmlwidth = document.documentElement.clientWidth || document.body.clientWidth
+        const htmlDom = document.querySelector('html')
+        htmlDom.style.fontSize = htmlwidth / 192 + 'px'
+    },
+}

package/src/utils/CommUtils.js

@@ -0,0 +1,230 @@
+import { ErrorType } from '../constant'
+
+/* eslint-disable no-extend-native, space-in-parens */
+export default {
+    /**
+     * 判断数据类型
+     *
+     * @param {*} data
+     * @returns {*}
+     */
+    getDataType(data) {
+        return Object.prototype.toString.call(data).slice(8, -1)
+    },
+    isEmpty(value) {
+        if (value == null) {
+            // 等同于 value === undefined || value === null
+            return true
+        }
+        const type = this.getDataType(value)
+        switch (type) {
+            case 'String':
+                return value.trim() === ''
+            case 'Array':
+                return !value.length
+            case 'Object':
+                return !Object.keys(value).length
+            case 'Boolean':
+                return !value
+            default:
+                return false // 其他对象均视作非空
+        }
+    },
+    isNotEmpty(val) {
+        return !this.isEmpty(val)
+    },
+    json2form(json) {
+        const formData = new FormData()
+        Object.keys(json).forEach((key) => {
+            formData.append(key, json[key] instanceof Object ? JSON.stringify(json[key]) : json[key])
+        })
+        return formData
+    },
+    /**
+     * json转换成get参数形式
+     *
+     * @param {*} json
+     * @returns {*}
+     */
+    json2Query(json) {
+        var tempArr = []
+        for (var i in json) {
+            var key = i
+            var value = json[i]
+            tempArr.push(key + '=' + value)
+        }
+        var urlParamsStr = tempArr.join('&')
+        return urlParamsStr
+    },
+    generateGuid() {
+        const S4 = function () {
+            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+        }
+        return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
+    },
+    decodeDict(...args) {
+        let res = ''
+        if (args.length > 1) {
+            const items = args.slice(1, args.length % 2 === 0 ? args.length - 1 : args.length)
+            for (let i = 0; i < items.length; i = i + 2) {
+                const item = items[i]
+                if (args[0] === item) {
+                    res = items[i + 1]
+                }
+            }
+            if (!res && args.length % 2 === 0) {
+                res = args[args.length - 1]
+            }
+        } else {
+            res = args[0]
+        }
+        return res
+    },
+    extend(dest, ...args) {
+        let i, j, len, src
+        for (j = 0, len = args.length; j < len; j++) {
+            src = args[j]
+            for (i in src) {
+                dest[i] = src[i]
+            }
+        }
+        return dest
+    },
+    rgb2hex(rgb) {
+        var hex = '#' + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1)
+        return hex
+    },
+    /**
+     * 将平级对象列表转换为树形结构对象列表
+     *
+     * @param {Array} data
+     * @param {string} [idPropertyName="id"]
+     * @param {string} [parentIdPropertyName="parentId"]
+     * @param {string} [childrenPropertyName="children"]
+     * @returns {*}
+     */
+    convertToTree2(data, idPropertyName = 'id', parentIdPropertyName = 'parentId', childrenPropertyName = 'children') {
+        const result = []
+        function buildChildren(item) {
+            const id = item[idPropertyName]
+            const children = data.filter((item2) => item2.hasOwnProperty(parentIdPropertyName) && item2[parentIdPropertyName] === id)
+            if (children.length > 0) {
+                children.forEach(buildChildren)
+                item[childrenPropertyName] = children
+            }
+        }
+        for (const item of data) {
+            if (data.findIndex((t) => t[idPropertyName] === item[parentIdPropertyName]) === -1) {
+                buildChildren(item)
+                result.push(item)
+            }
+        }
+        return result
+    },
+    /**
+     * 异步加载script
+     *
+     * @param {*} url
+     */
+    asyncLoadScript(url) {
+        return new Promise((resolve, reject) => {
+            try {
+                var oscript = document.createElement('script')
+                if (oscript.readyState) {
+                    // ie8及以下版本
+                    oscript.onreadystatechange = function () {
+                        if (oscript.readyState === 'complete' || oscript.readyState === 'loaded') {
+                            resolve(oscript)
+                        }
+                    }
+                } else {
+                    oscript.onload = function () {
+                        resolve(oscript)
+                    }
+                }
+                oscript.type = 'text/javascript'
+                oscript.src = url
+                document.body.appendChild(oscript)
+            } catch (error) {
+                reject(error)
+            }
+        })
+    },
+    loadStyle(urls) {
+        urls.forEach((url) => {
+            const css = document.createElement('link')
+            css.href = url
+            css.rel = 'stylesheet'
+            css.type = 'text/css'
+            document.head.appendChild(css)
+        })
+    },
+    /**
+     * 提取json中的value组成一个新的字符串
+     * eg: template('aaa{key}', json)
+     *
+     * @param {*} str
+     * @param {*} data
+     * @returns {*}
+     */
+    template(str, data) {
+        const templateRe = /\{ *([\w_-]+) *\}/g
+        return str.replace(templateRe, function (str, key) {
+            var value = data[key]
+            if (value === undefined) {
+                throw new Error(ErrorType.JSON_VALUE_ERROR + str)
+            } else if (typeof value === 'function') {
+                value = value(data)
+            }
+            return value
+        })
+    },
+    deleteEmptyProperty(data) {
+        return Object.fromEntries(
+            Object.keys(data)
+                .filter((d) => !this.isEmpty(data[d]))
+                .map((i) => [i, data[i]])
+        )
+    },
+    deepAssign() {
+        let len = arguments.length,
+            target = arguments[0]
+        if (this.getDataType(target) !== 'Object') {
+            target = {}
+        }
+        for (let i = 1; i < len; i++) {
+            let source = arguments[i]
+            if (this.getDataType(source) === 'Object') {
+                for (let s in source) {
+                    if (s === '__proto__' || target === source[s]) {
+                        continue
+                    }
+                    if (this.getDataType(source[s]) === 'Object') {
+                        target[s] = this.deepAssign(target[s], source[s])
+                    } else {
+                        target[s] = source[s]
+                    }
+                }
+            }
+        }
+        return target
+    },
+    handleCopyValue(text) {
+        if (!navigator.clipboard && window.isSecureContext) {
+            return navigator.clipboard.writeText(text)
+        } else {
+            const textArea = document.createElement('textarea')
+            textArea.style.position = 'fixed'
+            textArea.style.top = textArea.style.left = '-100vh'
+            textArea.style.opacity = '0'
+            textArea.value = text
+            document.body.appendChild(textArea)
+            textArea.focus()
+            textArea.select()
+            return new Promise((resolve, reject) => {
+                document.execCommand('copy') ? resolve() : reject(new Error('copy failed'))
+                textArea.remove()
+            })
+        }
+    },
+}