Question

OpenLayers 5.3

更新：请在下面查看我的答案。我认为这是一个与OpenLayers根本无关的红鲱鱼问题

我在定义 但未导入 时使用相同的目标div遇到一些意外行为。

出乎意料的是，即使我没有将第二张地图导入到我的index.js中，在“地图” div中，视口仍被复制并显示了第二张地图：

maps.js

import {Map} from 'ol';

export var map0 = new Map({
  layers: some_layers,
  view: some_view,
  target: 'map'
});

export var map1 = new Map({
  layers: other_layers,
  view: someother_view,
  target: 'map'
});

index.js

import {map0 as map} from maps;
// note that map1 is NOT imported

预期的行为： 因为我只在index.js中导入了一个地图，所以我希望在该地图中只能有一个地图视口。

<div id='map'>

，并且不会包含未导入的map1。

实际行为：在地图div中，有两个视口，一个包含map0，另一个包含map1。

解决方法 在maps.js中，省略“ target”参数，然后在index.js中：

map.setTarget('map')

这是错误或预期行为，还是反映出我对进出口行为缺乏了解？

Answer 1

我相信这根本不是OpenLayers的问题。

此外，我相信我的问题甚至没有涉及根本问题。

我认为这是一个与webpack有关的问题。

我认为我需要更好地理解'TreeShaking'的概念以及webpack.config中sideEffects参数的使用。

尽管我还没有尝试过，但是我认为从下面的链接中学习应该可以帮助我解决问题：

https://webpack.js.org/guides/tree-shaking/

以上引述直接回答了我的原始问题：

请注意，我们没有从src / math.js导入square方法模块。该功能就是所谓的“死代码”，即应该丢弃的未使用的出口。

因此，即使“未使用”导出，它仍然会最终出现在webpack捆绑包中，因此，在这种情况下，它确实将第二张地图添加到了同一个div，这是经验丰富的。

当达到目标时，我将通过确认更新此答案。

对不起，误报警。

OpenLayers 5：使用同一目标定义多个地图时的多个地图视口

1 个答案: