Cesium draws points, lines, and areas

Cesium draw points

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.9677706, 30.7985748,300),
        point: {
    
    
            color: Cesium.Color.RED,    //点位颜色
            pixelSize: 10                //像素点大小
        },
        label: {
    
    
            text: '测试点',
            font: '14pt Source Han Sans CN',    //字体样式
            fillColor: Cesium.Color.BLACK,        //字体颜色
            backgroundColor: Cesium.Color.AQUA,    //背景颜色
            showBackground: true,                //是否显示背景颜色
            style: Cesium.LabelStyle.FILL,        //label样式
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
            pixelOffset: new Cesium.Cartesian2(10, 0)            //偏移
        }
    });
    viewer.zoomTo(entity);    //居中到该点

Effect picture

Cesium draw line

 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选择器
    });
    initShowLine();
   // 加载默认线条
	function initShowLine(){
    
    
		var objId = "line_one";
		var positions = 
		[
			{
    
    x: -2027365.029498278, y: 5643501.100524499, z: 2165534.2688970272},
			{
    
    x: -2031395.0770982248, y: 5642066.230989595, z: 2165515.129923677}
		];
		initShowPolyline(objId, positions);
		
		objId = "line_two";
		positions = 
		[
			{
    
    x: -2027365.029498278, y: 5643501.100524499, z: 2165534.2688970272},
			{
    
    x: -2028892.7635749679, y: 5642759.580495446, z: 2166045.548750987},
			{
    
    x: -2030175.7696807438, y: 5642306.50626273, z: 2166023.2324521956},
			{
    
    x: -2031395.0770982248, y: 5642066.230989595, z: 2165515.129923677}
		];
		initShowPolyline(objId, positions);
		
		objId = "line_three";
		positions = 
		[
			{
    
    x: -2027365.029498278, y: 5643501.100524499, z: 2165534.2688970272},
			{
    
    x: -2027883.9406702125, y: 5643590.070223619, z: 2164821.443483807},
			{
    
    x: -2030807.9534780958, y: 5642564.539566782, z: 2164780.8840529644},
			{
    
    x: -2031395.0770982248, y: 5642066.230989595, z: 2165515.129923677}
		];
		initShowPolyline(objId, positions);
	}
	
	// 展示线条
	function initShowPolyline(objId, positions) {
    
    
		var lineColor = '#00f';
		if(objId == "1"){
    
    
			lineColor = "#E90808";
		}else if(objId == "2"){
    
    
			lineColor = "#22E908";
		}else if(objId == "3"){
    
    
			lineColor = "#0815E9";
		}
		
		var material = new Cesium.PolylineGlowMaterialProperty({
    
    
			glowPower: 0.25,
			color: Cesium.Color.fromCssColorString(lineColor).withAlpha(0.9)
		});
		var bData = {
    
    
			layerId: "layerId",
			objId: objId,
			shapeType: "Polyline",
			polyline: {
    
    
				positions: positions,
				clampToGround: true,
				width: 8,
				material: material
			}
		};
        var entity = viewer.entities.add(bData);
        viewer.zoomTo(entity);    //居中到该点
	}

Effect picture

Cesium drawing surface

 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({
    
    
      polygon: {
    
    
        // 获取指定属性（positions，holes（图形内需要挖空的区域））
        hierarchy: {
    
    
          positions: Cesium.Cartesian3.fromDegreesArray([
            120.9677706, 30.7985748,
            110.20, 34.55,
            120.20, 50.55
          ]),
          holes: [{
    
    
            positions: Cesium.Cartesian3.fromDegreesArray([
              119, 32,
              115, 34,
              119, 40
            ])
          }]
        },
        // 边框
        outline: true,
        // 边框颜色
        outlineColor: Cesium.Color.WHITE,
        // 边框尺寸
        outlineWidth: 2,
        // 填充的颜色，withAlpha透明度
        material: Cesium.Color.GREEN.withAlpha(0.5),
        // 是否被提供的材质填充
        fill: true,
        // 恒定高度
        height: 5000,
        // 显示在距相机的距离处的属性，多少区间内是可以显示的
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
        // 是否显示
        show: true,
        // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
        zIndex: 10
      }
    });
    viewer.zoomTo(entity);    //居中到该面

Effect picture