(三)PolygonGeometry的拉伸
1.在Primitive中加入构建的PolygonGeometry
//传入顶点坐标
var polygon = new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
116.41191042442674, 40.03433302415276, 1,
116.41218511530673, 40.03431621816942, 1,
116.4121891719234, 40.03434113738609, 1,
116.4119127424934, 40.034363738532754, 1,
116.41191042442674, 40.03433302415276, 1
])
)
});
//相关属性
let options = {
allowPicking: true,
releaseGeometryInstances: false,//保留顶点
geometryInstances: new Cesium.GeometryInstance({
geometry: polygon,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
}
}),
appearance: new Cesium.PerInstanceColorAppearance({
translucent: false,
closed: true
}),
asynchronous: false,
}
let primitive = new Cesium.Primitive(options);
//自定义一个原始缩放尺度
primitive.scale = { x: 1, y: 1, z: 1 };
viewer.scene.primitives.add(primitive);
2.调整x,y,z使PolygonGeometry移动
var Polygon = new PolygonGeometry(options, primitive, viewer);
//x方向拉伸
$("#x").change(function () {
Polygon.setScale($("#x").val(), $("#y").val(), $("#z").val());
});
//y方向拉伸
$("#y").change(function () {
Polygon.setScale($("#x").val(), $("#y").val(), $("#z").val());
});
//z方向拉伸
$("#z").change(function () {
Polygon.setScale($("#x").val(), $("#y").val(), $("#z").val());
});
自建类PolygonGeometry.js
class PolygonGeometry {
constructor(options, primitive, viewer) {
this.options = options;
this.viewer = viewer;
this.primitive = primitive;
this.scale = this.primitive.scale;
}
setScale(x, y, z) {
if (x < 0 || y < 0 || z < 0) return;
let m = this.primitive.geometryInstances.geometry._polygonHierarchy.positions;//三维坐标数组
let p = this.Cartesian3To2(m);//经纬度
let mCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(Cesium.BoundingSphere.fromPoints(m).center);
let polygonCenter = this.Cartesian3To2([mCenter]);
if (this.scale.x !== Number(x)) {
for (let i = 0; i < p.length; i = i + 3) {
p[i] = (p[i] - polygonCenter[0]) * (Number(x) / this.scale.x) + polygonCenter[0];
}
this.scale.x = Number(x);
}
if (this.scale.y !== Number(y)) {
for (let i = 1; i < p.length; i = i + 3) {
p[i] = (p[i] - polygonCenter[1]) * (Number(y) / this.scale.y) + polygonCenter[1];
}
this.scale.y = Number(y);
}
if (this.scale.z !== Number(z)) {
for (let i = 2; i < p.length; i = i + 3) {
p[i] = (p[i] - polygonCenter[2]) * (Number(Z) / this.scale.z) + polygonCenter[2];
}
this.scale.z = Number(z);
}
this.update(p);
}
update(p) {
this.viewer.scene.primitives.remove(this.primitive);
let polygon = new Cesium.PolygonGeometry({
perPositionHeight: true,
polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(p)),
});
this.options.geometryInstances = new Cesium.GeometryInstance({
geometry: polygon,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
}
})
let primitive = new Cesium.Primitive(this.options);
this.viewer.scene.primitives.add(primitive);
this.primitive = primitive;
}
//空间坐标数组转成经纬度高坐标数组
Cartesian3To2(points) {
let pointsArray = [];//二维坐标数组(经纬度)
for (let i = 0; i < points.length; i++) {
pointsArray.push(this.changeLonAndLat(points[i].x, points[i].y, points[i].z)[0], this.changeLonAndLat(points[i].x, points[i].y, points[i].z)[1], this.changeLonAndLat(points[i].x, points[i].y, points[i].z)[2])
}
return pointsArray;
}
//空间坐标转成经纬度坐标
changeLonAndLat(x, y, z) {
let cartesian = new Cesium.Cartesian3(x, y, z);
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let lng = Cesium.Math.toDegrees(cartographic.longitude);
let alt = cartographic.height;
return [lng, lat, alt];
}
}
export { PolygonGeometry }
效果图
demo地址:
添加链接描述