在传单地图上显示 json 数据

Question

我想创建一个网络应用程序，用于显示车站的可用停车位和自行车数量。

我有一个开放的 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
      }
    ]
  }
}

EDIT1

我发现我写了很多文字，有点乱。很快 - 我想在我的地图上显示自行车站的位置（我有来自 API 的纬度和局域网位置）。如何使用 API 显示它。有 150 多个位置并手动添加所有位置这不是一个交易，而且将来有可能 added/deleted。

我硬写了一个红色圆圈作为位置标记。

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());
  });

Demo

在传单地图上显示 json 数据

Displaying json data on leaflet map

javascript

json

markers

leaflet