时间戳

首页 > 解决方案 > 如何使用 OpenLayers 6.5 示例？

javascript - 如何使用 OpenLayers 6.5 示例？

问题描述

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

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

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

然后，我从这里下载了 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 = [];
我的问题是：

标签： javascripthtmlcssopenlayers

解决方案

该过程在入门页面中进行了描述。

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

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

要记住两件事：

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

推荐阅读