@zpc_npm/vue-iclient-common
Version:
KQGIS iClient for Vue.js
422 lines (353 loc) • 14.2 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__, {
"LegendViewModel": function() { return /* reexport */ LegendViewModel; },
"default": function() { return /* reexport */ Legend; }
});
;// CONCATENATED MODULE: external "vue"
var external_vue_namespaceObject = require("vue");
;// CONCATENATED MODULE: external "xe-utils"
var external_xe_utils_namespaceObject = require("xe-utils");
var external_xe_utils_default = /*#__PURE__*/__webpack_require__.n(external_xe_utils_namespaceObject);
;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/_utils/util"
var util_namespaceObject = require("@zpc_npm/vue-iclient-common/_utils/util");
;// 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/legend/LegendViewModel.js
/*
* Author: Codqd
* Date: 2022-11-29
* LastEditors: Codqd
* LastEditTime: 2023-01-10
* Description: 图例组件逻辑类
*/
/**
* UI显隐操作时注意同时调用数据设置与清空方法，控制监听事件的添加与删除
*/
class LegendViewModel extends (mitt_default()) {
/**
* @param {Object} options - 参数
* @param {string} [options.mapTarget] - 组件绑定的map的id
*/
constructor(options) {
super();
/**
* 组件绑定的map的id
* @type {string}
*/
this.mapTarget = options.mapTarget; // 事件绑定this
this._resetListData = this._resetListData.bind(this);
this._changeMap = this._changeMap.bind(this);
}
/**
* 注册事件,监听mapview数据变化，监听map切换。
* @private
*/
_registerEvents() {
// 添加图层数据源变化监听
gis_utils_namespaceObject.mapViewUtils.bindViewEvents("resetLayerDatas", this._resetListData, this.mapTarget); // 切换监听事件 指定mapTarget时 不需要监听
if (!(this.mapTarget && this.mapTarget !== "")) {
gis_utils_namespaceObject.utils.bindChangeMapEvents(this._changeMap);
}
}
/**
* 地图切换监听事件的回调函数，比如二三维切换。
* @param {object} e
* @private
*/
_changeMap(e) {
// 为了防止两个监听同时存在 出现数据出错
const preMapTarget = e.preMapTarget; // 地图切换时 移除切换前地图的数据监听事件
gis_utils_namespaceObject.mapViewUtils.offViewEvents("resetLayerDatas", this._resetListData, preMapTarget); // 地图切换时 添加切换手地图的数据监听事件 不传maptarget 获取当前地图的maptarget
gis_utils_namespaceObject.mapViewUtils.bindViewEvents("resetLayerDatas", this._resetListData); // 重新获取、设置数据
this._setLegendList();
}
/**
* 移除事件监听
* @private
*/
_removeEvents() {
// 删除所有事件监听
gis_utils_namespaceObject.mapViewUtils.offViewEvents("resetLayerDatas", this._resetListData, this.mapTarget);
if (!(this.mapTarget && this.mapTarget !== "")) {
gis_utils_namespaceObject.utils.offChangeMapEvents(this._changeMap);
}
}
/**
* 添加监听，数据设置为当前地图所有可见图层图例
*/
init() {
this._setLegendList();
this._registerEvents();
}
/**
* mapview数据变化监听事件的回调函数
* @param e {object}
* @private
*/
_resetListData(e) {
// 如果图层变化事件是自己触发的 则不继续执行 避免死循环
if (e.eventTarget && e.eventTarget === this) {
return;
}
this._setLegendList();
}
/**
* 数据设置为当前地图所有可见图层的图例
* @private
*/
_setLegendList() {
let maplayers = gis_utils_namespaceObject.mapLayerUtils.getLayerCheckedList(this.mapTarget); // 组件初始化在地图加载前完成时，将获取不到数据，于是需要监听mounted事件重新触发设置数据的方法
if (!maplayers) {
// mapview初始化结束监听 如果view已经存在了，mounted事件不会添加监听
gis_utils_namespaceObject.mapViewUtils.bindViewOnceEvents("mounted", this._resetListData, this.mapTarget);
return;
}
if (maplayers.length === 0) {
this.fire("setData", {
legends: []
});
return;
} // 按地图服务分类
let groupLayers = external_xe_utils_default().groupBy(maplayers, "url"); // 一个地图服务调一次图例方法
const promiseAll = [];
for (let url of Object.keys(groupLayers)) {
let params = new KqGIS.Map.GetLegendParams({
layerIds: groupLayers[url].map(val => {
return val.id;
}),
width: 24,
height: 16,
ua_token: groupLayers[url][0].accessToken
});
promiseAll.push(new Promise((resolve, reject) => {
let getLegendService = new KqGIS.Map.GetLegendService(url, {
eventListeners: {
processCompleted: resolve,
processFailed: reject
}
});
getLegendService.processAsync(params);
}));
} // 批量发送请求
Promise.all(promiseAll).then(response => {
// 拍平返回的多维数组图例数据
let legend = response.map(item => {
return item.result.result;
});
legend = external_xe_utils_default().flatten(legend); // 重新组织数据结构
let list = legend.map(layer => {
let obj = {};
obj.layerName = external_xe_utils_default().find(maplayers, item => item.id == layer.layerId).name;
obj.legendList = layer.items.map(legend => {
return {
legendName: legend.legendName,
src: `data:${layer.contentType};base64,${legend.data}`
};
});
return obj;
});
this.fire("setData", {
legends: list
});
});
}
/**
* 清除图例
*/
clearLegendList() {
this.fire("setData", {
legends: []
});
}
/**
* 组件销毁时，执行的函数，删除事件监听
*/
destroy() {
this.off();
this._removeEvents();
}
}
;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/common/legend/Legend.vue?vue&type=script&setup=true&lang=js
const _hoisted_1 = {
class: "content"
};
const _hoisted_2 = {
key: 0,
class: "legend-item"
};
const _hoisted_3 = {
class: "legend-title"
};
const _hoisted_4 = {
class: "legend-panel"
};
const _hoisted_5 = ["src"];
// 获取组件传参
// vue3.2声明名称暂时只支持这样写 name在绑定组件的时候使用
const __default__ = {
name: "KqLegend"
};
/* harmony default export */ var Legendvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
props: {
// 每个地图相关组件的必须参数 非必传 指定组件绑定的map对象的div的id
mapTarget: String,
// 组件显示位置
position: [String, Object],
// 是否显示阴影
showShadow: {
type: Boolean,
default: false
}
},
setup(__props, {
expose
}) {
const props = __props; // 组件容器
const boxRef = (0,external_vue_namespaceObject.ref)(null); // 数据源
const dataList = (0,external_vue_namespaceObject.reactive)({
data: []
}); // 逻辑类
let viewModel = null;
(0,external_vue_namespaceObject.onMounted)(() => {
(0,util_namespaceObject.updatePosition)(boxRef.value.$el, props);
viewModel = new LegendViewModel({
mapTarget: props.mapTarget
});
viewModel.on("setData", _data => {
dataList.data = _data.legends;
});
viewModel.init();
});
(0,external_vue_namespaceObject.onBeforeUnmount)(() => {
viewModel.destroy();
viewModel = null;
});
expose({
resetLegend
});
/**
* 清空图例
*/
function resetLegend() {
viewModel.clearLegendList();
}
return (_ctx, _cache) => {
const _component_kq_space = (0,external_vue_namespaceObject.resolveComponent)("kq-space");
const _component_kq_scrollbar = (0,external_vue_namespaceObject.resolveComponent)("kq-scrollbar");
return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createBlock)(_component_kq_scrollbar, {
class: (0,external_vue_namespaceObject.normalizeClass)(["legend", __props.showShadow ? 'shadow' : null]),
"max-height": "504px",
ref_key: "boxRef",
ref: boxRef
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createCommentVNode)(" S 图例 "), (0,external_vue_namespaceObject.createElementVNode)("div", _hoisted_1, [dataList.data.length === 0 ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("div", _hoisted_2, "无图例数据")) : ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, {
key: 1
}, [(0,external_vue_namespaceObject.createCommentVNode)(" 空值情况 "), ((0,external_vue_namespaceObject.openBlock)(true), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, (0,external_vue_namespaceObject.renderList)(dataList.data, (item, index) => {
return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("div", {
class: "legend-item",
key: index
}, [(0,external_vue_namespaceObject.createElementVNode)("h4", _hoisted_3, (0,external_vue_namespaceObject.toDisplayString)(item.layerName), 1
/* TEXT */
), (0,external_vue_namespaceObject.createVNode)(_component_kq_space, {
wrap: ""
}, {
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)(item.legendList, legend => {
return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("div", _hoisted_4, [(0,external_vue_namespaceObject.createElementVNode)("img", {
src: legend.src,
style: {
"padding-right": "8px"
}
}, null, 8
/* PROPS */
, _hoisted_5), (0,external_vue_namespaceObject.createElementVNode)("label", null, (0,external_vue_namespaceObject.toDisplayString)(legend.legendName), 1
/* TEXT */
)]);
}), 256
/* UNKEYED_FRAGMENT */
))]),
_: 2
/* DYNAMIC */
}, 1024
/* DYNAMIC_SLOTS */
)]);
}), 128
/* KEYED_FRAGMENT */
))], 64
/* STABLE_FRAGMENT */
)), (0,external_vue_namespaceObject.createCommentVNode)(" 图例项 ")]), (0,external_vue_namespaceObject.createCommentVNode)(" E 图例 ")]),
_: 1
/* STABLE */
}, 8
/* PROPS */
, ["class"]);
};
}
}));
;// CONCATENATED MODULE: ./src/common/legend/Legend.vue?vue&type=script&setup=true&lang=js
;// CONCATENATED MODULE: ./src/common/legend/Legend.vue
const __exports__ = Legendvue_type_script_setup_true_lang_js;
/* harmony default export */ var Legend = (__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/legend/index.js
Legend.install = (Vue, opts) => {
init_js_default()(Vue, opts);
Vue.component(Legend.name, Legend);
};
module.exports = __webpack_exports__;
/******/ })()
;