|
|
@@ -18,6 +18,8 @@ import GeometryCollection from 'ol/geom/GeometryCollection.js';
|
|
|
import { ElMessage } from "element-plus";
|
|
|
import { useStore } from "vuex";
|
|
|
import {bboxToFeature} from "../../utils/map";
|
|
|
+import TileLayer from 'ol/layer/Tile';
|
|
|
+import XYZ from 'ol/source/XYZ.js';
|
|
|
import * as turf from "@turf/turf";
|
|
|
proj4.defs(
|
|
|
"EPSG:38572",
|
|
|
@@ -117,6 +119,7 @@ class AuthenticMap {
|
|
|
|
|
|
// 存储绘制的地块特征
|
|
|
// this.drawnFeatures = [];
|
|
|
+
|
|
|
}
|
|
|
|
|
|
initMap(location, target) {
|
|
|
@@ -132,10 +135,22 @@ class AuthenticMap {
|
|
|
6,
|
|
|
22
|
|
|
);
|
|
|
- this.kmap.initDraw((e) => {
|
|
|
+ this.kmap.initDraw(async (e) => {
|
|
|
if (e.type === "drawend") {
|
|
|
mapData.isEdit = true;
|
|
|
mapData.point = e.feature;
|
|
|
+ // 计算平面面积
|
|
|
+
|
|
|
+ const polygon = e.feature.getGeometry();
|
|
|
+ const coordinates = polygon.getCoordinates()[0];
|
|
|
+ // 获取真实高程数据
|
|
|
+ const planeArea = getArea(polygon);
|
|
|
+ const elevationData = await this.fetchElevationData(coordinates);
|
|
|
+
|
|
|
+ // 计算斜面面积
|
|
|
+ const slopeArea = this.calculateSlopeArea(coordinates, elevationData);
|
|
|
+
|
|
|
+ console.log('斜面面积: ${slopeArea.toFixed(2)} 平方米',planeArea, slopeArea)
|
|
|
}
|
|
|
});
|
|
|
this.kmap.modifyDraw((e) => {
|
|
|
@@ -163,9 +178,68 @@ class AuthenticMap {
|
|
|
this.kmap.addLayer(this.locationLayer.layer);
|
|
|
this.kmap.addLayer(this.selectPointLayer.layer);
|
|
|
this.addMapSingerClick();
|
|
|
+
|
|
|
+ const demLayer = new TileLayer({
|
|
|
+ source: new XYZ({
|
|
|
+ url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=pk.eyJ1IjoiZ3VvemhlbnNodSIsImEiOiJjbTdyYWVmcmYxNGQ3MmpvaGJyejJiMDZpIn0.NQ-ey98NqQH1zmpe9ky9XQ',
|
|
|
+ crossOrigin: 'anonymous'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.kmap.addLayer(demLayer);
|
|
|
}
|
|
|
|
|
|
|
|
|
+// **获取高程数据**
|
|
|
+async fetchElevationData(coordinates) {
|
|
|
+ const MAPBOX_TOKEN = 'pk.eyJ1IjoiZ3VvemhlbnNodSIsImEiOiJjbTdyYWVmcmYxNGQ3MmpvaGJyejJiMDZpIn0.NQ-ey98NqQH1zmpe9ky9XQ';
|
|
|
+ const elevationData = [];
|
|
|
+
|
|
|
+ for (let i = 0; i < coordinates.length; i++) {
|
|
|
+ const [lon, lat] = coordinates[i];
|
|
|
+
|
|
|
+ // const url = `https://api.mapbox.com/v4/mapbox.terrain-rgb/${lon},${lat}.json?access_token=${MAPBOX_TOKEN}`;
|
|
|
+ const url = `https://api.mapbox.com/v4/mapbox.terrain-rgb/tilequery/${-74.5},${40}.json?access_token=${
|
|
|
+ MAPBOX_TOKEN
|
|
|
+ }`
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await fetch(url);
|
|
|
+ const data = await response.json();
|
|
|
+
|
|
|
+ if (data.elevation) {
|
|
|
+ elevationData.push(data.elevation);
|
|
|
+ } else {
|
|
|
+ elevationData.push(0); // 失败时默认高程 0
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("获取高程数据失败:", error);
|
|
|
+ elevationData.push(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return elevationData;
|
|
|
+}
|
|
|
+
|
|
|
+// **计算斜面面积**
|
|
|
+calculateSlopeArea(coordinates, elevationData) {
|
|
|
+ let totalArea = 0;
|
|
|
+
|
|
|
+ for (let i = 0; i < coordinates.length - 1; i++) {
|
|
|
+ const p1 = coordinates[i];
|
|
|
+ const p2 = coordinates[i + 1];
|
|
|
+
|
|
|
+ const dx = p2[0] - p1[0];
|
|
|
+ const dy = p2[1] - p1[1];
|
|
|
+ const dz = elevationData[i + 1] - elevationData[i];
|
|
|
+
|
|
|
+ const baseLength = Math.sqrt(dx * dx + dy * dy);
|
|
|
+ const slopedLength = Math.sqrt(baseLength * baseLength + dz * dz);
|
|
|
+
|
|
|
+ totalArea += slopedLength * baseLength * 0.5; // 三角形面积
|
|
|
+ }
|
|
|
+
|
|
|
+ return totalArea;
|
|
|
+}
|
|
|
|
|
|
fit(geometriesWkt){
|
|
|
let geometries = []
|
刘秀芳