SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：大屏地图坐标设置，回退坐标转换代码为84

Browse Source
This commit is contained in:
SunTao 2024-10-29 10:58:53 +08:00
parent c92e37c192
commit b768ae8d4b
6 changed files with 41 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/big-screen/index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00 * @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-10-29 09:40:35 * @LastEditTime: 2024-10-29 10:25:21
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页 * @Description: 大屏首页
--> -->
@ -452,6 +452,8 @@ export default {
} else { } else {
this.mapClick = ""; this.mapClick = "";
this.mapZoom = ""; this.mapZoom = "";
this.clusters = null;
this.markLayerLines = null;
} }
}, },
/* 获取地图点位信息 */ /* 获取地图点位信息 */
@ -494,8 +496,8 @@ export default {
features.push(feature); features.push(feature);
}); });
const clusterSource = new Cluster({ const clusterSource = new Cluster({
distance: 30, distance: 40,
minDistance: 30, minDistance: 40,
source: new VectorSource({ source: new VectorSource({
features, features,
}), }),
@ -537,7 +539,7 @@ export default {
/* 获取地图线段点位信息 */ /* 获取地图线段点位信息 */
getLinePoint() { getLinePoint() {
if (!this.markLayerLines) { if (!this.markLayerLines) {
mapPciList().then(({ code, data }) => { mapPciList({ type: this.mapClick }).then(({ code, data }) => {
if (code === 200) { if (code === 200) {
this.lineString = data.map((item) => { this.lineString = data.map((item) => {
return item.coordinates.split(";").map((it) => { return item.coordinates.split(";").map((it) => {
@ -597,6 +599,13 @@ export default {
changeIconType(value) { changeIconType(value) {
if (this.mapClick !== value) { if (this.mapClick !== value) {
this.mapClick = value; this.mapClick = value;
if (this.$refs.roadMap) {
const map = this.$refs.roadMap.instance.get("map");
map.removeLayer(this.markLayerLines);
map.removeLayer(this.clusters);
this.clusters = null;
this.markLayerLines = null;
}
// 获取对应右上角icon类型 // 获取对应右上角icon类型
this.getIconType(value); this.getIconType(value);
// 请求地图打点/绘制线段接口 // 请求地图打点/绘制线段接口
@ -666,9 +675,9 @@ export default {
/* 地图缩放完成事件 */ /* 地图缩放完成事件 */
mapMoveend(zoom) { mapMoveend(zoom) {
if (this.clusters && zoom > 13) { if (this.clusters && zoom > 13) {
this.clusters.getSource().setDistance(1); this.clusters.getSource().setDistance(0);
} else if (this.clusters && zoom <= 13) { } else if (this.clusters && zoom <= 13) {
this.clusters.getSource().setDistance(30); this.clusters.getSource().setDistance(40);
} }
}, },
/* 地图选中feature事件 */ /* 地图选中feature事件 */

38
src/views/xj/inspection/disease-management/index.vue
View File

@ -2,7 +2,7 @@
* @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
* @Date: 2024-10-08 10:58:25 * @Date: 2024-10-08 10:58:25
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-10-25 11:29:20 * @LastEditTime: 2024-10-29 10:32:48
* @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue
* @Description: 巡检信息管理-病害管理 * @Description: 巡检信息管理-病害管理
--> -->
@ -540,7 +540,6 @@ import {
changeDefectStatus, changeDefectStatus,
} from "@/api/xj/disease"; } from "@/api/xj/disease";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { gcj02ToWgs84, wgs84ToGcj02 } from "@/api/xj/map";
export default { export default {
name: "Defect", name: "Defect",
@ -898,22 +897,16 @@ export default {
handleUpdate(row) { handleUpdate(row) {
this.dialogVisible = true; this.dialogVisible = true;
this.dialogTitle = "修改缺陷"; this.dialogTitle = "修改缺陷";
this.centerPoint = gcj02ToWgs84([ this.centerPoint = [
row.geometry.coordinates[0], row.geometry.coordinates[0],
row.geometry.coordinates[1], row.geometry.coordinates[1],
]); ];
this.$nextTick(() => { this.$nextTick(() => {
this.initMap("addMap"); this.initMap("addMap");
const e = { const e = {
lnglat: { lnglat: {
lng: gcj02ToWgs84([ lng: row.geometry.coordinates[0],
row.geometry.coordinates[0], lat: row.geometry.coordinates[1],
row.geometry.coordinates[1],
])[0],
lat: gcj02ToWgs84([
row.geometry.coordinates[0],
row.geometry.coordinates[1],
])[1],
}, },
}; };
this.onMapClick(e); this.onMapClick(e);
@ -979,10 +972,7 @@ export default {
}), }),
geometry: { geometry: {
type: "Point", type: "Point",
coordinates: wgs84ToGcj02([ coordinates: [this.markers[0].lng, this.markers[0].lat],
this.markers[0].lng,
this.markers[0].lat,
]),
id: this.form?.geometry?.id, id: this.form?.geometry?.id,
}, },
}; };
@ -1070,26 +1060,14 @@ export default {
this.viewForm = defect; this.viewForm = defect;
this.$nextTick(() => { this.$nextTick(() => {
this.centerPoint = [ this.centerPoint = [
gcj02ToWgs84([
defect.geometry.coordinates[0], defect.geometry.coordinates[0],
defect.geometry.coordinates[1], defect.geometry.coordinates[1],
])[0],
gcj02ToWgs84([
defect.geometry.coordinates[0],
defect.geometry.coordinates[1],
])[1],
]; ];
this.initMap("viewMap"); this.initMap("viewMap");
const e = { const e = {
lnglat: { lnglat: {
lng: gcj02ToWgs84([ lng: defect.geometry.coordinates[0],
defect.geometry.coordinates[0], lat: defect.geometry.coordinates[1],
defect.geometry.coordinates[1],
])[0],
lat: gcj02ToWgs84([
defect.geometry.coordinates[0],
defect.geometry.coordinates[1],
])[1],
}, },
}; };
this.onMapClick(e); this.onMapClick(e);

16
src/views/xj/inspection/road-management/components/road-add.vue
View File

@ -156,7 +156,6 @@
<script> <script>
import { addRoad, uploadRoad } from "@/api/xj/road"; import { addRoad, uploadRoad } from "@/api/xj/road";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { gcj02ToWgs84, wgs84ToGcj02 } from "@/api/xj/map";
export default { export default {
name: "RoadAdd", name: "RoadAdd",
@ -278,14 +277,8 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
const e = { const e = {
lnglat: { lnglat: {
lng: gcj02ToWgs84([ lng: val.geometry.coordinates[0],
val.geometry.coordinates[0], lat: val.geometry.coordinates[1],
val.geometry.coordinates[1],
])[0],
lat: gcj02ToWgs84([
val.geometry.coordinates[0],
val.geometry.coordinates[1],
])[1],
}, },
}; };
this.onMapClick(e); this.onMapClick(e);
@ -340,10 +333,7 @@ export default {
}), }),
geometry: { geometry: {
type: "Point", type: "Point",
coordinates: wgs84ToGcj02([ coordinates: [this.markers[0].lng, this.markers[0].lat],
this.markers[0].lng,
this.markers[0].lat,
]),
id: this.roadForm?.geometry?.id, id: this.roadForm?.geometry?.id,
}, },
}; };

19
src/views/xj/inspection/road-management/components/road-view.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-12 13:11:05 * @Date: 2024-10-12 13:11:05
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-10-25 11:24:51 * @LastEditTime: 2024-10-29 10:41:32
* @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-view.vue * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-view.vue
* @Description: 交安事件-查看弹窗 * @Description: 交安事件-查看弹窗
--> -->
@ -43,7 +43,6 @@
</template> </template>
<script> <script>
import { gcj02ToWgs84 } from "@/api/xj/map";
export default { export default {
name: "RoadView", name: "RoadView",
props: { props: {
@ -73,26 +72,14 @@ export default {
this.viewForm = JSON.parse(JSON.stringify(val)); this.viewForm = JSON.parse(JSON.stringify(val));
this.$nextTick(() => { this.$nextTick(() => {
this.centerPoint = [ this.centerPoint = [
gcj02ToWgs84([
val.geometry.coordinates[0], val.geometry.coordinates[0],
val.geometry.coordinates[1], val.geometry.coordinates[1],
])[0],
gcj02ToWgs84([
val.geometry.coordinates[0],
val.geometry.coordinates[1],
])[1],
]; ];
this.initMap("viewMap"); this.initMap("viewMap");
const e = { const e = {
lnglat: { lnglat: {
lng: gcj02ToWgs84([ lat: val.geometry.coordinates[1],
val.geometry.coordinates[0], lng: val.geometry.coordinates[0],
val.geometry.coordinates[1],
])[0],
lat: gcj02ToWgs84([
val.geometry.coordinates[0],
val.geometry.coordinates[1],
])[1],
}, },
}; };
this.onMapClick(e); this.onMapClick(e);

16
src/views/xj/inspection/traffic-management/components/event-add.vue
View File

@ -183,7 +183,6 @@
<script> <script>
import { addEvent, uploadEvent } from "@/api/xj/traffic"; import { addEvent, uploadEvent } from "@/api/xj/traffic";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { gcj02ToWgs84, wgs84ToGcj02 } from "@/api/xj/map";
export default { export default {
name: "EventAdd", name: "EventAdd",
@ -322,14 +321,8 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
const e = { const e = {
lnglat: { lnglat: {
lng: gcj02ToWgs84([ lng: val.geometry.coordinates[0],
val.geometry.coordinates[0], lat: val.geometry.coordinates[1],
val.geometry.coordinates[1],
])[0],
lat: gcj02ToWgs84([
val.geometry.coordinates[0],
val.geometry.coordinates[1],
])[1],
}, },
}; };
this.onMapClick(e); this.onMapClick(e);
@ -384,10 +377,7 @@ export default {
}), }),
geometry: { geometry: {
type: "Point", type: "Point",
coordinates: wgs84ToGcj02([ coordinates: [this.markers[0].lng, this.markers[0].lat],
this.markers[0].lng,
this.markers[0].lat,
]),
id: this.roadForm?.geometry?.id, id: this.roadForm?.geometry?.id,
}, },
}; };

22
src/views/xj/inspection/traffic-management/components/event-view.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-12 15:49:46 * @Date: 2024-10-12 15:49:46
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-10-25 11:44:59 * @LastEditTime: 2024-10-29 10:55:25
* @FilePath: \znxjxt-ui\src\views\xj\inspection\traffic-management\components\event-view.vue * @FilePath: \znxjxt-ui\src\views\xj\inspection\traffic-management\components\event-view.vue
* @Description: 交安事件-查看弹窗 * @Description: 交安事件-查看弹窗
--> -->
@ -31,7 +31,6 @@
</el-carousel> </el-carousel>
</div> </div>
</div> </div>
<!-- 下半部分显示天地图 --> <!-- 下半部分显示天地图 -->
<div id="viewMap" style="height: 300px; margin-top: 20px"></div> <div id="viewMap" style="height: 300px; margin-top: 20px"></div>
</div> </div>
@ -42,7 +41,6 @@
</template> </template>
<script> <script>
import { gcj02ToWgs84 } from "@/api/xj/map";
export default { export default {
name: "EventView", name: "EventView",
props: { props: {
@ -68,32 +66,18 @@ export default {
watch: { watch: {
dialogItem: { dialogItem: {
handler(val) { handler(val) {
console.log(val, "dddd");
if (val.title === "查看事件") { if (val.title === "查看事件") {
this.viewForm = JSON.parse(JSON.stringify(val)); this.viewForm = JSON.parse(JSON.stringify(val));
this.$nextTick(() => { this.$nextTick(() => {
this.centerPoint = [ this.centerPoint = [
gcj02ToWgs84([
val.geometry.coordinates[0], val.geometry.coordinates[0],
val.geometry.coordinates[1], val.geometry.coordinates[1],
])[0],
gcj02ToWgs84([
val.geometry.coordinates[0],
val.geometry.coordinates[1],
])[1],
]; ];
this.initMap("viewMap"); this.initMap("viewMap");
const e = { const e = {
lnglat: { lnglat: {
lng: gcj02ToWgs84([ lng: val.geometry.coordinates[0],
val.geometry.coordinates[0], lat: val.geometry.coordinates[1],
val.geometry.coordinates[1],
])[0],
lat: gcj02ToWgs84([
val.geometry.coordinates[0],
val.geometry.coordinates[1],
])[1],
}, },
}; };
this.onMapClick(e); this.onMapClick(e);