如何使用 OpenLayers 6.5 示例？

Question

OpenLayers 社区在此页面上提供了许多示例： https://openlayers.org/en/latest/examples/

我的目标是能够理解每个示例（例如：绘制特征），然后在我自己的网站项目中使用这些技术。

问题是当我使用他们在每个示例下方提供的代码时，它不起作用

然后，我从这里下载了 ol 包： https://openlayers.org/download/

问题是每个示例都有 3 个文件：“.js”文件、“.map.js”文件和“.html”文件。（见图）

问题是“.js”文件包含一些我无法理解的代码但我认为它指的是文件夹中单独 common.js 文件中的其他函数。

(window.webpackJsonp = window.webpackJsonp || []).push([
    [29], {
        22622: function(e, n, t) {
            "use strict";
            t.r(n);
            var o, a = t(66),
                c = t(3),
                r = t(2),
                w = t(9),
                u = t(10),
                i = t(5),
                d = t(19),
                s = new i.a({
                    source: new w.b
                }),
                p = new u.a({
                    wrapX: !1
                }),
                m = new d.a({
                    source: p
                }),
                map = new c.a({
                    layers: [s, m],
                    target: "map",
                    view: new r.a({
                        center: [-11e6, 46e5],
                        zoom: 4
                    })
                }),
                l = document.getElementById("type");

            function y() {
                "None" !== l.value && (o = new a.c({
                    source: p,
                    type: l.value
                }), map.addInteraction(o))
            }
            l.onchange = function() {
                map.removeInteraction(o), y()
            }, document.getElementById("undo").addEventListener("click", (function() {
                o.removeLastPoint()
            })), y()
        }
    },
    [
        [22622, 0]
    ]
]);
//# sourceMappingURL=draw-features.js.map

问题是 common.js 文件很长，很奇怪而且很难理解它是如何工作的，请看下面的片段

!(function (t) {
  function e(e) {
    for (
      var r, a, s = e[0], h = e[1], l = e[2], u = 0, p = [];
      u < s.length;
      u++
    )
      (a = s[u]),
        Object.prototype.hasOwnProperty.call(n, a) && n[a] && p.push(n[a][0]),
        (n[a] = 0);
    for (r in h) Object.prototype.hasOwnProperty.call(h, r) && (t[r] = h[r]);
    for (c && c(e); p.length; ) p.shift()();
    return o.push.apply(o, l || []), i();
  }

  function i() {
    for (var t, e = 0; e < o.length; e++) {
      for (var i = o[e], r = !0, s = 1; s < i.length; s++) {
        var h = i[s];
        0 !== n[h] && (r = !1);
      }
      r && (o.splice(e--, 1), (t = a((a.s = i[0]))));
    }
    return t;
  }
  var r = {},
    n = {
      0: 0,
    },
    o = [];

我的问题是：

如何使用 OpenLayers 示例来制作我自己的网站
是Common.js手动创建还是自动创建
有没有办法为每个 Ol 示例获取单独的工作代码

Answer 1

getting started 页面中描述了该过程。

想法是，当开发时，您可以 import 只有您需要的模块来自 OpenLayers（以及其他库）。然后，您使用捆绑器（包裹、webpack 或其他）从整个 OL 库中提取您实际使用的模块，并将它们打包到一个新的 javascript 文件中，可选择对其进行 linting 或混淆（删除注释，将长变量重命名为单个字母等以使其更小 and/or 可读性较差）。此 JS 文件是您将在您的网站中使用的文件。

各种示例页面上显示的代码是第一步中通常使用的代码，即您必须将其捆绑并在您的网站中使用输出 JS。

要记住两件事：

仅在开发时需要节点，没有必要将它用于您的网站，也没有必要在服务器上运行它。
使用专门的教程练习一下导入、捆绑、发布并了解可能的配置是个好主意，因为 OL 教程假定 reader 熟悉这些方面

如何使用 OpenLayers 6.5 示例？

How to use OpenLayers 6.5 examples?

html

javascript

css

openlayers