编写 OpenLayers 4 javascript 插件的好模式

Question

我正在编写一个 OpenLayers 4 插件，并且很乐意遵循一些现有 OL 插件库的方法。是否有 OpenLayers 4 插件的 recommended/good 质量示例，我可以在其上建模我的代码？位于主 OL 存储库之外的代码。

谢谢！

Answer 1

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

Answer 2

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

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

• src/ol-popup.js 中的源 JavaScript 从 ol 包中导入它的依赖项并导出单个 Popup class.
• src/ol-popup.js 由 rollup 转换（见 build script in package.json and rollup.config.js。
  • Rollup 将代码转换为纯 JS 并将所有内容包装在 UMD 中，这允许您通过应用程序中的 require 或 es6 import 的脚本标签直接在浏览器中使用插件。转换后的代码在 dist 目录中。
  • rollup.config.js 中有趣的部分是：
    • 告诉 Rollup 将 ol 模块视为构建外部模块的 external 函数（因此它们不会包含在 dist/ol-popup.js 中）
    • globals 对象将 es6 模块名称映射到完整托管 OpenLayers 构建中的 "dotted" 等价物。

Answer 3

官方 third party library 页面上有几个插件。

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

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