在 leaflet 地图上显示 JSON 数据

Question

在 leaflet 地图上显示 JSON 数据

javascriptjsonleafletmarkers

3

我希望创建一个Web应用程序，该应用程序将显示站点上可用车位和自行车的数量。

我有一个提供实时数据的开放式API。- API HERE 我正在使用Leaflet Maps地图。

我目前已经编写了2个脚本。

leafletmap.js

这个脚本展示了一个地图，中心位置在挪威的奥斯陆。

var mymap = L.map('mapid').setView([59.9139, 10.7522], 13); // This line is lan,lat for location, "13" is a zoom parameter.

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        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-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

    

    L.circle([59.9139, 10.7522], 60, { // This is what I want to use as bike station 
location
        color: 'blue',
        fillColor: 'blue',
        fillOpacity: 0.5
    }).addTo(mymap).bindPopup("I am a circle.");

这是一个从API接收数据的代码。

api.js

const GbfsClient = require('gbfs-client');
const gbfsClient = new GbfsClient('https://gbfs.urbansharing.com/oslobysykkel.no/');

gbfsClient.stationInfo()
    .then(osloStatus => console.log(osloStatus));

我希望在地图上显示自行车站点位置。

这是我需要使用的端点 - https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json 目标：更改代码中硬编码的部分 >

L.circle([*lat and lon to be inserted here*], 60, {
        color: 'blue',
        fillColor: 'blue',
        fillOpacity: 0.5
    }).addTo(mymap).bindPopup("**Name of bike station here.**");

请将终端点的响应更改为“自行车站的纬度、经度和名称”。

JSON响应>

{
  "last_updated": 1553592653,
  "data": {
    "stations": [
      {  
        "station_id":"627",
        "name":"Skøyen Stasjon",
        "address":"Skøyen Stasjon",
        "lat":59.9226729,
        "lon":10.6788129,
        "capacity":20
      },
      {  
        "station_id":"623",
        "name":"7 Juni Plassen",
        "address":"7 Juni Plassen",
        "lat":59.9150596,
        "lon":10.7312715,
        "capacity":15
      },
      {  
        "station_id":"610",
        "name":"Sotahjørnet",
        "address":"Sotahjørnet",
        "lat":59.9099822,
        "lon":10.7914482,
        "capacity":20
      }
    ]
  }
}

编辑1

我意识到我写了很多文字，有点乱。简而言之，我想在我的地图上显示自行车站的位置（我从API中获得了纬度和经度位置）。我如何使用API来显示它。有150多个位置，手动添加所有位置不是一个好办法，而且未来可能会添加/删除一些位置。

对于位置标记，我硬编码了一个红色圆形。

- Hexycode

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kboul · Accepted Answer

您可以通过使用API来显示它们，只需像下面这样获取数据，然后迭代它们并显示带有弹出信息的标记。由于您有数百个标记，最好使用preferCanvas: true选项以避免在渲染标记时可能出现的浏览器性能问题。

fetch("https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json")
  .then((response) => response.json())
  .then((responseData) => {
    console.log(responseData.data);
    const stations = responseData.data.stations;

    const layerGroup = L.featureGroup().addTo(map);

    stations.forEach(({ lat, lon, name, address }) => {
      layerGroup.addLayer(
        L.marker([lat, lon], { icon }).bindPopup(
          `Name: ${name}, Address: ${address}`
        )
      );
    });

    map.fitBounds(layerGroup.getBounds());
  });

Demo