openlayers - OpenLayers 5 到 6:未渲染的图层
问题描述
我们正在尝试将我们的 OL5 地图迁移为 OL6 地图。当我们使用 OL6 时,地图根本不渲染,并且在 DevTools 中,如果我们为地图 div 设置高度,缩放工具和徽标显示正常,但没有图层。我们用快速启动地图替换了地图,它在 6 中不起作用,5 完全没问题。检查我们的地图对象没有显示任何问题,并且符合预期。
其他人有任何问题或解决了这个问题,或者可以提供帮助吗?谢谢!
HTML 声明:
<div id="ephem-map" class="map-medium"></div>
控制器.js:
vm.map = MapFactory.getMapInstance({
id: 'ephem-map',
zoomLevel: 2
});
地图工厂:
(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 中设置最小/最大高度进行渲染。
推荐阅读
- flutter - 颤动中下拉按钮的问题
- python - 为什么石灰表格方法会使用数据框生成类型错误?
- wpf - 如何更改默认 RadioRadioButton 的前景
- javascript - 隐藏/禁用客户端的 Firebase 功能
- php - PDO 定义()访问被拒绝
- c - 如何做一个矩阵指针数组?
- jquery - Jquery Slim Scroll 和 Angular JS,如何修复 div 底部的滚动?
- javascript - 文件上传 POST 请求时出现 JQuery 500 错误
- timezone - 如何使用 Quartz 调度程序在特定时区的特定时间执行一次作业
- javascript - 如何使用 Selenium Webdriver JavaScript 移动鼠标指针并单击?