将 OpenLayers 3 与 Cesium Viewer 集成

Question

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

我找到了它为您创建的 ol3-cesium, however this only allows an entire OpenLayers map instance to be visualized on a Cesium.Scene。 Cesium.Viewer 还针对给定的 DOM 元素创建了 Cesium.Scene 的实例。

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

用于说明的一些代码片段

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({
  })
});

现有的 Cesium 查看器

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

有一些内部类使用 Cesium API 调用来模拟图层。这些在 documentation 中，所以我假设 "public" API。

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

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

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

Answer 2

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

我不确定您对修改 JS 库的舒适程度，但是我个人会做的是制作我自己的 ol3 铯查看器 class。像这样的东西 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);
};

将 OpenLayers 3 与 Cesium Viewer 集成

Integrating OpenLayers 3 with Cesium Viewer

cesium

openlayers-3