gis-common 2.1.2 → 2.2.3

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "gis-common",
     "description": "gis-common",
-    "main": "dist/resource.min.js",
-    "version": "2.1.2",
+    "main": "src/index.js",
+    "version": "2.2.3",
     "author": "Guo.Yan <luv02@vip.qq.com>",
     "license": "MIT",
     "private": false,
@@ -10,12 +10,14 @@
         "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --port 7000",
         "build": "cross-env NODE_ENV=production webpack --progress"
     },
+    "files": [
+        "src"
+    ],
     "browserslist": [
         "> 1%",
         "last 2 versions",
         "not ie <= 8"
     ],
-    "files": [],
     "devDependencies": {
         "babel-core": "^6.26.0",
         "babel-loader": "^7.1.2",

package/src/constant/ErrorTypeConstant.js

@@ -0,0 +1,20 @@
+export default {
+    LOGIN_EXPIRED: '登录信息过期，请重新登录',
+    CROSS_ERROR: '跨域访问',
+    UNEXIST_RESOURCE: '资源不存在',
+    TIMEOUT: '请求超时',
+    INTERNAL_ERROR: '内部错误',
+    NETWORK_ERROR: '请求失败，请检查网络是否已连接',
+    PROCESS_FAIL: '处理失败',
+    AUTH_VERIFY_ERROR: '权限验证失败',
+    NO_DATA_FOUND: '未找到数据',
+    DUPLICATE_INSTANCE: '实例为单例模式，不允许重复构建',
+    COORDINATE_ERROR: '坐标验证失败',
+    JSON_PARSE_ERROR: 'JSON解析失败，格式有误',
+    JSON_VALUE_ERROR: 'JSON无此键',
+    PARAMETER_ERROR: '参数验证失败',
+    PARAMETER_ERROR_ARRAY: '参数格式验证失败：必须是数组',
+    PARAMETER_ERROR_STRING: '参数格式验证失败：必须是字符',
+    PARAMETER_ERROR_FUNCTION: '参数格式验证失败：必须是函数',
+    PARAMETER_ERROR_LACK: '参数缺失',
+}

package/src/constant/EventTypeConstant.js

@@ -0,0 +1,23 @@
+export default {
+    MAP_RENDER: "mapRender",
+    MAP_READY: "mapReady",
+    MOUSE_CLICK: "click",
+    MOUSE_DOUBLE_CLICK: "dblclick",
+    MOUSE_MOVE: "mousemove",
+    MOUSE_IN: "mousein",
+    MOUSE_OUT: "mouseout",
+    MOUSE_RIGHT_CLICK: "mouseRightClick",
+    KEY_DOWN: "keyDown",
+    KEY_UP: "keyUp",
+    DRAW_ACTIVE: "drawActive",
+    DRAW_MOVE: "drawMove",
+    DRAW_COMPLETE: "drawComplete",
+    MQTT_CONNECT: "mqttConnect",
+    MQTT_ERROR: "mqttError",
+    MQTT_MESSAGE: "mqttMessage",
+    MQTT_CLOSE: "mqttClose",
+    WEB_SOCKET_CONNECT: "webSocketConnect",
+    WEB_SOCKET_ERROR: "webSocketError",
+    WEB_SOCKET_MESSAGE: "webSocketMessage",
+    WEB_SOCKET_CLOSE: "webSocketClose"
+};

package/src/constant/GraphicConstant.js

@@ -0,0 +1,16 @@
+export const GraphicType = {
+    POINT: 'point',
+    POLYLINE: 'polyline',
+    POLYGON: 'polygon',
+    BILLBOARD: 'billboard',
+    CYLINDER: 'cylinder',
+    ELLIPSOID: 'ellipsoid',
+    LABEL: 'label',
+    MODEL: 'model',
+    WALL: 'wall',
+}
+export const MeasureMode = {
+    DISTANCE: 'distance',
+    AREA: 'area',
+    HEIGHT: 'height',
+}

package/src/constant/LayerType.js

@@ -0,0 +1,9 @@
+export default {
+    SUPER_MAP_IMAGES: "SuperMapImages", // 超图影像服务 栅格数据
+    SUPER_MAP_DATA: "SuperMapData", // 超图服务 矢量数据
+    ARC_GIS_MAP_IMAGES: "ArcGisMapImages", // arcGis影像图层 栅格数据
+    ARC_GIS_MAP_DATA: "ArcGisMapData", // arcGis图层 矢量数据
+    OSGB_LAYER: "OSGBLayer",
+    S3M_GROUP: "S3MGroup", //  addS3MGroupLayer(url, options, index)  添加S3M分组图层。
+    TERRAIN_LAYER: "TerrainFileLayer" // 地形图层, 需要单独处理
+};

package/src/constant/index.js

@@ -0,0 +1,4 @@
+export { default as EventType } from './EventTypeConstant'
+export { default as ErrorType } from './ErrorTypeConstant'
+export { default as LayerType } from './LayerType'
+export * from './GraphicConstant'

package/src/core/AudioPlayer.js

@@ -0,0 +1,30 @@
+/**
+ * @description 声音播放类
+ * @export
+ * @class AudioPlayer
+ */
+export default class AudioPlayer {
+	/**
+	 * Creates an instance of AudioPlayer.
+	 * @param {*} url
+	 */
+	constructor(url) {
+		this.audio = new Audio()
+		this.audio.src = url
+	}
+	play() {
+		!this.muted && this.audio.play()
+	}
+	pause() {
+		this.audio.pause()
+	}
+	get muted() {
+		return this.audio.muted
+	}
+	/**
+	 * @description 设置静音状态,如果静音,autoplay属性将失效
+	 */
+	set muted(val) {
+		this.audio.muted = val
+	}
+}

package/src/core/CanvasDrawer.js

@@ -0,0 +1,51 @@
+import CommUtils from '../utils/CommUtils'
+import MathUtils from '../utils/MathUtils';
+export default class CanvasDrawer {
+    constructor(el) {
+        if (CommUtils.getDataType(el) === 'String') {
+            el = document.querySelector('#' + el)
+        }
+        this.ctx = el.getContext('2d')
+	}
+	drawLine(startX, startY, endX, endY, options = {}) {
+		this.cxt.beginPath();
+		const width = options.width || 1
+		const color = options.color || '#000'
+		this.cxt.lineWidth = width;
+		this.cxt.fillStyle = color;// 经过测试不管是fillStyle还是StrokeStyle都是一样的
+		this.cxt.moveTo(startX, startY);
+		this.cxt.lineTo(endX, endY);
+		this.cxt.closePath();
+		this.cxt.fill();
+	}
+    /**
+     * 绘制圆弧
+     * @param {*} x 圆心X坐标
+     * @param {*} y 圆心Y坐标
+     * @param {*} radius 半径
+     * @param {*} startAngle 开始的弧度
+     * @param {*} endAngle 结束的弧度
+     * @param {*} anticlockwise true为逆时针，false为顺时针
+     * @param {boolean} isOnlyArc
+     * @param {boolean} isFill 是否是填充，false为绘制边框，true为绘制填充
+     * @param {*} bgColor 圆弧的颜色
+     * @memberof CanvasDrawer
+     */
+    drawArc(x, y, radius, startAngle, endAngle, anticlockwise, isFill, bgColor) {
+        if (isFill) {
+            //为true绘制填充圆弧
+            this.cxt.fillStyle = bgColor
+            this.cxt.beginPath()
+            this.cxt.arc(x, y, radius, MathUtils.degreesToRadians(startAngle), MathUtils.degreesToRadians(endAngle), anticlockwise)
+            this.cxt.closePath()
+            this.cxt.fill()
+        } else {
+            //为false绘制边框圆弧
+            this.cxt.strokeStyle = bgColor
+            this.cxt.beginPath()
+            this.cxt.arc(x, y, radius, MathUtils.degreesToRadians(startAngle), MathUtils.degreesToRadians(endAngle), anticlockwise)
+
+            this.cxt.stroke()
+        }
+	}
+}

package/src/core/DevicePixelRatio.js

@@ -0,0 +1,86 @@
+export default class DevicePixelRatio {
+    constructor(magnification = 1) {
+        this.magnification = magnification
+    }
+    // 获取系统类型
+    _getSystem() {
+        // let flag = false;
+        var agent = navigator.userAgent.toLowerCase()
+        //		var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
+        //		if(isMac) {
+        //			return false;
+        //		}
+        // 现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
+        if (agent.indexOf('windows') >= 0) {
+            return true
+        }
+    }
+    // 获取页面缩放比例
+    //	_getDevicePixelRatio() {
+    //		let t = this;
+    //	}
+    // 监听方法兼容写法
+    _addHandler(element, type, handler) {
+        if (element.addEventListener) {
+            element.addEventListener(type, handler, false)
+        } else if (element.attachEvent) {
+            element.attachEvent('on' + type, handler)
+        } else {
+            element['on' + type] = handler
+        }
+    }
+    // 校正浏览器缩放比例
+    _correct() {
+        // 配合px2rem插件进行自适应布局
+        let pageWidth = window.innerWidth
+        //为了ie也能拿到可视窗口宽度
+        if (typeof pageWidth != 'number') {
+            //标准模式
+            if (document.compatMode == 'CSS1Compat') {
+                pageWidth = document.documentElement.clientWidth
+                //怪异模式
+            } else {
+                pageWidth = document.body.clientWidth
+            }
+        }
+        if (pageWidth <= 750) {
+            const baseSize = 75
+            // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
+            const scale = document.documentElement.clientWidth / pageWidth
+            // 设置页面根节点字体大小
+            document.documentElement.style.fontSize = this.magnification * baseSize * Math.min(scale, 2) + 'px'
+        } else if (pageWidth > 750 && pageWidth <= 1200) {
+            const baseSize = 85
+            // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
+            const scale = document.documentElement.clientWidth / pageWidth
+            // 设置页面根节点字体大小
+            document.documentElement.style.fontSize = this.magnification * baseSize * Math.min(scale, 2) + 'px'
+        } else {
+            const baseSize = 100
+            // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
+            const scale = document.documentElement.clientWidth / 1920
+            // 设置页面根节点字体大小
+            document.documentElement.style.fontSize = this.magnification * baseSize * Math.min(scale, 2) + 'px'
+        }
+    }
+    // 监听页面缩放
+    _watch() {
+        let t = this
+        t._addHandler(window, 'resize', function () {
+            // 注意这个方法是解决全局有两个window.resize
+            // 重新校正
+            t._correct()
+        })
+    }
+    // 初始化页面比例
+    init() {
+        let t = this
+        if (t._getSystem()) {
+            // 判断设备，目前只在windows系统下校正浏览器缩放比例
+            // 初始化页面校正浏览器缩放比例
+            t._correct()
+            // 开启监听页面缩放
+            t._watch()
+        }
+    }
+}

package/src/core/ElQuery.js

@@ -0,0 +1,88 @@
+export default class ElQuery {
+    constructor(selector, el = document) {
+        if (typeof selector == 'string') {
+            if (selector.charAt(0) == '<' && selector.slice(-1) == '>') {
+                var ele = selector.slice(1, -1)
+                this[0] = document.createElement(ele)
+                this.length = 1
+            } else {
+                var all = el.querySelectorAll(selector)
+                for (var i = 0; i < all.length; i++) {
+                    this[i] = all[i]
+                }
+                this.length = all.length
+            }
+        } else if (typeof selector == 'undefined') {
+            return this
+        } else if (typeof selector == 'function') {
+            this.ready(selector)
+        } else if (selector.nodeType == 1) {
+            this[0] = selector
+            this.length = 1
+        }
+    }
+    each(callback) {
+        for (var i = 0; i < this.length; i++) {
+            callback(this[i], i)
+        }
+    }
+    html(val) {
+        this.each(function (obj) {
+            obj.innerHTML = val
+        })
+        return this
+    }
+    css(attr, val) {
+        this.each(function (obj) {
+            if (typeof attr == 'object') {
+                for (var i in attr) {
+                    if (i == 'width' || i == 'height' || i == 'margin' || i == 'fontSize') {
+                        obj.style[i] = parseInt(attr[i]) + 'px'
+                    }
+                    obj.style[i] = attr[i]
+                }
+            } else {
+                obj.style[attr] = val
+            }
+        })
+        return this
+    }
+    ready(callback) {
+        document.addEventListener('DOMContentLoaded', (e) => {
+            callback.call(this, e)
+        })
+    }
+    click(callback) {
+        this.each(function (obj) {
+            obj.onclick = (e) => {
+                callback.call(this, e, obj)
+            }
+        })
+        return this
+    }
+    on(type, callback) {
+        this.each((obj) => {
+            obj.removeEventListener(type, (e) => {
+                callback.call(this, e)
+            })
+            obj.addEventListener(type, (e) => {
+                callback.call(this, e)
+            })
+        })
+    }
+    appendTo(dom) {
+        if (typeof dom == 'string') {
+            var all = document.querySelectorAll(dom)
+            var ele = this[0]
+            for (var i = 0; i < all.length; i++) {
+                this[i] = ele.cloneNode(true)
+                all[i].appendChild(this[i])
+                this.length = all.length
+            }
+        } else {
+            dom.appendChild(this[0])
+        }
+        return this
+    }
+}
+window.$ = (selector, el) => new ElQuery(selector, el)

package/src/core/EventDispatcher.js

@@ -0,0 +1,93 @@
+function EventDispatcher() {}
+
+Object.assign(EventDispatcher.prototype, {
+    /**
+     * 添加监听器
+     * @param type{string}
+     * @param listener{function}
+     * @param mutexStatus{boolean}
+     */
+    addEventListener(type, listener, context, mutexStatus = false) {
+        if (this._listeners === undefined) this._listeners = {}
+        this._mutex = this._mutex || {}
+        this._context = context
+        const mutex = this._mutex
+        const listeners = this._listeners
+
+        if (listeners[type] === undefined) {
+            listeners[type] = []
+        }
+
+        if (listeners[type].indexOf(listener) === -1) {
+            // 如果启用功能独占
+            if (mutexStatus) {
+                mutex[type] = listener
+            }
+            listeners[type].push(listener)
+        }
+        return this
+    },
+
+    hasEventListener(type, listener) {
+        if (this._listeners === undefined) return false
+
+        const listeners = this._listeners
+
+        return listeners[type] !== undefined && listeners[type].indexOf(listener) !== -1
+    },
+
+    removeEventListener(type, listener) {
+        if (this._listeners === undefined) return
+
+        const listeners = this._listeners
+        const listenerArray = listeners[type]
+
+        // 移除指定的功能独占
+        if (this._mutex[type] === listener) {
+            this._mutex[type] = null
+        }
+
+        if (listenerArray !== undefined) {
+            const index = listenerArray.map((d) => d.toString()).indexOf(listener.toString())
+
+            if (index !== -1) {
+                listenerArray.splice(index, 1)
+            }
+        }
+    },
+
+    /**
+     * 派发事件
+     * @param event{{type: string, message: {}}}
+     */
+    dispatchEvent(event) {
+        if (this._listeners === undefined) return
+
+        const listeners = this._listeners
+        const listenerArray = listeners[event.type]
+
+        if (listenerArray !== undefined) {
+            event.target = this
+
+            // Make a copy, in case listeners are removed while iterating.
+            const array = listenerArray.slice(0)
+            if (this._mutex[event.type]) {
+                const find = array.find((item) => item === this._mutex[event.type])
+                find.call(this._context || this, event)
+                return
+            }
+            for (let i = 0, l = array.length; i < l; i++) {
+                array[i].call(this._context || this, event)
+            }
+        }
+    },
+
+    removeAllListener() {
+        this._mutex = {}
+        for (const key in this._listeners) {
+            this._listeners[key] = []
+        }
+    },
+})
+
+export default EventDispatcher

package/src/core/HashMap.js

@@ -0,0 +1,36 @@
+export default class HashMap {
+    constructor() {
+        this.elements = [];
+        return new Map();
+    }
+    set(key, value) {
+        Map.prototype.set.call(this, key, value);
+        this.elements.push({ key, value });
+    }
+    delete(key) {
+        Map.prototype.delete.call(this, key);
+        this.elements = this.elements.filter(d => d.key !== key);
+    }
+    isEmpty() {
+        return this.size === 0;
+    }
+    clear() {
+        Map.prototype.clear.call(this);
+        this.elements = [];
+    }
+    /**
+     * 通过数组创建Map对象
+     *
+     * @static
+     * @param {*} array
+     */
+    static fromEntries(array = []) {
+        const hashMap = new HashMap();
+        array.forEach(element => {
+            if (Array.isArray(element) && element.length === 2) {
+                hashMap.set(element[0], element[1]);
+            }
+        });
+        return hashMap;
+    }
+}

package/src/core/MqttClient.js

@@ -0,0 +1,108 @@
+import ErrorType from "../constant/ErrorTypeConstant";
+import EventType from "../constant/EventTypeConstant";
+import CommUtils from "../utils/CommUtils";
+import EventDispatcher from "./EventDispatcher";
+import { connect } from "mqtt";
+export default class MqttClient extends EventDispatcher {
+    /**
+     * Creates an instance of MqttClient.
+     * @param {*} config mqtt实例参数
+     */
+    constructor(config = {}) {
+        super();
+        this.context = CommUtils.extend(MqttClient.defaultContext, config);
+        this.options = {
+            connectTimeout: this.context.MQTT_TIMEOUTM,
+            clientId: CommUtils.generateGuid(),
+            username: this.context.MQTT_USERNAME,
+            password: this.context.MQTT_PASSWORD,
+            clean: true,
+        };
+        this.client = connect(this.context.MQTT_SERVICE, this.options);
+        this._onConnect();
+        this._onMessage();
+        MqttClient.instance = this;
+    }
+    _onConnect() {
+        this.client.on("connect", () => {
+            console.log("链接mqtt成功==>" + this.context.MQTT_SERVICE);
+            this.dispatchEvent({ type: EventType.MQTT_CONNECT, message: this });
+        });
+        this.client.on("error", (err) => {
+            console.log("链接mqtt报错", err);
+            this.dispatchEvent({ type: EventType.MQTT_ERROR, message: this });
+            this.client.end();
+            this.client.reconnect();
+        });
+    }
+    _onMessage() {
+        this.client.on("message", (topic, message) => {
+            let dataString = message;
+            let data = "";
+            if (message instanceof Uint8Array) {
+                dataString = message.toString();
+            }
+            try {
+                data = JSON.parse(dataString);
+            } catch (error) {
+                throw new Error(ErrorType.JSON_PARSE_ERROR);
+            }
+            this.dispatchEvent({
+                type: EventType.MQTT_MESSAGE,
+                message: { topic, data },
+            });
+        });
+    }
+    sendMsg(topic, msg) {
+        if (!this.client.connected) {
+            console.error("客户端未连接");
+            return;
+        }
+        this.client.publish(topic, msg, { qos: 1, retain: true });
+    }
+    subscribe(topic) {
+        this.client.subscribe(topic, { qos: 1 }, (error, res) => {
+            if (error instanceof Error || res.length === 0) {
+                console.error(`订阅失败==>${topic}`, error);
+            } else {
+                console.log(`订阅成功==>${topic}`);
+            }
+        });
+        return this;
+    }
+    unsubscribe(topic) {
+        this.client.unsubscribe(topic, { qos: 1 }, (error, res) => {
+            if (error instanceof Error || res.length === 0) {
+                console.error(`取消订阅失败==>${topic}`, error);
+            } else {
+                console.log(`取消订阅成功==>${topic}`);
+            }
+        });
+        return this;
+    }
+    unconnect() {
+        this.client.end();
+        this.client = null;
+        this.dispatchEvent({ type: EventType.MQTT_CLOSE, message: null });
+        console.log("断开mqtt成功==>" + this.context.MQTT_SERVICE);
+    }
+    /**
+     * @description 获取并冻结mqtt实例
+     * @static
+     * @param {*} [config={}]
+     * @returns {MqttClient}
+     */
+    static getInstance(config = {}) {
+        if (MqttClient.instance) {
+            return Object.freeze(MqttClient.instance);
+        } else {
+            return Object.freeze(new MqttClient(config));
+        }
+    }
+}
+MqttClient.defaultContext = {
+    MQTT_TIMEOUTM: 20000,
+    MQTT_USERNAME: "iRVMS-WEB",
+    MQTT_PASSWORD: "novasky888",
+    MQTT_SERVICE: `ws://${window.document.domain}:20007/mqtt`,
+};