@zpc_npm/vue-iclient-common
Version:
KQGIS iClient for Vue.js
542 lines (452 loc) • 17.3 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__, {
"BasemapToggleViewModel": function() { return /* reexport */ BasemapToggleViewModel; },
"default": function() { return /* reexport */ BasemapToggle; }
});
;// 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/basemaptoggle/BasemapToggleViewModel.js
/**
* Author: renjun
* Date: 2022-11-23
* Description: 底图切换逻辑层
*/
/**
* @class BasemapToggleViewModel
* @classdesc 底图切换
* @param {string} mapTarget map对象渲染的div的id
* @param {Object} baseLayerInfo 底图初始化所需数据。
*/
class BasemapToggleViewModel extends (mitt_default()) {
constructor(mapTarget, baseLayerInfo) {
super();
/**
* 绑定地图的target，可为“”
* @type {string}
* @private
*/
this._mapTarget = mapTarget;
/**
* 底图数据
* @type {object}
* @private
*/
this._baseLayerInfo = baseLayerInfo;
/**
* 底图数据列表
* @type {object}
* @private
*/
this._infoList = null;
this._resetListData = this._resetListData.bind(this);
this._changeMap = this._changeMap.bind(this);
this._registerEvents();
}
/**
* 注册事件
*/
_registerEvents() {
gis_utils_namespaceObject.mapViewUtils.bindViewEvents("mounted", this._resetListData, this._mapTarget); // 切换监听事件 指定mapTarget时 不需要监听
if (!(this._mapTarget && this._mapTarget !== "")) {
gis_utils_namespaceObject.utils.bindChangeMapEvents(this._changeMap);
}
}
/**
* 图层监听事件
* @param {object} e
* @returns
*/
_resetListData(e) {
// 如果图层变化事件是自己触发的 则不继续执行 避免死循环
if (e.eventTarget && e.eventTarget === this) {
return;
}
this.initData();
}
/**
* 地图切换事件
* @param {object} e
*/
_changeMap(e) {
// 为了防止两个监听同时存在 出现数据出错
const preMapTarget = e.preMapTarget; // 地图切换时 移除切换前地图的数据监听事件
gis_utils_namespaceObject.mapViewUtils.offViewEvents("mounted", this._resetListData, preMapTarget); // 地图切换时 添加切换手地图的数据监听事件 不传maptarget 获取当前地图的maptarget
gis_utils_namespaceObject.mapViewUtils.bindViewEvents("mounted", this._resetListData); //重新获取、设置数据
if (e.preMapTarget !== e.currentMapTarget) {
this.clearShowLayer();
this.initData();
}
}
/**
* 生成唯一值guid
* @returns guid
*/
guid() {
const S4 = function () {
return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
};
return S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4();
}
init() {
// 获取绑定地图的图层数据，不包含根节点
let maplayers = gis_utils_namespaceObject.mapLayerUtils.getLayerData(this._mapTarget);
if (!maplayers) {
// mapview初始化结束监听 如果view已经存在了，mounted事件不会添加监听
gis_utils_namespaceObject.mapViewUtils.bindViewOnceEvents("mounted", this._resetListData, this._mapTarget);
} else {
this.initData();
}
this._registerEvents();
}
/**
* 初始化底图数据
*/
initData() {
let layerinfo = this._baseLayerInfo;
let infolist = [];
this._infoList = [];
for (let item in layerinfo) {
let obj = {};
obj = JSON.parse(JSON.stringify(layerinfo[item]));
obj.key = item;
if (obj.subtitle) {
if (obj.subvisible) {
obj.sublayers.map(sub => {
if (obj.layers.indexOf(sub) < 0) {
obj.layers.unshift(sub);
}
});
obj.subchange = obj.subvisible;
}
}
let self = this;
obj.layers.map(t => {
t.layerkey = self.guid();
});
if (obj.visible) {
gis_utils_namespaceObject.mapLayerUtils.showBaseLayer(this._mapTarget, obj.key, obj, true);
}
obj.change = obj.visible;
infolist.push(obj);
}
this._infoList = infolist;
this.fire("getData", {
infolist
});
}
/**
* 点击时显示点击显示的底图
* @param {string} layerKey 点击的底图的key
*/
showClickLayer(layerKey) {
let infolist = this._infoList;
for (let i = 0; i < infolist.length; i++) {
if (infolist[i].key === layerKey) {
gis_utils_namespaceObject.mapLayerUtils.showBaseLayer(this._mapTarget, layerKey, infolist[i], true);
infolist[i].change = true;
if (infolist[i].subchange === false) {
let subobj = {
key: infolist[i].key,
layers: infolist[i].sublayers,
title: infolist[i].subtitle
};
gis_utils_namespaceObject.mapLayerUtils.showBaseLayer(this._mapTarget, layerKey, subobj, false);
}
} else {
gis_utils_namespaceObject.mapLayerUtils.showBaseLayer(this._mapTarget, infolist[i].key, infolist[i], false);
infolist[i].change = false;
}
}
}
/**
* 点击checkbox时显示子底图，如果主底图没显示就显示
* @param {string} layerKey 点击的底图的key
* @param {boolean} visible 是否显示
*/
showLayer(layerKey, visible) {
let infolist = this._infoList;
for (let i = 0; i < infolist.length; i++) {
if (infolist[i].key === layerKey) {
if (infolist[i].subtitle) {
infolist[i].subchange = visible;
if (visible) {
gis_utils_namespaceObject.mapLayerUtils.showBaseLayer(this._mapTarget, layerKey, infolist[i], true);
} else {
this.showClickLayer(layerKey);
let subobj = {
key: infolist[i].key,
layers: infolist[i].sublayers,
title: infolist[i].subtitle
};
gis_utils_namespaceObject.mapLayerUtils.showBaseLayer(this._mapTarget, layerKey, subobj, false);
}
}
break;
}
}
}
/**
* 清除所有显示底图
*/
clearShowLayer() {
this._infoList = [];
}
/**
*销毁执行方法。删除所有事件监听
*/
destroy() {
this.off();
gis_utils_namespaceObject.mapViewUtils.offViewEvents("mounted", this._resetListData, this._mapTarget);
if (!(this._mapTarget && this._mapTarget !== "")) {
gis_utils_namespaceObject.utils.offChangeMapEvents(this._changeMap);
}
}
}
;// 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/const-image"
var const_image_namespaceObject = require("@zpc_npm/vue-iclient-common/_utils/const-image");
;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/common/basemaptoggle/BasemapToggle.vue?vue&type=script&setup=true&lang=js
const _hoisted_1 = {
class: "basemaptoggle"
};
const _hoisted_2 = {
class: "mapType"
};
const _hoisted_3 = ["id", "onClick"];
const _hoisted_4 = {
key: 0,
class: "yxzj"
};
const _hoisted_5 = {
class: "hb"
};
// 逻辑类 逻辑运算代码都写在里面
// vue3.2声明名称暂时只支持这样写 name在绑定组件的时候使用
const __default__ = {
name: "KqBasemapToggle"
};
/* harmony default export */ var BasemapTogglevue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
props: {
// 每个地图相关组件的必须参数 非必传 指定组件绑定的map对象的div的id
mapTarget: String,
// 底图数据
baseLayerInfo: {
type: Object,
default: () => {
return null;
}
},
position: [String, Object]
},
setup(__props, {
expose
}) {
const props = __props; // 鼠标移入移出的判断
let overState = false; // 逻辑类
let viewModel = null; // 底图数据
let layerdata = (0,external_vue_namespaceObject.reactive)([]); // 样式名，用于展开和收缩的样式切换
let styleName = (0,external_vue_namespaceObject.ref)("");
let layerBox = (0,external_vue_namespaceObject.ref)(null); //加载
(0,external_vue_namespaceObject.onMounted)(() => {
// 位置
(0,util_namespaceObject.updatePosition)(layerBox.value, props);
viewModel = new BasemapToggleViewModel(props.mapTarget, props.baseLayerInfo);
styleName.value = "mapType";
viewModel.on("getData", _data => {
layerdata.value = _data.infolist;
for (let i = 0; i < layerdata.value.length; i++) {
if (layerdata.value[i].key === "sl" || layerdata.value[i].key === "yx") {
if (!layerdata.value[i].imageurl) {
layerdata.value[i].imageurl = layerdata.value[i].key === "sl" ? const_image_namespaceObject.SL_IMAGEURL : const_image_namespaceObject.YX_IMAGEURL;
}
}
}
document.getElementById("mapType-wrapper").style.width = 96 + 5 * layerdata.value.length + "px";
});
viewModel.init();
});
/**
* 鼠标移入效果
* @param {object} e
*/
function boxMouseover(e) {
overState = true;
styleName.value = "expand";
document.getElementById("mapType-wrapper").style.width = 10 + 96 * layerdata.value.length + "px";
document.getElementById("mapType-wrapper").setAttribute("class", "expand");
}
/**
* 鼠标移出效果
* @param {object} e
*/
function boxMouseout(e) {
overState = false;
setTimeout(() => {
if (!overState) {
styleName.value = "mapType";
document.getElementById("mapType-wrapper").style.width = 96 + 5 * layerdata.value.length + "px";
document.getElementById("mapType-wrapper").setAttribute("class", "mapType");
}
}, 1500);
}
/**
* 点击checkbox时显示子底图，如果主底图没显示就显示
* @param {object} checked
* @param {object} event
* @param {nubmer} _index
*/
function changeMap(checked, event, _index) {
if (event) {
event.preventDefault();
_index = event.target.name;
}
viewModel.showLayer(_index, checked);
}
/**
* 点击切换底图
* @param {object} e
*/
function clickbox(e) {
let baseList = document.getElementById("mapType-wrapper").children[0].children;
for (let i = 0; i < baseList.length; i++) {
baseList[i].classList.remove("clickborder");
}
document.getElementById(e).classList.add("clickborder");
viewModel.showClickLayer(e);
}
/**
* 清除所有已显示的底图数据
*
*/
function cleanAll() {
viewModel.clearShowLayer();
viewModel.destroy();
} // 抛出方法 外部调用
expose({
cleanAll
});
return (_ctx, _cache) => {
const _component_kq_checkbox = (0,external_vue_namespaceObject.resolveComponent)("kq-checkbox");
return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("div", _hoisted_1, [(0,external_vue_namespaceObject.createElementVNode)("div", {
id: "mapType-wrapper",
class: "mapType",
onMouseover: boxMouseover,
onMouseout: boxMouseout,
ref_key: "layerBox",
ref: layerBox
}, [(0,external_vue_namespaceObject.createElementVNode)("div", _hoisted_2, [((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)(layerdata).value, (item, index) => {
return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("div", {
key: index,
class: "mapTypeCard",
id: item.key,
style: (0,external_vue_namespaceObject.normalizeStyle)((0,external_vue_namespaceObject.unref)(styleName) === 'mapType' ? {
right: 10 + 5 * index + 'px',
'z-index': 1999 - index,
backgroundImage: 'url(' + item.imageurl + ')',
'background-size': '86px 60px'
} : {
right: 10 + 96 * index + 'px',
backgroundImage: 'url(' + item.imageurl + ')',
'background-size': '86px 60px'
}),
onClick: $event => clickbox(item.key)
}, [item.subtitle ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("div", _hoisted_4, [(0,external_vue_namespaceObject.createVNode)(_component_kq_checkbox, {
size: "small",
class: "yxzj-bg",
onChange: changeMap,
name: item.key,
onClick: _cache[0] || (_cache[0] = (0,external_vue_namespaceObject.withModifiers)(() => {}, ["stop"])),
modelValue: item.subchange,
"onUpdate:modelValue": $event => item.subchange = $event
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createTextVNode)((0,external_vue_namespaceObject.toDisplayString)(item.subtitle), 1
/* TEXT */
)]),
_: 2
/* DYNAMIC */
}, 1032
/* PROPS, DYNAMIC_SLOTS */
, ["name", "modelValue", "onUpdate:modelValue"])])) : (0,external_vue_namespaceObject.createCommentVNode)("v-if", true), (0,external_vue_namespaceObject.createElementVNode)("span", _hoisted_5, (0,external_vue_namespaceObject.toDisplayString)(item.title), 1
/* TEXT */
)], 12
/* STYLE, PROPS */
, _hoisted_3);
}), 128
/* KEYED_FRAGMENT */
))])], 544
/* HYDRATE_EVENTS, NEED_PATCH */
)]);
};
}
}));
;// CONCATENATED MODULE: ./src/common/basemaptoggle/BasemapToggle.vue?vue&type=script&setup=true&lang=js
;// CONCATENATED MODULE: ./src/common/basemaptoggle/BasemapToggle.vue
const __exports__ = BasemapTogglevue_type_script_setup_true_lang_js;
/* harmony default export */ var BasemapToggle = (__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/basemaptoggle/index.js
BasemapToggle.install = (Vue, opts) => {
init_js_default()(Vue, opts);
Vue.component(BasemapToggle.name, BasemapToggle);
};
module.exports = __webpack_exports__;
/******/ })()
;