将 OpenLayers 3 与 Cesium Viewer 集成

Question

我正在使用基于 Cesium.Viewer 构建的 Cesium 进行开发。 Cesium 缺少一些特性，所以我希望与 OpenLayers 集成。我想将现有的 OpenLayers 图层添加到 Cesium.Viewer，就好像它们是“图像图层”一样。

我找到了ol3-cesium，但是这只允许在它为您创建的Cesium.Scene 上可视化整个 OpenLayers 地图实例。 Cesium.Viewer 还创建一个针对给定 DOM 元素的 Cesium.Scene 实例。

如何将 OpenLayers 图层添加到 Cesium.Viewer？

一些代码sn-ps用于说明

var olLayer1= new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'sat'})
});
var olLayer2= new ol.layer.Vector({
  source : ol.source.Vector();
});

var map = new ol.Map({
  layers: [olLayer1, olLayer2],
  target: 'map',
  view: new ol.View({
  })
});

现有的铯查看器

var viewer = new Cesium.Viewer('cesium-map', {});
// viewer setup code

ol3-cesium 初始化 - 但这不允许与现有查看器一起使用？？

var ol3d = new olcs.OLCesium({map: map}); // map is the ol.Map instance

Answer 1

我刚刚查看了 OL3-Cesium 的初始化代码，虽然它本质上是 Cesium 之上的一个包装器，但如果你想要一个混合 Cesium.Viewer，他们决定实现 Cesium 环境的方法不会很好地发挥作用和一个 OL3 对象。

我不确定您对修改 JS 库的舒适程度，但是 我个人会做的是制作我自己的 ol3 铯查看器类。像 gist 这样的东西我只是拼凑起来的。

只是一个警告，我还没有测试过这段代码。如果收到错误，您可能需要进行一些额外的修改。 OL3-Cesium 开发人员选择不使用 Cesium 小部件或查看器在他们的库中初始化 Cesium 可能是有原因的，但我认为这没有任何原因。

这里是构造函数，但您希望整个 Gist 作为 ol3-cesium 库中的一个单独文件。把它和ol3Cesium.js文件放在同一目录下。

摘自https://gist.github.com/maikuru/9e650bf88aed84982667

olcs.OLCesiumViewer = function(options) {

    /**
     * @type {!ol.Map}
     * @private
     */
    this.map_ = options.map;

    var fillArea = 'position:absolute;top:0;left:0;width:100%;height:100%;';

    /**
     * @type {!Element}
     * @private
     */
    this.container_ = goog.dom.createDom(goog.dom.TagName.DIV,
            {style: fillArea + 'visibility:hidden;'});

    var targetElement = goog.dom.getElement(options.target || null);
    if (targetElement) {
        goog.dom.appendChild(targetElement, this.container_);
    } else {
        var vp = this.map_.getViewport();
        var oc = goog.dom.getElementByClass('ol-overlaycontainer', vp);
        if (oc) {
            goog.dom.insertSiblingBefore(this.container_, oc);
        }
    }

    /**
     * Whether the Cesium container is placed over the ol map.
     * @type {boolean}
     * @private
     */
    this.isOverMap_ = !goog.isDefAndNotNull(targetElement);

    /**
     * @type {!HTMLCanvasElement}
     * @private
     */
    this.canvas_ = /** @type {!HTMLCanvasElement} */
            (goog.dom.createDom(goog.dom.TagName.CANVAS, {style: fillArea}));
    this.canvas_.oncontextmenu = function() { return false; };
    this.canvas_.onselectstart = function() { return false; };

    goog.dom.appendChild(this.container_, this.canvas_);

    /**
     * @type {boolean}
     * @private
     */
    this.enabled_ = false;

    /**
     * @type {!Array.<ol.interaction.Interaction>}
     * @private
     */
    this.pausedInteractions_ = [];

    /**
     * @type {?ol.layer.Group}
     * @private
     */
    this.hiddenRootGroup_ = null;

    /**
     * @type {!Object.<Cesium.Viewer.Options>}
     * @private
     */
    var cesiumViewerConfig_ = (options.viewer || {}).scene3DOnly = true;

    /**
     * @type {!Cesium.Viewer}
     * @private
     */
    this.viewer_ = new Cesium.Viewer(this.container_, cesiumViewerConfig_);

    /**
     * @type {!Cesium.Scene}
     * @private
     */
    this.scene_ = this.viewer_.scene;

    var sscc = this.scene_.screenSpaceCameraController;
    sscc.inertiaSpin = 0;
    sscc.ineartiaTranslate = 0;
    sscc.inertiaZoom = 0;

    sscc.tiltEventTypes.push({
        'eventType': Cesium.CameraEventType.LEFT_DRAG,
        'modifier': Cesium.KeyboardEventModifier.SHIFT
    });

    sscc.tiltEventTypes.push({
        'eventType': Cesium.CameraEventType.LEFT_DRAG,
        'modifier': Cesium.KeyboardEventModifier.ALT
    });

    sscc.enableLook = false;

    this.scene_.camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;

    /**
     * @type {!olcs.Camera}
     * @private
     */
    this.camera_ = new olcs.Camera(this.scene_, this.map_);

    /**
     * @type {!Cesium.Globe}
     * @private
     */
    this.globe_ = this.scene_.globe;
    this.scene_.skyAtmosphere = new Cesium.SkyAtmosphere();

    var synchronizers = goog.isDef(options.createSynchronizers) ?
            options.createSynchronizers(this.map_, this.scene_) :
            [
                new olcs.RasterSynchronizer(this.map_, this.scene_),
                new olcs.VectorSynchronizer(this.map_, this.scene_)
            ];

    for (var i = synchronizers.length - 1; i >= 0; --i) {
        synchronizers[i].synchronize();
    }

    if (this.isOverMap_) {
        // if in "stacked mode", hide everything except canvas (including credits)
        var credits = goog.dom.getNextElementSibling(this.canvas_);
        if (goog.isDefAndNotNull(credits)) {
            credits.style.display = 'none';
        }
    }

    this.camera_.readFromView();

    this.cesiumRenderingDelay_ = new goog.async.AnimationDelay(function(time) {
        this.scene_.initializeFrame();
        this.handleResize_();
        this.scene_.render();
        this.enabled_ && this.camera_.checkCameraChange();
        this.cesiumRenderingDelay_.start();
    }, undefined, this);
};

Answer 2

有一些内部类使用 Cesium API 调用来模拟层。这些在documentation 中，所以我假设是“公共”API。

图层必须添加到地图中，不能单独使用。这是必需的，因为地图定义了投影等。

例如VectorSynchronizer 在底层创建侦听器并保持 Cesium 场景同步...

new olcs.VectorSynchronizer(map, viewer.scene);