@zpc_npm/vue-iclient-common
Version:
KQGIS iClient for Vue.js
600 lines (508 loc) • 23.5 kB
JavaScript
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ !function() {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function() { return module['default']; } :
/******/ function() { return module; };
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"LayerManagerViewModel": function() { return /* reexport */ LayerManagerViewModel; },
"default": function() { return /* reexport */ LayerManager; }
});
;// CONCATENATED MODULE: external "vue"
var external_vue_namespaceObject = require("vue");
;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/_utils/mitt"
var mitt_namespaceObject = require("@zpc_npm/vue-iclient-common/_utils/mitt");
var mitt_default = /*#__PURE__*/__webpack_require__.n(mitt_namespaceObject);
;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/_utils/gis-utils"
var gis_utils_namespaceObject = require("@zpc_npm/vue-iclient-common/_utils/gis-utils");
;// CONCATENATED MODULE: ./src/common/layermanager/LayerManagerViewModel.js
/**
* Author: ZL
* Data: 2022.7.26
* Description: 图层管理组件逻辑类.
*/
class LayerManagerViewModel extends (mitt_default()) {
/**
* 绑定地图的target
* @param {string} mapTarget
* @event refreshData 刷新数据监听事件
*/
constructor(mapTarget) {
super();
/**
* 绑定地图的target
* @type {string}
* @private
*/
this._mapTarget = mapTarget;
}
/**
* 从地图管理类获取数据
* @returns {*[]}
*/
getCheckLayersList() {
let nodeVal = gis_utils_namespaceObject.mapLayerUtils.getLayerCheckedList(this._mapTarget); //按索引排序
layerCheckedListSort(nodeVal, "zIndex");
let nodesList = [];
for (let i = 0; i < nodeVal.length; i++) {
let item = nodeVal[i];
if (item.serverType === "kqserver" || item.serverType === "kqmapping" || item.serverType === "wmts" || item.serverType === "wms") {
nodesList.push(nodeVal[i]);
}
}
return nodesList; // 选中的图层列表按属性（zIndex）排序
function layerCheckedListSort(data, property) {
data.sort(compare);
function compare(a, b) {
var value1 = a[property];
var value2 = b[property];
return value2 - value1;
}
}
}
/**
* 右键菜单点击事件
* @param {string} key menu的节点index
* @param {Object} currentSelectedNode 右键操作树节点的数据源
* @fires refreshData
*/
handleSelectMenu(key, currentSelectedNode) {
if (key === "1") {
// 缩放至图层
gis_utils_namespaceObject.mapViewUtils.fitBounds(this._mapTarget, currentSelectedNode);
} else if (key === "3") {
// 置顶
gis_utils_namespaceObject.mapLayerUtils.setLayerBringToFrontById(this._mapTarget, currentSelectedNode.guid, true);
let newData = this.getCheckLayersList();
this.fire("refreshData", newData);
} else if (key === "4") {
// 取消置顶
gis_utils_namespaceObject.mapLayerUtils.setLayerBringToFrontById(this._mapTarget, currentSelectedNode.guid, false);
let newData = this.getCheckLayersList();
this.fire("refreshData", newData);
} else if (key === "5") {
// 图层上移
gis_utils_namespaceObject.mapLayerUtils.raiseLayerByTreeId(this._mapTarget, currentSelectedNode.guid);
} else if (key === "6") {
// 图层下移
gis_utils_namespaceObject.mapLayerUtils.lowerLayerByTreeId(this._mapTarget, currentSelectedNode.guid);
}
}
/**
* 销毁
*/
destroy() {
this.off();
}
}
;// CONCATENATED MODULE: external "@element-plus/icons-vue"
var icons_vue_namespaceObject = require("@element-plus/icons-vue");
;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-icons"
var vue_iclient_icons_namespaceObject = require("@zpc_npm/vue-iclient-icons");
;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/_utils/util"
var util_namespaceObject = require("@zpc_npm/vue-iclient-common/_utils/util");
;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/common/layermanager/LayerManager.vue?vue&type=script&setup=true&lang=js
const _hoisted_1 = {
class: "tabs_child"
};
const _hoisted_2 = {
class: "tabs_child"
};
const _hoisted_3 = ["title"];
const _hoisted_4 = {
key: 0,
class: "to-top-class"
};
const _hoisted_5 = /*#__PURE__*/(0,external_vue_namespaceObject.createElementVNode)("span", null, "顶", -1
/* HOISTED */
);
const _hoisted_6 = [_hoisted_5];
// 获取组件传参
const __default__ = {
name: "KqLayerManager"
};
/* harmony default export */ var LayerManagervue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
props: {
// 图层树组件的参数
layerTreeProps: Object,
// 图层管理列表的节点显示名称
nodeName: {
type: String,
default: "name"
},
// 组件显示位置
position: [String, Object]
},
emits: ["openOpacity"],
setup(__props, {
expose,
emit
}) {
const props = __props;
let box_ref = (0,external_vue_namespaceObject.ref)(null); // 图层树tabs的值
let tabActiveName = (0,external_vue_namespaceObject.ref)("ztfx"); // list数据源
let dataList = (0,external_vue_namespaceObject.reactive)({
data: []
});
let viewModel;
let layerTree = (0,external_vue_namespaceObject.ref)(null);
let menuDropdown = (0,external_vue_namespaceObject.ref)(false); // 是否显示下拉菜单
let dropDownMenu = (0,external_vue_namespaceObject.ref)(null); // 下拉菜单
let currentSelectedNode = null; // 当前选中的节点
(0,external_vue_namespaceObject.onMounted)(() => {
(0,util_namespaceObject.updatePosition)(box_ref.value, props);
viewModel = new LayerManagerViewModel(props.layerTreeProps ? props.layerTreeProps.mapTarget : null); // 列表数据刷新
viewModel.on("refreshData", _data => {
dataList.data.value = _data;
});
});
(0,external_vue_namespaceObject.onBeforeUnmount)(() => {
viewModel.destroy();
});
expose({
reset
});
/**
* 重置状态
*/
function reset() {
hideMenuDropdown();
layerTree.value.reset();
}
/**
* 切换管理 重新获取数据
* @param tab
* @param event
*/
function handleSwitchTab(tab, event) {
if (tab.props.label === "图层管理") {
dataList.data.value = viewModel.getCheckLayersList();
}
}
/**
* 打开右建菜单
* @param {Object} node 节点对象
* @param {Object} event click事件
*/
function handleJudgeDropdownSH(node, event) {
menuDropdown.value = true;
let _menuDropdown = dropDownMenu.value.$el;
_menuDropdown.style.left = event.clientX - 5 + "px";
_menuDropdown.style.top = event.clientY + 15 + "px";
_menuDropdown.style.width = "40px";
currentSelectedNode = node;
document.addEventListener("click", hideMenuDropdown);
}
/**
* 隐藏下拉菜单
*/
function hideMenuDropdown() {
// 去除选中样式
let selectElement = dropDownMenu.value.$el.querySelector(".is-active");
if (selectElement) {
selectElement.classList.remove("is-active");
}
menuDropdown.value = false;
document.removeEventListener("click", hideMenuDropdown);
}
/**
* 右键菜单点击事件
*/
function handleSelectMenu(key) {
if (key === "2") {
emit("openOpacity", currentSelectedNode);
} else {
viewModel.handleSelectMenu(key, currentSelectedNode);
}
}
function openOpacity(currentSelectedNode) {
emit("openOpacity", currentSelectedNode);
}
return (_ctx, _cache) => {
const _component_kq_tab_pane = (0,external_vue_namespaceObject.resolveComponent)("kq-tab-pane");
const _component_kq_tabs = (0,external_vue_namespaceObject.resolveComponent)("kq-tabs");
const _component_kq_layer_tree = (0,external_vue_namespaceObject.resolveComponent)("kq-layer-tree");
const _component_kq_icon = (0,external_vue_namespaceObject.resolveComponent)("kq-icon");
const _component_kq_menu_item = (0,external_vue_namespaceObject.resolveComponent)("kq-menu-item");
const _component_kq_menu = (0,external_vue_namespaceObject.resolveComponent)("kq-menu");
const _component_kq_scrollbar = (0,external_vue_namespaceObject.resolveComponent)("kq-scrollbar");
const _component_kq_tooltip = (0,external_vue_namespaceObject.resolveComponent)("kq-tooltip");
const _component_kq_divider = (0,external_vue_namespaceObject.resolveComponent)("kq-divider");
return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("div", {
class: "layer-manager",
ref_key: "box_ref",
ref: box_ref
}, [(0,external_vue_namespaceObject.createCommentVNode)(" S 切换tab "), (0,external_vue_namespaceObject.createVNode)(_component_kq_tabs, {
modelValue: (0,external_vue_namespaceObject.unref)(tabActiveName),
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (0,external_vue_namespaceObject.isRef)(tabActiveName) ? tabActiveName.value = $event : tabActiveName = $event),
onTabClick: handleSwitchTab
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_tab_pane, {
label: "服务列表",
name: "ztfx"
}), (0,external_vue_namespaceObject.createVNode)(_component_kq_tab_pane, {
label: "图层管理",
name: "zttj"
})]),
_: 1
/* STABLE */
}, 8
/* PROPS */
, ["modelValue"]), (0,external_vue_namespaceObject.createCommentVNode)(" E 切换tab "), (0,external_vue_namespaceObject.createCommentVNode)(" S 服务列表 "), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createElementVNode)("div", _hoisted_1, [(0,external_vue_namespaceObject.createVNode)(_component_kq_layer_tree, (0,external_vue_namespaceObject.mergeProps)({
ref_key: "layerTree",
ref: layerTree
}, props.layerTreeProps, {
class: "layer-tree_child",
onOpenOpacity: openOpacity
}), null, 16
/* FULL_PROPS */
)], 512
/* NEED_PATCH */
), [[external_vue_namespaceObject.vShow, (0,external_vue_namespaceObject.unref)(tabActiveName) === 'ztfx']]), (0,external_vue_namespaceObject.createCommentVNode)(" E 服务列表 "), (0,external_vue_namespaceObject.createCommentVNode)(" S 图层管理 "), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createElementVNode)("div", _hoisted_2, [(0,external_vue_namespaceObject.createVNode)(_component_kq_scrollbar, {
class: "scrollbar-class"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_menu, {
class: "layer-list_ul"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [((0,external_vue_namespaceObject.openBlock)(true), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, (0,external_vue_namespaceObject.renderList)((0,external_vue_namespaceObject.unref)(dataList).data.value, item => {
return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createBlock)(_component_kq_menu_item, {
index: item.guid,
key: item.guid
}, {
title: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createElementVNode)("span", null, [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, {
class: "tree-node_icon"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [item.rasterLayer ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createBlock)((0,external_vue_namespaceObject.unref)(vue_iclient_icons_namespaceObject.IconImage), {
key: 0
})) : item.shapeType === 'polyline' ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createBlock)((0,external_vue_namespaceObject.unref)(vue_iclient_icons_namespaceObject.IconPolyline), {
key: 1
})) : item.shapeType === 'polygon' ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createBlock)((0,external_vue_namespaceObject.unref)(vue_iclient_icons_namespaceObject.IconPolygon2), {
key: 2
})) : item.shapeType === 'point' ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createBlock)((0,external_vue_namespaceObject.unref)(vue_iclient_icons_namespaceObject.IconPoint), {
key: 3
})) : (0,external_vue_namespaceObject.createCommentVNode)("v-if", true)]),
_: 2
/* DYNAMIC */
}, 1024
/* DYNAMIC_SLOTS */
)]), (0,external_vue_namespaceObject.createElementVNode)("span", {
title: item.tilepath,
class: "tile-class"
}, (0,external_vue_namespaceObject.toDisplayString)(item[props.nodeName]), 9
/* TEXT, PROPS */
, _hoisted_3), (0,external_vue_namespaceObject.createVNode)(_component_kq_icon, {
class: "more-icon",
onClick: (0,external_vue_namespaceObject.withModifiers)(function f(event) {
handleJudgeDropdownSH(item, event);
}, ["prevent", "stop"])
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.More))]),
_: 2
/* DYNAMIC */
}, 1032
/* PROPS, DYNAMIC_SLOTS */
, ["onClick"]), item.isFront ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("div", _hoisted_4, _hoisted_6)) : (0,external_vue_namespaceObject.createCommentVNode)("v-if", true)]),
_: 2
/* DYNAMIC */
}, 1032
/* PROPS, DYNAMIC_SLOTS */
, ["index"]);
}), 128
/* KEYED_FRAGMENT */
))]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
}), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createElementVNode)("div", null, [(0,external_vue_namespaceObject.createVNode)(_component_kq_menu, {
ref_key: "dropDownMenu",
ref: dropDownMenu,
class: "tree-menu2",
onSelect: handleSelectMenu
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_tooltip, {
effect: "light",
content: "缩放至图层",
placement: "right"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_menu_item, {
index: "1"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, null, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.FullScreen))]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
}), (0,external_vue_namespaceObject.createVNode)(_component_kq_tooltip, {
effect: "light",
content: "透明度",
placement: "right"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_menu_item, {
index: "2"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, null, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.MagicStick))]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
}), (0,external_vue_namespaceObject.createVNode)(_component_kq_divider), (0,external_vue_namespaceObject.createVNode)(_component_kq_tooltip, {
effect: "light",
content: "图层置顶",
placement: "right"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_menu_item, {
index: "3"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, null, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.Download), {
class: "layer-top"
})]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
}), (0,external_vue_namespaceObject.createVNode)(_component_kq_tooltip, {
effect: "light",
content: "取消置顶",
placement: "right"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_menu_item, {
index: "4"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, null, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.Download))]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
}), (0,external_vue_namespaceObject.createVNode)(_component_kq_divider), (0,external_vue_namespaceObject.createVNode)(_component_kq_tooltip, {
effect: "light",
content: "图层上移",
placement: "right"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_menu_item, {
index: "5"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, null, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.Top))]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
}), (0,external_vue_namespaceObject.createVNode)(_component_kq_tooltip, {
effect: "light",
content: "图层下移",
placement: "right"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_menu_item, {
index: "6"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, null, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.Bottom))]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
}, 512
/* NEED_PATCH */
)], 512
/* NEED_PATCH */
), [[external_vue_namespaceObject.vShow, (0,external_vue_namespaceObject.unref)(menuDropdown)]])], 512
/* NEED_PATCH */
), [[external_vue_namespaceObject.vShow, (0,external_vue_namespaceObject.unref)(tabActiveName) === 'zttj']]), (0,external_vue_namespaceObject.createCommentVNode)(" E 图层管理 ")], 512
/* NEED_PATCH */
);
};
}
}));
;// CONCATENATED MODULE: ./src/common/layermanager/LayerManager.vue?vue&type=script&setup=true&lang=js
;// CONCATENATED MODULE: ./src/common/layermanager/LayerManager.vue
const __exports__ = LayerManagervue_type_script_setup_true_lang_js;
/* harmony default export */ var LayerManager = (__exports__);
;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/init.js"
var init_js_namespaceObject = require("@zpc_npm/vue-iclient-common/init.js");
var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_namespaceObject);
;// CONCATENATED MODULE: ./src/common/layermanager/index.js
LayerManager.install = (Vue, opts) => {
init_js_default()(Vue, opts);
Vue.component(LayerManager.name, LayerManager);
};
module.exports = __webpack_exports__;
/******/ })()
;