Cesium图形绘制

1.文字绘制

<script>

    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
    var viewer = new Cesium.Viewer("csiumContain", {
     
        homeButton: true,//是否显示Home按钮
        animation: false,//是否显示动画控件
        timeline: false,//是否显示时间线控件
        fullscreenButton: false,
        baseLayerPicker: false,//是否显示图层选择控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        geocoder: false, //是否显示地名查找控件
        sceneModePicker: false,//是否显示3D/2D选择器
    });

    var entity = viewer.entities.add({
     
      position: Cesium.Cartesian3.fromDegrees(120, 30, 200),
      // 点
      point: {
     
        color: Cesium.Color.RED, // 点位颜色
        pixelSize: 10 // 像素点大小
      },
      // 文字
      label: {
     
        // 文本。支持显式换行符“ \ n”
        text: '测试点',
        // 字体样式，以CSS语法指定字体
        font: '14pt Source Han Sans CN',
        // 字体颜色
        fillColor: Cesium.Color.BLACK,
        // 背景颜色
        backgroundColor: Cesium.Color.AQUA,
        // 是否显示背景颜色
        showBackground: true,
        // 字体边框
        outline: true,
        // 字体边框颜色
        outlineColor: Cesium.Color.WHITE,
        // 字体边框尺寸
        outlineWidth: 10,
        // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
        scale: 1.0,
        // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        // 相对于坐标的水平位置
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // 相对于坐标的水平位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
        pixelOffset: new Cesium.Cartesian2(10, 0),
        // 是否显示
        show: true
      }
    });
    viewer.zoomTo(entity);    //居中到该点
</script>

效果图

2.图标绘制

<script>

    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
    var viewer = new Cesium.Viewer("csiumContain", {
     
        homeButton: true,//是否显示Home按钮
        animation: false,//是否显示动画控件
        timeline: false,//是否显示时间线控件
        fullscreenButton: false,
        baseLayerPicker: false,//是否显示图层选择控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        geocoder: false, //是否显示地名查找控件
        sceneModePicker: false,//是否显示3D/2D选择器
    });

    var entity = viewer.entities.add({
     
        position: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 2000),
        billboard: {
     
            // 图像地址，URI或Canvas的属性
            image: '../../static/image/device.png',
            // 设置颜色和透明度
            color: Cesium.Color.WHITE.withAlpha(0.8),
            // 高度（以像素为单位）
            height: 50,
            // 宽度（以像素为单位）
            width: 50,
            // 逆时针旋转
            // rotation: 20,
            // 大小是否以米为单位
            sizeInMeters: false,
            // 相对于坐标的垂直位置
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            // 相对于坐标的水平位置
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
            // pixelOffset: new Cesium.Cartesian2(10, 0),
            // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
            scale: 1.0,
            // 是否显示
            show: true
        }
    });

    viewer.zoomTo(entity);    //居中到该点


</script>

效果图

3.立方体

<script>

  // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
  var viewer = new Cesium.Viewer("csiumContain", {
     
    homeButton: true,//是否显示Home按钮
    animation: false,//是否显示动画控件
    timeline: false,//是否显示时间线控件
    fullscreenButton: false,
    baseLayerPicker: false,//是否显示图层选择控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    geocoder: false, //是否显示地名查找控件
    sceneModePicker: false//是否显示3D/2D选择器
    
  });

  var blueBox = viewer.entities.add({
     
    name: 'Blue box',
    //中心的位置
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    box: {
     
      //长宽高
      dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
      material: Cesium.Color.BLUE
    }
  });

  var redBox = viewer.entities.add({
     
    name: 'Red box with black outline',
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    box: {
     
      dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
      material: Cesium.Color.RED,
      outline: true, //显示轮廓
      outlineColor: Cesium.Color.BLACK
    }
  });

  var outlineOnly = viewer.entities.add({
     
    name: 'Yellow box outline',
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
    box: {
     
      dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
      fill: false,  //不显示填充
      outline: true,
      outlineColor: Cesium.Color.YELLOW
    }
  });

  viewer.zoomTo(redBox);    //居中到该点

</script>

效果图

4.圆和椭圆

<script>

  // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
  var viewer = new Cesium.Viewer("csiumContain", {
     
    homeButton: true,//是否显示Home按钮
    animation: false,//是否显示动画控件
    timeline: false,//是否显示时间线控件
    fullscreenButton: false,
    baseLayerPicker: false,//是否显示图层选择控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    geocoder: false, //是否显示地名查找控件
    sceneModePicker: false//是否显示3D/2D选择器
    
  });
  //浮空的绿色圆形
  var greenCircle = viewer.entities.add({
     
    position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),
    name: 'Green circle at height',
    ellipse: {
     
      semiMinorAxis: 300000.0,
      semiMajorAxis: 300000.0,
      height: 200000.0, //浮空
      material: Cesium.Color.GREEN
    }
  });
  //红色椭圆形，位于地表，带轮廓
  var redEllipse = viewer.entities.add({
     
    //不带高度
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    name: 'Red ellipse on surface with outline',
    ellipse: {
     
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: Cesium.Color.RED.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.RED
    }
  });
  //蓝色椭圆柱，旋转了角度
  var blueEllipse = viewer.entities.add({
     
    position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
    name: 'Blue translucent, rotated, and extruded ellipse',
    ellipse: {
     
      semiMinorAxis: 150000.0,
      semiMajorAxis: 300000.0,
      extrudedHeight: 200000.0,  //拉伸
      rotation: Cesium.Math.toRadians(45), //旋转
      material: Cesium.Color.BLUE.withAlpha(0.7),
      outline: true
    }
  });

  viewer.zoomTo(viewer.entities);


  viewer.zoomTo(redBox);    //居中到该点


</script>

效果图

5.走廊

<script>

  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
  var viewer = new Cesium.Viewer("csiumContain", {
     
    homeButton: true,//是否显示Home按钮
    animation: false,//是否显示动画控件
    timeline: false,//是否显示时间线控件
    fullscreenButton: false,
    baseLayerPicker: false,//是否显示图层选择控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    geocoder: false, //是否显示地名查找控件
    sceneModePicker: false //是否显示3D/2D选择器
  
  });

  var redCorridor = viewer.entities.add({
     
    name: 'Red corridor on surface with rounded corners and outline',
    corridor: {
     
      positions: Cesium.Cartesian3.fromDegreesArray([
        -100.0, 40.0,
        -105.0, 40.0,
        -105.0, 35.0
      ]),
      width: 200000.0,
      material: Cesium.Color.RED.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.RED
    }
  });

  var greenCorridor = viewer.entities.add({
     
    name: 'Green corridor at height with mitered corners',
    corridor: {
     
      positions: Cesium.Cartesian3.fromDegreesArray(
        [-90.0, 40.0,
        -95.0, 40.0,
        -95.0, 35.0
        ]),
      height: 100000.0,
      width: 200000.0,
      cornerType: Cesium.CornerType.MITERED,
      material: Cesium.Color.GREEN
    }
  });

  var blueCorridor = viewer.entities.add({
     
    name: 'Blue extruded corridor with beveled corners and outline',
    corridor: {
     
      positions: Cesium.Cartesian3.fromDegreesArray(
        [80.0, 40.0,
          -85.0, 40.0,
          -85.0, 35.0
        ]),
      height: 200000.0,
      extrudedHeight: 100000.0,
      width: 200000.0,
      cornerType: Cesium.CornerType.BEVELED,
      material: Cesium.Color.BLUE.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.BLUE
    }
  });
  viewer.zoomTo(viewer.entities);    //居中到该点


</script>

效果图

6.圆柱和圆锥

<script>

  // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
  var viewer = new Cesium.Viewer("csiumContain", {
     
    homeButton: true,//是否显示Home按钮
    animation: false,//是否显示动画控件
    timeline: false,//是否显示时间线控件
    fullscreenButton: false,
    baseLayerPicker: false,//是否显示图层选择控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    geocoder: false, //是否显示地名查找控件
    sceneModePicker: false //是否显示3D/2D选择器
   
  });

  var greenCylinder = viewer.entities.add({
     
    name: 'Green cylinder with black outline',
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
    cylinder: {
      //圆柱
      length: 400000.0,
      topRadius: 200000.0,
      bottomRadius: 200000.0,
      material: Cesium.Color.GREEN,
      outline: true,
      outlineColor: Cesium.Color.DARK_GREEN
    }
  });

  var redCone = viewer.entities.add({
     
    name: 'Red cone',
    position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
    cylinder: {
     //圆锥
      length: 400000.0,
      topRadius: 0.0,
      bottomRadius: 200000.0,
      material: Cesium.Color.RED
    }
  });

  viewer.zoomTo(viewer.entities);    //居中到该点


