如何集成openlayers 3转换扩展

Question

我正在开发一个openlayers 3项目，使用typescript开发，因此：

let ol = require("openlayers");

我想使用转换扩展插件，它不在NPM上发布（http://viglino.github.io/ol3-ext/interaction/transforminteraction.js）

我尝试了以下方法：

let ol = require("openlayers");
require("<path>/ol/transforminteraction");

但是我收到以下错误：

错误TypeError：ol.interaction.Transform不是构造函数

和

未捕获的ReferenceError：ol未定义

我如何才能正确包含/整合此资源？

Answer 1

let ol = require("openlayers");

这意味着ol不在全球范围内，因此无法通过转换来扩展。

看一下插件代码，你应该可以把它包装成一个

module.exports = function(ol) {
   ...
}

这将ol纳入功能范围。

然后你可以通过传入ol作为参数来扩展它来使用它。例如

let ol = require("openlayers");
require("<path>/ol/transforminteraction")(ol);

Answer 2

您可以在浏览器将与HTML文档一起下载的单独文件中包含“transforminteraction.js”代码。从html文件中剪切JS代码，并将其粘贴到“transforminteraction.js”文件中，不要忘记window.onload = function() { ...your code js + transforminteraction.js }。还检查：

克隆OL3-ext的存储库：https://github.com/Viglino/ol3-ext

要么：

https://github.com/Rep1ay/openLayer.git

Answer 3

我解决了这个问题，在我的load.js文件中添加：

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