(一)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.position={x:0,y:0,z:0};
viewer.scene.primitives.add(primitive);
2.调整x,y,z使PolygonGeometry移动
var Polygon = new PolygonGeometry(options, primitive, viewer);
//x方向位移
$("#x").change(function () {
Polygon.move($("#x").val(), $("#y").val(), $("#z").val());
});
//y方向位移
$("#y").change(function () {
Polygon.move($("#x").val(), $("#y").val(), $("#z").val());
});
//z方向位移
$("#z").change(function () {
Polygon.move($("#x").val(), $("#y").val(), $("#z").val());
});
自建类PolygonGeometry.js
class PolygonGeometry {
constructor(options, primitive, viewer) {
this.options = options;
this.viewer = viewer;
this.primitive = primitive;
this.position = this.primitive.position;
}
move(x, y, z) {
let p = this.primitive.geometryInstances.geometry._polygonHierarchy.positions;//三维坐标数组
p = this.Cartesian3To2(p);//经纬度
let w = 30000;//自定义单位距离
if (this.position.x !== Number(x)) {
for (let i = 0; i < p.length; i = i + 3) {
p[i] = p[i] + (Number(x) - this.position.x) / w;
}
this.position.x = Number(x);
}
if (this.position.y !== Number(y)) {
for (let i = 1; i < p.length; i = i + 3) {
p[i] = p[i] + (Number(y) - this.position.y) / w;
}
this.position.y = Number(y);
}
if (this.position.z !== Number(z)) {
for (let i = 2; i < p.length; i = i + 3) {
p[i] = p[i] + (Number(z) - this.position.z) * 1;
}
this.position.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地址:
添加链接描述