@sword916/vae-map-plus 1.0.0

package/src/packages/vae-map/scripts/L.MarkerCluster/style.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}

package/src/packages/vae-map/scripts/L.Vae.CRS/index.js

@@ -0,0 +1,114 @@
+// 偏移墨卡托投影
+const OffsetSphericalMercator = (offset = L.point(0, 0)) => {
+
+    const Mercator = L.Projection.SphericalMercator
+    const R = Mercator.R
+    const D = Math.PI / 180
+
+    return L.extend({}, Mercator, {
+        project(latlng) {
+            const max = Mercator.MAX_LATITUDE
+            const lat = Math.max(Math.min(max, latlng.lat), -max)
+            const sin = Math.sin(lat * D)
+            const point = L.point(R * latlng.lng * D, R * Math.log((1 + sin) / (1 - sin)) / 2)
+
+            return point.add(offset)
+        },
+
+        unproject(point) {
+            const [x, y] = point.subtract(offset)
+
+            return L.latLng((2 * Math.atan(Math.exp(y / R)) - (Math.PI / 2)) * D, x * D / R)
+        }
+    })
+}
+
+// LRMAP常用CRS
+const fns = {
+
+    SIMPLE(count = 2) {
+        const ratio = Math.pow(0.1, count)
+
+        return L.extend({}, L.CRS.Simple, {
+            scale: zoom => ratio * Math.pow(2, zoom),
+            zoom: scale => Math.log(scale / ratio) / Math.log(2)
+        })
+    },
+
+    OFFSET_EPSG3857(offset = L.point(0, 0)) {
+
+        return L.extend({}, L.CRS.EPSG3857, {
+            projection: OffsetSphericalMercator(offset)
+        })
+    },
+
+    BJ54(x,options={}) {
+        // console.log(options);
+        let resolutions = [307.2, 153.6, 76.8, 38.4, 19.2, 9.6, 4.8, 2.4, 1.2, 0.6, 0.3, 0.15, 0.075, 0.0375, 0.01875]
+       //为了解决矿政的1:500000的图纸新增了一个分辨率的参数，如果另外的项目需要改动，联系史新国
+        if(options.resolutions){
+            resolutions=options.resolutions
+        };
+        // 确定投影带和带号
+        let pType, pCode
+        if (x > 25000000 && x < 40000000) {
+            pType = 3
+            pCode = parseInt(x / 1000000)
+        } else if (x > 12000000 && x < 22000000) {
+            pType = 6
+            pCode = parseInt(x / 1000000)
+        }
+        // 确定proj4的各项参数：ESPG代码，中央经线，东伪偏移
+        let EPSGCode, lon_0, x_0
+        if (pCode >= 0) {
+            if (pType == 3) {
+                EPSGCode = 2376 + pCode
+                lon_0 = pCode * 3
+                x_0 = 1000000 * pCode + 500000
+            } else if (pType == 6) {
+                EPSGCode = 2325 + pCode
+                lon_0 = pCode * 6 - 3
+                x_0 = 1000000 * pCode + 500000
+            }
+        }
+        // 返回3度带/6度带坐标系
+        if (EPSGCode) {
+            let proj = '+proj=tmerc +lat_0=0 +lon_0=' + lon_0 + ' +k=1 +x_0=' + x_0 + ' +y_0=0 +ellps=krass +units=m +no_defs no_defs'
+            return new L.Proj.CRS('EPSG:' + EPSGCode, proj, { resolutions:resolutions })
+        } else {
+            return this.SIMPLE()
+        }
+    },
+
+    XA80(x) {
+        let EPSGCode = 900099,
+            x_0 = 0,
+            lon_0 = 0,
+            pcode = parseInt(x / 1000000)
+        if (pcode > 0) {
+            lon_0 = pcode * 3
+            x_0 = 1000000 * pcode + 500000
+            EPSGCode = 2376 + pcode
+        }
+        let proj = '+proj=tmerc +lat_0=0 +lon_0=' + lon_0 + ' +k=1 +x_0=' + x_0 + ' +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs no_defs'
+        let resolutions = [307.2, 153.6, 76.8, 38.4, 19.2, 9.6, 4.8, 2.4, 1.2, 0.6, 0.3, 0.15, 0.075, 0.0375, 0.01875]
+        return new L.Proj.CRS('EPSG:' + EPSGCode, proj, { resolutions, origin: [0, 0] })
+    },
+    CGCS2000(options={}){
+        let resolutions = [307.2, 153.6, 76.8, 38.4, 19.2, 9.6, 4.8, 2.4, 1.2, 0.6, 0.3, 0.15, 0.075, 0.0375, 0.01875]
+        if(options.resolutions){
+            resolutions=options.resolutions
+        };
+        let  origin= [0, 0]
+        if(options.origin){
+            origin=options.origin
+        };
+        return new L.Proj.CRS("EPSG:4525","+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs",{
+            resolutions: resolutions,
+            origin: origin
+        });
+    }
+}
+
+L.Vae = L.Vae || {}
+L.Vae.CRS = L.extend(L.Vae.CRS || {}, fns)

