如何使用现有传单地图安装 LeafletJS 插件

Question

我有一张现有的传单地图。可以下载here

我不确定如何将这个项目放入 fiddle 以便于使用，所以希望这个 link 就足够了。

Here 是我试图与现有地图一起使用的插件。（我正在尝试使用高级控件）

有一些关于如何安装它的很好的文档，但我不能让它正常工作。我试过包含 dist 文件夹。

需要link编辑什么，那么如何用新控件替换现有控件？我将 link 和新的控制代码留在我的 html 中，以便更容易看到我的开头。

放置什么组和标记并不重要。因为我稍后可以更改它们，所以我只是想让一些东西与我目前在那里的地图一起工作。

Here 和我目前的 html 是 fiddle。希望有助于简化代码共享。

这是 link 示例 html

<!DOCTYPE html>
<html>
<head>
  <title>Advanced Example</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" />
  <link rel="stylesheet" href="../src/leaflet.groupedlayercontrol.css" />
</head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.js"></script>
  <script src="../src/leaflet.groupedlayercontrol.js"></script>
  <script src="exampledata.js"></script>
  <script>

我当前的控制面板：

高级控制面板：

Answer 1

您需要从 GitHub 存储库下载 leaflet.groupedlayercontrol.min.js 和 leaflet.groupedlayercontrol.min.css 并将它们保存在项目中的某个位置。
对于这个例子，我选择了一个单独的“插件”文件夹。

接下来，您必须 link 您 HTML-File 的 <head> 部分中的两个文件。 project-documentation 在其示例中得到了这个错误，因为它 links non-minified 文件（[...].js 而不是 [...].min.js）。
在我的项目中，它看起来像这样：

<script src="plugins/leaflet.groupedlayercontrol.min.js"></script>
<link rel="stylesheet" href="plugins/leaflet.groupedlayercontrol.min.css"/>

要将控件添加到您的地图，请创建一个 Overlay-Group 并将 groupedLayers-Control 添加到您的地图。

// Add Markers
var bandit_encampment_1 = L.marker([-48, -55]).bindPopup('<b>Bandit Encampment</b>');
var farbane_woods_portal = L.marker([-46,-31.5]).bindPopup('<b>Farbane Woods Portal</b>');

var town_1 = L.marker([-47,-31.5]).bindPopup('<b>Stadt Alpha</b>');
var town_2 = L.marker([-48,-31.5]).bindPopup('<b>Stadt Bravo</b>');

// Group Markers
var mg_bandit_encampments = L.layerGroup([bandit_encampment_1]);
var mg_rift_portals = L.layerGroup([farbane_woods_portal]);
var mg_towns = L.layerGroup([town_1, town_2]);

// Create the Overlay-Group with your structure
var groupedOverlays = {
  "Points of Interest": {
    "Bandit Encampments" : mg_bandit_encampments,
    "Rift Portals" : mg_rift_portals,
  },
  "Geography": {
    "Towns": mg_towns
  }
};

// Add the control
L.control.groupedLayers(null, groupedOverlays).addTo(map);

我在此处提供了一个基于您的 JS-Fiddle 的工作示例：https://jsfiddle.net/8ez4nwau/

如何使用现有传单地图安装 LeafletJS 插件

How to install LeafletJS plugin with an existing leaflet map

javascript

html

css

leaflet