Question

我正在遵循本传单tutorial，以使用omnivore.csv为一组csv数据应用层控制。尽管我成功地复制了一个looks like this的地图，但是我并没有多大的运气像here那样将图标添加为图层组来控制它。

这是我到目前为止尝试过的：

<!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" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
  <style>
  body { margin:0; padding:0; }
  #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>

</head>
<body>

  <div id="map"></div>

    <script>

  var map = L.map('map', {
    center: [41.77, -72.69],
    zoom: 8,  
    scrollWheelZoom: true,
    layers: [grayscale]
  });

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

  var baseMaps = {
      "Grayscale": grayscale
  };

  var overlayMaps = {
      "Cities": colleges
  };

  var customLayer = L.geoJson(null, {
      onEachFeature: function(feature, layer) {
      layer.bindPopup(feature.properties.Title);
      }
  });

  var colleges = omnivore.csv('https://raw.githubusercontent.com/JackDougherty/leaflet-map-csv/master/data.csv', null, customLayer)
      .on('ready', function() {
          map.fitBounds(colleges.getBounds());
      }).addTo(map);


  var cities = L.layerGroup([customLayer]);

  L.control.layers(baseMaps, overlayMaps).addTo(map);


  </script>
</body>
</html>

Answer 1

您需要执行用于在on（'ready'）函数内部创建控制层的代码：

var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var grayscale = L.tileLayer(mbUrl, {
    id: 'mapbox.light',
    attribution: mbAttr
  }),
  streets = L.tileLayer(mbUrl, {
    id: 'mapbox.streets',
    attribution: mbAttr
  });

var cities = L.layerGroup();

var map = L.map('map', {
  center: [41.77, -72.69],
  zoom: 8,
  scrollWheelZoom: false,
  layers: [grayscale, cities]
});

// display Carto basemap tiles with light features and labels
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(map);

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 customLayer = L.geoJson(null, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup(feature.properties.Title);
  }
});
var runLayer = omnivore.csv('https://raw.githubusercontent.com/JackDougherty/leaflet-map-csv/master/data.csv', null, customLayer)
  .on('ready', function() {
    for (var key in customLayer._layers) {
      customLayer._layers[key].addTo(cities);
    }


    map.fitBounds(runLayer.getBounds());

    var baseMaps = {
      "Grayscale": grayscale,
      "Streets": streets
    };

    var overlayMaps = {
      "Cities": cities
    };

    L.control.layers(baseMaps, overlayMaps).addTo(map);
  })
  .addTo(map);

#map {
  height: 400px;
}

<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css">

<script src='https://unpkg.com/leaflet@1.3.3/dist/leaflet.js
'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>


<div id="map"></div>

JavaScript中的传单Omnivore csv数据的图层组和控制

1 个答案: