Javascript 如何让标记簇组处理我的 csv 数据 (传单.功能组.子组)

发布于07月07日

我正在try 使标记簇工作，以便当我打开每一层时，标记簇相加，当我关闭每一层时标记簇相减.

当我不使用层的时候，我让标记集群工作，但现在我不确定该做什么.我见过人们谈论L.FeatureGroup.subGroup，但我真的不知道如何将它应用到我的代码中.

我是新来的传单，只是需要一些指导，我应该做什么，请.

Here's what it looks like when all layers are on. Note how the markers are not in the cluster groups:

以下是我的代码:

var map = L.map('map', {
      center: [34.098907, -118.327759],
      zoom: 9,
      tap: false
    });

    var light = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
    }).addTo(map);

    var terrain = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', {
      attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
    });

    var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
      maxZoom: 20,
      subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    });


    var baseLayers = {
      "Carto Light Basemap": light,
      "Stamen Terrain Basemap": terrain,
      "Satelite Basemap": googleSat,
    };

    L.control.layers(baseLayers).addTo(map)


    var engineerLayers = {}; // Create an object to hold the engineer layers

    var controlLayers = L.control.layers(null, engineerLayers, {
      position: "bottomleft",
      collapsed: false
    }).addTo(map);

 

    var markers = L.markerClusterGroup();

    $.get('./data.csv', function (csvString) {
      var data = Papa.parse(csvString, { header: true, dynamicTyping: true }).data;

      // Loop through the data and create layers and markers for each engineer
      //***** MAKE SURE CSV FILE DOES NOT HAVE EXTRA LINES OF SPACE OR ELSE AN UNDEFINED LAYER WILL APPEAR*******///
      
      for (var i in data) {
        var row = data[i];
        var marker;
        var engineer = row.Engineer;

        if (!(engineer in engineerLayers)) {
          engineerLayers[engineer] = L.featureGroup();
          controlLayers.addOverlay(engineerLayers[engineer], engineer);
        }

        marker = L.circleMarker([row.Latitude, row.Longitude], {
          radius: 10,
          stroke: true,
          color: getColor(engineer),
          opacity: 1,
          weight: 1,
          fill: true,
          fillColor: getColor(engineer),
          fillOpacity: 0.5
        }).bindPopup('Plan File: ' + row.PFN + '</br>' + 'Engineer: ' + row.Engineer);
        markers.addLayer(marker);
        ;

        markers.addLayer(marker);
        marker.addTo(engineerLayers[engineer]);
      }

      map.addLayer(markers);
    });

    //must change these if engineers ever change
    function getColor(engineer) {
      switch (engineer) {
        case 'Mike':
          return 'green';
        case 'Salar':
          return 'blue';
        case 'Diego':
          return 'purple';
        case 'Saul':
          return 'orange';
        default:
          return 'black';
      }
    }

这是当所有层都关闭时的样子.请注意，即使在禁用层的情况下也会有簇:

最新情况:

所以，我更新了我的代码，现在每个层都有它自己的标记簇.

我想不明白的是，如何将这些子组中的每一个都变成一个父组.我做错了什么？

<!DOCTYPE html>
<html>
<head>
  <title>leaflet-map-csv</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="style.css">

  <!-- For the search box -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />

  <!-- Load Leaflet code library - see updates at http://leafletjs.com/download.html -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css" />

  <!-- Position the map with Cascading Style Sheet (CSS) -->
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
    
    .leaflet-bottom.leaflet-left {
      left: 10px;
      bottom: 10px;
    }
  </style>

