zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-10-26 12:25:50 +08:00
parent 5e18952b55
commit ea3022c3f6
617 changed files with 86322 additions and 185615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

395
src/components/GdMap/index copy 2.vue Normal file
View File

@ -0,0 +1,395 @@
<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-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/slt.jpg')" alt="" />
<div>栅格浅色</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/yxt.jpg')" alt="" />
<div>影像图</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/yst.jpg')" alt="" />
<div>栅格深色</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/shy.png')" alt="" />
<div>三合一</div>
</div>
</el-carousel-item>
</el-carousel> -->
<!-- 地图缩放 -->
<div class="zoomTargetBox">
<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 { 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 props = defineProps({
mapid: {
type: String,
default: "mapDiv"
},
//是否显示可以切换地图底图
isShow: {
type: Boolean,
default: false
},
//是否显示实时路况
isShowMvt: {
type: Boolean,
default: false
},
//是否显示地图层级
isShowZoom: {
type: Boolean,
default: false
},
//是否显示绘制控件
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) {}
let map;
let mapLayer;
let mapLayer1;
onMounted(() => {
emitter.on("followUp", (res) => {
let box = document.getElementsByClassName("changeMap_box");
if (!box) return;
box[0].style.right = !res ? "4px" : "398px";
box[0].style.transition = "0.5s";
});
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;
// 将地图实例存储在组件内
mMap.value = 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
}
);
zoomTarget.value = map.mapboxGLMap.getZoom();
});
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) => {
// 如果事件包含flag并且与当前地图的唯一标识匹配，或者没有指定flag，则处理
if (!res.flag || res.flag === uniqueMapKey.value) {
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);
}
});
// 鼠标滑过提示文字的点位
emitter.on("showPoint", (obj) => {
mapUtil.value.showPoint(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);
}
}
});
// 清除某个覆盖物的单个
emitter.on("deletePointAreaOne", (obj) => {
if (obj.flag === uniqueMapKey.value || obj.flag.includes(uniqueMapKey.value)) {
mapUtil.value.removeElementOne(obj.flag, obj.id);
}
});
// 清除某个覆盖物的单个
emitter.on("showSquire", (obj) => {
mapUtil.value.zdySquire(obj);
});
// 绘制图形 - 回显区域
emitter.on("drawShape", (res) => {
mapUtil.value.plot(res, resFun);
});
emitter.on("removeEara", (flag) => {
mapUtil.value.removeEara(flag);
});
// 回显图形
emitter.on("echoPlane", (res) => {
mapUtil.value.echoPlane(res);
});
//移除绘制区域
emitter.on("removeEara", (flag) => {
mapUtil.value.removeEara(flag);
});
// 回显线
emitter.on("echoLine", (res) => {
mapUtil.value.createLine(res, res.flag);
});
//创建边界面（geojson）
emitter.on("setBoundarys", (res) => {
mapUtil.value.createBoundarys(res);
});
// 移除边界
emitter.on("removeBj", (res) => {
mapUtil.value.removeBj(res);
});
// 轨迹回放
emitter.on("drawLineAnimation", (res) => {
mapUtil.value.displayLineAnimation(res);
});
// 聚合撒点
emitter.on("addPoint", (obj) => {
mapUtil.value.aggregateScatteringPoint(obj);
});
// 热力图显示
emitter.on("thermodynamicChart", (res) => {
mapUtil.value.showHeatDrawing(res);
});
// 扩散圆
emitter.on("diffusionCircle", (res) => {
mapUtil.value.diffusionCircle(res);
});
// 展示盘曲
emitter.on("showGapText", (obj) => {
mapUtil.value.gapText(obj);
});
// 获取当前地图中心点
emitter.on("getCurrentCenter", (res) => {
let centerPoint = map.mapboxGLMap.getCenter();
let coords = [centerPoint.lng, centerPoint.lat];
emitter.emit("getcentercoord", coords);
});
});
//切换地图底图
const onMapImageChange = (val) => {
//清除已经存在胡地图图层
if (map.mapboxGLMap.getLayer("SGQS_ID"))
map.mapboxGLMap.removeLayer("SGQS_ID");
if (map.mapboxGLMap.getLayer("YX_ID")) map.mapboxGLMap.removeLayer("YX_ID");
if (map.mapboxGLMap.getLayer("SGSG_ID"))
map.mapboxGLMap.removeLayer("SGSG_ID");
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
map.mapboxGLMap.removeLayer("TDT_POI_ID");
//设置图层
switch (val) {
case 0:
mapSetLayer("SGQS_ID", "SGQS");
break;
case 1:
mapSetLayer("YX_ID", "YX");
break;
case 2:
mapSetLayer("SGSG_ID", "SGSG");
break;
case 3:
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
break;
}
if (map.mapboxGLMap.getLayer("realTimeTrafficlevelOne"))
map.mapboxGLMap.moveLayer("realTimeTrafficlevelOne");
if (map.mapboxGLMap.getLayer("map_id")) map.mapboxGLMap.moveLayer("map_id");
if (map.mapboxGLMap.getLayer("map_ids")) map.mapboxGLMap.moveLayer("map_ids");
};
//设置图层函数
const mapSetLayer = (id, source) => {
map.mapboxGLMap.addLayer({ id, type: "raster", source });
};
//获取地图绘制的数据
const resFun = (coord, type, flag, data) => {
emitter.emit("coordString", {
coord: coord,
type: type,
flag: flag,
data: data
});
};
// 地图层级
const handleZoom = (val) => {
map.mapboxGLMap.setZoom(val);
};
// 是否打开或者关闭路况
const handleSwitch = (val) => {
if (val) {
// 打开
} else {
// 关闭
}
};
onUnmounted(() => {
emitter.off("removePlot");
emitter.off("setMapCenter");
emitter.off("addPointArea");
emitter.off("showPoint");
emitter.off("deletePointArea");
emitter.off("deletePointAreaOne");
emitter.off("drawShape");
emitter.off("echoPlane");
emitter.off("removeEara");
emitter.off("echoLine");
emitter.off("addPoint");
emitter.off("thermodynamicChart");
emitter.off("drawLineAnimation");
emitter.off("aggregateScatteringPoint");
emitter.off("hotmap");
emitter.off("setBoundarys");
emitter.off("diffusionCircle");
emitter.off("SsCircle");
emitter.off("ClearssCircle");
});
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: 100%;
background-color: aliceblue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.changeMap_box {
position: absolute;
right: 398px;
bottom: 4px;
z-index: 9;
.mapImageItem {
border: 1px solid #08aae8;
background: rgb(9, 26, 70);
& > img {
width: 100%;
height: 50px;
}
& > 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;
}
}
</style>

