问编写OpenLayers 4 javascript插件的良好模式

EN

我维护了几个OpenLayers插件，我最近更新了这些插件，使其与ol包兼容。我发现使用https://rollupjs.org/的效果很好。

这两个插件都很小，但是以https://github.com/walkermatt/ol-popup的源代码为例。要注意的事情：

• src/ol-popup.js中的源src/ol-popup.js从ol包导入它的依赖项，并导出一个Popup类。
• src/ol-popup.js由rollup转换(参见package.json和rollup.config.js )。
  • Rollup将代码转换成普通的JS，并将所有内容封装在UMD中，这允许您通过应用程序中的require或es6 import直接在浏览器中使用插件。转换后的代码位于dist目录中。
  • rollup.config.js的有趣部分是：
    • external函数，它告诉汇总将ol模块作为构建的外部处理(因此它们不包含在dist/ol-popup.js中)
    • globals对象将es6模块名映射到完全托管的OpenLayers构建中的“虚线”等效项。

​

​

OL扩展有很多不同交互的示例，它们都是作为单个扩展编写的：https://github.com/Viglino/ol-ext/

官方第三方图书馆页面上有几个插件。

在编写自己的插件时，有几点建议：

• OpenLayers功能可以通过多种方式进行扩展，因此没有通用模式。
• 您可以通过子类现有控件和交互来创建自定义控件和交互，或者使用插件可以提供的处理程序函数配置ol/interaction/Interaction或ol/control/Control。
• 您可以通过多种方式扩展层源，例如提供自定义的tileUrlFunction或tileLoadFunction函数。
• 您的插件可以连接到OpenLayers组件发出的众多事件中的任何一个。
• OpenLayers 4+是作为一组ES模块(https://npmjs.com/package/ol)提供的，因此您不需要担心打包。应用程序开发人员将从OpenLayers和您的插件中导入他们所需的内容。
• 只使用OpenLayers中列出的API文档特性是很好的做法。