fix:修改病害管理识别地图中心点

This commit is contained in:
2025-01-03 10:00:44 +08:00
parent 2131eaca4e
commit 63016e8726
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 14:49:21
* @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
* @Description: 路面病害管理-地图组件
-->
@@ -29,7 +29,6 @@
<script>
import FssmScroll from "@/components/scroll/fssm-scroll";
import FssmMap from "@/components/map/fssm-map";
import logo from "@/assets/xc.png";
import { Point } from "ol/geom";
import { Style, Icon } from "ol/style";
import { Vector as VectorSource } from "ol/source";
@@ -79,11 +78,10 @@ export default {
drawMapPoints() {
this.$refs.contentMap.clearMapFeature();
const features = [];
console.log(this.mapObject.data, "dsdfd");
this.mapObject.data.forEach((element) => {
const point = new Point([
element.geometry[0],
element.geometry[1],
]); // 修改坐标格式
const point = new Point([element.geometry[0], element.geometry[1]]); // 修改坐标格式
const feature = new Feature({
geometry: point,
custom: {
@@ -98,7 +96,7 @@ export default {
image: new Icon({
crossOrigin: "anonymous",
src: require(`@/assets/screen/index/${
this.mapLogeList[element.iconType]||"龟裂"
this.mapLogeList[element.iconType] || "龟裂"
}.png`),
// size: [40, 40],
scale: 0.5, // 图标缩放比例
@@ -108,6 +106,14 @@ export default {
]);
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({
features,
@@ -124,6 +130,35 @@ export default {
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() {
this.$emit("clearMap");