From 1d9f6d2b720e20adcb6f120e17315d27d68b8510 Mon Sep 17 00:00:00 2001 From: SunTao <328867980@qq.com> Date: Thu, 7 Nov 2024 09:30:17 +0800 Subject: [PATCH] =?UTF-8?q?fix:=EF=BC=9A=E8=B0=83=E6=95=B4=E5=9C=B0?= =?UTF-8?q?=E5=9B=BEapi=EF=BC=8C=E8=AE=BE=E7=BD=AE=E7=BA=BF=E6=AE=B5?= =?UTF-8?q?=E6=89=93=E7=82=B9=E5=B1=82=E7=BA=A7=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/xj/screen/index.js | 4 +- src/assets/screen/index/map-legend.png | Bin 4620 -> 1908 bytes src/components/map/fssm-map.vue | 32 ++--- src/views/big-screen/index.vue | 186 +++++++------------------ 4 files changed, 72 insertions(+), 150 deletions(-) diff --git a/src/api/xj/screen/index.js b/src/api/xj/screen/index.js index 93ae070..465c562 100644 --- a/src/api/xj/screen/index.js +++ b/src/api/xj/screen/index.js @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-24 15:03:28 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-10-31 15:36:37 + * @LastEditTime: 2024-11-06 13:25:37 * @FilePath: \znxjxt-ui\src\api\xj\screen\index.js * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -29,7 +29,7 @@ export function mapPointList(query) { // 获取地图绘制线段数据接口 export function mapPciList(query) { return request({ - url: "/bigscreen/roadPci", + url: "/bigscreen/mapPci", method: "get", params: query, }); diff --git a/src/assets/screen/index/map-legend.png b/src/assets/screen/index/map-legend.png index e93a50a39813c419c036173f83511e5f21ddb413..29addf7d1ec7c7e5cb30ae31d32bdb8d29b5b5ec 100644 GIT binary patch delta 1893 zcmV-r2b%bdB=ioDB!3BTNLh0L01FcU01FcV0GgZ_000LjNkl4DHC3@MFe{V+o3v^6A-$NpB<)>tNq>*f=Sy<$-FxrzKEL1l zdw=hHFH!irE(|UR<>9{oU=P+2dF$EuYLG24g_wt(xJ3g%4ZgNJa7p_ic50mXd#E0@ z%m5x(TVeD_MNE`pr6{3Xc;bpJYlYEMg(Jp#)G{`hD5;1ER?G$y6+qAztI7fv{OtcK z95G5oN))jge1ClKB}QFt{Ay4@p=Qgy=-0+RCzVMB5wpQW6`_y<;Ht*weE{IVCG9qB z*-?rTiY=28f_$tF2WWoTHf-7P22*2F6JjBVSO7ua9NuxvQ;HJmH75PZ>ZA)n#56c+ zjlE_^AK#apxJ5f~iQ{t_CB{b`4$y8qAC!VXGKePT#D6V1fS|7d-wpHcsi0CzWnNK{ zKhY=*An5a=-vj_lSn^91{fUk2LL@ebiG>0Hk>uV#05DDbkyZm`;ZIYlM{Ih?_kCdV zM+?#a(?mhaqyV5SJfBiM1pxkhw`1jZPdYD77qa!S+#=>czSa%WAT^m-2%eJMAPovY z9b4uFX@82nu0lYv^jg$hIe=wrD;5*Zg?y6fLKLxji+0OcvlwpE} zXvG}J*YXLuKr&JjBQ`w@$4%lZ*+n$9wjrOYM}Hmz0CRwc??(>gYxk{~b_C1z1}w%c zR5C(rJ&;?Ics3wgVnp~EuOzRG`#{xnS`CD~Wotf@2(ndd&742g9;XZ0Dwc!9cDgf~ z^UGE-BK(Z!{CQ;@=LZ06b7(>Ci`yWM!}6R5V;V{FG2v-XXlfYaHTLNBPPYN0)$g~_ z%YSVYR5b^sAO*5dAuGZ%Vi zWaVV3v14}~ji>kRtGppY#DIvypO48}l`1uYD@V0r%d<*M@1&zjMQfAgQj&><@PBYo zSW4kWOp2{{(s=iu2U9OyIOdS#Jdb!{?JkDnKgS$e6qZu3)Yx&OVHg$FhdALRE5z6a zBhDWoSy6q6<5TCW`>?N`ky1I~aSVvWvau06$E2}1={8`(J(%=<#)xGRIXH=D7_ucs zgd2}?OGfW;ANX@Rtp>uMl%-TpwttGPz0aRwkJE*070VG~KRapMd#*UN*ezf?9RLnzGqwJNCzolmKrY!y?0pUwbm!nX%Vy~pW7 zwu|!i6vx z&vKkUtROkg4@7!jxxHe|UM>WJ9=G?!(Eh#EoH_N;6SuXjWV3qv2U`!Fx^T5m-`u2S z|EEPP5qdh>43FK$Q9%Kfj9kiR zt=EEzR8qmk;4lDGZm*z2p^)F)splk^uf`|r-6xJS=8M_*Fu{+^`^(}=XUmm(=%`V-Mtp0xl?cI zK5;xc68WY(clo-V4G{~0pr=dMLeI?3uA1cvBF3uH-D@!>8eWCny%yu7&+jsK>P`CQ zri3wybqDjsYgT2xQvG7|Uss~%Sfu1*iLjz#oC?We;QqbUlzDG8UX4%K6PYySIF@PT f-XxxB$d=guap9sxGjh5Y00000NkvXXu0mjf)2x$a delta 4606 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 @@ -168,23 +168,23 @@ export default { methods: { /* 初始化openlayer地图 */ initMap() { - const tianditu_vec_c = new TileLayer({ - className: "baseLayerClass", - title: "矢量底图", - id: "vec_c", - source: new XYZ({ - url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=1eb44fae5b9dc454442b322e9a41d233", - projection: "EPSG:4326", - }), - visible: true, - }); + // const tianditu_vec_c = new TileLayer({ + // className: "baseLayerClass", + // title: "矢量底图", + // id: "vec_c", + // source: new XYZ({ + // url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=1eb44fae5b9dc454442b322e9a41d233", + // projection: "EPSG:4326", + // }), + // visible: true, + // }); const tianditu_cva_c = new TileLayer({ className: "baseLayerClass", title: "矢量地图", id: "cva_c", source: new XYZ({ - url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=1eb44fae5b9dc454442b322e9a41d233", - projection: "EPSG:4326", + url: "https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", + // projection: "EPSG:4326", }), visible: true, }); @@ -192,8 +192,8 @@ export default { title: "影像地图", id: "img_c", source: new XYZ({ - url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=img_c&tk=1eb44fae5b9dc454442b322e9a41d233", - projection: "EPSG:4326", + url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", + // projection: "EPSG:4326", }), visible: false, }); @@ -211,7 +211,7 @@ export default { minZoom: 7, maxZoom: 18, }), - layers: [tianditu_vec_c, tianditu_img_c, tianditu_cva_c], + layers: [ tianditu_img_c, tianditu_cva_c], }); // 图层点击事件 map.on("singleclick", (e) => { diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue index 70b7e4f..836a489 100644 --- a/src/views/big-screen/index.vue +++ b/src/views/big-screen/index.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-17 11:34:00 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-11-06 10:32:20 + * @LastEditTime: 2024-11-07 09:09:50 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @Description: 大屏首页 --> @@ -96,7 +96,7 @@ -
+
- {{ item.name }} + {{ + item.name + }}
@@ -129,7 +131,8 @@ v-if="!showImgBk" ref="roadMap" :showChange="true" - :controlStyle="{ top: '30%', right: '26%' }" + :controlStyle="{ top: '23%', left: '27%' }" + :centerPoint="mapCenterPoint" @map-moveend="mapMoveend" @map-zoom="getZoom" @feature-select="featureSelect" @@ -331,6 +334,8 @@ export default { { name: "道路资产", component: "RoadScreen" }, { name: "交安事件", component: "TrafficScreen" }, ], + // 地图中心点 + mapCenterPoint: {}, // 中心点集合(全部) centerPiont: [], // 中心点集合（当前） @@ -389,6 +394,7 @@ export default { this.dataTime = `${hours}:${minutes}:${seconds}`; }, 1000); }, + /* 获取数据栏右上角选项数据 */ getSelect() { selectTypeList().then(({ code, data }) => { @@ -397,121 +403,26 @@ export default { } }); }, + /* 获取图片背景下坐标数据 */ getMapCare() { comppanyImg().then(({ code, data }) => { if (code === 200) { - // this.mapCareList = data.filter((item) => item.lat && item.lon); - // console.log(this.mapCareList) + this.mapCareList = data; } }); - this.mapCareList = [ - { - name: "沈抚", - left: "63%", - top: "12%", - tip: "1", - }, - { - name: "葫芦岛", - left: "24%", - top: "38%", - tip: "1", - }, - { - name: "阜新", - left: "40%", - top: "10%", - tip: "1", - }, - { - name: "盘锦", - left: "44%", - top: "27%", - tip: "1", - }, - { - name: "铁岭", - left: "70%", - top: "3%", - tip: "1", - }, - { - name: "抚顺", - left: "56%", - top: "17%", - tip: "1", - }, - { - name: "本溪", - left: "67%", - top: "26%", - tip: "1", - }, - { - name: "辽阳", - left: "60%", - top: "30%", - tip: "1", - }, - { - name: "营口", - left: "48%", - top: "42%", - tip: "1", - }, - { - name: "鞍山", - left: "57%", - top: "38%", - tip: "1", - }, - { - name: "沈阳", - left: "51%", - top: "11%", - tip: "2", - }, - { - name: "锦州", - left: "35%", - top: "25%", - tip: "3", - }, - { - name: "朝阳", - left: "20%", - top: "20%", - tip: "4", - }, - { - name: "大连", - left: "43%", - top: "53%", - tip: "5", - }, - { - name: "丹东", - left: "71%", - top: "39%", - tip: "6", - }, - { - name: "金普", - left: "47%", - top: "57%", - tip: "6", - }, - ]; }, + /* 点击病害筛查 */ clickImg() { this.imgVisible = true; }, + /* 关闭图片查看弹窗 */ imgCancel() { this.imgVisible = false; }, + /* 切换icon类型多选框事件 */ handleChecked(value) { this.centerPiont = this.drawPointList.filter( @@ -524,9 +435,11 @@ export default { this.drawPoint(); }); }, + /* 点击图片点位切换地图事件 */ - changeMap(boolen, value) { + changeMap(boolen, item) { this.showImgBk = boolen; + this.mapCenterPoint = { lat: item.lat * 1, lon: item.lon * 1 }; if (!boolen) { // 默认点击的图标是巡查车 this.changeIconType("defect"); @@ -535,8 +448,10 @@ export default { this.mapZoom = ""; this.clusters = null; this.markLayerLines = null; + this.mapCenterPoint = {}; } }, + /* 获取地图点位信息 */ getCenterPiont() { // 如果当前已经有打点坐标 @@ -566,6 +481,7 @@ export default { }); } }, + /* 绘制地图点位 */ drawPoint() { const features = []; @@ -596,8 +512,8 @@ export default { features.push(feature); }); const clusterSource = new Cluster({ - distance: 60, - minDistance: 60, + distance: this.mapZoom > 15 ? 0 : 130, + minDistance: this.mapZoom > 15 ? 0 : 130, source: new VectorSource({ features, }), @@ -665,21 +581,21 @@ export default { map.addLayer(this.clusters); }); }, + /* 获取地图线段点位信息 */ getLinePoint() { - if (!this.markLayerLines) { - mapPciList({ type: this.mapClick }).then(({ code, data }) => { - if (code === 200) { - this.lineString = data.map((item) => { - return item.coordinates.split(";").map((it) => { - return it.split(",").map(Number); - }); + mapPciList({ zoom: this.mapZoom }).then(({ code, data }) => { + if (code === 200) { + this.lineString = data.map((item) => { + return item?.coordinates?.split(";").map((it) => { + return it.split(",").map(Number); }); - this.drawLine(); - } - }); - } + }); + this.drawLine(); + } + }); }, + /* 绘制地图线段 */ drawLine() { const features = []; @@ -724,17 +640,18 @@ export default { map.addLayer(this.markLayerLines); }); }, + /* 图标类别切换点击事件 */ changeIconType(value) { if (this.mapClick !== value) { this.mapClick = value; - if (this.$refs.roadMap) { + this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); map.removeLayer(this.markLayerLines); map.removeLayer(this.clusters); this.clusters = null; this.markLayerLines = null; - } + }); // 获取对应右上角icon类型 this.getIconType(value); // 请求地图打点/绘制线段接口 @@ -745,6 +662,7 @@ export default { } } }, + /* 获取icon多选数据 */ getIconType(value) { this.mapLogeList = {}; @@ -760,36 +678,38 @@ export default { } }); }, + /* 传回来的地图图层 */ getZoom(zoom) { - if (zoom === "10") { - // 绘制点位 + this.mapZoom = zoom; + if (zoom * 1 >= 13) { this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); map.removeLayer(this.markLayerLines); this.markLayerLines = null; + this.getCenterPiont(); }); - this.getCenterPiont(); - this.mapZoom = zoom; - } else if (zoom === "9") { - // 绘制线段 + } else if (zoom * 1 < 13) { this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); map.removeLayer(this.clusters); + map.removeLayer(this.markLayerLines); this.clusters = null; + this.markLayerLines = null; + this.getLinePoint(); }); - this.getLinePoint(); - this.mapZoom = zoom; } }, + /* 地图缩放完成事件 */ mapMoveend(zoom) { - if (this.clusters && zoom > 13) { + if (this.clusters && zoom * 1 > 15) { this.clusters.getSource().setDistance(0); - } else if (this.clusters && zoom <= 13) { - this.clusters.getSource().setDistance(60); + } else if (this.clusters && zoom * 1 <= 15) { + this.clusters.getSource().setDistance(130); } }, + /* 地图选中feature事件 */ featureSelect(e) { const map = this.$refs.roadMap.instance.get("map"); @@ -820,6 +740,7 @@ export default { } } }, + /* 数据栏切换事件 */ changeElement(item) { if (this.elementDiv !== item) { @@ -968,6 +889,7 @@ export default { } } }, + /* 跳转系统首页 */ goIndex() { this.$router.push("/index");