This commit is contained in:
lcw
2026-03-14 19:46:21 +08:00
parent 93489b06fa
commit 9fb505eb8e
248 changed files with 21714 additions and 1840 deletions

View File

@ -159,9 +159,9 @@ onMounted(() => {
emitter.on("drawShape", (res) => {
mapUtil.value.plot(res, resFun);
});
emitter.on("removeEara", (flag) => {
mapUtil.value.removeEara(flag);
});
// emitter.on("removeEara", (flag) => {
// mapUtil.value.removeEara(flag);
// });
// 回显图形
emitter.on("echoPlane", (res) => {
mapUtil.value.echoPlane(res);

View File

@ -1,8 +1,7 @@
<template>
<div :id="mapid" class="map"></div>
<div class="changeMap_box" v-if="props.isShow">
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
<!-- <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" /> -->
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
<el-carousel-item>
<div class="mapImageItem">
@ -31,7 +30,8 @@
</el-carousel> -->
<!-- 地图缩放 -->
<div class="zoomTargetBox">
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
</el-input-number>
</div>
</div>
</template>
@ -44,7 +44,7 @@ import { getItem } from "@/utils/storage";
const conditionRoute = ref(true); //路况
const mMap = ref(null); //地图对象
const mapUtil = ref(null); //地图工具对象
const zoomTarget = ref(15);
const zoomTarget = ref(6);
const props = defineProps({
mapid: {
@ -70,11 +70,12 @@ const props = defineProps({
isShowDraw: {
type: Boolean,
default: false
}
},
});
try {
const userInfo = getItem("deptId")[0].deptCode;
} catch (error) { }
} catch (error) {}
let map;
let mapLayer;
let mapLayer1;
@ -88,37 +89,66 @@ onMounted(() => {
map = new EliMap({
id: props.mapid,
crs: "EPSG:4490",
crs: "EPSG:3857",
style: {
glyphs: "./fonts/{fontstack}/{range}.pbf",
center: [94.36057012, 29.64276831],
zoom: 15
center: [94.36,29.65],
zoom: 11
},
minZoom: 5,
minZoom: 7,
maxZoom: 18,
transformRequest: (url) => {
if (url.indexOf("TileMatrix=") != -1) {
const arr = url.split("TileMatrix=");
const arr1 = arr[1].split("&");
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
}
}
});
window.map = map;
map.mapboxGLMap.on("load", () => {
map.addWMTSLayer(
"/PGIS_S_TileMapServer/Maps/XZDJ_DJ/EzMap"
,
{
Service: "getImage",
Type: "RGB",
ZoomOffset: "0",
V: "0.3",
Zoom: "{z}",
Row: "{y}",
Col: "{x}"
},
{
tileSize: 300
}
);
map.addGaudLayer({
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
})
zoomTarget.value = map.mapboxGLMap.getZoom();
// 地图加载完成后发出事件
// emit('mapLoaded')
});
mapUtil.value = new MapUtil(map);
// map = new EliMap({
// id: props.mapid,
// crs: "EPSG:4490",
// style: {
// glyphs: "./fonts/{fontstack}/{range}.pbf",
// center: [94.36057012, 29.64276831],
// zoom: 15
// },
// minZoom: 7,
// maxZoom: 18,
// });
// window.map = map;
// map.mapboxGLMap.on("load", () => {
// map.addWMTSLayer(
// "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
// ,
// {
// Service: "getImage",
// Type: "RGB",
// ZoomOffset: "0",
// V: "0.3",
// Zoom: "{z}",
// Row: "{y}",
// Col: "{x}"
// },
// {
// tileSize: 300
// }
// );
// zoomTarget.value = map.mapboxGLMap.getZoom();
// });
// mapUtil.value = new MapUtil(map);
mapUtil.value.Drawplot(); //初始化加载绘制工具
// 设置地图中心点及图层
@ -154,10 +184,6 @@ onMounted(() => {
emitter.on("showSquire", (obj) => {
mapUtil.value.zdySquire(obj);
});
// 展示气泡框
emitter.on("makerPopup", (obj) => {
mapUtil.value.makerPopup(obj);
});
// 绘制图形 - 回显区域
emitter.on("drawShape", (res) => {
@ -263,6 +289,7 @@ const mapSetLayer = (id, source) => {
//获取地图绘制的数据
const resFun = (coord, type, flag, data) => {
emitter.emit("coordString", {
coord: coord,
type: type,
@ -276,6 +303,12 @@ const handleZoom = (val) => {
map.mapboxGLMap.setZoom(val);
};
emitter.on("map-resize", () => {
if (map && map.mapboxGLMap) {
map.mapboxGLMap.resize();
}
});
// 是否打开或者关闭路况
const handleSwitch = (val) => {
if (val) {
@ -292,7 +325,6 @@ onUnmounted(() => {
emitter.off("showPoint");
emitter.off("deletePointArea");
emitter.off("deletePointAreaOne");
emitter.off("makerPopup");
emitter.off("drawShape");
emitter.off("echoPlane");
emitter.off("removeEara");
@ -306,6 +338,7 @@ onUnmounted(() => {
emitter.off("diffusionCircle");
emitter.off("SsCircle");
emitter.off("ClearssCircle");
emitter.off("map-resize");
});
</script>
@ -328,35 +361,29 @@ onUnmounted(() => {
right: 398px;
bottom: 4px;
z-index: 9;
.mapImageItem {
border: 1px solid #08aae8;
background: rgb(9, 26, 70);
&>img {
& > img {
width: 100%;
height: 50px;
}
&>div {
& > div {
text-align: center;
position: relative;
top: -3px;
}
}
.zoomTargetBox {
margin-top: 10px;
margin-left: 23px;
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
background: #133362;
color: #fff;
border: none;
}
::v-deep .el-input__inner {
background: #0c1641;
}

View File

@ -1,7 +1,8 @@
<template>
<div :id="mapid" class="map"></div>
<div class="changeMap_box" v-if="props.isShow">
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
<el-carousel-item>
<div class="mapImageItem">
@ -30,21 +31,20 @@
</el-carousel> -->
<!-- 地图缩放 -->
<div class="zoomTargetBox">
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
</el-input-number>
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, defineProps, nextTick, computed } from "vue";
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
import { MapUtil } from "./mapUtil";
import emitter from "@/utils/eventBus.js";
import { getItem } from "@/utils/storage";
const conditionRoute = ref(true); //
const mMap = ref(null); //
const mapUtil = ref(null); //
const zoomTarget = ref(6);
const zoomTarget = ref(15);
const props = defineProps({
mapid: {
@ -70,19 +70,11 @@ const props = defineProps({
isShowDraw: {
type: Boolean,
default: false
},
//
mapKey: {
type: String,
default: null
}
});
// 使mapid
const uniqueMapKey = computed(() => props.mapKey || props.mapid);
try {
const userInfo = getItem("deptId")[0].deptCode;
} catch (error) {}
} catch (error) { }
let map;
let mapLayer;
let mapLayer1;
@ -96,107 +88,76 @@ onMounted(() => {
map = new EliMap({
id: props.mapid,
crs: "EPSG:3857",
crs: "EPSG:4490",
style: {
glyphs: "./fonts/{fontstack}/{range}.pbf",
center: [94.36,29.65],
zoom: 10
center: [94.36057012, 29.64276831],
zoom: 15
},
transformRequest: (url) => {
if (url.indexOf("TileMatrix=") != -1) {
const arr = url.split("TileMatrix=");
const arr1 = arr[1].split("&");
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
}
}
minZoom: 5,
maxZoom: 18,
});
//
// window.map = map;
//
mMap.value = map;
window.map = map;
map.mapboxGLMap.on("load", () => {
map.addGaudLayer({
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
})
map.addWMTSLayer(
"/PGIS_S_TileMapServer/Maps/XZDJ_DJ/EzMap"
,
{
Service: "getImage",
Type: "RGB",
ZoomOffset: "0",
V: "0.3",
Zoom: "{z}",
Row: "{y}",
Col: "{x}"
},
{
tileSize: 300
}
);
zoomTarget.value = map.mapboxGLMap.getZoom();
//
// emit('mapLoaded')
});
mapUtil.value = new MapUtil(map);
mapUtil.value.Drawplot(); //
//
//
emitter.on(`setMapCenter_${uniqueMapKey.value}`, (res) => {
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
});
//
emitter.on("setMapCenter", (res) => {
// flagflag
if (!res.flag || res.flag === uniqueMapKey.value) {
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
}
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
});
emitter.on("removePlot", (flag) => {
mapUtil.value.removePlot(flag);
});
emitter.on("removeAll", (flag) => {
mapUtil.value.removeAll(flag);
});
//
emitter.on("addPointArea", (obj) => {
//
if (!obj.baseFlag || obj.baseFlag === uniqueMapKey.value ||
obj.flag && obj.flag.includes(uniqueMapKey.value)) {
mapUtil.value.makerSki(obj);
}
mapUtil.value.makerSki(obj);
});
//
emitter.on("showPoint", (obj) => {
mapUtil.value.showPoint(obj);
});
//
emitter.on("makerPopup", (obj) => {
mapUtil.value.makerPopup(obj);
});
//
emitter.on("deletePointArea", (res) => {
//
if (typeof res === 'object' && res.baseFlag) {
if (res.baseFlag === uniqueMapKey.value) {
mapUtil.value.removeElement(res.baseFlag);
}
} else if (typeof res === 'string') {
if (res === uniqueMapKey.value || res.includes(uniqueMapKey.value)) {
mapUtil.value.removeElement(res);
}
}
mapUtil.value.removeElement(res);
});
//
emitter.on("deletePointAreaOne", (obj) => {
if (obj.flag === uniqueMapKey.value || obj.flag.includes(uniqueMapKey.value)) {
mapUtil.value.removeElementOne(obj.flag, obj.id);
}
mapUtil.value.removeElementOne(obj.flag, obj.id);
});
//
emitter.on("showSquire", (obj) => {
mapUtil.value.zdySquire(obj);
});
//
emitter.on("makerPopup", (obj) => {
mapUtil.value.makerPopup(obj);
});
// -
emitter.on("drawShape", (res) => {
@ -302,7 +263,6 @@ const mapSetLayer = (id, source) => {
//
const resFun = (coord, type, flag, data) => {
emitter.emit("coordString", {
coord: coord,
type: type,
@ -330,9 +290,9 @@ onUnmounted(() => {
emitter.off("setMapCenter");
emitter.off("addPointArea");
emitter.off("showPoint");
emitter.off("makerPopup");
emitter.off("deletePointArea");
emitter.off("deletePointAreaOne");
emitter.off("makerPopup");
emitter.off("drawShape");
emitter.off("echoPlane");
emitter.off("removeEara");
@ -368,29 +328,35 @@ onUnmounted(() => {
right: 398px;
bottom: 4px;
z-index: 9;
.mapImageItem {
border: 1px solid #08aae8;
background: rgb(9, 26, 70);
& > img {
&>img {
width: 100%;
height: 50px;
}
& > div {
&>div {
text-align: center;
position: relative;
top: -3px;
}
}
.zoomTargetBox {
margin-top: 10px;
margin-left: 23px;
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
background: #133362;
color: #fff;
border: none;
}
::v-deep .el-input__inner {
background: #0c1641;
}

View File

@ -72,7 +72,7 @@ export function MapUtil(map) {
*/
MapUtil.prototype.makerSki = (res) => {
let { coords, icon, flag, showTitle, size, offset } = res
let { coords, icon, flag, showTitle, size, offset, flash } = res
if (!coords) return;
if (!_that._self[flag]) _that._self[flag] = []; //存储地图标识的容器
if (!_that.idsBox[flag]) _that.idsBox[flag] = []; //存储id的容器
@ -81,13 +81,19 @@ export function MapUtil(map) {
} else {
coords.forEach(item => {
let el = document.createElement("img");
el.src = item.icon || icon;
if (!flash) {
el.src = item.icon ? item.icon : icon;
} else {
el.className = 'blink-animation'
}
el.style.width = size ? size : "25px";
if (flag.includes('jczMap_')) el.style.width = '45px';
if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag, '', offset) //展示标题
// if (flag == 'hm') _that.makerPopup({data:item,flag:'hm_pop',type:'Custom'}) //展示气泡框
// 确保坐标格式正确,使用对象格式传递坐标
const marker = map.Marker(el, { lng: item.jd, lat: item.wd }, { anchor: 'bottom', offset: [0, 0] })
const marker = map.Marker(el, { lng: item.jd, lat: item.wd }, { anchor: 'bottom', offset: offset ? offset : [0, 0] })
el.addEventListener("click", () => {
_that.openInfoDetail(flag, item) //点击打开详情
})
@ -321,7 +327,9 @@ export function MapUtil(map) {
MapUtil.prototype.diffusionCircle = (obj) => {
let { coords, flag, isClear } = obj
if (!_that._self[flag]) _that._self[flag] = {}
if (isClear) _that._self[flag].destroy() //destroy销毁show(false) 移除
if (isClear && _that._self[flag] && typeof _that._self[flag].destroy === 'function') {
_that._self[flag].destroy() //destroy销毁show(false) 移除
}
let data = [{ position: coords }]
_that._self[flag] = map.DiffuseCircle(data, {
radius: 10,
@ -412,8 +420,11 @@ export function MapUtil(map) {
for (let i = 0; i < list.length; i++) {
const el = list[i];
console.log(el, 'el');
if (el && typeof el == 'object') el.destroy() //destory()销毁 , show(false) false:隐藏 true :展示
else _that.removePlot(key)
if (el && typeof el === 'object' && typeof el.destroy === 'function') {
el.destroy() //destory()销毁 , show(false) false:隐藏 true :展示
} else {
_that.removePlot(key)
}
}
_that._self[key] = [];
}
@ -430,7 +441,11 @@ export function MapUtil(map) {
for (let key in _that._self.gpsZb) {
let item = _that._self.gpsZb[key]
if (item && item.length > 0) {
for (let child in item) { item[child].destroy() }
for (let child in item) {
if (item[child] && typeof item[child].destroy === 'function') {
item[child].destroy()
}
}
_that._self.gpsZb[key] = []
}
}
@ -442,7 +457,9 @@ export function MapUtil(map) {
if (layer !== 'gpsZb') {
for (let i = 0; i < _that._self[layer].length; i++) {
const el = _that._self[layer][i];
el.destroy()//destory()销毁 , show(false) false:隐藏 true :展示
if (el && typeof el.destroy === 'function') {
el.destroy()//destory()销毁 , show(false) false:隐藏 true :展示
}
}
_that._self[layer] = [];
@ -452,7 +469,9 @@ export function MapUtil(map) {
if (!_that._self[flagT]) return false;
for (let i = 0; i < _that._self[flagT].length; i++) {
const el = _that._self[flagT][i];
el.destroy()//destory()销毁 , show(false) false:隐藏 true :展示
if (el && typeof el.destroy === 'function') {
el.destroy()//destory()销毁 , show(false) false:隐藏 true :展示
}
}
_that._self[flagT] = []
}
@ -467,11 +486,15 @@ export function MapUtil(map) {
list.forEach((el, index) => {
if (el == id) {
_that.idsBox[layer].splice(index, 1);
if (_that._self[layer][index]) _that._self[layer][index].destroy()
if (_that._self[layer][index] && typeof _that._self[layer][index].destroy === 'function') {
_that._self[layer][index].destroy()
}
_that._self[layer].splice(index, 1)
if (layer == 'rx') {
let flagT = layer + 'rxTitle';
if (_that._self[flagT][index]) _that._self[flagT][index].destroy()
if (_that._self[flagT][index] && typeof _that._self[flagT][index].destroy === 'function') {
_that._self[flagT][index].destroy()
}
_that._self[flagT].splice(index, 1)
_that.removeGpsZbOverlayById(id) //删除图标
}
@ -485,7 +508,11 @@ export function MapUtil(map) {
try {
let info = _that._self.gpsZb[id]
if (info) {
info.forEach(element => { element.destroy() });
info.forEach(element => {
if (element && typeof element.destroy === 'function') {
element.destroy()
}
});
delete _that._self.gpsZb[id]
}
} catch (err) { }
@ -759,7 +786,7 @@ export function MapUtil(map) {
// 移除轨迹
MapUtil.prototype.removeTrajectory = (flag) => {
if (_that._self[flag]) {
if (_that._self[flag] && typeof _that._self[flag].destroy === 'function') {
_that._self[flag].destroy();
_that._self[flag] = null
}
@ -848,7 +875,7 @@ export function MapUtil(map) {
// 移除边界
MapUtil.prototype.removeBj = (res) => {
// 移除单个polygonGeo为了向后兼容
if (_that.polygonGeo) {
if (_that.polygonGeo && typeof _that.polygonGeo.destroy === 'function') {
_that.polygonGeo.destroy();
_that.polygonGeo = null;
}
@ -856,7 +883,9 @@ export function MapUtil(map) {
// 移除所有添加到boundaryList中的多边形
if (_that.boundaryList && _that.boundaryList.length > 0) {
_that.boundaryList.forEach(polygon => {
polygon.destroy();
if (polygon && typeof polygon.destroy === 'function') {
polygon.destroy();
}
});
_that.boundaryList = [];
}
@ -882,6 +911,12 @@ export function MapUtil(map) {
case 'yj':
emitter.emit('yjShow', data);
break;
case 'jq':
emitter.emit('showJqXq', data);
break;
case 'sj':
emitter.emit('showZdsjXq', data);
break;
}
}
}

View File

@ -1,18 +1,8 @@
<template>
<div class="form-item-box" :style="{ width: width }">
<el-cascader
style="width: 100%"
class="el-cascader-zj"
:show-all-levels="false"
clearable
filterable
:disabled="props.disabled"
:placeholder="modelValue ? placeholder : '请选择部门'"
:options="tableData"
v-model="oldmodelValue"
@change="handleChange"
:props="endProps"
/>
<el-cascader style="width: 100%" class="el-cascader-zj" :show-all-levels="false" clearable filterable
:disabled="props.disabled" :placeholder="modelValue ? placeholder : '请选择部门'" :options="tableData"
v-model="oldmodelValue" @change="handleChange" :props="endProps" />
</div>
</template>
@ -41,14 +31,14 @@ const props = defineProps({
default: []
},
width: {
default: COMPONENT_WIDTH,
default: '',
type: String
},
isAll:{
isAll: {
default: false,
type: Boolean
},
disabled:{
disabled: {
default: false,
type: Boolean
},
@ -72,7 +62,7 @@ const endProps = {
lazyLoad(node, resolve) {
listQuery.value.parentid = node.data.id;
let params = { ...listQuery.value };
if(props.isAll && firstLoad.value) {
if (props.isAll && firstLoad.value) {
params.parentid = 1;
firstLoad.value = false;
}
@ -89,7 +79,7 @@ const endProps = {
const tableData = ref([]);
const getSysMenuTree = async () => {
let params = { ...listQuery.value }
if(props.isAll) params.parentid = 1;
if (props.isAll) params.parentid = 1;
const res = await selectDeptPage(params);
tableData.value = res;
depList.value = res
@ -101,29 +91,29 @@ onMounted(() => {
watch(
() => props.modelValue,
(val) => {
console.log(val,'val');
console.log(val, 'val');
oldmodelValue.value = val;
},
{ deep: true, immediate: true }
);
const emits = defineEmits(["update:modelValue",'getDepValue']);
const emits = defineEmits(["update:modelValue", 'getDepValue']);
const handleChange = (e) => {
if (props.multiple === true) {
const data = e.map((item) => {return item[item.length - 1];});
const data = e.map((item) => { return item[item.length - 1]; });
emits("update:modelValue", data);
const obj= data.map(items=>{
const obj = data.map(items => {
return {
... depList.value.find(item=>{ return item.orgCode == items})
...depList.value.find(item => { return item.orgCode == items })
}
})
console.log(obj);
emits("getDepValue", obj);
} else {
const data = e ? e[e.length - 1] : "";
emits("update:modelValue", data);
let obj = depList.value.find(item=>{ return item.orgCode == data})
let obj = depList.value.find(item => { return item.orgCode == data })
emits("getDepValue", obj);
}
};

View File

@ -173,7 +173,8 @@ const props = defineProps({
const emit = defineEmits([
"chooseData",
"rowdbClickHland",
"rowcontextmenuHland"
"rowcontextmenuHland",
"changePage"
]);
const multipleTableRef = ref();
const currentRow = ref();

View File

@ -31,7 +31,7 @@
</el-radio-group>
<!-- 时间选择 -->
<el-time-picker v-else-if="item.type == 'time'" v-model="listQuery[item.prop]" placeholder="选择时间" style="width: 100%" :disabled="item.disabled" />
<el-time-picker v-else-if="item.type == 'time'" v-model="listQuery[item.prop]" placeholder="选择时间" style="width: 100%" :disabled="item.disabled" value-format="HH:mm:ss"/>
<el-date-picker v-else-if="item.type == 'date'" v-model="listQuery[item.prop]" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%" :disabled="item.disabled" />
<el-date-picker v-else-if="item.type == 'datetime'" v-model="listQuery[item.prop]" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" style="width: 100%" :disabled="item.disabled" />
<el-date-picker v-else-if="item.type == 'datetimerange'" v-model="listQuery[item.prop]" type="datetimerange" :shortcuts="shortcuts" range-separator="To" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="选择开始时间" end-placeholder="选择结束时间" style="width: 100%" :disabled="item.disabled" />