import { getAreaDataByAlgorithmKeysApi } from '@ztzf/apis'
|
import * as Cesium from 'cesium'
|
import * as turf from '@turf/turf'
|
import L from 'leaflet'
|
import 'leaflet/dist/leaflet.css'
|
|
/**
|
* 设置自定义识别区域--大屏
|
* @returns {{}}
|
*/
|
export const useIdentificationArea = () => {
|
let viewerObj
|
async function setArea(ai_types,viewer) {
|
if (!ai_types.length)return
|
viewerObj = viewer
|
removeArea()
|
const res = await getAreaDataByAlgorithmKeysApi(ai_types)
|
const list = res.data.data
|
list
|
.filter(item => item.geo_data)
|
.forEach(item => {
|
const parsed = JSON.parse(item.geo_data) // 转为数组
|
const grouped = parsed.flat() // 再展开
|
|
// 计算多边形质心
|
let polygon = turf.polygon([parsed]);
|
let center = turf.centerOfMass(polygon);
|
const color = '#00ff06'
|
viewerObj.entities?.add({
|
customType: 'identificationArea',
|
customInfo: {
|
...item,
|
},
|
position: Cesium.Cartesian3.fromDegrees(center.geometry.coordinates[0], center.geometry.coordinates[1], 0),
|
label: {
|
text: item.name,
|
font: 'bold 12px Source Han Sans CN',
|
fillColor: Cesium.Color.WHITE,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
scale: 1.0,
|
},
|
polygon: {
|
hierarchy: Cesium.Cartesian3.fromDegreesArray(grouped),
|
material: Cesium.Color.fromCssColorString(color).withAlpha(0.5),
|
classificationType: Cesium.ClassificationType.TERRAIN,
|
},
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArray([...grouped, grouped[0], grouped[1]]),
|
clampToGround: true,
|
width: 1.5,
|
material: Cesium.Color.fromCssColorString(color),
|
},
|
})
|
})
|
}
|
function removeArea() {
|
const thisList = viewerObj?.entities?.values?.filter(item => item?.customType === 'identificationArea')
|
thisList?.forEach(item => {
|
viewerObj.entities.remove(item)
|
})
|
}
|
|
onBeforeUnmount(()=>{
|
removeArea()
|
})
|
return {
|
setArea,
|
removeArea
|
}
|
}
|
|
|
/**
|
* 设置自定义识别区域--h5
|
* @returns {{}}
|
*/
|
export const useIdentificationAreaForApp = () => {
|
// 初始化图层
|
let mapLayerSource = null
|
async function setArea(ai_types,viewer) {
|
if (!ai_types.length) return
|
// 清空所有图层
|
if (mapLayerSource) {
|
mapLayerSource.clearLayers();
|
}
|
mapLayerSource = viewer
|
const res = await getAreaDataByAlgorithmKeysApi(ai_types)
|
const list = res.data.data
|
|
list
|
.filter(item => item.geo_data)
|
.forEach(item => {
|
const parsed = JSON.parse(item.geo_data); // 转为数组
|
const grouped = parsed.flat(); // 再展开
|
|
// 3. 计算多边形质心
|
const turfPolygon = turf.polygon([parsed]);
|
const center = turf.centerOfMass(turfPolygon);
|
const centerLatLng = [center.geometry.coordinates[1], center.geometry.coordinates[0]];
|
|
const labelMarker = L.marker(centerLatLng, {
|
icon: L.divIcon({
|
className: 'polygon-label',
|
html: `
|
<div style="
|
color: #008013;
|
font-weight: bold;
|
font-size: 12px;
|
font-family: 'Source Han Sans CN', 'Source Han Sans CN';
|
white-space: nowrap;
|
">
|
${item.name || '未命名'}
|
</div>
|
`,
|
iconSize: null, // 让div决定大小
|
iconAnchor: null // 不需要锚点，用CSS transform居中
|
}),
|
interactive: false, // 标签不参与交互
|
// zIndexOffset: 1000 // 确保标签在最上层
|
});
|
|
// 将坐标数组转换为 Leaflet 格式 [lat, lng, lat, lng...] -> [[lat, lng], [lat, lng]...]
|
const latLngs = [];
|
for (let i = 0; i < grouped.length; i += 2) {
|
latLngs.push([grouped[i + 1], grouped[i]]); // 注意：Leaflet 是 [lat, lng] 顺序
|
}
|
|
// 创建多边形（填充区域）
|
const polygon = L.polygon(latLngs, {
|
color: '#00ff06',
|
fillColor: '#00ff06',
|
fillOpacity: 0.5,
|
weight: 0, // 隐藏多边形边框，使用折线作为边框
|
});
|
|
// 创建折线（边框）
|
const polyline = L.polyline([...latLngs, latLngs[0]], { // 闭合多边形
|
color: '#00ff06',
|
weight: 1.5,
|
opacity: 1,
|
fill: false
|
});
|
|
// 将两个图层组合在一起
|
const group = L.featureGroup([polygon, polyline, labelMarker]);
|
// 添加到图层组
|
mapLayerSource.addLayer(group);
|
});
|
}
|
function removeArea() {
|
if (mapLayerSource) {
|
mapLayerSource.clearLayers();
|
}
|
}
|
|
onBeforeUnmount(()=>{
|
mapLayerSource.clearLayers();
|
})
|
return {
|
setArea,
|
removeArea
|
}
|
}
|