package/src/packages/vae-map/scripts/L.Vae.Client/index.js

@@ -0,0 +1,548 @@
+import axios from 'axios'
+import { idGen, getTreeNode } from '@/utils'
+
+L.Vae = L.Vae || {}
+
+// LRMAP客户端
+L.Vae.Client = L.Evented.extend({
+
+    options: {},
+
+    requestOptions: {},
+
+    leafletOptions: {},
+
+    extent: [],
+
+    treeLayers: [],
+
+    visibleKeys: [],
+
+    initialize(options) {
+        this.options = options
+        this.requestOptions = { url: null, uid: null, dsid: null, dsname: null }
+        this.leafletOptions = {}
+    },
+
+    /**
+     * 连接地图服务，构建地图参数
+     * @param {Boolean} alert 是否提示参数错误
+     */
+    async start({ alert } = {}) {
+        return new Promise(async resolve => {
+            for (let v of ['url', 'dsname']) {
+                const value = this.options ? this.options[v] : null
+                const message = `参数 options.${v} 无效`
+                if (!_.isString(value) || value.trim().length == 0) {
+                    if (alert) {
+                        this.fire('message', { message, messageType: 'error' })
+                    }
+                    return
+                }
+            }
+            this.requestOptions.uid = this.options?.uid || `vae_client_${idGen()}`
+
+            try {
+                this.fire('openmask', { text: `正在 获取图元信息` })
+                const metaData = (await axios.get(this.options.url + 'map/getMeta', {
+                    params: {
+                        uid: this.requestOptions.uid,
+                        dsname: this.options.dsname
+                    }
+                })).data
+                this.fire('closemask')
+                if (metaData.status == 'success') {
+                    this.buildMapOptions(metaData.result)
+                    resolve(true)
+                } else {
+                    console.error(metaData.errinfo)
+                    this.fire('message', { message: "未获取到正确的图元信息", messageType: 'error' })
+                    resolve(false)
+                }
+            } catch (error) {
+                console.error(error)
+                this.fire('message', { message: "获取图元失败，请检查地图服务和请求参数", messageType: 'error' })
+                this.fire('closemask')
+                resolve(false)
+            }
+        })
+    },
+
+    // 构建地图配置项
+    buildMapOptions({ dsid, extent }) {
+        try {
+            // 参数整理
+            if (dsid) {
+                this.requestOptions.url = this.options.url
+                this.requestOptions.dsid = dsid
+                this.requestOptions.dsname = this.options.dsname
+            } else {
+                throw new Error('数据源dsid错误')
+            }
+            // 构建配置
+            if (Array.isArray(extent) && extent.length == 4) {
+                // extent
+                this.extent = extent
+                let centerX = (extent[0] + extent[2]) * 0.5
+                let centerY = (extent[1] + extent[3]) * 0.5
+                // crs
+                let crs = this.options.crs || L.Vae.CRS.SIMPLE()
+                if (crs == 'bj54') {
+                    crs = L.Vae.CRS.BJ54(centerX,this.options)
+                } else if (crs == 'xa80') {
+                    crs = L.Vae.CRS.XA80(centerX)
+                } else if (crs == 'simple') {
+                    crs = L.Vae.CRS.SIMPLE()
+                }else  if (crs == 'CGCS2000' || crs == 'cgcs2000') {
+                    crs = L.Vae.CRS.CGCS2000(this.options)
+                }
+                // wmscrs
+                let wmscrs = this.options.wmscrs || crs
+                if (wmscrs == 'bj54') {
+                    wmscrs = L.Vae.CRS.BJ54(centerX)
+                } else if (wmscrs == 'xa80') {
+                    wmscrs = L.Vae.CRS.XA80(centerX)
+                } else if (crs == 'simple') {
+                    wmscrs = L.Vae.CRS.SIMPLE()
+                }else  if (crs == 'CGCS2000' || crs == 'cgcs2000') {
+                    wmscrs = L.Vae.CRS.CGCS2000(this.options)
+                }
+                // center
+                const center = this.options.center || wmscrs.unproject(L.point(centerX, centerY))
+                // maxzoom
+                const maxZoom = this.options.maxZoom ? this.options.maxZoom :
+                    (crs.options && crs.options.resolutions) ? crs.options.resolutions.length - 1 : 25
+                // bounds
+                const corner1 = wmscrs.unproject(L.point(extent[0], extent[1]))
+                const corner2 = wmscrs.unproject(L.point(extent[2], extent[3]))
+                const bounds = L.latLngBounds(corner1, corner2)
+                this.leafletOptions = { crs, wmscrs, center, maxZoom, bounds }
+            } else {
+                throw new Error('地图属性extent错误')
+            }
+        } catch (e) {
+            console.error(e)
+            this.fire('message', { message: "地图参数构建错误", type: 'error' })
+        }
+    },
+
+    /**
+     * 请求地图服务
+     * @param {string} api 请求动作
+     * @param {string} message 提示消息
+     * @param {object} params 额外参数
+     * @param {boolean} forceResolve 请求结果无效时，强制resolve而不是reject
+     * @param {boolean} checkResult 是否校验结果
+     * @param {boolean} loadMask 是否添加遮罩层
+     */
+    requestServer({ api, message = '加载数据', params = {}, forceResolve, checkResult = true, loadMask = true }) {
+        return new Promise((resolve, reject) => {
+            if (api) {
+                if (loadMask) { this.fire('openmask', { text: `正在 ${message}` }) }
+                axios.post(`${this.requestOptions.url}${api}`, L.extend({
+                    uid: this.requestOptions.uid,
+                    dsid: this.requestOptions.dsid
+                }, params)).then(result => {
+                    if (checkResult) {
+                        const data = result.data
+                        if (data && data.status == 'success') {
+                            resolve(data.result)
+                        } else {
+                            if (forceResolve) {
+                                console.error(data.errinfo)
+                                resolve('')
+                            } else {
+                                this.fire('message', { message: `${message}结果无效`, messageType: 'error' })
+                                console.error(data.errinfo)
+                                reject(data.errinfo)
+                            }
+                        }
+                    } else { resolve(result.data) }
+                }).catch(e => {
+                    this.fire('message', { message: `${message}失败，请检查地图服务和和请求参数`, messageType: 'error' })
+                    console.error(e)
+                    reject(e)
+                }).finally(() => {
+                    if (loadMask) { this.fire('closemask') }
+                })
+            }
+        })
+    },
+
+    // 设置默认图层
+    async setDefaultLayers() {
+        this.fire('openmask', { text: `正在 加载默认图层` })
+        const { defaultLayers, defaultLayerSets, disabledLayerSets, layerTreeType } = this.options
+        await this.formatLayerGroup(layerTreeType, disabledLayerSets)
+        if (Array.isArray(defaultLayers)) {
+            this.visibleKeys = await this.showLayers(defaultLayers, { loadMask: false, refreshTiles: false })
+        } else if (Array.isArray(defaultLayerSets)) {
+            this.visibleKeys = await this.showLayerSets(defaultLayerSets, { loadMask: false, refreshTiles: false })
+        } else if (Array.isArray(disabledLayerSets)) {
+            await this.showLayers(this.visibleKeys, { loadMask: false, refreshTiles: false })
+        }
+        this.fire('closemask')
+    },
+
+    /**
+     * 初始化图层信息
+     * 有协同服务时，处理为树结构
+     * 无协同服务时，处理为列表结构
+     * @param {enum} type 类型，'leaf'（默认）：叶子节点为实际图层，'branch'：叶子节点为末级图集，图层置于layers属性
+     * @param {array<string>} disabledLayerSets 禁用的图集，支持'x>y>z'的选择方式
+     * @returns {treeLayers,visibleLayers}
+     * @property {array<object>} treeLayers 树结构：{id,label,children}
+     * @property {array<string>} visibleKeys 可见图层keys
+     */
+    async formatLayerGroup(type = 'leaf', disabledLayerSets = []) {
+        // 处理结果：树结构和IDS
+        // 处理结果：树结构和IDS
+        let treeLayers = [], visibleKeys = []
+        let {treeLayersGroup} =this.options;
+        // 请求数据
+        const _layers = await this.requestServer({
+            api: 'layer/getlayers',
+            message: '获取图层',
+            loadMask: false
+        })
+        let _groups;
+        //如果不用协同服务，业务自定义接口，可以按时业务需求按照layer/showlayers接口格式传入数据
+        if(treeLayersGroup){
+            _groups=treeLayersGroup;
+        }else {
+            _groups = await this.requestServer({
+                api: 'layer/getlayergroups',
+                params: { type: 1 },
+                message: '获取图层分组',
+                forceResolve: true,
+                loadMask: false
+            })
+        }
+
+
+        // let treeLayers = [], visibleKeys = []
+        // // 请求数据
+        // const _layers = await this.requestServer({
+        //     api: 'layer/getlayers',
+        //     message: '获取图层',
+        //     loadMask: false
+        // })
+        // const _groups = await this.requestServer({
+        //     api: 'layer/getlayergroups',
+        //     params: { type: 1 },
+        //     message: '获取图层分组',
+        //     forceResolve: true,
+        //     loadMask: false
+        // })
+        // 组织数据
+        if (_layers && _layers.layers) {
+            // 有协同：树结构
+            if (_groups && _groups.layergroups) {
+                _groups.layergroups.forEach((g, i) => {
+                    // 初始化分支
+                    let branch = treeLayers
+                    // 叶子节点，具体图层
+                    let leafLayers = []
+                    g.layers.forEach(v => {
+                        const target = _.find(_layers.layers, { name: v })
+                        if (target) {
+                            const id = `LEAF_${i}_${target.guid}`
+                            if (target.visible) {
+                                visibleKeys.push(id)
+                            }
+                            leafLayers.push({ id, label: v })
+                        }
+                    })
+                    // n1^n2^n3
+                    const labels = _.split(g.name, '^')
+                    labels.forEach((l, j) => {
+                        // 当前层级
+                        const level = j + 1
+                        // 确认节点
+                        let index = _.findIndex(branch, { label: l })
+                        // 新增空节点
+                        if (index < 0) {
+                            index = branch.length
+                            branch.push({ id: `NODE_${i}_${j}`, label: l, level, children: [] })
+                        }
+                        // 合并节点
+                        if (j == labels.length - 1) {
+                            // 添加层级
+                            const leafLayersWithLevel = leafLayers.map(node => _.merge(node, { level: level + 1 }))
+                            // 叶子
+                            if (type == 'leaf') {
+                                branch[index].children = _.concat(branch[index].children, leafLayersWithLevel)
+                            }
+                            // 枝干
+                            else if (type == 'branch') {
+                                branch[index].layers = _.concat(branch[index].children, leafLayersWithLevel)
+                                if (g.visible) {
+                                    visibleKeys.push(branch[index].id)
+                                }
+                            }
+                        } else {
+                            // 下钻当前分支
+                            branch = branch[index].children
+                        }
+                    })
+                })
+            }
+            // 无协同：列表结构
+            else {
+                _layers.layers.forEach(v => {
+                    if (v.name && v.name !== "0") {
+                        treeLayers.push({
+                            id: v.guid,
+                            label: v.name
+                        })
+                        if (v.visible) {
+                            visibleKeys.push(v.guid)
+                        }
+                    }
+                })
+            }
+
+            // 处理禁用的图集
+            if (Array.isArray(disabledLayerSets) && disabledLayerSets.length > 0) {
+                let disabledKeys = []
+                let disabledAllKeys = []
+                disabledLayerSets.forEach(set => {
+                    let node
+                    set.split('>').forEach(v => {
+                        if (v) {
+                            node = getTreeNode(node ? [node] : treeLayers, { label: v })
+                        }
+                    })
+                    if (node) {
+                        disabledKeys.push(node.id)
+                    }
+                })
+                if (disabledKeys.length > 0) {
+                    // 获取节点下的图层
+                    const collectLayers = node => {
+                        let result = []
+                        if (Array.isArray(node.children) && node.children.length > 0) {
+                            node.children.forEach(v => {
+                                result = _.concat(result, collectLayers(v))
+                            })
+                        } else {
+                            result = _.concat(result, node.layers || node)
+                        }
+                        return result
+                    }
+                    // 去除禁用的节点集
+                    const collectNodes = node => {
+                        let result = node
+                        if (_.includes(disabledKeys, node.id)) {
+                            result = null
+                            disabledAllKeys.push(node.id)
+                            collectLayers(node).forEach(v => {
+                                disabledAllKeys.push(v.id)
+                            })
+                        } else {
+                            let children = result.children
+                            if (children && children.length > 0) {
+                                result.children = _.compact(children.map(v => collectNodes(v)))
+                            }
+                        }
+                        return result
+                    }
+                    // 更新图层树和全量keys
+                    treeLayers = _.compact(treeLayers.map(v => collectNodes(v)))
+                    visibleKeys = _.pull(visibleKeys, ..._.uniq(disabledAllKeys))
+                }
+            }
+
+            this.treeLayers = treeLayers
+            this.visibleKeys = visibleKeys
+        }
+    },
+
+    /**
+     * 显示指定图层
+     * @param {array} nodes 图层节点集，兼容keys/leaf节点/branch节点
+     * @param {boolean} args.loadMask 是否添加遮罩层
+     * @param {boolean} args.refreshTiles 是否刷新瓦片
+     * @returns {array} 对应的图层keys
+     */
+    async showLayers(nodes = [], args = { loadMask: true, refreshTiles: true }) {
+        // 参数对象转义
+        const loadMask = _.isUndefined(args.loadMask) ? true : !!args.loadMask
+        const refreshTiles = _.isUndefined(args.refreshTiles) ? true : !!args.refreshTiles
+        // 关闭全部图层
+        await this.requestServer({
+            api: 'layer/hidelayers',
+            params: { type: 'all' },
+            message: '关闭全部图层',
+            loadMask
+        })
+        const nodesToLabels = ns => {
+            let ls = [], ks = []
+            if (Array.isArray(ns)) {
+                const getLabelByKey = (tree, key) => {
+                    let labels = []
+                    function doRecursion(array) {
+                        for (let node of array) {
+                            if (node.id == key) {
+                                if (Array.isArray(node.layers)) {
+                                    labels = node.layers.map(v => v.label)
+                                } else {
+                                    labels = [node.label]
+                                }
+                                break
+                            } else if (Array.isArray(node.children) && node.children.length > 0) {
+                                doRecursion(node.children)
+                            }
+                        }
+                    }
+                    doRecursion(tree)
+                    return labels
+                }
+                ns.forEach(n => {
+                    if (typeof (n) == 'string') {
+                        ls = _.concat(ls, getLabelByKey(this.treeLayers, n))
+                        ks.push(n)
+                    } else if (typeof (n) == 'object') {
+                        if (Array.isArray(n.layers)) {
+                            ls = _.concat(ls, n.layers.map(v => v.label))
+                            ks = _.concat(ls, n.layers.map(v => v.id))
+                        } else {
+                            ls.push(n.label)
+                            ks.push(n.id)
+                        }
+                    }
+                })
+            }
+            return [ls, ks]
+        }
+        const [labels, keys] = nodesToLabels(nodes)
+        await this.requestServer({
+            api: 'layer/showlayers',
+            params: { layers: _.join(labels) },
+            message: '打开指定图层',
+            loadMask
+        })
+        if (refreshTiles) {
+            this.fire('refreshtilelayer')
+        }
+        this.visibleKeys = keys
+
+        return this.visibleKeys
+    },
+
+    /**
+     * 显示指定图组，支持'xx>yy>zz'形式的精确选择
+     * @param {array} sets 图组名称
+     * @param {boolean} args.loadMask 是否添加遮罩层
+     * @param {boolean} args.refreshTiles 是否刷新瓦片
+     * @returns {array} 对应的图层keys
+     */
+    async showLayerSets(sets = [], args = { loadMask: true, refreshTiles: true }) {
+        // 参数对象转义
+        const loadMask = _.isUndefined(args.loadMask) ? true : !!args.loadMask
+        const refreshTiles = _.isUndefined(args.refreshTiles) ? true : !!args.refreshTiles
+        if (_.isString(sets) && sets.length > 0) {
+            sets = [sets]
+        }
+        if (this.treeLayers.length > 0) {
+            // 获取目标节点的图层集
+            const collectLayers = node => {
+                let result = []
+                if (Array.isArray(node.children) && node.children.length > 0) {
+                    node.children.forEach(v => {
+                        result = _.concat(result, collectLayers(v))
+                    })
+                } else {
+                    result = _.concat(result, node.layers || node)
+                }
+                return result
+            }
+
+            // 组织并定位图集
+            let keys = []
+            sets.forEach(set => {
+                let node
+                set.split('>').forEach(v => {
+                    if (v) {
+                        node = getTreeNode(node ? [node] : this.treeLayers, { label: v })
+                    }
+                })
+                if (node) {
+                    keys.push(node.id)
+                    collectLayers(node).forEach(v => {
+                        keys.push(v.id)
+                    })
+                }
+            })
+            await this.showLayers(keys, { loadMask, refreshTiles })
+            return keys
+        }
+    },
+
+    /**
+     * 查询实体信息
+     * @param {object} params 查询参数
+     * @param {boolean} loadMask 是否添加遮罩层
+     */
+    queryEntity(params = {}, loadMask) {
+        return this.requestServer({
+            api: 'query/entity',
+            params,
+            message: '查询实体',
+            loadMask
+        })
+    },
+
+    // 获取缩略图
+    getThumbnail() {
+        return new Promise(resolve => {
+            if (this.extent.length == 4) {
+                const { url, dsid, uid } = this.requestOptions
+                axios.get(`${url}wmsmap/getmap`, {
+                    params: {
+                        dsid,
+                        uid,
+                        request: 'GetMap',
+                        service: 'WMS',
+                        width: 256,
+                        height: 256,
+                        format: 'image/png',
+                        transparent: true,
+                        version: '1.1.1',
+                        bbox: _.join(this.extent, ','),
+                    },
+                    responseType: 'arraybuffer'
+                }).then(result => {
+                    const base64Data = btoa(new Uint8Array(result.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
+                    resolve(`data:image/png;base64,${base64Data}`)
+                })
+            }
+        })
+    },
+
+
+    // 获取切片图层对象
+    // 适用于requestOptions、leafletOptions以及图层状态已经准备的场景
+    currentTileLayer() {
+        const { url, dsid, uid } = this.requestOptions
+        const { wmscrs, maxZoom } = this.leafletOptions
+        const wmsUrl = `${url}wmsmap/getmap?dsid=${dsid}&uid=${uid}&tid=${idGen()}`
+        return L.tileLayer.wms(wmsUrl, {
+            format: 'image/png',
+            transparent: true,
+            crs: wmscrs,
+            maxZoom: maxZoom
+        })
+    },
+
+    // 生成切片图层对象
+    async createTileLayer({ beforeCreate } = {}) {
+        await this.start()
+        if (_.isFunction(beforeCreate)) {
+            await beforeCreate(this)
+        }
+        await this.setDefaultLayers()
+        return this.currentTileLayer()
+    }
+
+})

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

@@ -0,0 +1 @@
+export { useContextMenu as default } from '@/composables/useContextMenu'