在各個(gè)長(zhǎng)假期間，各類(lèi)主題公園都是人們前往游玩的熱門(mén)地點(diǎn)，今天我們就來(lái)看看世界各地主要的主題公園的分布情況

我們先來(lái)看看最后的效果

下面我們來(lái)具體看看是如何制作的吧

數(shù)據(jù)來(lái)源

首先就是數(shù)據(jù)來(lái)源，我們通過(guò) queue times 網(wǎng)站來(lái)獲取數(shù)據(jù)，這是一個(gè)專(zhuān)門(mén)統(tǒng)計(jì)各地公園游人數(shù)據(jù)的網(wǎng)站，里面有很多有趣的數(shù)據(jù)，感興趣的童鞋可以自行探索下

https://queue-times.com/

該網(wǎng)站提供了獲取世界各地主題公園的 API 接口，https://queue-times.com/parks.json，通過(guò)該接口我們可以拿到如下數(shù)據(jù)

[
  {
    "id":11,
    "name":"Cedar Fair Entertainment Company",
    "parks":[
      {
        "id":57,
        "name":"California's Great America",
        "country":"United States",
        "continent":"North America",
        "latitude":"37.397799",
        "longitude":"-121.974717",
        "timezone":"America/Los_Angeles"
      },
      ...
    ]
  },
  ...
]

接下來(lái)我們就可以根據(jù)經(jīng)緯度信息來(lái)制作世界各地的主題公園分布了

highcharts 制作地圖

其實(shí) highcharts 是一個(gè)非常強(qiáng)大的 JavaScript 圖表制作工具，我們來(lái)簡(jiǎn)單看看如何制作地圖吧

$(function () {
    var H = Highcharts,
        map = H.maps['countries/us/us-all'],
        chart;
    // Add series with state capital bubbles
    $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/us-capitals.json&callback=?', function (json) {
        var data = [];
        $.each(json, function (ix, entry) {
            entry.z = entry.population;
            data.push(entry);
        });
        $('#container').highcharts('Map', {
            title: {
                text: 'Highmaps lat/lon demo'
            },
            tooltip: {
                formatter: function () {
                    return this.point.capital + ', ' + this.point.parentState + '<br>Lat: ' + this.point.lat + ' Lon: ' + this.point.lon + '<br>Population: ' + this.point.population;
                },
                crosshairs: [{
                    zIndex: 5,
                    dashStyle: 'dot',
                    snap: false,
                    color: 'gray'
                }, {
                    zIndex: 5,
                    dashStyle: 'dot',
                    snap: false,
                    color: 'gray'
                }],
            },
            mapNavigation: {
                enabled: true
            },
            series: [{
                name: 'Basemap',
                mapData: map,
                borderColor: '#606060',
                nullColor: 'rgba(200, 200, 200, 0.2)',
                showInLegend: false
            }, {
                name: 'Separators',
                type: 'mapline',
                data: H.geojson(map, 'mapline'),
                color: '#101010',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                dataLabels: {
                    enabled: true,
                    format: '{point.capital}'
                },
                name: 'Cities',
                data: data,
                maxSize: '12%',
                color: H.getOptions().colors[0]
            }]
        });
        chart = $('#container').highcharts();
    });
    // Display custom label with lat/lon next to crosshairs
    $('#container').mousemove(function (e) {
        var position;
        if (chart) {
            if (!chart.lab) {
                chart.lab = chart.renderer.text('', 0, 0)
                    .attr({
                    zIndex: 5
                })
                    .css({
                    color: '#505050'
                })
                    .add();
            }
            e = chart.pointer.normalize(e);
            position = chart.fromPointToLatLon({
                x: chart.xAxis[0].toValue(e.chartX),
                y: chart.yAxis[0].toValue(e.chartY)
            });
            chart.lab.attr({
                x: e.chartX + 5,
                y: e.chartY - 22,
                text: 'Lat: ' + position.lat.toFixed(2) + '<br>Lon: ' + position.lon.toFixed(2)
            });
        }
    });
    $('#container').mouseout(function (e) {
        if (chart && chart.lab) {
            chart.lab.destroy();
            chart.lab = null;
        };
    });
});

制作的圖表如下

可以看出，制作的地圖還是非常漂亮的

接下來(lái)我們就可以結(jié)合 Flask 來(lái)制作地圖網(wǎng)站了

制作網(wǎng)站

首先我們先處理獲取到的數(shù)據(jù)

@app.route('/get_park_data')
def get_park_data():
    park_data = requests.get("https://queue-times.com/zh-CN/parks.json").json()
    final_data = []
    for i in park_data:
        final_data += i['parks']
    json_data = json.dumps(final_data)
    return json_data

然后再過(guò)濾出不同大洲或國(guó)家的數(shù)據(jù)

@app.route("/get_us_data")
def get_US_data():
    data = json.loads(get_park_data())
    data_new = []
    for i in data:
        if i['country'] == "United States" and i["name"] != "Six Flags Discovery Kingdom":
            data_new.append(i)
    json_data = json.dumps(data_new)

接下來(lái)我們?cè)俜祷厍岸?html 文件即可

@app.route('/world')def world():    return render_template('world.html')

下面我們來(lái)看下 JS 文件該如何處理

$(function () {
    // Initiate the chart
    $.getJSON('http://127.0.0.1:5000/get_world', function (json) {
        var data = [];
        $.each(json, function (ix, entry) {
            // entry.z = entry.population;
            entry.z = randomRange(10, 50);
            entry.lat = entry.latitude;
            entry.lon = entry.longitude;
            data.push(entry);
        });
        $('#container').highcharts('Map', {
...
}

我們從 flask 服務(wù)中獲取世界主題公園信息，然后把得到的數(shù)據(jù)傳遞給 highcharts 即可

最后我們?cè)僦谱饕粋€(gè) index 頁(yè)面，展示所有的跳轉(zhuǎn)頁(yè)面
...
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="thumbnail">
<img src="/static/images/world.PNG" alt="...">
<div class="caption">
<h3>世界主題公園分布</h3>

<p><a href="{{url_for('world')}}" class="btn btn-primary" role="button" target="_blank">GO</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="thumbnail">
<img src="/static/images/europe.PNG" alt="...">
<div class="caption">
<h3>歐洲主題公園分布</h3>
<p><a href="{{url_for('europe')}}" class="btn btn-primary" role="button" target="_blank">GO</a></p>
</div>
</div>
</div>
...

最后我們來(lái)看一下各地主題公園的圖表吧

好了，今天的分享就到這里，喜歡就點(diǎn)個(gè)贊吧