Bootstrap

cesium--绘制多边形polygon

前言

在线沙盒案例:
https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Polygon.html
api查询地址:
https://cesiumjs.org/refdoc/

查询结果截图:
在这里插入图片描述
区别:

名称作用
CoplanarPolygonGeometry
CoplanarPolygonOutlineGeometry
PolygonGeometry这个好像是给底层用的
PolygonGeometryUpdater一般客户端不用
PolygonHierarchy定义多边形及其孔的线性环的层次。这些孔本身也可能有嵌套内部多边形的孔。
PolygonOutlineGeometry椭球上多边形轮廓的描述。多边形由多边形层次定义。
PolygonGraphics描述由组成外部形状和任何嵌套孔的线性环层次定义的多边形。多边形符合球体的曲率,可以放置在表面或高度上,也可以随意拉伸成一个体积。

黄色的是我们经常用到的

api详解

名称作用
hierarchy指定多边形层次结构,说白了就是多边形的经纬度
height距离地表高度
heightReference相对高度的高度
extrudedHeight厚度
extrudedHeightReference相对厚度
show控制显隐
fill是否填充
material填充颜色
outline是否有外边线
outlineColor外边线颜色
outlineWidth外边线宽度
stRotation指定多边形纹理从北逆时针旋转的数值属性。
granularity指定每个纬度和经度点之间的角度距离的数值属性
perPositionHeight是否利用每个点的高度,制造幅度?
closeTop是否关闭多边形的顶部,也就是拿掉盖子
closeBottom是否关闭底部
shadows阴影
distanceDisplayCondition定义与相机的距离
classificationType一个枚举属性,指定此多边形在地面上时是将地形、三维图块分类,还是两者都分类
arcType线条类型
zIndex遮盖顺序

例子

简单的例子就不列举了,这里主要教大家画回环
我们知道,画完了图形,需要添加到实体中,才能在地球上显示

//几何绘制
var gemeotryDraw = {
    //绘制长方体
    cuboidDraw: function () {
        //难点在于回环的理解,画回环,需要先画出这个多边形,然后在这个多边形里,挖出一块来
        //通过经纬度,笛卡尔坐标系,定义多边形的四个顶点
        var positions=Cesium.Cartesian3.fromDegreesArray([105,20,117,20,122,30,105,30]);     
        //同理,定义需要挖的形状的四个顶点
        var hole=Cesium.Cartesian3.fromDegreesArray([110,23,112,23,115,27,110,27]);
        //定义需要传给hierrchy的参数
        var x={
            positions:positions,
            //由于挖的这个洞,是x本身的一种数组集合,所以每一个对象里,又是一个x的形式
            holes:[{positions:hole}]
        };
        var cuboid = viewer.entities.add({
            name: "长方体",
            polygon:{
                hierarchy:x,
                height: 10000,
                //extrudedHeight: 21000,
                outline: true,
                outlineWidth: 100,
                //fill: false,
                arcType: Cesium.ArcType.RHUMB,
                material: Cesium.Color.RED
            } 
        });
        viewer.zoomTo(cuboid);
    },
    clear: function () {

    }
    //绘制圆形

}

效果图如下:
在这里插入图片描述

;