时间戳

首页 > 解决方案 > Leaflet JS中的多个圆圈

javascript - Leaflet JS中的多个圆圈

问题描述

我正在尝试根据一组坐标在传单地图上绘制点。然而，虽然地图出现了，但目前还没有点。我认为该L.latLng函数出了点问题，因为尽管明确定义了它，但它在终端中显示为 null。

谁能提供任何理由说明为什么会发生这种情况以及我做错了什么？

代码：

    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
    </head>

<body>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
   integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
   crossorigin=""></script>

    <div id="mapid"></div>
    <script>

    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 5,
      attribution: '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>',
      id: 'mapbox.streets'
    }).addTo(mymap);

      var latLong = L.latLng([{"lat": 23.59, "lng": 85.56}, {"lat": 9.19, "lng": 92.77}, {"lat": -4.18, "lng": 37.83}, {"lat": 4.73, "lng": 11.1}, {"lat": null, "lng": null}, {"lat": 5.49, "lng": 10.85}, {"lat": 1.4, "lng": 9.51}, {"lat": -10.61, "lng": 29.3}, {"lat": -9.27, "lng": 35.04}, {"lat": -6.22, "lng": 30.59}, {"lat": 1.5, "lng": 30.03}, {"lat": 1.17, "lng": 28.76}, {"lat": null, "lng": null}, {"lat": 1.71, "lng": 15.95}, {"lat": 2.2, "lng": 22.61}, {"lat": 0.679, "lng": 34.77}])

      var circle = L.circle(latLong, {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5,
      radius: 5000000
      }).addTo(mymap);
</script>
</body>

标签： javascriptleaflet

解决方案

将圆绘制到坐标的方式存在两个问题。我将同时解决这两个问题，因此您将了解如何纠正此问题。

设置坐标

该.latLng功能可以采取：

  • 3 个数字作为参数
  • 一个包含三个数字的数组
  • 一个对象 {'lat': 2, 'lng', 'alt' 2}

在数组或对象中，您可以提供以度为单位的纬度、以度为单位的经度以及可选的以米为单位的高度。 资源

画一个圆

使用以下语法。请注意，圆仅采用一个坐标而不是一组坐标。（文档）

.circle({'lat': 50.5, 'lng': 30.5}, {radius: 200}).addTo(map);

知道了这一点，我们需要创建一个坐标数组。然后，遍历它们并为每个点画一个圆。这是执行此操作的代码。

var myMap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 5,
  attribution: '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>',
  id: 'mapbox.streets'
}).addTo(myMap);

var latLong = [{
  "lat": 23.59,
  "lng": 85.56
}, {
  "lat": 9.19,
  "lng": 92.77
}, {
  "lat": -4.18,
  "lng": 37.83
}, {
  "lat": 4.73,
  "lng": 11.1
}, {
  "lat": null,
  "lng": null
}, {
  "lat": 5.49,
  "lng": 10.85
}, {
  "lat": 1.4,
  "lng": 9.51
}, {
  "lat": -10.61,
  "lng": 29.3
}, {
  "lat": -9.27,
  "lng": 35.04
}, {
  "lat": -6.22,
  "lng": 30.59
}, {
  "lat": 1.5,
  "lng": 30.03
}, {
  "lat": 1.17,
  "lng": 28.76
}, {
  "lat": null,
  "lng": null
}, {
  "lat": 1.71,
  "lng": 15.95
}, {
  "lat": 2.2,
  "lng": 22.61
}, {
  "lat": 0.679,
  "lng": 34.77
}];

// Here's where you iterate over the array of coordinate objects.
latLong.forEach(function(coord) {
  var circle = L.circle(coord, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 50000
  }).addTo(myMap);
});

// Set the view to where some of the circles are drawn.
myMap.panTo([2, 22]);
#mapid {
  height: 180px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>

<div id="mapid"></div>

推荐阅读