let areaPrimitives = []
|
let areaDataSource = []
|
|
export function loadAreaPolygon(url, isPolluted = false) {
|
let color = new Cesium.Color(1.0, 0.0, 0.0, 0.1)
|
if (isPolluted) {
|
color = Cesium.Color.SKYBLUE
|
}
|
// 使用 GeoJsonDataSource 加载 GeoJSON 数据
|
const dataSourcePromise = Cesium.GeoJsonDataSource.load(url, {
|
clampToGround: true,
|
})
|
|
// 获取 GeoJSON 中的第一个 Polygon feature
|
return dataSourcePromise.then(function (dataSource) {
|
viewer.dataSources.add(dataSource)
|
console.log("dataSource", dataSource)
|
// 获取 GeoJSON 中的第一个 Polygon feature
|
areaDataSource.push(dataSource)
|
|
// const polygonEntity = dataSource.entities.values[0]
|
// let areaPrimitive = createAreaPolygon(polygonEntity, color)
|
// areaPrimitives.push(areaPrimitive)
|
|
// return areaPrimitive
|
|
const polygonEntity = dataSource.entities.values
|
console.log("polygonEntity", polygonEntity)
|
const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(1000, 50000000)
|
polygonEntity.forEach(entity => {
|
// console.log("entity", entity)
|
|
entity.polygon.material = new Cesium.ColorMaterialProperty(
|
// Cesium.Color.LIGHTSTEELBLUE.withAlpha(0.2)
|
color
|
// new Cesium.Color.fromCssColorString("#0f2636b3")
|
// Cesium.Color.fromRandom({
|
// alpha: 0.5,
|
// minimumAlpha: 0.2,
|
// maximumAlpha: 0.9,
|
// })
|
)
|
|
// entity.polygon.distanceDisplayCondition = distanceDisplayCondition
|
|
const properties = entity.properties
|
const fullname = properties.name.getValue()
|
|
const positions = entity.polygon.hierarchy._value.positions
|
|
// entity.position = positions
|
entity.label = {
|
// 文本。支持显式换行符“ \ n”
|
text: fullname || "默认标签",
|
// 字体样式，以CSS语法指定字体
|
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,
|
// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
|
scale: 1.0,
|
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
|
// 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
// 相对于坐标的水平位置
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
// 相对于坐标的水平位置
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
|
pixelOffset: new Cesium.Cartesian2(0, 0),
|
// pixelOffset: new Cesium.Cartesian2(0, 0),
|
// 显示在距相机的距离处的属性，多少区间内是可以显示的
|
// distanceDisplayCondition: distanceDisplayCondition,
|
// : new Cesium.DistanceDisplayCondition(0, 50000),
|
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
|
// Cesium.Color.fromRandom({
|
// alpha: 0.5,
|
// minimumAlpha: 0.2,
|
// maximumAlpha: 0.9,
|
// })
|
),
|
clampToGround: true,
|
// distanceDisplayCondition: distanceDisplayCondition,
|
}
|
|
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() {
|
if (Array.isArray(areaPrimitives)) {
|
areaPrimitives.forEach(item => {
|
viewer.scene.primitives.remove(item)
|
})
|
areaPrimitives = []
|
}
|
if (Array.isArray(areaDataSource)) {
|
areaDataSource.forEach(dataSource => {
|
dataSource.show = false
|
})
|
}
|
}
|
|
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)
|
}
|
