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 e93a50a..29addf7 100644 Binary files a/src/assets/screen/index/map-legend.png and b/src/assets/screen/index/map-legend.png differ diff --git a/src/components/map/fssm-map.vue b/src/components/map/fssm-map.vue index b30a776..42bf066 100644 --- a/src/components/map/fssm-map.vue +++ b/src/components/map/fssm-map.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-14 10:46:23 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-11-05 10:46:24 + * @LastEditTime: 2024-11-06 16:42:42 * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue * @Description: 公共地图 --> @@ -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");