Openlayers 3:交互DragBox无法正常工作

时间:2017-05-02 14:33:17

标签: javascript openlayers openlayers-3

我有一个OpenLayers v3的错误(无论它在V3中的版本)。我尝试将ol.interaction.DragBox添加到我的地图中,但是当我开始拖动时,ol.js崩溃并显示消息:

  

ol.js:201 Uncaught TypeError:无法读取null的属性'f'

     

在Array。 (ol.js:201)      在zm(ol.js:245)      在bq(ol.js:370)      at aq.ve(ol.js:371)      在W.l.Kn(ol.js:453)      在oi.f(ol.js:142)

这与v3.9.0一起使用时 这是代码:

var vectorSource = new ol.source.Vector({
        url: 'https://openlayers.org/en/v4.1.0/examples/data/geojson/countries.geojson',
        format: new ol.format.GeoJSON()
      });

var map = new ol.Map({
   target: 'map',
   layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Vector({
            source: vectorSource
          })
   ],
   view: new ol.View({
     center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
     zoom: 4
   })
});

var dragBox = new ol.interaction.DragBox({
  condition: ol.events.condition.platformModifierKeyOnly
});

map.addInteraction(dragBox);

在这里你可以找到一个小提琴:http://jsfiddle.net/3svztkot/2/

在这里你可以找到v4.1.0的小提琴,代码完全相同,但这里完全可以运行! :http://jsfiddle.net/872cuk52/2/

是否有一些已知的错误?我搜索过像我一样的先前案例,但没有成功。谢谢你的帮助!

1 个答案:

答案 0 :(得分:2)

好的,我发现了这个问题。这是问题的“原因”,也许以后会对其他人有用。

在Openlayers v3中,您必须在交互中设置样式,如下所示:

var dragBox = new ol.interaction.DragBox({
    condition: ol.events.condition.shiftKeyOnly,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: [0, 0, 255, 1]
        })
    })
});

然后,它有效。似乎OpenLayers 4.1.0至少定义了交互的默认样式,因此它不会崩溃。