fix:修改病害管理识别地图中心点
This commit is contained in:
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");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user