Python做个网站，表现世界各地的主题公园分布

源码 · 2024-9-22 15:11:54

在各个长假期间，各类主题公园都是人们前去嬉戏的热门所在，本日我们就来看看世界各地紧张的主题公园的分布环境
我们先来看看末了的效果
下面我们来具体看看是怎样制作的吧
数据泉源

起首就是数据泉源，我们通过 queue times 网站来获取数据，这是一个专门统计各地公园游人数据的网站，内里有许多风趣的数据，感爱好的童鞋可以自行探索下

https://queue-times.com/

该网站提供了获取世界各田主题公园的 API 接口，https://queue-times.com/parks.json，通过该接口我们可以拿到如下数据
[ { "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" }, ... ] }, ...]接下来我们就可以根据经纬度信息来制作世界各地的主题公园分布了
highcharts 制作舆图

着实 highcharts 是一个非常强大的 JavaScript 图表制作工具，我们来简朴看看怎样制作舆图吧
$(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>

opulation: ' + 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;       }; });});制作的图表如下

可以看出，制作的舆图照旧非常漂亮的
接下来我们就可以结合 Flask 来制作舆图网站了
制作网站

起首我们先处置惩罚获取到的数据
@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然后再过滤出差别大洲或国家的数据
@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)接下来我们再返回前端 html 文件即可
@app.route('/world')def world(): return render_template('world.html')下面我们来看下 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 服务中获取世界主题公园信息，然后把得到的数据通报给 highcharts 即可

末了我们再制作一个 index 页面，展示全部的跳转页面
...
<div好了，本日的分享就到这里，喜欢就点个赞吧

Python做个网站，表现世界各地的主题公园分布

所属分类: 问答交流

新帖推荐: 30日

推荐作品