359
src/components/GdMap/index copy.vue Normal file
View File

@ -0,0 +1,359 @@
<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-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/slt.jpg')" alt="" />
<div>栅格浅色</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/yxt.jpg')" alt="" />
<div>影像图</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/yst.jpg')" alt="" />
<div>栅格深色</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/shy.png')" alt="" />
<div>三合一</div>
</div>
</el-carousel-item>
</el-carousel> -->
<!-- 地图缩放 -->
<div class="zoomTargetBox">
<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 } 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 props = defineProps({
mapid: {
type: String,
default: "mapDiv"
},
//是否显示可以切换地图底图
isShow: {
type: Boolean,
default: false
},
//是否显示实时路况
isShowMvt: {
type: Boolean,
default: false
},
//是否显示地图层级
isShowZoom: {
type: Boolean,
default: false
},
//是否显示绘制控件
isShowDraw: {
type: Boolean,
default: false
}
});
try {
const userInfo = getItem("deptId")[0].deptCode;
} catch (error) { }
let map;
let mapLayer;
let mapLayer1;
onMounted(() => {
emitter.on("followUp", (res) => {
let box = document.getElementsByClassName("changeMap_box");
if (!box) return;
box[0].style.right = !res ? "4px" : "398px";
box[0].style.transition = "0.5s";
});
map = new EliMap({
id: props.mapid,
crs: "EPSG:4490",
style: {
glyphs: "./fonts/{fontstack}/{range}.pbf",
center: [94.36057012, 29.64276831],
zoom: 15
},
minZoom: 5,
maxZoom: 18,
});
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
}
);
zoomTarget.value = map.mapboxGLMap.getZoom();
});
mapUtil.value = new MapUtil(map);
mapUtil.value.Drawplot(); //初始化加载绘制工具
// 设置地图中心点及图层
emitter.on("setMapCenter", (res) => {
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) => {
mapUtil.value.makerSki(obj);
});
// 鼠标滑过提示文字的点位
emitter.on("showPoint", (obj) => {
mapUtil.value.showPoint(obj);
});
// 清除覆盖物
emitter.on("deletePointArea", (res) => {
mapUtil.value.removeElement(res);
});
// 清除某个覆盖物的单个
emitter.on("deletePointAreaOne", (obj) => {
mapUtil.value.removeElementOne(obj.flag, obj.id);
});
// 清除某个覆盖物的单个
emitter.on("showSquire", (obj) => {
mapUtil.value.zdySquire(obj);
});
// 绘制图形 - 回显区域
emitter.on("drawShape", (res) => {
mapUtil.value.plot(res, resFun);
});
emitter.on("removeEara", (flag) => {
mapUtil.value.removeEara(flag);
});
// 回显图形
emitter.on("echoPlane", (res) => {
mapUtil.value.echoPlane(res);
});
//移除绘制区域
emitter.on("removeEara", (flag) => {
mapUtil.value.removeEara(flag);
});
// 回显线
emitter.on("echoLine", (res) => {
mapUtil.value.createLine(res, res.flag);
});
//创建边界面（geojson）
emitter.on("setBoundarys", (res) => {
mapUtil.value.createBoundarys(res);
});
// 移除边界
emitter.on("removeBj", (res) => {
mapUtil.value.removeBj(res);
});
// 轨迹回放
emitter.on("drawLineAnimation", (res) => {
mapUtil.value.displayLineAnimation(res);
});
// 聚合撒点
emitter.on("addPoint", (obj) => {
mapUtil.value.aggregateScatteringPoint(obj);
});
// 热力图显示
emitter.on("thermodynamicChart", (res) => {
mapUtil.value.showHeatDrawing(res);
});
// 扩散圆
emitter.on("diffusionCircle", (res) => {
mapUtil.value.diffusionCircle(res);
});
// 展示盘曲
emitter.on("showGapText", (obj) => {
mapUtil.value.gapText(obj);
});
// 获取当前地图中心点
emitter.on("getCurrentCenter", (res) => {
let centerPoint = map.mapboxGLMap.getCenter();
let coords = [centerPoint.lng, centerPoint.lat];
emitter.emit("getcentercoord", coords);
});
});
//切换地图底图
const onMapImageChange = (val) => {
//清除已经存在胡地图图层
if (map.mapboxGLMap.getLayer("SGQS_ID"))
map.mapboxGLMap.removeLayer("SGQS_ID");
if (map.mapboxGLMap.getLayer("YX_ID")) map.mapboxGLMap.removeLayer("YX_ID");
if (map.mapboxGLMap.getLayer("SGSG_ID"))
map.mapboxGLMap.removeLayer("SGSG_ID");
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
map.mapboxGLMap.removeLayer("TDT_POI_ID");
//设置图层
switch (val) {
case 0:
mapSetLayer("SGQS_ID", "SGQS");
break;
case 1:
mapSetLayer("YX_ID", "YX");
break;
case 2:
mapSetLayer("SGSG_ID", "SGSG");
break;
case 3:
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
break;
}
if (map.mapboxGLMap.getLayer("realTimeTrafficlevelOne"))
map.mapboxGLMap.moveLayer("realTimeTrafficlevelOne");
if (map.mapboxGLMap.getLayer("map_id")) map.mapboxGLMap.moveLayer("map_id");
if (map.mapboxGLMap.getLayer("map_ids")) map.mapboxGLMap.moveLayer("map_ids");
};
//设置图层函数
const mapSetLayer = (id, source) => {
map.mapboxGLMap.addLayer({ id, type: "raster", source });
};
//获取地图绘制的数据
const resFun = (coord, type, flag, data) => {
emitter.emit("coordString", {
coord: coord,
type: type,
flag: flag,
data: data
});
};
// 地图层级
const handleZoom = (val) => {
map.mapboxGLMap.setZoom(val);
};
// 是否打开或者关闭路况
const handleSwitch = (val) => {
if (val) {
// 打开
} else {
// 关闭
}
};
onUnmounted(() => {
emitter.off("removePlot");
emitter.off("setMapCenter");
emitter.off("addPointArea");
emitter.off("showPoint");
emitter.off("deletePointArea");
emitter.off("deletePointAreaOne");
emitter.off("drawShape");
emitter.off("echoPlane");
emitter.off("removeEara");
emitter.off("echoLine");
emitter.off("addPoint");
emitter.off("thermodynamicChart");
emitter.off("drawLineAnimation");
emitter.off("aggregateScatteringPoint");
emitter.off("hotmap");
emitter.off("setBoundarys");
emitter.off("diffusionCircle");
emitter.off("SsCircle");
emitter.off("ClearssCircle");
});
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: 100%;
background-color: aliceblue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.changeMap_box {
position: absolute;
right: 398px;
bottom: 4px;
z-index: 9;
.mapImageItem {
border: 1px solid #08aae8;
background: rgb(9, 26, 70);
&>img {
width: 100%;
height: 50px;
}
&>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;
}
}
</style>

