diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue index 0502212..84303ca 100644 --- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue @@ -176,6 +176,11 @@ import Water from './source/water.vue'; import Goods from './source/goods.vue'; import Barrack from './source/barrack.vue'; + import axios from 'axios'; + import * as turf from '@turf/turf'; + import {getPointNearByPoints,arrayToPointGeoJSON,geojsonPointToArray} from './ts/GeoTools' + import { getAppEnvConfig } from '@/utils/env'; + let { VITE_GLOB_API_URL } = getAppEnvConfig(); const props = defineProps({ chartConfig: { @@ -758,10 +763,98 @@ }); } + // 线索信息 + const clueInfo = ref({}); + + // 获取全部水源数据 + const waterSources = ref() + const waterList = ref(); + async function handlerLoadWaterData(){ + axios.get("http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ananbeibushluiyuanhebing&maxFeatures=50000&outputFormat=application%2Fjson").then(res=>{ + waterSources.value = res.data; + }) + } + + // 获取全部物资数据 + const Sources = ref(); + const goodsList = ref(); + async function handlerLoadGoodsData(){ + + let querys = { + name:null, + areaname:"feixian" + } + + axios({ + method: "get", + url: VITE_GLOB_API_URL + '/api/FireManagement/Loadwuzichubei', + data: querys, + headers: { + 'X-Token': localStorage.getItem("X-Token") + } + }).then(res=>{ + console.log(res); + + }) + + } + + // 获取全部营房数据 + const barrackSources = ref(); + const barrackList = ref(); + async function handlerLoadbarrackData(){ + let querys = { + name:null, + areaname:"feixian" + } + + axios({ + method: "get", + url: VITE_GLOB_API_URL + '/api/FireManagement/GetAllYingFang', + data: querys, + headers: { + 'X-Token': localStorage.getItem("X-Token") + } + }).then(res=>{ + console.log(res.data.result); + debugger; + }) + } + + // 处理周边数据 + async function handlerGetNearByWater(){ + let cluePoint = turf.point([Number(clueInfo.value?.lng),Number(clueInfo.value?.lat)]); + let radius = option.dataStyle.distanceradio*1000; + const clueBuffer = turf.buffer(cluePoint, radius, { units: "meters" }); + let result = turf.pointsWithinPolygon(waterSources.value, clueBuffer); + waterList.value = result; + } + + + + + + + + onMounted(() => { + + // 初始化组件获取数据 + handlerLoadWaterData(); + handlerLoadGoodsData(); + handlerLoadbarrackData(); + + // 组件通信 const sql = props.chartConfig.request?.requestSQLContent?.sql; EventBus.on(props.chartConfig.id + 'dataupdate', (data) => { + + clueInfo.value = data; + + // 处理周边水源 + handlerGetNearByWater(); + + // 火情终点 endCoor = [data.lng, data.lat]; props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql, { Id: data.id }); @@ -769,6 +862,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => { option.dataset = resData; }); + + }); }); diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/GeoTools.ts b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/GeoTools.ts new file mode 100644 index 0000000..9b8c5c9 --- /dev/null +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/GeoTools.ts @@ -0,0 +1,94 @@ + import * as turf from "@turf/turf"; + + /** + * 获取周边数据指定范围内的数据 + * @param targetPoint : 目标点 [118.4234,34.483083] + * @param sourcePoints : 全部数据geojson + * @param distance : 范围(米)1000 + * @result 范围内geojson + **/ + export const getPointNearByPoints = (targetPoint,sourcePoints,distance) => { + try{ + // 处理目标点 + let point = turf.point([Number(targetPoint[0]),Number(targetPoint[1])]); + // 生成缓冲区 + let buffer = turf.buffer(point, distance, { units: "meters" }); + // 获取缓冲区范围内的点 + let result = turf.pointsWithinPolygon(sourcePoints, buffer); + return result; + }catch(e){ + return false; + } + } + + /** + * 将任意数组转换为 GeoJSON FeatureCollection(Point) + * @param {Array} list 原始数据数组 + * @param {Object} options 配置项 + * @param {String} options.lngKey 经度字段名(默认 "lng") + * @param {String} options.latKey 纬度字段名(默认 "lat") + * @returns {Object} GeoJSON FeatureCollection + */ + export const arrayToPointGeoJSON = (list, options = {lngKey:"lng",latKey:"lat"}) => { + const { lngKey = "lng",latKey = "lat"} = options; + return { + type: "FeatureCollection", + features: list.filter(item => item[lngKey] != null && item[latKey] != null).map(item => ({ + type: "Feature", + geometry: { + type: "Point", + coordinates: [ + Number(item[lngKey]), + Number(item[latKey]) + ] + }, + properties: { + ...item + } + })) + }; + } + + /** + * 将 GeoJSON Point FeatureCollection 转换为对象数组 + * @param {Object} geojson GeoJSON FeatureCollection + * @param {Object} options 配置项 + * @param {String} options.lngKey 输出经度字段名(默认 "lng") + * @param {String} options.latKey 输出纬度字段名(默认 "lat") + * @returns {Array} 对象数组 + */ + export const geojsonPointToArray = (geojson, options = {lngKey:"lng",latKey:"lat"}) => { + const { lngKey = "lng", latKey = "lat" } = options; + + if (!geojson || geojson.type !== "FeatureCollection") { + console.error("输入必须是 FeatureCollection"); + return []; + } + + return geojson.features.filter(f => f.geometry && f.geometry.type === "Point").map(f => { + const [lng, lat] = f.geometry.coordinates; + return { + ...f.properties, + [lngKey]: lng, + [latKey]: lat + }; + }); + } + + export const parsePointToArray = (pointStr) => { + if (!pointStr) return null; + + // 去除前后空格、统一格式 + pointStr = pointStr.trim(); + + // 匹配 POINT(...) 中的数字(支持用空格或逗号分隔) + const match = pointStr.match(/POINT\s*\(\s*([\d.-]+)[ ,]+([\d.-]+)\s*\)/i); + + if (!match) return null; + + const lng = parseFloat(match[1]); + const lat = parseFloat(match[2]); + + return [lng, lat]; + } + \ No newline at end of file