在传单地图上显示json数据

Question

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

我有一个提供实时数据的开放 API。 - API在这里

我正在使用传单地图作为地图。

我目前已经制作了2个脚本。

传单图.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.**");

响应端点 > Lat、lan、自行车站名称的响应而更改。

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 多个位置，手动添加所有位置并不是一笔交易，将来也有可能添加/删除某些内容。

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

Answer 1

您可以使用 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());
  });

演示