JavaScript中传单杂食csv数据的图层组和控件_Javascript_Csv_Leaflet

JavaScript中传单杂食csv数据的图层组和控件

javascript csv leaflet

JavaScript中传单杂食csv数据的图层组和控件,javascript,csv,leaflet,Javascript,Csv,Leaflet,我将按照本手册的内容，使用以下命令为一组csv数据应用图层控制。虽然我成功地复制了一个映射（），但我没有太多的运气添加图标作为图层组来控制它，如图所示这就是我迄今为止所尝试的： <!DOCTYPE html> <html> <head> <title>leaflet-map-csv</title> <meta name="viewport" content="width=device-width, initial-sca

我将按照本手册的内容，使用以下命令为一组csv数据应用图层控制。虽然我成功地复制了一个映射（），但我没有太多的运气添加图标作为图层组来控制它，如图所示

这就是我迄今为止所尝试的：

<!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>


单张地图
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；右侧：0；左侧：0；}
var map=L.map（'map'{
中间：[41.77，-72.69]，
缩放：8，
滚轮缩放：对，
图层：[灰度]
});
var灰度=L.tileLayer（'https://cartodb-basemaps-{s} .global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'{
属性：'©；，©；'}）.addTo（映射）；
变量基本映射={
“灰度”：灰度
};
var overlayMaps={
“城市”：大学
};
var customLayer=L.geoJson（空{
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties.Title）；
}
});
var colleges=杂食性.csv（'https://raw.githubusercontent.com/JackDougherty/leaflet-map-csv/master/data.csv，空，自定义层）
.on（'ready'，function（）{
map.fitBounds（colleges.getBounds（））；
}).addTo（地图）；
var cities=L.layerGroup（[customLayer]）；
L.控制。图层（底图、覆盖图）。添加到（地图）；

您需要执行代码，以便在on（'ready'）函数中创建控制层：

var mbAttr='Map data©；贡献者，'+
', ' +
“图像”，
姆布尔https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbndhrqcmz3n3gifq.rjfig214ariislb6b5aw'；
var灰度=L.tileLayer（mbUrl{
id:'地图盒.灯光'，
署名：mbAttr
}),
街道=L.Tillelayer（mbUrl{
id:“地图盒。街道”，
署名：mbAttr
});
var cities=L.layerGroup（）；
var map=L.map（'map'{
中间：[41.77，-72.69]，
缩放：8，
滚轮缩放：错误，
图层：[灰度，城市]
});
//显示带有灯光特征和标签的Carto底图分幅
L.tileLayer（'https://cartodb-basemaps-{s} .global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'{
属性：'©；，©；'
}).addTo（地图）；
L.tileLayer（'https://stamen-tiles.a.ssl.fastly.net/terrain/{z} /{x}/{y}.png'{
属性：“地图平铺依据，在下方。数据依据，在下方。”
});
var customLayer=L.geoJson（空{
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties.Title）；
}
});
var runLayer=omnivore.csv（'https://raw.githubusercontent.com/JackDougherty/leaflet-map-csv/master/data.csv，空，自定义层）
.on（'ready'，function（）{
for（自定义层中的var键。\u层）{
customLayer.\u layers[key].addTo（城市）；
}
fitBounds（runLayer.getBounds（））；
变量基本映射={
“灰度”：灰度，
“街道”：街道
};
var overlayMaps={
“城市”：城市
};
L.控制。图层（底图、覆盖图）。添加到（地图）；
})
.addTo（地图）
#地图{
高度：400px；
}

是否要在右上角显示图层图标，以便切换标记？是的，那太好了！谢谢我将在星期一查看！