Question

在我的应用中，ol-ext有问题：地图控制栏。它没有显示在地图上，我也不明白为什么。这是我的代码：

// Main control bar
var mainbar = new ol.control.Bar();

/* Standard Controls */
mainbar.addControl (new ol.control.ZoomToExtent({  extent: [ 265971,6243397 , 273148,6250665 ] }));
mainbar.addControl (new ol.control.Rotate());
mainbar.addControl (new ol.control.FullScreen());
//mainbar.setPosition('bottom-right');

this.map.addControl(mainbar);

我还在我的load.js文件中添加了 addScriptFile（'// viglino.github.io/ol-ext/dist/ol-ext.js'）;

如果我这样更改最后一行： this.map.addControl（this.mainbar）; 我有以下错误列表：

Uncaught TypeError: Cannot read property 'setMap' of undefined
    at ol.Map.<anonymous> (ol-debug.js:17839)
    at ol.Collection.boundListener (ol-debug.js:7277)
    at ol.Collection.ol.events.EventTarget.dispatchEvent (ol-debug.js:7697)
    at ol.Collection.insertAt (ol-debug.js:8341)
    at ol.Collection.push (ol-debug.js:8368)
    at ol.Map.ol.PluggableMap.addControl (ol-debug.js:17908)
    at constructor.initMap (Map.js:219)
    at constructor.afterrender (BaseMap.js:275)
    at constructor.fire (ext-all-debug.js:20731)
    at constructor.doFireEvent (ext-all-debug.js:21700)

Answer 1

我找到了解决方案，实际上，它真的很愚蠢，对不起。我将最后一行保留为 this.map.addControl（mainbar）; ，然后我必须在load.js文件中添加以下行：

addStyleFile（'// viglino.github.io/ol-ext/dist/ol-ext.css'）;

所以现在看起来像这样：

addStyleFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol.css');
    if (debugMode) {
        addScriptFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol-debug.js');
        addScriptFile('//viglino.github.io/ol-ext/dist/ol-ext.js');
        addStyleFile('//viglino.github.io/ol-ext/dist/ol-ext.css');
    } else {
        addScriptFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol.js');
        addScriptFile('//viglino.github.io/ol-ext/dist/ol-ext.js');
        addStyleFile('//viglino.github.io/ol-ext/dist/ol-ext.css');
    }

ol-ext：地图控制栏未显示在地图上

1 个答案: