@geoscene/geoscene-leaflet-cluster

3.0.2 • Public • Published

GeoScene Leaflet Cluster

启用可视化 GeoScene Feature Services 聚合功能可以使用 L.MarkerCluster Leaflet 插件.

例如

这里有一个简单的示例让你快速开始。只需更改路径以指向适当的库

Demo

<!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 Leaflet L.MarkerCluster

许可

易智瑞信息技术有限公司版权所有 © 2023 并保留所有权利。发行于中华人民共和国。

本材料在 GeoScene 主许可协议(MLA)下许可使用,并受该协议条款的约束。 只要遵守主许可协议中的条款并包括此版权声明,您即可在不进行修改的情况下 重新分发和使用这些代码。

查看 https://links.geoscene.cn/legal/GeoScene_EULA.pdf 了解使用限制

Package Sidebar

Install

npm i @geoscene/geoscene-leaflet-cluster

Weekly Downloads

0

Version

3.0.2

License

none

Unpacked Size

1.5 MB

Total Files

16

Last publish

Collaborators

  • evenboy
  • geoscenedev