Cesium问题

项目编译

项目地址为：
https://github.com/CesiumGS/cesium
构建工具： node/ npm install /npm run build
ref: cesium/Documentation/Contributors/BuildGuide/README.md
遇到的问题
node --version 14.17.5
npm --version 6.14.11

1. globby module 缺失
   npm install globby

2. 依然报错
   Error [ERR_REQUIRE_ESM]: Must use import to load globby Module
   

提示 应该使用require 而非 import , 可能是globyy 的版本问题
npm i globby@11.0.0
重新安装后，编译通过

解决思路，搜索问题关键词，尝试版本问题，查看源码。

对象初始化与操作

var viewer =  Cesium.Viewer('container',options) ;//the DOM element or ID that will contain the widget.
	// 具体的构建过程如下:构建主要属性与方法，并最终赋值
/*
 // Cesium widget container
  var cesiumWidgetContainer = document.createElement("div");
  cesiumWidgetContainer.className = "cesium-viewer-cesiumWidgetContainer";
  viewerContainer.appendChild(cesiumWidgetContainer);

  // Bottom container
  var bottomContainer = document.createElement("div");
  bottomContainer.className = "cesium-viewer-bottom";

  viewerContainer.appendChild(bottomContainer);
*/
var cesiumWidget = new CesiumWidget(cesiumWidgetContainer, {
    imageryProvider:
      createBaseLayerPicker || defined(options.imageryProvider)
        ? false
        : undefined,
    clock: clock,
    skyBox: options.skyBox,
    skyAtmosphere: options.skyAtmosphere,
    sceneMode: options.sceneMode,
    mapProjection: options.mapProjection,
    globe: options.globe,
    orderIndependentTranslucency: options.orderIndependentTranslucency,
    contextOptions: options.contextOptions,
    useDefaultRenderLoop: options.useDefaultRenderLoop,
    targetFrameRate: options.targetFrameRate,
    showRenderLoopErrors: options.showRenderLoopErrors,
    useBrowserRecommendedResolution: options.useBrowserRecommendedResolution,
    creditContainer: defined(options.creditContainer)
      ? options.creditContainer
      : bottomContainer,
    creditViewport: options.creditViewport,
    scene3DOnly: scene3DOnly,
    terrainExaggeration: options.terrainExaggeration,
    shadows: options.shadows,
    terrainShadows: options.terrainShadows,
    mapMode2D: options.mapMode2D,
    requestRenderMode: options.requestRenderMode,
    maximumRenderTimeChange: options.maximumRenderTimeChange,
  });
/*  this._container = container;
  this._bottomContainer = bottomContainer;
  this._element = viewerContainer;
  this._cesiumWidget = cesiumWidget;
  this._selectionIndicator = selectionIndicator;
  this._infoBox = infoBox;
  this._dataSourceCollection = dataSourceCollection;
  this._destroyDataSourceCollection = destroyDataSourceCollection;
  this._dataSourceDisplay = dataSourceDisplay;
  this._clockViewModel = clockViewModel;*/
fuction CesiumWidget(){
...
 var scene = new Scene({
      canvas: canvas,
      contextOptions: options.contextOptions,
      creditContainer: innerCreditContainer, //className="cesium-widget-credits"
      creditViewport: creditViewport,
      mapProjection: options.mapProjection,
      orderIndependentTranslucency: options.orderIndependentTranslucency,
      scene3DOnly: defaultValue(options.scene3DOnly, false),
      terrainExaggeration: options.terrainExaggeration,
      shadows: options.shadows,
      mapMode2D: options.mapMode2D,
      requestRenderMode: options.requestRenderMode,
      maximumRenderTimeChange: options.maximumRenderTimeChange,
    });
...
}
function Scene(options) {
...
var hasCreditContainer = defined(creditContainer);
  var context = new Context(canvas, contextOptions);
  if (!hasCreditContainer) {
    creditContainer = document.createElement("div");
    creditContainer.style.position = "absolute";
    creditContainer.style.bottom = "0";
    creditContainer.style["text-shadow"] = "0 0 2px #000000";
    creditContainer.style.color = "#ffffff";
    creditContainer.style["font-size"] = "10px";
    creditContainer.style["padding-right"] = "5px";
    canvas.parentNode.appendChild(creditContainer);
  }
  ...
  this._frameState = new FrameState(
    context,
    new CreditDisplay(creditContainer, " • ", creditViewport),
    this._jobScheduler
  );
...
}
function CreditDisplay(container, delimiter, viewport){
...
/* title[div,ClassName: "cesium-credit-lightbox-title", textContent:"Data provided by:"]
closeButton[a,"cesium-credit-lightbox-close"..]
creditList[ul,..]
cesiumCreditContainer[div,"cesium-credit-logoContainer"]
screenContainer[div,"cesium-credit-textContainer"]
expandLink[a,"cesium-credit-expand-link"]
*/
appendCss();
//cesiumCredit A credit contains data pertaining(属于) to how to display attributions/credits for certain content on the screen.
// 数据[display-attr/credits]-->certain on screen

var cesiumCredit = Credit.clone(CreditDisplay.cesiumCredit); 
this._delimiter = defaultValue(delimiter, " • ");
  this._screenContainer = screenContainer;
  this._cesiumCreditContainer = cesiumCreditContainer;
  this._lastViewportHeight = undefined;
  this._lastViewportWidth = undefined;
  this._lightboxCredits = lightboxCredits;
  this._creditList = creditList;
  this._lightbox = lightbox;
  this._hideLightbox = hideLightbox;
  this._expandLink = expandLink;
  this._expanded = false;
  this._defaultCredits = [];
  this._cesiumCredit = cesiumCredit;
  this._previousCesiumCredit = undefined;
  this._currentCesiumCredit = cesiumCredit;
  this._currentFrameCredits = {
    screenCredits: new AssociativeArray(),
    lightboxCredits: new AssociativeArray(),
  };
  this._defaultCredit = undefined;

  this.viewport = viewport;
...
}