个人中心
gpt4 book ai didi

javascript - JavaScript 中 Leaflet Omnivore csv 数据的层组和控制

转载 作者：行者123 更新时间：2023-11-30 20:10:46 37 4
gpt4 key购买 nike

我正在关注这份传单 tutorial使用 omnivore.csv 对一组 csv 数据应用图层控制.虽然我成功地复制了一张 map ( 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>

最佳答案

您需要在 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 - JavaScript 中 Leaflet Omnivore csv 数据的层组和控制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52447521/

37 4 0
文章推荐： javascript - 动态更改 Google Charts 中的 View 列名称
文章推荐： javascript - 在 Vue 中使用 D3/没有选择器？
文章推荐： javascript - IDB事务 : onabort vs onerror
文章推荐： javascript - jQuery 遍历 DOM 元素并删除
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com