OpenLayers 5至6：未渲染的层

我们正在尝试将OL5映射迁移为OL6映射。当我们使用OL6时，地图根本不会渲染，而在DevTools中，如果我们将高度设置为map div，缩放工具和徽标将显示良好，但没有图层。我们用“快速入门”地图替换了地图，但它在6中不起作用，5完全可以。检查我们的地图对象没有显示任何问题，正如预期的那样

其他人有任何问题或解决了这个问题，或者可以提供帮助吗？谢谢

HTML声明：

<div id="ephem-map" class="map-medium"></div>

地图工厂：

(function () {
    'use strict';
    /* global ol, angular */

    angular.module('common').factory('MapFactory', MapFactory);

    MapFactory.$inject = [];

    function MapFactory() {

        var factory = {
            getMapInstance: getMapInstance
        };
        return factory;

        function getMapInstance(options) {
            return new _MapConstructor(options);
        }


        function _MapConstructor(options) {
            /**
             * Guarantee "new" instance
             */
            if (!(this instanceof _MapConstructor)) {
                return new _MapConstructor(options);
            }

            options = options || {};
            var _id = options.id || 'map';
            var _zoomLevel = options.zoomLevel || 2;
            var _resultsOptions = options.results || {};
            var _wrapX = options.wrapX || false;
            var _infoTag = options.infoTag || 'info';



            // The actual ol.Map object that manipulates the DOM
            var _map = undefined;

            // Run on construction
            _initialize();

            // The working MapInstance object
            var mapinstance = {};

            return mapinstance;

            function setTarget(target) {
                _map.setTarget(target);
            }

            /**
             * Private Methods to _MapInstance
             */
            function _initialize() {
                _map =  new ol.Map({
                    target: _id,
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    view: new ol.View({
                        center: ol.proj.fromLonLat([37.41, 8.82]),
                        zoom: 4
                    })
                  });
                }
        }
    }
})();

---

通过在我的地图容器上设置一个设置的高度，解决了这个问题。看起来它不再只使用css中设置的最小/最大高度进行渲染。

OL和angularjs是完全不相关的。我知道这一点。示例OL在不在angular.js框架中但不使用框架时提供工作，因此我想知道是否存在某种不兼容或是否已测试。感谢您发布此解决方案，因为它不明显。至于OpenLayers做出这样的改变导致它崩溃-严重的WTF？

(function () {
    'use strict';
    /* global ol, angular */

    angular.module('common').factory('MapFactory', MapFactory);

    MapFactory.$inject = [];

    function MapFactory() {

        var factory = {
            getMapInstance: getMapInstance
        };
        return factory;

        function getMapInstance(options) {
            return new _MapConstructor(options);
        }


        function _MapConstructor(options) {
            /**
             * Guarantee "new" instance
             */
            if (!(this instanceof _MapConstructor)) {
                return new _MapConstructor(options);
            }

            options = options || {};
            var _id = options.id || 'map';
            var _zoomLevel = options.zoomLevel || 2;
            var _resultsOptions = options.results || {};
            var _wrapX = options.wrapX || false;
            var _infoTag = options.infoTag || 'info';



            // The actual ol.Map object that manipulates the DOM
            var _map = undefined;

            // Run on construction
            _initialize();

            // The working MapInstance object
            var mapinstance = {};

            return mapinstance;

            function setTarget(target) {
                _map.setTarget(target);
            }

            /**
             * Private Methods to _MapInstance
             */
            function _initialize() {
                _map =  new ol.Map({
                    target: _id,
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    view: new ol.View({
                        center: ol.proj.fromLonLat([37.41, 8.82]),
                        zoom: 4
                    })
                  });
                }
        }
    }
})();