let areaPrimitives = []
|
let areaDataSource = []
|
|
/**
|
* 将避险场所数据转为 GeoJSON FeatureCollection
|
*/
|
export function convertToGeoJson(data, offset = 0.0001) {
|
const features = data.map((item) => {
|
const lon = parseFloat(item.lon);
|
const lat = parseFloat(item.lat);
|
|
// 构造一个小正方形区域（5米左右）
|
const coordinates = [
|
[
|
[lon, lat],
|
[lon + offset, lat],
|
[lon + offset, lat - offset],
|
[lon, lat - offset],
|
[lon, lat],
|
],
|
];
|
|
return {
|
type: "Feature",
|
properties: {
|
id: item.safeHavenId,
|
name: item.safeHavenName,
|
locationInfo: item.locationInfo,
|
area: item.area,
|
safeHavenType: item.safeHavenType,
|
accommodatePersonNum: item.accommodatePersonNum,
|
planResettlementPersonNum: item.planResettlementPersonNum,
|
materialReserve: item.materialReserve,
|
remark: item.remark,
|
},
|
geometry: {
|
type: "MultiPolygon",
|
coordinates: [coordinates],
|
},
|
};
|
});
|
|
return {
|
type: "FeatureCollection",
|
name: "emergency_area",
|
crs: {
|
type: "name",
|
properties: {
|
name: "urn:ogc:def:crs:OGC:1.3:CRS84",
|
},
|
},
|
features,
|
};
|
}
|
|
|
export function loadAreaPolygon(geoJsonData, isPolluted = false) {
|
let color = new Cesium.Color(1.0, 0.0, 0.0, 0.1);
|
if (isPolluted) {
|
color = Cesium.Color.GREEN;
|
}
|
|
// 使用 GeoJsonDataSource 加载 GeoJSON 数据
|
const dataSourcePromise = Cesium.GeoJsonDataSource.load(geoJsonData, {
|
clampToGround: true,
|
});
|
|
// 获取 GeoJSON 中的第一个 Polygon feature
|
return dataSourcePromise.then(function (dataSource) {
|
viewer.dataSources.add(dataSource);
|
areaDataSource.push(dataSource);
|
|
const polygonEntity = dataSource.entities.values;
|
const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(1000, 50000000);
|
polygonEntity.forEach(entity => {
|
entity.polygon.material = new Cesium.ColorMaterialProperty(color);
|
|
const properties = entity.properties;
|
const fullname = properties.name.getValue();
|
|
const positions = entity.polygon.hierarchy._value.positions;
|
|
entity.label = {
|
text: fullname || "默认标签",
|
font: "20pt Source Han Sans CN",
|
fillColor: Cesium.Color.WHITE,
|
backgroundColor: Cesium.Color.BLACK.withAlpha(0.8),
|
showBackground: false,
|
outline: true,
|
outlineColor: Cesium.Color.WHITE,
|
outlineWidth: 0,
|
scale: 1.0,
|
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
pixelOffset: new Cesium.Cartesian2(0, 0),
|
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
show: true,
|
};
|
entity.polyline = {
|
positions: positions,
|
width: 2,
|
material: new Cesium.ColorMaterialProperty(Cesium.Color.YELLOW),
|
clampToGround: true,
|
};
|
|
viewer.entities.add(entity);
|
});
|
|
return polygonEntity;
|
});
|
}
|
function createAreaPolygon(polygonEntity, color, height) {
|
if (!polygonEntity) return
|
let areaPrimitive = new Cesium.GroundPrimitive({
|
classificationType: Cesium.ClassificationType.BOTH,
|
geometryInstances: new Cesium.GeometryInstance({
|
geometry: new Cesium.PolygonGeometry({
|
polygonHierarchy: polygonEntity.polygon.hierarchy.getValue(),
|
}),
|
}),
|
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
material: new Cesium.Material({
|
fabric: {
|
type: "Area",
|
uniforms: {
|
baseAreaColor: color || new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 0.5),
|
normalMap: "/areaNormals.jpg",
|
frequency: 1000.0,
|
animationSpeed: 0.05,
|
amplitude: 10,
|
specularIntensity: 10,
|
},
|
},
|
}),
|
}),
|
})
|
// 流动水面效果
|
viewer.scene.primitives.add(areaPrimitive)
|
|
return areaPrimitive
|
}
|
|
export function clearAreaPolygon() {
|
// 1. 清除通过 viewer.entities 添加的实体
|
if (Array.isArray(areaDataSource)) {
|
areaDataSource.forEach(dataSource => {
|
// 移除数据源中的所有实体
|
dataSource.entities.values.forEach(entity => {
|
viewer.entities.remove(entity);
|
});
|
// 移除数据源本身
|
viewer.dataSources.remove(dataSource);
|
});
|
areaDataSource = [];
|
}
|
|
// 2. 清除通过 viewer.scene.primitives 添加的图元
|
if (Array.isArray(areaPrimitives)) {
|
areaPrimitives.forEach(primitive => {
|
viewer.scene.primitives.remove(primitive);
|
});
|
areaPrimitives = [];
|
}
|
|
// 3. 强制场景重绘
|
viewer.scene.requestRender();
|
}
|
|
export function initAreaLine() {
|
// AQUA SKYBLUE GOLDENROD
|
|
const baseColor = Cesium.Color.SKYBLUE
|
const activeColor = Cesium.Color.GOLDENROD
|
// pointList.forEach(point => {
|
// if (point.type == '河流') {
|
// loadAreaLine(`${MapDataUrl}/河流/${point.name}.geojson`, point.name, baseColor)
|
// }
|
// })
|
// loadAreaLine(`${MapDataUrl}/河流/donghe.geojson`, Cesium.Color.SKYBLUE)
|
// loadAreaLine(`${MapDataUrl}/河流/nanhe.geojson`, Cesium.Color.SKYBLUE)
|
// loadAreaLine(`${MapDataUrl}/河流/qingnihe.geojson`, Cesium.Color.SKYBLUE)
|
|
return areaLineEntities
|
}
|
export function changeAreaLine(name, color) {
|
const baseColor = Cesium.Color.SKYBLUE
|
const activeColor = Cesium.Color.GOLDENROD
|
areaLineEntities.forEach(item => {
|
if (item.polyline) {
|
if (item.type === name) {
|
item.polyline.material = activeColor
|
} else {
|
item.polyline.material = baseColor
|
}
|
}
|
})
|
return
|
const dataSources = viewer.dataSources.getByName(name)
|
if (dataSources && dataSources.length > 0) {
|
const dataSource = dataSources[0]
|
console.log("dataSource", dataSource)
|
const polygonEntity = dataSource.entities.values
|
polygonEntity.forEach(item => {
|
if (item.polyline) {
|
item.polyline.material = activeColor
|
} else {
|
item.polyline.material = baseColor
|
}
|
})
|
}
|
}
|
|
export const areaLineEntities = []
|
function loadAreaLine(url, name, color) {
|
// 使用 GeoJsonDataSource 加载 GeoJSON 数据
|
// const GeoJsonDataSource = new Cesium.GeoJsonDataSource()
|
const dataSourcePromise = Cesium.GeoJsonDataSource.load(url, {
|
clampToGround: true,
|
fill: color || Cesium.Color.SKYBLUE,
|
stroke: color || Cesium.Color.SKYBLUE,
|
strokeWidth: 5,
|
})
|
dataSourcePromise.then(function (dataSource) {
|
dataSource.name = name
|
// viewer.dataSources.add(dataSource)
|
// 获取 GeoJSON 中的第一个 Polygon feature
|
// console.log("dataSource", dataSource)
|
|
const polygonEntity = dataSource.entities.values
|
areaLineEntities.push(...polygonEntity)
|
polygonEntity.forEach(item => {
|
item.type = name
|
if (item.polyline) {
|
item.polyline.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 5000000)
|
}
|
})
|
})
|
viewer.dataSources.add(dataSourcePromise)
|
}
|