</head>
<body>

  <!-- Insert HTML division tag to layout the map -->
  <div id="map"></div>

  <!-- Insert Javascript (.js) code to create the map -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

  <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
  <script src="https://unpkg.com/leaflet.featuregroup.subgroup/dist/leaflet.featuregroup.subgroup-src.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>

  <!-- Insert JavaScript code to create the map and add engineer layers -->
  <script>
    var map = L.map('map', {
      center: [34.098907, -118.327759],
      zoom: 9,
      tap: false
    });

    var light = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
    }).addTo(map);

    var terrain = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', {
      attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
    });

    var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
      maxZoom: 20,
      subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    });

    var baseLayers = {
      "Carto Light Basemap": light,
      "Stamen Terrain Basemap": terrain,
      "Satellite Basemap": googleSat,
    };

    var controlLayers = L.control.layers(baseLayers);

    var engineerLayers = {}; // Create an object to hold the engineer marker cluster groups

    $.get('./data.csv', function (csvString) {
      var data = Papa.parse(csvString, {
        header: true,
        dynamicTyping: true
      }).data;

      // Create a parent feature group
      var parentGroup = L.featureGroup.subGroup(null, []);

      // Loop through the data and create marker clusters for each engineer
      for (var i = 0; i < data.length; i++) {
        var row = data[i];
        var marker;
        var engineer = row.Engineer;

        if (!(engineer in engineerLayers)) {
          engineerLayers[engineer] = L.markerClusterGroup({
            spiderfyOnMaxZoom: false,
            showCoverageOnHover: true,
            zoomToBoundsOnClick: true
          });

          // Add the child layers to the parent group
          parentGroup.addLayer(engineerLayers[engineer]);
          controlLayers.addOverlay(engineerLayers[engineer], engineer);
        }

        marker = L.circleMarker([row.Latitude, row.Longitude], {
          radius: 10,
          stroke: true,
          color: getColor(engineer),
          opacity: 1,
          weight: 1,
          fill: true,
          fillColor: getColor(engineer),
          fillOpacity: 0.5
        }).bindPopup('Plan File: ' + row.PFN + '</br>' + 'Engineer: ' + row.Engineer);

        engineerLayers[engineer].addLayer(marker);
      }

      // Add the parent group to the map
      parentGroup.addTo(map);
      controlLayers.addTo(map);
    });

    // Add event listeners to handle showing and hiding markers and clusters
    controlLayers.on('overlayadd', function (eventLayer) {
      var engineer = eventLayer.name;
      if (engineer in engineerLayers) {
        engineerLayers[engineer].addTo(map);
      }
    });

    controlLayers.on('overlayremove', function (eventLayer) {
      var engineer = eventLayer.name;
      if (engineer in engineerLayers) {
        engineerLayers[engineer].removeFrom(map);
      }
    });

    // Must change these if engineers ever change
    function getColor(engineer) {
      switch (engineer) {
        case 'Mike':
          return 'green';
        case 'Salar':
          return 'blue';
        case 'Diego':
          return 'purple';
        case 'Saul':
          return 'orange';
        default:
          return 'black';
      }
    }
  </script>
</body>
</html>

Javascript 如何让标记簇组处理我的 csv 数据 (传单.功能组.子组)

推荐答案

Javascript相关问答推荐

我可以获取所有包含@的超链接，然后在新选项卡中打开它们吗？

原型链中的同一财产怎么会有不同的价值？

使用JavaScript更改json值顺序

设置默认值后动态更新japbox或调色板

使用JavaScript重命名对象数组中的键

ReactJS中的material UI自动完成类别

角色 map 集/spritebook动画，用户输入不停止在键上相位器3

使用javascript将Plotly Expandable Sparkline转换为HighCharter Plot在bslib卡中

React Code不在装载上渲染数据，但在渲染上工作

如何使用JavaScript将文本插入空div

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

对网格项目进行垂直排序不起作用

从页面到应用程序(NextJS)：REST.STATUS不是一个函数

在css中放置所需 colored颜色以填充图像的透明区域

回溯替代方式

在JS中动态创建对象，并将其追加到HTML表中

如何用javascript更改元素的宽度和高度？

在Vercel中部署Next.js项目时获取`ReferenceError：未定义文档`

如何通过Axios在GraphQL查询中发送数组

更改agGRID/Reaction中的单元格格式