Question

我正在使用构建于Cesium.Viewer之上的Cesium进行开发。 Cesium缺少一些功能，所以我希望与OpenLayers集成。我想将现有的OpenLayers图层添加到Cesium.Viewer中，好像它们是＆＃34;图像层＆＃34;。

我找到了ol3-cesium，但这只允许整个OpenLayers地图实例在它为您创建的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

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

我不确定你修改JS库的舒适程度，但是我个人会做的是制作我自己的ol3 cesium viewer课程。像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中，所以我假设＆＃34;公共＆＃34; API。

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

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

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

将OpenLayers 3与Cesium Viewer集成

2 个答案: