天空盒子

• 主要是用到SkyBox类

var viewer = new Cesium.Viewer("cesiumContainer", {
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: "./texture/sky/px.jpg",
        negativeX: "./texture/sky/nx.jpg",
        positiveY: "./texture/sky/ny.jpg",
        negativeY: "./texture/sky/py.jpg",
        positiveZ: "./texture/sky/pz.jpg",
        negativeZ: "./texture/sky/nz.jpg",
      },
    }),
  });

• 地图加载

• 使用imageryProvider来加载地图

天地图

加载天地图影像地图

var viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=申请的K值",
        layer: "tdtBasicLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
     }),
  });

还可以继续加载地图（或地图注记），实现地图的叠加展示，使用viewer.imageryLayers.addImageryProvider。

//地图叠加：下面这个图层是 放在上层的图层
  var imageryLayers = viewer.imageryLayers;
  var layer = imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      layer: "tdtVecBasicLayer",
      style: "default",
      format: "image/png",
      tileMatrixSetID: "GoogleMapsCompatible",
    })
  );

• 后加入的地图默认会覆盖前面的地图。 4.2高德地图

var viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      layer: "tdtVecBasicLayer",
      style: "default",
      format: "image/png",
      tileMatrixSetID: "GoogleMapsCompatible",
    }),
     }),
  });

4.3 OSM 这里用的是Cesium.OpenStreetMapImageryProvider

var viewer = new Cesium.Viewer("cesiumContainer", {
 // OSM地图,
     imageryProvider: new Cesium.OpenStreetMapImageryProvider({
       url: "https://a.tile.openstreetmap.org/",
    }),
});

地形的加载

var viewer = new Cesium.Viewer("cesiumContainer", {
// 设置地形
  terrainProvider: Cesium.createWorldTerrain();
});

本地加载地形

var viewer = new Cesium.Viewer("cesiumContainer", {

//加载自己准备的数据
    terrainProvider: Cesium.createWorldTerrain({
        url: "./terrains/gz",
    }),
});
 

坐标系与转换

• cesium中常见的坐标系有这些

1. WGS-84地理坐标系

2. 屏幕坐标系（笛卡尔平面直角坐标）

3. 笛卡尔空间直角坐标系

WGS-84地理坐标系

通过new Cesium.Cartographic（longitude，latitude，height）来创建，三个参数分别代表经度，纬度，高度

屏幕坐标系（笛卡尔平面直角坐标）

屏幕坐标系即二维笛卡尔坐标系，Cesium中使用Cartesian2来描述，屏幕左上角为原点（0,0），单位为像素值，屏幕水平方向为X轴，向右为正，垂直方向为Y轴，向下为正。

