Javascript 铯-使用相机横向和纵向位置绘制多边形
这个问题与这两个方面有关: 下面的示例代码位于。通过这段代码,我可以从相机的距离中检索纬度高度位置,以获得与选定的原始纬度位置和地球表面以上的高度几乎精确的值。太好了 所有示例和文档都显示了使用度或度中的点创建多边形。 现在怎么办?也许我遗漏了一些东西,但我的意图是能够使用特定的x、y、z坐标创建多边形,以便在放大、缩小和相机移动时,多边形会“粘”在我的房子顶部。现在我有了这些值,用这些值绘制多边形的秘密是什么 仅供参考,这些是我目前拥有的价值:Javascript 铯-使用相机横向和纵向位置绘制多边形,javascript,node.js,camera,terrain,cesium,Javascript,Node.js,Camera,Terrain,Cesium,这个问题与这两个方面有关: 下面的示例代码位于。通过这段代码,我可以从相机的距离中检索纬度高度位置,以获得与选定的原始纬度位置和地球表面以上的高度几乎精确的值。太好了 所有示例和文档都显示了使用度或度中的点创建多边形。 现在怎么办?也许我遗漏了一些东西,但我的意图是能够使用特定的x、y、z坐标创建多边形,以便在放大、缩小和相机移动时,多边形会“粘”在我的房子顶部。现在我有了这些值,用这些值绘制多边形的秘密是什么 仅供参考,这些是我目前拥有的价值: ====================
===================================================================================== 红色多边形的代码可以工作:
var redPolygon = viewer.entities.add({
name : 'Red polygon on surface',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
-115.0, 32.0,
-102.0, 31.0,
-102.0, 35.0,
-102.0, 35.0]),
material : Cesium.Color.RED
}
});
viewer.flyTo(redPolygon);
bluePolygon的代码不起作用:
var bluePolygon = viewer.entities.add({
name : 'Blue polygon on surface',
polygon : {
//hierarchy: collection.latlonalt,
hierarchy: Cesium.Cartesian3.fromArray(collection.latlonalt),
material : Cesium.Color.BLUE
}
});
viewer.flyTo(bluePolygon);
如果我使用层次结构:collection.latlonalt,我会收到以下错误:
因此,我将代码更改为层次结构:Cesium.Cartesian3.fromArray(collection.latlonalt),
其中collection.latlonalt是我的Cartesian3数组:
但是什么也没画出来。没有错误。这是我在控制台中看到的:
为了测试,我尝试向红色多边形添加z位置,并将.fromDegreesArray更改为.fromArray,如下所示:
var redPolygon = viewer.entities.add({
name : 'Red polygon on surface',
polygon : {
hierarchy : Cesium.Cartesian3.fromArray([-115.0, 37.0, 10.0,
-115.0, 32.0, 10.0,
-102.0, 31.0, 10.0,
-102.0, 35.0, 10.0,
-102.0, 35.0, 10.0]),
material : Cesium.Color.RED
}
});
viewer.flyTo(redPolygon);
var redPolygon = viewer.entities.add({
name : 'Red polygon on surface',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
-115.0, 32.0,
-107.0, 33.0,
-102.0, 31.0,
-102.0, 35.0]),
material : Cesium.Color.RED
}
});
这也不起作用。铯原子具有类似的辅助函数,可现在您已经掌握了实际的Cartesian3值,因此不需要这些辅助函数 例如,多边形演示代码如下所示:
var redPolygon = viewer.entities.add({
name : 'Red polygon on surface',
polygon : {
hierarchy : Cesium.Cartesian3.fromArray([-115.0, 37.0, 10.0,
-115.0, 32.0, 10.0,
-102.0, 31.0, 10.0,
-102.0, 35.0, 10.0,
-102.0, 35.0, 10.0]),
material : Cesium.Color.RED
}
});
viewer.flyTo(redPolygon);
var redPolygon = viewer.entities.add({
name : 'Red polygon on surface',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
-115.0, 32.0,
-107.0, 33.0,
-102.0, 31.0,
-102.0, 35.0]),
material : Cesium.Color.RED
}
});
在上面的代码中,在本例中,fromDegreesArray
仅获取5个lot/lan值对的列表,并将它们转换为包含5个Cartesian3
类实例的JavaScript数组。然后,将5个笛卡尔3的数组存储为多边形定义中的层次
的值。如果您在运行时检查该定义,您会发现原始的lon/lat值已被丢弃,并由实际的Cartesian3s替换,这要感谢helper函数
因此,在您的代码中,您需要一个用户迄今为止点击过的Cartesian3数组。这以空数组开始,您需要收集至少三次单击,将每次单击转换为Cartesian3,正如您在上面的问题中所示,并将该值转换为数组。一旦数组累积了3次或3次以上的单击,就可以将该数组作为多边形定义的层次
字段传递
通过这种方式,您避免了从degreesArray调用,
,因为您的单击处理程序正在执行更详细的工作,即每次单击都收集精确的笛卡尔位置。此收集必须在每次单击时进行,以防相机在单击之间移动。因此,“正在进行中”的数组必须在两次单击之间生存,直到所有单击都被收集并可以创建多边形
编辑:下面是我试图描述的代码结构示例。我没有在这里显示实际的点击处理程序,因为您似乎已经有了来自鼠标点击的Cartesian3值。相反,我展示了三个用于创建多边形的值
var viewer = new Cesium.Viewer('cesiumContainer');
// Create an empty array of click positions at the start.
var clickPositions = [];
// When the first mouse click is received, convert to Cartesian3, and push it into the array.
var click1 = new Cesium.Cartesian3(-2155350.2, -4622163.4, 3817393.1);
clickPositions.push(click1);
// Later, more mouse clicks are received and pushed into the array.
var click2 = new Cesium.Cartesian3(-2288079.8, -4906803.1, 3360431.4);
clickPositions.push(click2);
var click3 = new Cesium.Cartesian3(-1087466.8, -5116129.4, 3637866.9);
clickPositions.push(click3);
// Finally, draw the polygon.
var redPolygon = viewer.entities.add({
name : 'Red polygon on surface',
polygon : {
hierarchy : clickPositions,
material : Cesium.Color.RED
}
});
请注意,
clickPositions
被分配到层次结构时,不会发生任何变化。Cartesian3值的数组已经是铯所需的形式。嘿,emacky!也许我还是做错了什么,但不是画画。请参见下面我的编辑新信息
你好,露西小姐,我在答案底部添加了一个新的代码块。太棒了!!!!我在其他几个答案中看到了“这个错误几乎总是由NaN或未定义的值引起的”。在某个时候,我开始怀疑我是否需要增加分数,但我在测试中没有得到。这太完美了。