Viewer

使用步骤

:::

1. 引入 cesiumSdk

import CesiumMap from "cesium-plugins-fn";

2. 初始化地图，并暴露全局变量 CM，viewer; 注意在离开页面时释放全局变量！

<!-- 确保盒子有高度 -->
<div id="cesiumContainer"></div>

let CM = new CesiumMap("cesiumContainer", {
  imageryProvider: null,
  // contextOptions: {
  //   webgl: {
  //     alpha: true,
  //     depth: true,
  //     stencil: true,
  //     antialias: true,
  //     premultipliedAlpha: true,
  //     //通过canvas.toDataURL()实现截图需要将该项设置为true
  //     preserveDrawingBuffer: true,
  //     failIfMajorPerformanceCaveat: true,
  //   },
  // },
});
window.CM = CM;
//window.viewer为cesium实例化得到的viewer，与cesiumSDK无关；
// 主要用于cesium本身一些方法的调用和扩展。
window.viewer = CM.Viewer._viewer;

天空盒 SkyBox

设置全景天空盒 setSkyBox

• @param

参数名	type	描述	默认值
sources	Object	盒子图片组成的 sources 对象	-

• @returns

返回值	type	描述
skyBox	Object	返回创建的 天空盒 对象。

let skyBox = CM.Viewer.setSkyBox({
  sources = {
    positiveX: "data/images/SkyBox/tycho2t3_80_pxs.jpg",
    negativeX: "data/images/SkyBox/tycho2t3_80_mxs.jpg",
    positiveY: "data/images/SkyBox/tycho2t3_80_pys.jpg",
    negativeY: "data/images/SkyBox/tycho2t3_80_mys.jpg",
    positiveZ: "data/images/SkyBox/tycho2t3_80_pzs.jpg",
    negativeZ: "data/images/SkyBox/tycho2t3_80_mzs.jpg",
  }
});
viewer.scene.skyBox = skyBox;

点击查看如何获取天空盒资源

• 天空盒 HDR 下载

• 处理为天空盒需要的六张图片

图片还需要旋转处理如下：

字段名	别称	旋转角度
px	Right	-90
nx	Left	90
py	Back	不变
ny	Front	180
pz	Up	不变
nz	Down	180

• 在线图片旋转

设置近地天空盒 setCustomSkyBox

• @param

参数名	type	描述	默认值
sources	Object	盒子图片组成的 sources 对象	-

• @returns

返回值	type	描述
skyBox	Object	返回创建的 天空盒 对象。

let skyBox = CM.Viewer.setNearGroundSkyBox({
  sources = {
    positiveX: "data/images/SkyBox/tycho2t3_80_pxs.jpg",
    negativeX: "data/images/SkyBox/tycho2t3_80_mxs.jpg",
    positiveY: "data/images/SkyBox/tycho2t3_80_pys.jpg",
    negativeY: "data/images/SkyBox/tycho2t3_80_mys.jpg",
    positiveZ: "data/images/SkyBox/tycho2t3_80_pzs.jpg",
    negativeZ: "data/images/SkyBox/tycho2t3_80_mzs.jpg",
  }
});
viewer.scene.skyBox = skyBox;

如何切换全景和近地天空盒

• 根据视高调整天空盒显示逻辑；小于 20 万米的时候显示近地天空盒，大于 20 万的时候显示默认的天空盒；

let defaultSkyBox = viewer.scene.skyBox;

const CustomSkyBox = CM.Viewer.setNearGroundSkyBox({
  sources: {
    positiveX: `/data/sky-box/7/px.png`,
    negativeX: `/data/sky-box/7/nx.png`,
    positiveY: `/data/sky-box/7/pz.png`,
    negativeY: `/data/sky-box/7/nz.png`,
    positiveZ: `/data/sky-box/7/py.png`,
    negativeZ: `/data/sky-box/7/ny.png`,
  },
});
// 渲染前监听并判断相机位置
viewer.scene.preUpdate.addEventListener(() => {
  let cameraHeight = viewer.scene.camera.positionCartographic.height;
  if (cameraHeight < 200000) {
    viewer.scene.skyBox = CustomSkyBox;
    // 隐藏默认的天空大气渲染效果
    viewer.scene.skyAtmosphere.show = false;
  } else {
    viewer.scene.skyBox = defaultSkyBox;
    viewer.scene.skyAtmosphere.show = true;
  }
});

特效 Effect

设置黑夜特效 setDarkEffect

• @returns

返回值	type	描述
Effect	Object	返回创建的 postProcessStages 对象。

let Effect = CM.Viewer.setDarkEffect();

setTimeout(() => {
  // viewer.postProcessStages.remove(Effect);
  viewer.postProcessStages.removeAll();
}, 5000);

设置雨天特效 setRainEffect

• @returns

返回值	type	描述
Effect	Object	返回创建的 postProcessStages 对象。

let Effect = CM.Viewer.setRainEffect();

设置雪天特效 setSnowEffect

• @returns

返回值	type	描述
Effect	Object	返回创建的 postProcessStages 对象。

let Effect = CM.Viewer.setSnowEffect();

图层 Layer

加载影像图层 addBaseLayer

• @param

参数名	type	描述	默认值
baseLayers	Arrary	通过 Imagery 创建的图层数组	-
removeAllLayer	Boolean	是否清除全部图层再加载	false

let img = CM.Imagery.createGoogleImageryProvider("img");
CM.Viewer.addBaseLayer([img]);

加载地形 addTerrain

• @param

参数名	type	描述	默认值
terrain	Object	通过 new Cesium.CesiumTerrainProvider 得到的地形数据	-

let muchuan = CM.Imagery.createUrlTerrain({ url: "地形url" });
CM.Viewer.addTerrain(muchuan);

加载 kml loadKml

• @param

参数名	type	描述	默认值
kmlUrl	String	kml 地址	-
fly	Boolean	是否飞行到 kml 区域	false
callback	Function	加载完成的回调函数	-

CM.Viewer.loadKml("kmlUrl", true, (entities) => {
  console.log(entities);
});

加载 geoJson loadGeoJson

• @param

参数名	type	描述	默认值
geoJson	String	GeoJson 地址	-
myData	Object	自定义数据
callback	Function	返回数据 entities, dataSource
style	Object	数据样式

CM.Viewer.loadGeoJson(
  geoJson,
  {},
  (entities, dataSource) => {
    console.log(entities, dataSource);
  },
  {
    fill: new Cesium.Color.fromCssColorString("rgba(255,255,0,.9)"),
    stroke: new Cesium.Color.fromCssColorString("rgba(255,255,0,1)"), //折线和多边形轮廓的默认颜色
  }
);