Question

我想使用Citybik.es API（http://api.citybik.es/）在传单地图上显示数据。

如何通过JSON在地图上实现此数据？我已经从componentDidMount()内部的API中获取信息，但是我不知道将这些数据放入一张地图。

响应看起来像这样：

{
  "networks": [
{
  "company": [
    "Bike U Sp. z o.o."
  ], 
  "href": "/v2/networks/bbbike", 
  "id": "bbbike", 
  "location": {
    "city": "Bielsko-Bia\u0142a", 
    "country": "PL", 
    "latitude": 49.8225, 
    "longitude": 19.044444
  }, 
  "name": "BBBike"
}, 
{
  "company": [
    "PBSC", 
    "Alta Bicycle Share, Inc"
  ], 
  "href": "/v2/networks/melbourne-bike-share", 
  "id": "melbourne-bike-share", 
  "location": {
    "city": "Melbourne", 
    "country": "AU", 
    "latitude": -37.814107, 
    "longitude": 144.96328
  }, 
  "name": "Melbourne Bike Share"
}
}

感谢您的帮助！

import React, { Component } from 'react';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';

// code for map marker icon
var myIcon = L.icon({
    iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=',
    iconSize: [25, 41],
    iconAnchor: [12.5, 41],
    popupAnchor: [0, -41]
});

class App extends Component {
    state = {
        location: {
            lat: 51.505,
            lng: -0.09,
        },
        haveUsersLocation: false,
        zoom: 2,
        networks: null
    }

    //lifecycle method to get the user's current position(if they so desire).
    componentDidMount() {

        fetch('https://api.citybik.es/v2/networks')
        .then(res => res.json())
        .then(response => {
            console.log("response", response);
            console.log(response.networks)
            const networkData = response.networks
            const networkList = networkData.map((data) => {
                console.log(data);
            })
    })


        navigator.geolocation.getCurrentPosition((position) => {
            this.setState({
               location: {
                   lat: position.coords.latitude,
                   lng: position.coords.longitude
               },
               haveUsersLocation: true,
               zoom: 13
            });
        }, () => {
            console.log('Uops! The user didnt give its location!');
            fetch('https://ipapi.co/json')
            .then(res => res.json())
            .then(location => {
                this.setState({
                    location: {
                        lat: location.latitude,
                        lng: location.longitude
                    },
                    haveUsersLocation: true,
                    zoom: 13
                 });
            })
        });
    }


    render() {
        const position = [this.state.location.lat, this.state.location.lng]
        return (
            <Map className="map" center={position} zoom={this.state.zoom}>
                <TileLayer
                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                {
                    this.state.haveUsersLocation ? 
                    <Marker
                        position={position}
                        icon={myIcon}>
                    <Popup>
                        A pretty CSS3 popup. <br /> Easily customizable.
                    </Popup>
                </Marker> : ''
                }
            </Map>
        )
    }
}

ReactDOM.render(<App/>,
    document.getElementById('root')
);

body {
    margin: 0px;
    width: 100vw;
    height: 100vh;
}

#root {
    height: 100%;
}

.map {
    height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <title>Leaflet map</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Answer 1

您最好将输出JSON重新格式化为GeoJSON，然后使用Leaflet和Mapbox在地图上绘制对象将非常简单。

示例：

https://gist.github.com/arfeo/3580f3796a31ca95b7cf30b99bfd6be5

    let ageSlider: UISlider = {
    let ageS = UISlider(frame:CGRect(x: 10, y: 100, width: 300, height: 20))
    ageS.minimumValue = 0
    ageS.maximumValue = 60
    ageS.value = 24
    ageS.tintColor = .green
    ageS.isContinuous = true
    print("creating age slider")
    //ageS.maximumTrackTintColor = UIColor.trackStrokeColor
    //ageS.minimumTrackTintColor = UIColor.pulsatingFillColor
    ageS.translatesAutoresizingMaskIntoConstraints = false
    return ageS
}()

Answer 2

您将不得不渲染多个Marker元素。当前，如果您具有当前用户位置，则正在渲染一个Marker。以类似的方式，我们将迭代其他坐标并进行渲染。

在您的componentDidMount中，将收到的回复保存到一个状态

fetch('https://api.citybik.es/v2/networks')
    .then(res => res.json())
    .then(response => {
        console.log("response", response);
        console.log(response.networks)
        const networkData = response.networks
        const networkList = networkData.map((data) => {
            this.setState({ bikeData: data });
        })
})

然后在您的render方法内部，迭代bikeData并呈现Markers。

<Map className="map" center={position} zoom={this.state.zoom}>
            <TileLayer
                attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            {
                this.state.haveUsersLocation ? 
                <Marker
                    position={position}
                    icon={myIcon}>
                <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                </Popup>
            </Marker> : ''
            }

            {
              this.state.bikeData &&
              this.state.bikeData.networks.map((idx, data) => (
               <Marker key={data.id} position={[data.location.latitude, data.location.longitude]}> <Popup> Name: {data.name} </Popup> </Marker>))
            } 

        </Map>

如何在传单地图上以图形方式映射JSON数据？

2 个答案: