Cesium地图小控件(底图设置)，点线面

首先我们先来看一下地图小控件

 this.viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: true, //搜索按钮(可以搜索地区)
        timeline: true, //底部时间轴
        animation: true, //左下角仪表盘
        baseLayerPicker: true, //底图切换按钮
        fullscreenButton: true, //全屏按钮(毋庸置疑就是全屏)
        vrButton: true, //vr按钮
        homeButton: true, //初始视角按钮(小房子图标,无论你怎么旋转放大缩小点击后都会回到你初始化页面的样子)
        sceneModePicker: true, //二维 <===> 三维切换按钮
        navigationHelpButton: true, //帮助按钮
        // ArcGIS在线影像底图(只有baseLayerPicker为true时可用)
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url:
            'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
        }),
      });

		vrButton: true,

        sceneModePicker: true, //二维 <===> 三维切换按钮

这是默认的地球跟上面那个地球看出区别了吗

如果想设置初始视角

 this.viewer.camera.setView({
        // Cesium的坐标是以地心为原点
        // fromDegrees(lng,lat,alt)方法，将经纬度和高程转换为世界坐标
        //lng 经度 lat纬度 alt高度
        destination: Cesium.Cartesian3.fromDegrees(111.0, 35.0, 500000.0),
        orientation: {
          // 指向
          heading: Cesium.Math.toRadians(0),
          // 视角
          pitch: Cesium.Math.toRadians(-40),
          roll: 0.0,
        },
      });

//heading 可以理解为y指针绕着蓝线转(360度)
//pitch 可以理解为z指针绕着黄线转(360度)
//roll 可以理解为x指针绕着绿线转(360度)
//当然是根据坐标点不是整个地球

接下来我们往地球上添加点,线,面

点(point)

 this.viewer.entities.add({
        name: 'point',
        position: Cesium.Cartesian3.fromDegrees(111.0, 40.0, 0),//坐标
        point: {
          show: true, // default
          color: Cesium.Color.AQUA,//点的颜色
          pixelSize: 15, //点的大小
          outlineWidth: 0,//边框
        },
        description: `<p>这是entity的属性信息,可以为html</p> `,
      });

线(polyline)

 	var position = [112.0, 40.0, 0, 110.0, 40.0, 0];
      this.viewer.entities.add({
        name: 'line',
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(position),
          width: 4,
          //发光材质
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.8,
            taperPower: 0.5,
            color: Cesium.Color.CORNFLOWERBLUE,
          }),
          //外轮廓材质
          // material: new Cesium.PolylineOutlineMaterialProperty({
          //   color: Cesium.Color.ORANGE,
          //   outlineWidth: 5,
          //   outlineColor: Cesium.Color.BLACK,
          // }),
          //带箭头的线
          // material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE),
          //虚线
          // material: new Cesium.PolylineDashMaterialProperty({
          //   color: Cesium.Color.CYAN,
          // }),
          // 线低于地形时用于绘制折线的材质
          // depthFailMaterial: Cesium.Color.WHITE,

          // 折线段必须遵循的线型
          // arcType: Cesium.ArcType.GEODESIC,
          clampToGround: true, // 是否贴地
        },
      });

面(Polygon)

var polygon = this.viewer.entities.add({
        name: 'polygon',
        polygon: {
          show: true,
          hierarchy: Cesium.Cartesian3.fromDegreesArray([
            115.0,
            43.0,
            115.0,
            42.0,
            113.0,
            42.0,
            113.0,
            43.0,
          ]),
          height: 0, // 多边形相对于椭球面的高度
          heightReference: Cesium.HeightReference.NONE,
          // extrudedHeight: 0, // 多边形的凸出面相对于椭球面的高度
          // extrudedHeightReference: Cesium.HeightReference.NONE,
          stRotation: 0.0, // 多边形纹理从北方逆时针旋转
          granularity: Cesium.Math.RADIANS_PER_DEGREE, // 每个纬度和经度点之间的角距离
          fill: true,//是否填充
          material: Cesium.Color.YELLOW,//材质
          outline: false,//是否边框
          outlineColor: Cesium.Color.BLACK,//边框颜色
          outlineWidth: 1.0,//边框宽度
          perPositionHeight: false, // 是否使用每个位置的高度
          closeTop: true, // 如果为false，则将挤出的多边形顶部留空
          closeBottom: true, // 如果为false，则将挤出的多边形的底部保留为开放状态
          // 多边形边缘必须遵循的线型    type:ArcType 定义连接顶点应采用的路径。
          // NONE 与椭圆表面不符的直线;GEODESIC 遵循测地路径;RHUMB	遵循大黄蜂或恶魔般的道路。
          arcType: Cesium.ArcType.GEODESIC,
          shadows: Cesium.ShadowMode.DISABLED,
        },
      });

中文api