如何集成openlayers 3转换扩展

时间:2017-07-02 17:35:10

标签: typescript openlayers-3 angular-openlayers

我正在开发一个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");

但是我收到以下错误:

  

ERROR TypeError:ol.interaction.Transform不是构造函数

  

未捕获的ReferenceError:ol未定义

如何正确包含/整合此资源?

3 个答案:

答案 0 :(得分:3)

let ol = require("openlayers");

这意味着 ol 不在全球范围内,因此 transforminteraction 无法扩展。

查看插件代码,您应该能够将其包装在

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

这会将 ol 放入功能范围。

然后你可以通过传入 ol 作为参数来扩展它。 e.g。

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

答案 1 :(得分:0)

您可以将“transforminteraction.js”代码包含在浏览器将与HTML文档一起下载的单独文件中。 从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

答案 2 :(得分:0)

我在我的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'); 
}