</script>

效果图

7.多边形

<script>

  // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
  var viewer = new Cesium.Viewer("csiumContain", {
     
    homeButton: true,//是否显示Home按钮
    animation: false,//是否显示动画控件
    timeline: false,//是否显示时间线控件
    fullscreenButton: false,
    baseLayerPicker: false,//是否显示图层选择控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    geocoder: false, //是否显示地名查找控件
    sceneModePicker: false //是否显示3D/2D选择器
    
  });

  var redPolygon = viewer.entities.add({
     
    name : '贴着地表的多边形',
    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
    }
});
 
var greenPolygon = viewer.entities.add({
     
    name : '绿色拉伸多边形',
    polygon : {
     
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,
                                                        -100.0, 42.0,
                                                        -104.0, 40.0]),
        extrudedHeight: 500000.0,
        material : Cesium.Color.GREEN
    }
});
 
var orangePolygon = viewer.entities.add({
     
    name : '每个顶点具有不同拉伸高度的橘色多边形',
    polygon : {
     
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights(
            [-108.0, 25.0, 100000,
             -100.0, 25.0, 100000,
             -100.0, 30.0, 100000,
             -108.0, 30.0, 300000]),
        extrudedHeight: 0,
        perPositionHeight : true,
        material : Cesium.Color.ORANGE,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});
 
var bluePolygon = viewer.entities.add({
     
    name : '具有挖空效果的蓝色多边形',
    polygon : {
     
        hierarchy : {
     
            positions : Cesium.Cartesian3.fromDegreesArray(
                [-99.0, 30.0,
                 -85.0, 30.0,
                 -85.0, 40.0,
                 -99.0, 40.0]),
            holes : [{
     
                positions : Cesium.Cartesian3.fromDegreesArray([
                    -97.0, 31.0,
                    -97.0, 39.0,
                    -87.0, 39.0,
                    -87.0, 31.0
                ]),
                holes : [{
     
                    positions : Cesium.Cartesian3.fromDegreesArray([
                        -95.0, 33.0,
                        -89.0, 33.0,
                        -89.0, 37.0,
                        -95.0, 37.0
                    ]),
                    holes : [{
     
                        positions : Cesium.Cartesian3.fromDegreesArray([
                            -93.0, 34.0,
                            -91.0, 34.0,
                            -91.0, 36.0,
                            -93.0, 36.0
                        ])
                    }]
                }]
            }]
        },
        material : Cesium.Color.BLUE,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});


  viewer.zoomTo(viewer.entities);    //居中到该点


</script>

效果图

8.线段

<script>

  // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
  var viewer = new Cesium.Viewer("csiumContain", {
     
    homeButton: true,//是否显示Home按钮
    animation: false,//是否显示动画控件
    timeline: false,//是否显示时间线控件
    fullscreenButton: false,
    baseLayerPicker: false,//是否显示图层选择控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    geocoder: false, //是否显示地名查找控件
    sceneModePicker: false //是否显示3D/2D选择器
   
  });

  var redLine = viewer.entities.add({
     
    name : '沿着地球表面的红线',
    polyline : {
     
        positions : Cesium.Cartesian3.fromDegreesArray(
            [-75, 35,
             -125, 35]),
        width : 5,
        material : Cesium.Color.RED
    }
});
 
var glowingLine = viewer.entities.add({
     
    name : '具有发光效果的线',
    polyline : {
     
        positions : Cesium.Cartesian3.fromDegreesArray(
            [-75, 37, -125, 37]
        ),
        width : 10,
        material : new Cesium.PolylineGlowMaterialProperty({
     
            glowPower : 0.2,
            color : Cesium.Color.BLUE
        })
    }
});
 
var orangeOutlined = viewer.entities.add({
     
    name : '具有一定高度的线',
    polyline : {
     
        positions : Cesium.Cartesian3.fromDegreesArrayHeights(
            [-75, 39, 250000,-125, 39, 250000]
        ),
        width : 5,
        material : new Cesium.PolylineOutlineMaterialProperty({
     
            color : Cesium.Color.ORANGE,
            outlineWidth : 2,
            outlineColor : Cesium.Color.BLACK
        })
    }
});
 
var yellowLine = viewer.entities.add({
     
    name : '不贴着地表的线',
    polyline : {
     
        positions : Cesium.Cartesian3.fromDegreesArrayHeights(
            [-75, 43, 500000,-125, 43, 500000]
        ),
        width : 3,
        followSurface : false,  //是否贴着地表
        material : Cesium.Color.PURPLE
    }
});


  viewer.zoomTo(viewer.entities);    //居中到该点


</script>

效果图

9.球和椭圆

<script>

  // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
  var viewer = new Cesium.Viewer("csiumContain", {
     
    homeButton: true,//是否显示Home按钮
    animation: false,//是否显示动画控件
    timeline: false,//是否显示时间线控件
    fullscreenButton: false,
    baseLayerPicker: false,//是否显示图层选择控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    geocoder: false, //是否显示地名查找控件
    sceneModePicker: false //是否显示3D/2D选择器
  });

  var blueEllipsoid = viewer.entities.add({
     
    name: 'Blue ellipsoid',
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    ellipsoid: {
     
      //可以指定三个轴的半径
      radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
      material: Cesium.Color.BLUE
    }
  });

  var redSphere = viewer.entities.add({
     
    name: 'Red sphere with black outline',
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    ellipsoid: {
     
      //正球体
      radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
      material: Cesium.Color.RED,
      outline: true,
      outlineColor: Cesium.Color.BLACK
    }
  });

  var outlineOnly = viewer.entities.add({
     
    name: 'Yellow ellipsoid outline',
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
    ellipsoid: {
     
      radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
      fill: false,
      outline: true,
      outlineColor: Cesium.Color.YELLOW,
      slicePartitions: 24, //横向切割线
      stackPartitions: 36  //纵向切割线
    }
  });


  viewer.zoomTo(viewer.entities);    //居中到该点


</script>

效果图

10.墙

<script>

  // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
  var viewer = new Cesium.Viewer("csiumContain", {
     
    homeButton: true,//是否显示Home按钮
    animation: false,//是否显示动画控件
    timeline: false,//是否显示时间线控件
    fullscreenButton: false,
    baseLayerPicker: false,//是否显示图层选择控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    geocoder: false, //是否显示地名查找控件
    sceneModePicker: false //是否显示3D/2D选择器
    
  });

  //东西方向的横墙
  var redWall = viewer.entities.add({
     
    name: 'Red wall at height',
    wall: {
     
      positions: Cesium.Cartesian3.fromDegreesArrayHeights(
        [-115.0, 44.0, 200000.0,//坐标点
        -90.0, 44.0, 200000.0]
      ),
      minimumHeights: [100000.0, 100000.0], //按坐标点的最小高度数组
      material: Cesium.Color.RED
    }
  });
  //四边围墙
  var greenWall = viewer.entities.add({
     
    name: 'Green wall from surface with outline',
    wall: {
     
      positions: Cesium.Cartesian3.fromDegreesArrayHeights(
        [-107.0, 43.0, 100000.0,
        -97.0, 43.0, 100000.0,
        -97.0, 40.0, 100000.0,
        -107.0, 40.0, 100000.0,
        -107.0, 43.0, 100000.0]),
      material: Cesium.Color.GREEN,
      outline: true,
      outlineColor: Cesium.Color.BLACK
    }
  });
  //曲折的墙
  var blueWall = viewer.entities.add({
     
    name: 'Blue wall with sawtooth heights and outline',
    wall: {
     
      //坐标点，不指定高度
      positions: Cesium.Cartesian3.fromDegreesArray(
        [-115.0, 50.0,
        -112.5, 50.0,
        -110.0, 50.0,
        -107.5, 50.0,
        -105.0, 50.0,
        -102.5, 50.0,
        -100.0, 50.0,
        -97.5, 50.0,
        -95.0, 50.0,
        -92.5, 50.0,
        -90.0, 50.0]),
      maximumHeights: [ //上高
        100000, 200000, 100000, 200000, 100000, 200000,
        100000, 200000, 100000, 200000, 100000],
      minimumHeights: [  //下高
        0, 100000, 0, 100000, 0, 100000, 0, 100000, 0,
        100000, 0],
      material: Cesium.Color.BLUE,
      outline: true,
      outlineColor: Cesium.Color.BLACK
    }
  });


  viewer.zoomTo(viewer.entities);    //居中到该点


</script>

效果图