open-index/open-npm huggingface dataset:
npm package: @geoscene/geoscene-leaflet-cluster
Description: GeoScene Leaflet plugin for visualizing Feature Layers as clusters with L.markercluster.
Latest version: 3.0.2

# GeoScene Leaflet Cluster

> 启用可视化 GeoScene Feature Services 聚合功能可以使用 [L.MarkerCluster](https://github.com/Leaflet/Leaflet.markercluster) Leaflet 插件.

### 例如

这里有一个简单的示例让你快速开始。只需更改路径以指向适当的库

  <img src="./cluster-example.png" alt="Demo">

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>GeoScene Leaflet Debugging Sample</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <!-- load leaflet from node_modules -->
    <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
    <script src="../node_modules/leaflet/dist/leaflet-src.js"></script>

    <!-- load leaflet.markercluster from node_modules -->
    <script src="../node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
    <link
      rel="stylesheet"
      href="../node_modules/leaflet.markercluster/dist/MarkerCluster.css"
    />
    <link
      rel="stylesheet"
      href="../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
    />

    <!-- load esri leaflet from node_modules -->
    <script src="../node_modules/@geoscene/leaflet/dist/geoscene-leaflet.js"></script>

    <!-- load clustered feature layer source for debugging -->
    <script src="../dist/geoscene-leaflet-cluster-debug.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }

      #info-pane {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 400;
        padding: 1em;
        background: white;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="info-pane" class="leaflet-bar">
      <label> sample application for debugging </label>
    </div>

    <script>
      /*
    make a copy of this file in the same folder if you'd like git to ignore your local changes
    */

      var map = L.map("map").setView([45.526, -122.667], 6);

      L.geoscene.basemapLayer("tianditu-vector").addTo(map);
      L.geoscene.basemapLayer("tianditu-vector-annotion").addTo(map);

      var clusterLayer = L.geoscene.Cluster.featureLayer({
        url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",
      }).addTo(map);

      clusterLayer.bindPopup(function (layer) {
        return L.Util.template("<p>{areaname}</p>", layer.feature.properties);
      });
    </script>
  </body>
</html>
```

### 资源

[GeoScene Maps SDK for JavaScript](https://doc.geoscene.cn/javascript/)
[Leaflet](http://leafletjs.com/)
[L.MarkerCluster](https://github.com/Leaflet/Leaflet.markercluster)

### 许可

易智瑞信息技术有限公司版权所有 © 2023 并保留所有权利。发行于中华人民共和国。

本材料在 GeoScene 主许可协议（MLA）下许可使用，并受该协议条款的约束。 只要遵守主许可协议中的条款并包括此版权声明，您即可在不进行修改的情况下 重新分发和使用这些代码。

查看 https://links.geoscene.cn/legal/GeoScene_EULA.pdf 了解使用限制