|
|
@@ -2,8 +2,8 @@
|
|
|
<div id="mapApp">
|
|
|
<div class="btn" v-if="nowObj['前时相']">
|
|
|
<!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
|
|
|
- <span class="sx qsx">前时相:{{ nowObj['前时相']}}</span>
|
|
|
- <span class="sx hsx">后时相:{{ nowObj['后时相'] }}</span>
|
|
|
+ <span class="sx qsx">前时相:{{ nowObj["前时相"] }}</span>
|
|
|
+ <span class="sx hsx">后时相:{{ nowObj["后时相"] }}</span>
|
|
|
</div>
|
|
|
<MapView :maptype="maptype" ref="MapView" />
|
|
|
|
|
|
@@ -137,6 +137,7 @@ import {
|
|
|
getXqListKey,
|
|
|
getXqIdMap,
|
|
|
getXqIdKey,
|
|
|
+ getYwlxName,
|
|
|
} from "@/api/supervise/pcsj";
|
|
|
import { detailInfos } from "./config";
|
|
|
import "ol/ol.css";
|
|
|
@@ -202,6 +203,7 @@ export default {
|
|
|
templateList: [],
|
|
|
descriptionsList: [], //详情描述列表存储字段
|
|
|
envelopegeomObj: {}, //用于存储进入页面飞入视角的对象
|
|
|
+ sjlx: 0,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -209,7 +211,12 @@ export default {
|
|
|
this.$nextTick(() => {
|
|
|
getPcsj(this.$route.query.id).then((response) => {
|
|
|
this.newObj = response.data;
|
|
|
-
|
|
|
+ getYwlxName(this.newObj.name).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.sjlx = res.data.sjlx;
|
|
|
+ console.log(this.sjlx, "this.sjlx ");
|
|
|
+ }
|
|
|
+ });
|
|
|
// if (this.newObj.envelopegeom && this.newObj.envelopegeom != "") {
|
|
|
// if (typeof this.newObj.envelopegeom === "string") {
|
|
|
// let geom = this.newObj.envelopegeom;
|
|
|
@@ -239,6 +246,7 @@ export default {
|
|
|
// window.map["mapDiv"].addLayer(this.envelopegeomObj);
|
|
|
// }
|
|
|
});
|
|
|
+
|
|
|
this.getTemplate();
|
|
|
});
|
|
|
},
|
|
|
@@ -323,19 +331,34 @@ export default {
|
|
|
window.open(`${zipfile}`);
|
|
|
},
|
|
|
tableClick(row) {
|
|
|
- removeWebGLTile("mapCon1");
|
|
|
- removeWebGLTile("mapCon2");
|
|
|
- let urlQsx = this.newObj.proxypath + row["前时相对应影像数据"];
|
|
|
- let urlHsx = this.newObj.proxypath + row["后时相对应影像数据"];
|
|
|
- if (this.nowObj.id != row.id) {
|
|
|
- this.maptype = "split";
|
|
|
- this.nowObj = row;
|
|
|
- addTiff("mapCon1", urlQsx);
|
|
|
- addTiff("mapCon2", urlHsx);
|
|
|
- this.test(row);
|
|
|
+ if (this.sjlx == 1) {
|
|
|
+ removeWebGLTile("mapDiv");
|
|
|
+ let urlQsx = this.newObj.proxypath + row["相对应影像数据"];
|
|
|
+ console.log(urlQsx);
|
|
|
+ // 判断是否点击了新的行数据(避免重复加载)
|
|
|
+ if (this.nowObj.id != row.id) {
|
|
|
+ this.maptype = "normal"; // 切换为单屏模式
|
|
|
+ this.nowObj = {}; // 清空当前选中对象
|
|
|
+ addTiff("mapDiv", urlQsx);
|
|
|
+ // 定位到当前行数据的地理范围并高亮显示
|
|
|
+ this.test(row);
|
|
|
+ }
|
|
|
} else {
|
|
|
- this.maptype = "normal";
|
|
|
- this.nowObj = {};
|
|
|
+ removeWebGLTile("mapCon1");
|
|
|
+ removeWebGLTile("mapCon2");
|
|
|
+ let urlQsx = this.newObj.proxypath + row["前时相对应影像数据"];
|
|
|
+ let urlHsx = this.newObj.proxypath + row["后时相对应影像数据"];
|
|
|
+ if (this.nowObj.id != row.id) {
|
|
|
+ this.maptype = "split";
|
|
|
+ this.nowObj = row;
|
|
|
+ addTiff("mapCon1", urlQsx);
|
|
|
+ addTiff("mapCon2", urlHsx);
|
|
|
+ this.test(row);
|
|
|
+ }
|
|
|
+ // else {
|
|
|
+ // this.maptype = "normal";
|
|
|
+ // this.nowObj = {};
|
|
|
+ // }
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -364,36 +387,69 @@ export default {
|
|
|
this.drawer = false;
|
|
|
},
|
|
|
test(item) {
|
|
|
- window.map["mapCon1"].removeLayer(this.itemObj);
|
|
|
- window.map["mapCon2"].removeLayer(this.itemObj);
|
|
|
- if (item.geom && item.geom != "") {
|
|
|
- if (typeof item.geom === "string") {
|
|
|
- let geom = this.tableData[i].geom;
|
|
|
- item.geom = parse(geom);
|
|
|
+ // 1. 提取公共样式配置,避免重复定义
|
|
|
+ let highlightStyle = new Style({
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: "rgba(255, 0, 0, 1)",
|
|
|
+ width: 2,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+
|
|
|
+ // 2. 确定当前操作的地图容器列表
|
|
|
+ let mapNames = this.sjlx === 1 ? ["mapDiv"] : ["mapCon1", "mapCon2"];
|
|
|
+
|
|
|
+ // 3. 清除所有相关地图容器中的旧高亮图层
|
|
|
+ mapNames.forEach((mapName) => {
|
|
|
+ if (this.itemObj && window.map[mapName]) {
|
|
|
+ window.map[mapName].removeLayer(this.itemObj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 4. 验证geom数据有效性
|
|
|
+ if (!item.geom || item.geom === "") return;
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 5. 统一处理geom格式转换
|
|
|
+ let geomData = item.geom;
|
|
|
+ if (typeof geomData === "string") {
|
|
|
+ geomData = parse(geomData);
|
|
|
}
|
|
|
- let features = new GeoJSON().readFeatures(item.geom);
|
|
|
+
|
|
|
+ // 6. 创建矢量图层
|
|
|
+ let features = new GeoJSON().readFeatures(geomData);
|
|
|
this.itemObj = new VectorLayer({
|
|
|
- source: new VectorSource({
|
|
|
- features: features,
|
|
|
- }),
|
|
|
- style: function (feature) {
|
|
|
- return new Style({
|
|
|
- stroke: new Stroke({
|
|
|
- //边界样式
|
|
|
- color: "rgba(255, 0, 0, 1)",
|
|
|
- width: 2,
|
|
|
- }),
|
|
|
- });
|
|
|
- },
|
|
|
+ source: new VectorSource({ features }),
|
|
|
+ style: highlightStyle,
|
|
|
zIndex: 9999,
|
|
|
});
|
|
|
- window.map["mapCon1"].getView().animate({
|
|
|
- center: [item["中心点经度"], item["中心点纬度"]],
|
|
|
- zoom: 16.5,
|
|
|
- duration: 2000, // 动画持续时间,单位毫秒
|
|
|
+
|
|
|
+ // 7. 获取中心点坐标并验证
|
|
|
+ let center = [item["中心点经度"], item["中心点纬度"]];
|
|
|
+ if (!Array.isArray(center) || center.length !== 2) {
|
|
|
+ console.warn("无效的中心点坐标:", center);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 8. 对所有相关地图执行添加图层和视角动画
|
|
|
+ mapNames.forEach((mapName) => {
|
|
|
+ let map = window.map[mapName];
|
|
|
+ if (map) {
|
|
|
+ // 添加新图层
|
|
|
+ map.addLayer(this.itemObj);
|
|
|
+ // 视角动画(仅在第一个地图执行一次,避免多地图重复动画)
|
|
|
+ if (mapName === mapNames[0]) {
|
|
|
+ map.getView().animate({
|
|
|
+ center,
|
|
|
+ zoom: 16.5,
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.warn(`地图容器${mapName}不存在`);
|
|
|
+ }
|
|
|
});
|
|
|
- window.map["mapCon1"].addLayer(this.itemObj);
|
|
|
- window.map["mapCon2"].addLayer(this.itemObj);
|
|
|
+ } catch (error) {
|
|
|
+ console.error("处理高亮图层失败:", error);
|
|
|
}
|
|
|
},
|
|
|
//创建监测图斑列表实体
|