fix:修改病害管理识别地图中心点
This commit is contained in:
parent
2131eaca4e
commit
63016e8726
@ -2,7 +2,7 @@
|
|||||||
* @Author: SunTao 328867980@qq.com
|
* @Author: SunTao 328867980@qq.com
|
||||||
* @Date: 2024-10-14 14:49:21
|
* @Date: 2024-10-14 14:49:21
|
||||||
* @LastEditors: SunTao 328867980@qq.com
|
* @LastEditors: SunTao 328867980@qq.com
|
||||||
* @LastEditTime: 2024-12-24 16:09:46
|
* @LastEditTime: 2025-01-03 09:38:10
|
||||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\components\surface-map.vue
|
* @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\components\surface-map.vue
|
||||||
* @Description: 路面病害管理-地图组件
|
* @Description: 路面病害管理-地图组件
|
||||||
-->
|
-->
|
||||||
@ -29,7 +29,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import FssmScroll from "@/components/scroll/fssm-scroll";
|
import FssmScroll from "@/components/scroll/fssm-scroll";
|
||||||
import FssmMap from "@/components/map/fssm-map";
|
import FssmMap from "@/components/map/fssm-map";
|
||||||
import logo from "@/assets/xc.png";
|
|
||||||
import { Point } from "ol/geom";
|
import { Point } from "ol/geom";
|
||||||
import { Style, Icon } from "ol/style";
|
import { Style, Icon } from "ol/style";
|
||||||
import { Vector as VectorSource } from "ol/source";
|
import { Vector as VectorSource } from "ol/source";
|
||||||
@ -79,11 +78,10 @@ export default {
|
|||||||
drawMapPoints() {
|
drawMapPoints() {
|
||||||
this.$refs.contentMap.clearMapFeature();
|
this.$refs.contentMap.clearMapFeature();
|
||||||
const features = [];
|
const features = [];
|
||||||
|
console.log(this.mapObject.data, "dsdfd");
|
||||||
|
|
||||||
this.mapObject.data.forEach((element) => {
|
this.mapObject.data.forEach((element) => {
|
||||||
const point = new Point([
|
const point = new Point([element.geometry[0], element.geometry[1]]); // 修改坐标格式
|
||||||
element.geometry[0],
|
|
||||||
element.geometry[1],
|
|
||||||
]); // 修改坐标格式
|
|
||||||
const feature = new Feature({
|
const feature = new Feature({
|
||||||
geometry: point,
|
geometry: point,
|
||||||
custom: {
|
custom: {
|
||||||
@ -108,6 +106,14 @@ export default {
|
|||||||
]);
|
]);
|
||||||
features.push(feature);
|
features.push(feature);
|
||||||
});
|
});
|
||||||
|
// 修改地图中心点位
|
||||||
|
const pointArray = this.mapObject.data.map((item) => {
|
||||||
|
if (item.geometry) {
|
||||||
|
return [item.geometry[0], item.geometry[1]];
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
this.fitMapToPoints(pointArray);
|
||||||
//设置地图的数据源
|
//设置地图的数据源
|
||||||
const pointSource = new VectorSource({
|
const pointSource = new VectorSource({
|
||||||
features,
|
features,
|
||||||
@ -124,6 +130,35 @@ export default {
|
|||||||
this.initEchart();
|
this.initEchart();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 根据点位计算地图中心点
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
fitMapToPoints(points) {
|
||||||
|
if (points.length > 0) {
|
||||||
|
// 创建一个空的 extent
|
||||||
|
let extent = [Infinity, Infinity, -Infinity, -Infinity];
|
||||||
|
// 计算所有点的边界框(extent)
|
||||||
|
points.forEach((point) => {
|
||||||
|
extent = [
|
||||||
|
Math.min(extent[0], point[0]),
|
||||||
|
Math.min(extent[1], point[1]),
|
||||||
|
Math.max(extent[2], point[0]),
|
||||||
|
Math.max(extent[3], point[1]),
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取地图实例
|
||||||
|
const map = this.$refs.contentMap.instance.get("map");
|
||||||
|
|
||||||
|
// 使用 fit 方法根据边界框计算最佳缩放级别
|
||||||
|
map.getView().fit(extent, {
|
||||||
|
duration: 500, // 动画持续时间
|
||||||
|
padding: [10, 10, 10, 10], // 边缘填充
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
/* 清除地图图层 */
|
/* 清除地图图层 */
|
||||||
cleanLayer() {
|
cleanLayer() {
|
||||||
this.$emit("clearMap");
|
this.$emit("clearMap");
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user