• 通过new Cesium.Cartesian2 (x，y）创建对象，其中的(x，y）代表平面坐标系中的坐标

笛卡尔空间直角坐标系（世界坐标系）

• （Cartesian3）。笛卡尔空间直角坐标系的原点就是椭球体的中心点。由于我们在计算机上绘图时不方便参照经纬度直接进行绘制，所以通常会先将坐标系转换为笛卡尔空间直角坐标系，再进行绘制。

• 笛卡尔空间直角坐标系的3个分量x、y、z，可

• 以被看作以椭球体中心点为原点的空间直角坐标系中的某一个点的坐标。

在Cesium中，使用Cartesian3类，通过new Cesium.Cartesian3 (x，y，z）创建对象,其中的(x，y，z）代表笛卡尔空间直角坐标系中的坐标。

坐标转换

1. 角度与弧度的转换 WGS84坐标的经纬度有弧度、角度两种形式，可以使用cesium提供的数学方法进行转换，弧度转角度，角度转弧度。

 // 角度转为弧度
  var radians = Cesium.Math.toRadians(90);
  console.log(radians);
  // 弧度转角度
  var degrees = Cesium.Math.toDegrees(2 * Math.PI);
  console.log(degrees);

当然，经纬度转弧度也可以用Cesium.Cartographic.fromDegrees

//WGS84经纬度坐标 转 弧度坐标
var radians = Cesium.Cartographic.fromDegrees(
    longitude,
    latitude,
    height
);

2.屏幕坐标转世界坐标（Cartesian2转Cartesian3） 首先要用如下代码，来实现鼠标点击获取屏幕坐标 创建变量handler,并实例化一个ScreenSpaceEventHandler对象，然后使用该对象的setInputAction方法设置要在输入事件上执行的功能。

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
    //屏幕坐标
    console.log("屏幕坐标：", movement.position);}
  ,Cesium.ScreenSpaceEventType.LEFT_CLICK);

关于世界坐标，还有一些需要区分的地方，主要是三种情况，主要看这个点位是否考虑地形、模型、倾斜摄影等等。

场景坐标，包括地形、倾斜摄影模型等的坐标

Cesium中的Camera提供了pickEllipsoid方法

//屏幕坐标 转 世界坐标（场景坐标，包括地形、倾斜摄影模型等的坐标）
 
var cartesian3 = viewer.scene.pickPosition(movement.position); //注意此处的屏幕坐标一定要在球上，否则结果为undefined

console.log("屏幕坐标转世界坐标（场景）：", cartesian3);

地表坐标，包括地形但不包括模型、倾斜摄影等

通过相机与屏幕点位连线来求取坐标。

var ray = viewer.camera.getPickRay(movement.position);
var cartesian3 = viewer.scene.globe.pick(ray, viewer.scene);
console.log("屏幕坐标转世界坐标（地表）：", cartesian3);

椭球面坐标，不包括地形、模型、倾斜摄影等

var cartesian3 = viewer.scene.camera.pickEllipsoid(
        movement.position
);
console.log("屏幕坐标转世界坐标（椭球面）：", cartesian3);

世界坐标转屏幕坐标

可以通过Cesium.SceneTransforms.wgs84ToWindowCoordinates方法将世界坐标系转换为平面坐标系。该方法需要传入两个参数，分别为scene和position，其中:scene为当前场景，即viewer. scene; position为世界坐标系中的坐标。

//世界坐标 转 屏幕坐标
var cartesian2 =
    Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            viewer.scene,
            cartesian3
    );
console.log("世界坐标转屏幕坐标：", cartesian2);

4.世界坐标转WGS84

//世界坐标 转 WGS84坐标，结果为弧度形式
var cartographic =
        Cesium.Cartographic.fromCartesian(cartesian3);
console.log("世界坐标转WGS84弧度坐标：", cartographic);

5.WGS坐标转世界坐标

//WGS84经纬度坐标 转 世界坐标
var position = Cesium.Cartesian3.fromDegrees(
        longitude,
        latitude,
        height
);
console.log("WGS84经纬度转世界坐标", position);

//WGS84弧度坐标 转 世界坐标
var position2 = Cesium.Cartesian3.fromRadians(
        cartographic.longitude,
        cartographic.latitude,
        cartographic.height
);
console.log("WGS84弧度转世界坐标", position2

相机

相机参数

如何设置相机？主要是借助于viewer.camera.setView

  var position = Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 100);
  viewer.camera.setView({
    // 指定相机位置
    destination: position,
    // 指定相机视角
    orientation: {
      // 指定相机的朝向,偏航角
      heading: Cesium.Math.toRadians(0),
      // 指定相机的俯仰角,0度是竖直向上,-90度是向下
      pitch: Cesium.Math.toRadians(-20),
      // 指定相机的滚转角,翻滚角
      roll: 0,
    },
  }) 

pitch、heading、row三个参数表示相机的姿态，使用position表示相机位置。

• heading：默认方向为正北，正角度为向东旋转，即水平旋转，也叫偏航角。
• pitch：默认角度为-90，即朝向地面，正角度在平面之上，负角度为平面下，即上下旋转，也叫俯仰角。
• roll：默认旋转角度为0，左右旋转，正角度向右，负角度向左，也叫翻滚角。

• 相机动画 可以让画面飞向指定的位置，并设置好相应的视角

// flyto,让相机飞往某个地方
  viewer.camera.flyTo({
    destination: position,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-20),
      roll: 0,
    },
  });

