12
This commit is contained in:
13684185576
359
src/components/GdMap/indexnw.vue
Normal file
359
src/components/GdMap/indexnw.vue
Normal 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: 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) => {
|
||||||
|
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>
|
||||||
Reference in New Issue
Block a user