cesium根据相应区域坐标和对应x轴，y轴数据着色

最新推荐文章于 2024-09-10 12:04:27 发布

爱编程的小透明

最新推荐文章于 2024-09-10 12:04:27 发布

阅读量436

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_69112199/article/details/140783327

版权

1.获取区域坐标，x轴数，y轴数（westSouthEastNorth，xNum，yNum）

2.计算当前数据的经纬度是否在区域内 booleanPointInPolygon （temp）

3.在区域内为红色，不在则为无色

4.cesium添加图元

/**区域着色 */

const addColor = (westSouthEastNorth: any, xNum: any, yNum: any, temp: any) => {

const labels = viewer.value.scene.primitives.add(new Cesium.LabelCollection());

for (let i = 0; i < xNum; i++) {

for (let j = 0; j < yNum; j++) {

if (i == 0) {

let lat = Math.abs(westSouthEastNorth[3] - westSouthEastNorth[1]) / xNum * (j + 0.5)

labels.add({

position: Cesium.Cartesian3.fromDegrees(westSouthEastNorth[0] - 0.4, westSouthEastNorth[1] - lat - 0.15, 0),

text: String(yNum - j),

font: '18px sans-serif',

fillColor: Cesium.Color.GREY,

outlineColor: Cesium.Color.GREY,

show: true

});

}

let lng = Math.abs(westSouthEastNorth[0] - westSouthEastNorth[4]) / xNum * i

let lat = Math.abs(westSouthEastNorth[5] - westSouthEastNorth[1]) / yNum * j

let lng2 = Math.abs(westSouthEastNorth[0] - westSouthEastNorth[4]) / xNum * (i + 1)

let lat2 = Math.abs(westSouthEastNorth[5] - westSouthEastNorth[1]) / yNum * (j + 1)

const row = temp.find((item: any) => {

let pt = turf.point([item.longitude, item.latitude]);

let poly = turf.polygon([[

[westSouthEastNorth[0] + lng, westSouthEastNorth[1] - lat2],

[westSouthEastNorth[0] + lng, westSouthEastNorth[1] - lat],

[westSouthEastNorth[0] + lng2, westSouthEastNorth[1] - lat],

[westSouthEastNorth[0] + lng2, westSouthEastNorth[1] - lat2],

[westSouthEastNorth[0] + lng, westSouthEastNorth[1] - lat2],

]]);

return turf.booleanPointInPolygon(pt, poly);

})

instances.value.push(new Cesium.GeometryInstance({

geometry: new Cesium.RectangleGeometry({

rectangle: Cesium.Rectangle.fromDegrees(westSouthEastNorth[0] + lng, westSouthEastNorth[1] - lat2, westSouthEastNorth[0] + lng2, westSouthEastNorth[1] - lat),

vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT

}),

attributes: {

color: row ? Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(row.color)) : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0))

}

}));

}

let lng = Math.abs(westSouthEastNorth[4] - westSouthEastNorth[2]) / xNum * (i + 0.5)

labels.add({

position: Cesium.Cartesian3.fromDegrees(westSouthEastNorth[2] + lng - 0.15, westSouthEastNorth[3] - 0.4, 0),

text: String(i + 1),

font: '18px sans-serif',

fillColor: Cesium.Color.GREY,

outlineColor: Cesium.Color.GREY,

show: true

});

}

viewer.value.scene.primitives.add(new Cesium.Primitive({

geometryInstances: instances.value,

appearance: new Cesium.PerInstanceColorAppearance()

}))

}