键盘操控相机

我们可以给键盘绑定一个监听函数，来控制相机的移动、旋转。这里主要用到的就是相机身上自带的一系列方法 通过按键移动相机

	document.addEventListener("keydown", e => {
		// console.log(e);
		// 获取相机离地面的高度
		var height = viewer.camera.positionCartographic.height;
		var moveRate = height / 100;
		if (e.key == "w") {
			// 设置相机向前移动
			viewer.camera.moveForward(moveRate);
		} else if (e.key == "s") {
			// 设置相机向后移动
			viewer.camera.moveBackward(moveRate);
		} else if (e.key == "a") {
			// 设置相机向左移动
			viewer.camera.moveLeft(moveRate);
		} else if (e.key == "d") {
			// 设置相机向右移动
			viewer.camera.moveRight(moveRate);
		} else if (e.key == "q") {
			// 设置相机向左旋转相机
			viewer.camera.lookLeft(Cesium.Math.toRadians(0.1));
		} else if (e.key == "e") {
			// 设置相机向右旋转相机
			viewer.camera.lookRight(Cesium.Math.toRadians(0.1));
		} else if (e.key == "r") {
			// 设置相机向上旋转相机
			viewer.camera.lookUp(Cesium.Math.toRadians(0.1));
		} else if (e.key == "f") {
			// 设置相机向下旋转相机
			viewer.camera.lookDown(Cesium.Math.toRadians(0.1));
		} else if (e.key == "g") {
			// 向左逆时针翻滚
			viewer.camera.twistLeft(Cesium.Math.toRadians(0.1));
		} else if (e.key == "h") {
			// 向右顺时针翻滚
			viewer.camera.twistRight(Cesium.Math.toRadians(0.1));
		}
	});

添加物体

entity和Primitive

// 添加文字标签和广告牌
  var label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 750),
    label: {
      text: "广州塔",
      font: "24px sans-serif",
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 4,
      // FILL填充文字，OUTLINE勾勒标签，FILL_AND_OUTLINE填充文字和勾勒标签
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      // 设置文字的偏移量
      pixelOffset: new Cesium.Cartesian2(0, -24),
      // 设置文字的显示位置,LEFT /RIGHT /CENTER
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      // 设置文字的显示位置
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
    billboard: {
      image: "./texture/gzt.png",
      width: 50,
      height: 50,
      // 设置广告牌的显示位置
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      // 设置广告牌的显示位置
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    },
  });

添加飞机模型

// 添加3D模型
const airplane = viewer.entities.add({
    name: "Airplane",
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1500),
    model: {
            uri: "./model/Air.glb",
            // 设置飞机的最小像素
            minimumPixelSize: 128,
            // 设置飞机的轮廓
            silhouetteSize: 5,
            // 设置轮廓的颜色
            silhouetteColor: Cesium.Color.WHITE,
            // 设置相机距离模型多远的距离显示
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
                    0,
                    200000
            ),
    },
}); 

添加一个矩形

  // 使用entity创建矩形
  var rectangle = viewer.entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(
        // 西边的经度
        90,
        // 南边维度
        20,
        // 东边经度
        110,
        // 北边维度
        30
      ),
      material: Cesium.Color.RED.withAlpha(0.5),
    },
  });

Primitive绘制图形

Primitive绘制的图形由两部分组成:

第一部分为几何形状(Geometry) ，用于定义Primitive图形的绐构，如面、椭圆、线条等;

第二部分为外观(Appearance)，主要用于定义Primitive图形的渲染着色，通俗来讲，就是定义Primitive图形的外观材质。

• primitive主要由两部分组成：Geometry和Appearance。

• Geometry主要定义了primitive的几何结构，而Appearance主要负责定义primitive的着色，包括GLSL顶点着色器、片段着色器和渲染状态。

//绘制线
//定义几何形状
var polyline = new Cesium.GeometryInstance({
    geometry: new Cesium.PolylineGeometry({
            positions: Cesium.Cartesian3.fromDegreesArray([
                    108.0, 31.0,
                    100.0, 36.0,
                    105.0, 39.0
            ]),
            width: 2.0
    })
});
//定义外观
var polylineAppearance = new Cesium.PolylineMaterialAppearance({
        material: Cesium.Material.fromType('Color')
})
//创建Primitive
var addPolylineGeometry = new Cesium.Primitive({
        geometryInstances: polyline,
        appearance: polylineAppearance
})

//添加primitive到场景中
viewer.scene.primitives.add(addPolylineGeometry)
 


 // 自定义color
 //给color添加配置项
var polylineAppearance = new Cesium.PolylineMaterialAppearance({
        material: Cesium.Material.fromType("Color", {
                color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
        }),
});
 

• 绘制一个四边形

//绘制面
//定义几何形状
var polygon = new Cesium.GeometryInstance({
        geometry: new Cesium.PolygonGeometry({
                polygonHierarchy: new Cesium.PolygonHierarchy(
                        Cesium.Cartesian3.fromDegreesArray([
                                108, 45, 109, 48, 104, 48, 103, 45,
                        ])
                ),
        }),
});
//定义外观
var polygonAppearance = new Cesium.MaterialAppearance({
        material: Cesium.Material.fromType("Dot"),
});
//创建Primitive
var addPolygonGeometry = new Cesium.Primitive({
        geometryInstances: polygon,
        appearance: polygonAppearance,
});
 

几何图形	说明
BoxGeometry	立方体
BoxOutlineGeometry	仅有轮廓的立方体，只有外部线条的的盒子
CircleGeometry	圆形或者拉伸的圆形，圆圈或挤压圆
CircleOutlineGeometry	只有轮廓的圆形
CorridorGeometry	走廊：沿着地表的多段线(垂直于表面的折线)，且具有一定的宽度，可以拉伸到一定的高度
CorridorOutlineGeometry	只有轮廓的走廊
CylinderGeometry	圆柱、圆锥或者截断的圆锥
CylinderOutlineGeometry	只有轮廓的圆柱、圆锥或者截断的圆锥
EllipseGeometry	椭圆或者拉伸的椭圆
EllipseOutlineGeometry	只有轮廓的椭圆或者拉伸的椭圆
EllipsoidGeometry	椭球体
EllipsoidOutlineGeometry	只有轮廓的椭球体
RectangleGeometry	矩形或者拉伸的矩形
RectangleOutlineGeometry	只有轮廓的矩形或者拉伸的矩形
PolygonGeometry	多边形，可以具有空洞或者拉伸一定的高度
PolygonOutlineGeometry	只有轮廓的多边形
PolylineGeometry	多段线，可以具有一定的宽度
SimplePolylineGeometry	简单的多段线
PolylineVolumeGeometry	多段线柱体
PolylineVolumeOutlineGeometry	只有轮廓的多段线柱体
SphereGeometry	球体
SphereOutlineGeometry	只有轮廓的球体
WallGeometry	墙
WallOutlineGeometry	只有轮廓的墙

• 经纬度组合

 if (cesiumContainer) {

        viewer = new Cesium.Viewer(cesiumContainer.value, {
          timeline: true, // 时间轴
          animation: true, // 动画控件
        });
        //  primitive   entity
        //  entity 基于 primitive 封装的， 
        // primitive  可以绘制更高级的图形，更接近webgl 底层

        // 2. Draw different instances each with a unique color
        const rectangleInstance = new Cesium.GeometryInstance({
          geometry: new Cesium.RectangleGeometry({
                  // 矩形   左下右上 定位 矩形   经度 维度
            rectangle: Cesium.Rectangle.fromDegrees(-140.0, 30.0, -100.0, 40.0),
            vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
          }),
          id: 'rectangle',
          attributes: {
            color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
          }
        });



        const polygonWithHole = new Cesium.PolygonGeometry({
          polygonHierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray([
              -100.0, 45.0,
              -80.0, 35.0,
              -100.0, 25.0
            ])
          )
        });


        const polyLine = new Cesium.GeometryInstance({
          geometry: polygonWithHole,
          attributes: {
            color: new Cesium.ColorGeometryInstanceAttribute(1.0, 1.0, 1.0, 0.5)
          }
        })

        viewer.scene.primitives.add(new Cesium.Primitive({
          geometryInstances: [rectangleInstance, polyLine],
          appearance: new Cesium.PerInstanceColorAppearance()
        }));

      }