2
src/components/GdMap/index.vue
View File

@ -94,7 +94,7 @@ onMounted(() => {
center: [94.36057012, 29.64276831],
zoom: 15
},
minZoom: 7,
minZoom: 5,
maxZoom: 18,
});
window.map = map;

87
src/components/GdMap/indexww.vue
View File

@ -37,7 +37,7 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
import { ref, onMounted, onUnmounted, defineProps, nextTick, computed } from "vue";
import { MapUtil } from "./mapUtil";
import emitter from "@/utils/eventBus.js";
import { getItem } from "@/utils/storage";
@ -70,8 +70,16 @@ 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) {}
@ -104,7 +112,12 @@ onMounted(() => {
}
});
window.map = map;
// 移除全局挂载，避免不同地图实例冲突
// window.map = map;
// 将地图实例存储在组件内
mMap.value = 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}',
@ -113,56 +126,42 @@ onMounted(() => {
// 地图加载完成后发出事件
// 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(); //初始化加载绘制工具
// 为每个事件添加唯一标识过滤，确保只处理与当前地图实例相关的操作
// 设置地图中心点及图层
emitter.on("setMapCenter", (res) => {
emitter.on(`setMapCenter_${uniqueMapKey.value}`, (res) => {
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
});
// 也保留原始事件，但添加条件判断
emitter.on("setMapCenter", (res) => {
// 如果事件包含flag并且与当前地图的唯一标识匹配，或者没有指定flag，则处理
if (!res.flag || res.flag === uniqueMapKey.value) {
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) => {
mapUtil.value.makerSki(obj);
// 只处理与当前地图相关的标记点
if (!obj.baseFlag || obj.baseFlag === uniqueMapKey.value ||
obj.flag && obj.flag.includes(uniqueMapKey.value)) {
mapUtil.value.makerSki(obj);
}
});
// 鼠标滑过提示文字的点位
emitter.on("showPoint", (obj) => {
mapUtil.value.showPoint(obj);
@ -170,11 +169,23 @@ onMounted(() => {
// 清除覆盖物
emitter.on("deletePointArea", (res) => {
mapUtil.value.removeElement(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);
}
}
});
// 清除某个覆盖物的单个
emitter.on("deletePointAreaOne", (obj) => {
mapUtil.value.removeElementOne(obj.flag, obj.id);
if (obj.flag === uniqueMapKey.value || obj.flag.includes(uniqueMapKey.value)) {
mapUtil.value.removeElementOne(obj.flag, obj.id);
}
});
// 清除某个覆盖物的单个

123
src/components/GdMap/mapUtil.js
View File

@ -71,7 +71,7 @@ export function MapUtil(map) {
*/
MapUtil.prototype.makerSki = (res) => {
let { coords, icon, flag, showTitle } = res
let { coords, icon, flag, showTitle, size, offset } = res
if (!coords) return;
if (!_that._self[flag]) _that._self[flag] = []; //存储地图标识的容器
if (!_that.idsBox[flag]) _that.idsBox[flag] = []; //存储id的容器
@ -81,9 +81,9 @@ export function MapUtil(map) {
coords.forEach(item => {
let el = document.createElement("img");
el.src = item.icon || icon;
el.style.width = flag == 'kfd' ? '32px' : "25px";
el.style.width = size ? size : "25px";
if (flag.includes('jczMap_')) el.style.width = '45px';
if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag) //展示标题
if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag, '', offset) //展示标题
const marker = map.Marker(el, [item.jd, item.wd], { anchor: 'bottom', offset: [0, 0] })
el.addEventListener("click", () => {
_that.openInfoDetail(flag, item) //点击打开详情
@ -141,7 +141,8 @@ export function MapUtil(map) {
}
// 信息框展示
MapUtil.prototype.makerShowTitle = (item, points, flag, text) => {
MapUtil.prototype.makerShowTitle = (item, points, flag, text, offset) => {
let T = flag == 'rx' ? 'rxTitle' : 'Title'
let flagT = flag + T;
if (!_that._self[flagT]) _that._self[flagT] = [];
@ -150,11 +151,25 @@ export function MapUtil(map) {
let textTitle = item.jzMc ? item.jzMc : item.fzrXm + '警组';
if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly') textTitle = item.sbmc;
if (flag == 'gapText') textTitle = text;
if (flag == 'bxd' || flag == "search_bxd") textTitle = item.bxdMc;
// 设置样式
const el = document.createElement('div');
if (flag == 'hm') {
// 直接设置元素样式属性，避免对象赋值的兼容性问题
el.style.fontSize = '12px';
el.style.color = '#ffffffff';
el.style.fontWeight = 'bold';
el.style.textAlign = 'center';
el.style.backgroundColor = '#1891ff82';
el.style.padding = '2px';
// 添加额外的样式属性以确保良好的显示效果
el.style.borderRadius = '4px';
el.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.3)';
el.style.zIndex = '1000';
}
el.className = 'makerTitle';
if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly') el.className = 'makerTitlezb';
if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly' || flag == 'bxd' || flag == "search_bxd") el.className = 'makerTitlezb';
if (flag == 'rx') {
if (item.xfzt == '0') el.classList.add('makerTitleLine');
else if (item.xfzt == '1') el.classList.add('makerTitlecj');
@ -164,7 +179,7 @@ export function MapUtil(map) {
// 渲染
el.innerHTML = textTitle;
const marker = map.Marker(el, points, { anchor: 'bottom', offset: [0, -50] })
const marker = map.Marker(el, points, { anchor: 'bottom', offset: offset ? offset : [0, -50] })
_that._self[flagT].push(marker)
}
@ -186,7 +201,7 @@ export function MapUtil(map) {
let list = []
let cl = (pbcl && pbcl.length > 0) ? true : false; // 车辆
let zb = (txzb && txzb.length > 0) ? true : false; // 智能装备
let qx = (jyqx && jyqx.length > 0) ? true : false; // 警用器械
let qx = (jyqx && jyqx.length > 0) ? true : false; // 常用装备
if (zb) {
let el = document.createElement("img");
el.style.width = "15px"
@ -316,11 +331,14 @@ export function MapUtil(map) {
// 清除所有
MapUtil.prototype.removeAll = () => {
for (let key in _that._self) {
console.log(key, 'key');
if (key != 'rx' && key != 'gpsZb' && !key.includes('rxTitle')) {
let list = _that._self[key]
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)
}
_that._self[key] = [];
}
@ -686,31 +704,90 @@ export function MapUtil(map) {
* ]
};
*/
// MapUtil.prototype.createBoundarys = (res) => {
// let { data } = res
// if (!data) return false;
// if (_that.polygonGeo) _that.removeBj();
// _that.polygonGeo = map.createPolygon(data, {
// color: 'rgba(20,237,245,0.3)',
// outLineColor: '#cf1010',
// outLineWidth: 6,
// highlightColor: 'red',
// type: 'solid',
// labelOption: {
// pixelOffset: [2, 0],
// allShow: false,
// fontColor: '#ffffff'
// }
// })
// _that.polygonGeo.flyTo()
// }
// 移除边界
MapUtil.prototype.createBoundarys = (res) => {
let { data } = res
let { data, color, fillColor, borderColor, label, text, labelPosition } = res
if (!data) return false;
if (_that.polygonGeo) _that.removeBj();
_that.polygonGeo = map.createPolygon(data, {
color: 'rgba(20,237,245,0.3)',
outLineColor: '#cf1010',
outLineWidth: 6,
highlightColor: 'red',
// 使用传入的颜色参数，如果没有则使用默认值
const fillColorValue = fillColor || 'rgba(27, 205, 211, 0.3)';
const borderColorValue = borderColor || '#cf1010';
const highlightColorValue = color || 'red';
// 创建多边形
const polygon = map.createPolygon(data, {
color: fillColorValue,
outLineColor: borderColorValue,
outLineWidth: 5,
highlightColor: highlightColorValue,
type: 'solid',
labelOption: {
content: label || text || '222222', // 标签文字内容
position: labelPosition || 'center', // 标签位置
pixelOffset: [2, 0],
allShow: false,
fontColor: '#ffffff'
allShow: true, // 设置为true以显示所有标签
fontColor: '#ffffff',
fontSize: 14,
fontWeight: 'bold',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
padding: [5, 10],
borderRadius: 4
}
})
_that.polygonGeo.flyTo()
// 将多边形添加到已创建的边界列表中
if (!_that.boundaryList) {
_that.boundaryList = [];
}
_that.boundaryList.push(polygon);
// 如果是第一个添加的区域，则飞过去
if (_that.boundaryList.length === 1) {
polygon.flyTo();
}
}
// 移除边界
MapUtil.prototype.removeBj = (res) => {
_that.polygonGeo.destroy()
// 移除单个polygonGeo（为了向后兼容）
if (_that.polygonGeo) {
_that.polygonGeo.destroy();
_that.polygonGeo = null;
}
// 移除所有添加到boundaryList中的多边形
if (_that.boundaryList && _that.boundaryList.length > 0) {
_that.boundaryList.forEach(polygon => {
polygon.destroy();
});
_that.boundaryList = [];
}
}
// 打开详情弹窗
MapUtil.prototype.openInfoDetail = (flag, data) => {
console.log(flag, data);
switch (flag) {
case 'home_yj_map':
console.log(data);
@ -720,6 +797,14 @@ export function MapUtil(map) {
console.log(data);
emitter.emit("showHomeWarning", data);
break;
case 'jczMap_hm':
console.log(data);
emitter.emit("showJcz", data);
break;
case 'sp':
console.log(data);
emitter.emit("showGzyInfo", data);
break;
}
}
}