如何集成 openlayers 3 转换扩展答案

【问题标题】：How to integrate openlayers 3 transform extension如何集成 openlayers 3 转换扩展
【发布时间】：2017-07-02 17:35:09
【问题描述】：

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

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 不是构造函数

和

Uncaught ReferenceError: ol is not defined

我如何才能正确地包含/集成此资源？

【问题讨论】：

标签： typescript openlayers-3 angular-openlayers

【解决方案1】：

let ol = require("openlayers");

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

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

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

这会将 ol 放入函数范围。

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

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

【讨论】：

【解决方案2】：

您可以将“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

【讨论】：

【解决方案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'); 
}

【讨论】：