加载3DTile

        const tileset = viewer.scene.primitives.add(
          new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(75343)
          })
        );

        viewer.flyTo(tileset)

加载瓦片

//创建地图 
    viewer = new Cesium.Viewer('cesiumContainer', { 
              animation:false, //动画控制，默认true 
              baseLayerPicker:false,//地图切换控件(底图以及地形图)是否显示,默认显示true 
              fullscreenButton:false,//全屏按钮,默认显示true 
              geocoder:false,//地名查找,默认true 
              timeline:false,//时间线,默认true 
              vrButton:false,//双屏模式,默认不显示false 
              homeButton:false,//主页按钮，默认true 
              infoBox:true,//点击要素之后显示的信息,默认true 
              selectionIndicator:true,//选中元素显示,默认true 
              navigationHelpButton:false,//导航帮助说明,默认true 
              navigationInstructionsInitiallyVisible:false, 
              sceneModePicker : false,//是否显示地图2D2.5D3D模式 
    });     
    viewer.imageryLayers.layerAdded.addEventListener(function () { 
 
        setTimeout(function () { 
            viewer.imageryLayers.orderByZIndex(); 
        }, 200) 
 
    }) 
    viewer.scene.debugShowFramesPerSecond = true; 
 //隐藏logo 
      hideMapLogo(); 
 /** 
      * 隐藏logo以及地图服务版权信息 
      * @method hideMapLogo 
      * @param 
      * @return 
      */ 
 function hideMapLogo(){ 
        viewer._cesiumWidget._creditContainer.style.display = "none"; 
      } 
 
 var provinceLayer = null; 
 
    Cesium.loadText("./Assets/Data/json/bj.json").then(function (geojson) { 
        geojson = eval("(" + geojson + ")"); 
 var turf = Cesium.turf; 
 var mask = null; 
 
 try { 
 //缓冲区 
 var bufferedOuter = turf.buffer(geojson.features[0], 2, "kilometers"); 
 
 var bufferedInner = turf.buffer(geojson.features[0], 1, "kilometers") 
            bufferedInner = turf.difference(bufferedInner, geojson.features[0]); 
 
            bufferedOuter = turf.difference(bufferedOuter, bufferedInner); 
 
            bufferedInner = turf.featureCollection([bufferedInner]); 
            bufferedOuter = turf.featureCollection([bufferedOuter]); 
 
 var bufferedOuterProvider = new VectorTileImageryProvider({ 
                source: bufferedOuter, 
                zIndex: 99, 
                removeDuplicate: false, 
                defaultStyle: { 
                    outlineColor: "rgba(209,204,226,1)", 
                    lineWidth: 2, 
                    outline: true, 
                    fill: true, 
                    fillColor: "rgba(209,204,226,1)", 
                    tileCacheSize: 200, 
                    showMaker: false, 
                    showCenterLabel: true, 
                    fontColor: "rgba(255,0,0,1)", 
                    labelOffsetX: -10, 
                    labelOffsetY: -5, 
                    fontSize: 13, 
                    fontFamily: "黑体", 
                    centerLabelPropertyName: "NAME" 
                }, 
                maximumLevel: 20, 
                minimumLevel: 5, 
                minimumLevel: 5, 
                simplify: false 
            }); 
 var bufferedOuterLayer; 
            bufferedOuterProvider.readyPromise.then(function () { 
                bufferedOuterLayer = viewer.imageryLayers.addImageryProvider(bufferedOuterProvider); 
            }); 
 
 var bufferedInnerProvider = new VectorTileImageryProvider({ 
                source: bufferedInner, 
                zIndex: 99, 
                removeDuplicate: false, 
                defaultStyle: { 
                    outlineColor: "rgba(185,169,199,1)", 
                    lineWidth: 2, 
                    outline: true, 
                    fill: true, 
                    fillColor: "rgba(185,169,199,1)", 
                    tileCacheSize: 200, 
                    showMaker: false, 
                    showCenterLabel: true, 
                    fontColor: "rgba(255,0,0,1)", 
                    labelOffsetX: -10, 
                    labelOffsetY: -5, 
                    fontSize: 13, 
                    fontFamily: "黑体", 
                    centerLabelPropertyName: "NAME" 
                }, 
                maximumLevel: 20, 
                minimumLevel: 5, 
                minimumLevel: 5, 
                simplify: false 
            }); 
 var bufferedInnerLayer; 
            bufferedInnerProvider.readyPromise.then(function () { 
                bufferedInnerLayer = viewer.imageryLayers.addImageryProvider(bufferedInnerProvider); 
            }); 
 
 
        } catch (e) { 
            console.log(e); 
        } 
 
 
        Cesium.loadText("./Assets/Data/json/bjsx.json").then(function (bjsx) { 
            bjsx = eval("(" + bjsx + ")"); 
 
            turf.featureEach(bjsx, function (feature, index) { 
 var name = feature.properties.NAME.replace(/\s+$/, '') 
 if (name == "海淀区" || name == "门头沟区") {//挖孔 
                    mask = feature; 
 if (mask) { 
                        geojson = turf.difference(geojson.features[0], mask); 
                        geojson = turf.featureCollection([geojson]); 
                    } 
                } 
            }) 
 
 var provinceProvider = new VectorTileImageryProvider({ 
                source: geojson, 
                zIndex: 100, 
                removeDuplicate: false, 
                defaultStyle: { 
                    outlineColor: "rgb(255,255,255)", 
                    lineWidth: 2, 
                    fill: true, 
                    tileCacheSize: 200, 
                    showMaker: false, 
                    showCenterLabel: true, 
                    fontColor: "rgba(255,0,0,1)", 
                    labelOffsetX: -10, 
                    labelOffsetY: -5, 
                    fontSize: 13, 
                    fontFamily: "黑体", 
                    centerLabelPropertyName: "NAME" 
                }, 
                maximumLevel: 20, 
                minimumLevel: 5, 
                minimumLevel: 5, 
                simplify: false 
            }); 
            provinceProvider.readyPromise.then(function () { 
                provinceLayer = viewer.imageryLayers.addImageryProvider(provinceProvider); 
 
            }); 
 
 //添加区县 
            viewer.imageryLayers.addImageryProvider(new VectorTileImageryProvider({ 
                source: bjsx, 
                zIndex: 2, 
                removeDuplicate: false, 
                defaultStyle: { 
                    outlineColor: "rgb(255,255,255)", 
                    lineWidth: 2, 
                    fill: false, 
                    tileCacheSize: 200, 
                    showMaker: false, 
                    showCenterLabel: true, 
                    fontColor: "rgba(255,0,0,1)", 
                    labelOffsetX: -10, 
                    labelOffsetY: -5, 
                    fontSize: 13, 
                    fontFamily: "黑体", 
                    centerLabelPropertyName: "NAME" 
                }, 
                maximumLevel: 20, 
                minimumLevel: 6, 
                simplify: false 
            })); 
 
        }) 
    }) 
 
 var shpPromises2 = [ 
        Cesium.loadBlob("Assets/Data/shp/world/国家简化边界.shp"), 
        Cesium.loadBlob("Assets/Data/shp/world/国家简化边界.dbf"), 
        Cesium.loadBlob("Assets/Data/shp/world/国家简化边界.prj"), 
    ]; 
    Cesium.when.all(shpPromises2, function (files) { 
        files[0].name = "国家简化边界.shp"; 
        files[1].name = "国家简化边界.dbf"; 
        files[2].name = "国家简化边界.prj"; 
 
 var shpLayer = null; 
 var shpProvider = new VectorTileImageryProvider({ 
            source: files, 
            removeDuplicate: false, 
            zIndex:1, 
            defaultStyle: { 
                lineWidth: 2, 
                fill: true, 
                tileCacheSize: 200, 
                showMaker: false, 
                showCenterLabel: true, 
                fontColor: Cesium.Color.WHITE, 
 
 // outlineColor: 'rgba(138,138,138,1)',//边界颜色 
                outlineColor: "rgb(255,255,0)",//边界颜色 
 //fillColor: 'rgba(225,225,225,1)',//陆地颜色 
                fillColor: 'rgba(255,255,0,0.1)',//陆地颜色 
 //backgroundColor: 'rgba(89,129,188,1)',//海区颜色 
                backgroundColor: 'rgba(89,129,188,0)',//海区颜色 
 
                labelOffsetX: 0, 
                labelOffsetY: 0, 
                fontSize: 16, 
                fontFamily: "黑体", 
 // lineDash: [2, 5, 2, 5], 
                labelStroke: true, 
                labelStrokeWidth: 2, 
                labelStrokeColor: "rgba(255,0,0,1)", 
                centerLabelPropertyName: "NAME" 
            }, 
            maximumLevel: 20, 
            minimumLevel: 1, 
            simplify: true, 
            styleFilter: function (feature, style, x, y, level) { 
 if (feature.properties 
                    && feature.properties.NAME 
                    && feature.properties.NAME.indexOf('CHINA') >= 0) { 
 //style.fillColor = Cesium.Color.fromBytes(255, 255, 255, 255); 
                    style.fillColor = Cesium.Color.fromBytes(255, 255, 0, 0.1);//中国区域填充颜色 
 
                } 
 return style; 
            } 
        }); 
        shpProvider.readyPromise.then(function () { 
            shpLayer = viewer.imageryLayers.addImageryProvider(shpProvider); 
 // viewer.imageryLayers.raiseToTop(chinaLayer); 
 //viewer.imageryLayers.raiseToBottom(shpLayer); 
 
        }); 
 
    }); 
 
 var shpPromises = [ 
    Cesium.loadBlob("./Assets/Data/shp/china/国界线.shp"), 
    Cesium.loadBlob("./Assets/Data/shp/china/国界线.dbf"), 
    Cesium.loadBlob("./Assets/Data/shp/china/国界线.prj"), 
    ]; 
 var chinaLayer = null; 
    Cesium.when.all(shpPromises, function (files) { 
        files[0].name = "国界线.shp"; 
        files[1].name = "国界线.dbf"; 
        files[2].name = "国界线.prj"; 
 
 
 var shpProvider = new VectorTileImageryProvider({ 
            source: files, 
            zIndex: 99, 
            removeDuplicate: false, 
            defaultStyle: { 
                outlineColor: "rgb(255,0,0)", 
                fillColor: "rgba(255,0,0,0.6)", 
                lineWidth: 2, 
                fill: false, 
                tileCacheSize: 200, 
                showMaker: false, 
                showCenterLabel: true, 
                fontColor: "rgba(255,0,0,1)", 
                labelOffsetX: -10, 
                labelOffsetY: -5, 
                fontSize: 13, 
                fontFamily: "黑体", 
                centerLabelPropertyName: "NAME", 
                lineCap: "round", 
                shadowColor: "black", 
                shadowOffsetX: 1, 
                shadowOffsetY: -1, 
                shadowBlur: 1, 
                lineJoin: "round" 
            }, 
            maximumLevel: 20, 
            minimumLevel: 1, 
            simplify: false 
        }); 
        shpProvider.readyPromise.then(function () { 
            chinaLayer = viewer.imageryLayers.addImageryProvider(shpProvider); 
 
            viewer.flyTo(chinaLayer); 
            Cesium.Camera.DEFAULT_VIEW_RECTANGLE = shpProvider.rectangle; 
 
        }); 
 
    }); 

Cesium加载本地服务：

var myTerrainProvider= new Cesium.CesiumTerrainProvider({
    url: "http://localhost:8080/terrain"
});
var viewer = new Cesium.Viewer('name', {
    terrainProvider: myTerrainProvider,
});