目的
- 使用 Facebook Graph API 位置信息获取数据
- 获取个人Facebook相册中的照片信息
- 通过 Mapbox 对地理定位照片进行 Web 可视化
1. 关于 Facebook Graph API
1.1. 概述
参考
https://developers.facebook.com/docs/graph-api/overview
- 一种 API，允许 Facebook 上的应用程序开发人员访问用户 Facebook 上的信息
- 用户必须批准“应用程序可以访问用户信息”才能使用应用程序
- 您可以访问的各种 Facebook 信息
- 我这次会检查照片相关信息。
1.2. 使用 API 进行实验
您可以使用以下控制台尝试 API
https://developers.facebook.com/tools/explorer/?method=GET&path=me&version=v14.0
如果您只请求me，则会出现您个人帐户的基本信息。
如果浏览左侧的albums/photos，就会出现各种数据。
我会尝试找到一个有位置信息的。
位置信息没有显示，但是如果你搜索albums/photos/place就会被添加！
添加图片 url 并认为足够
如果没问题，可以在javascript上使用GET写的CURL
curl = "https://graph.facebook.com/v14.0/me?fields=albums%7Bphotos.%7Bpicture%2Cplace%7D%7D&access_token="+token
2. 在 Mapbox 上可视化
2.1. Geojson的创建和图层设置
- 上面的响应是针对每张专辑的，用Javascript扫描创建可以和Mapbox一起使用的Geojson
- 代码图像：
const curl = "https://graph.facebook.com/v14.0/me?fields=albums%7Bphotos.%7Bpicture%2Cplace%7D%7D&access_token="+token;
axios.get(url).then(function(result){
const albums=result.data.albums.data;
processAlbum(albums);
)};
function processAlbum(albums){
for(var j=0; j < albums.length; j++){
if(albums[j].photos){
var photo = albums[j].photos.data;
for(var i=0; i < photo.length; i++){
var thumb = photo[i].picture;
if(photo[i].place && photo[i].place.location){
var place_name = photo[i].place.name
var lon = photo[i].place.location.longitude;
var lat = photo[i].place.location.latitude;
addMapboxGeojson(thumb,place_name,lon,lat);
}
}
}
}
}
}
- 这是最终的 Geojson 图像
fbjson =
[
{
"type": "Feature",
"properties": {
"name": "Inis Mor, Aran Islands",
"img": "https://scontent-nrt1-1.xx.fbcdn.net/v/t1.18169-9/393470_4579134715906_2075779361_n.jpg?stp=dst-jpg_p110x80&_nc_cat=108&ccb=1-7&_nc_sid=caaa8d&_nc_ohc=eHb63BUWeK8AX--KfO7&_nc_ht=scontent-nrt1-1.xx&edm=AC7C4-wEAAAA&oh=00_AT8TI9UX3xKNSJ6ztqNLi-ipfhozASuTE6z0YLBVlK91xA&oe=630C5776"
},
"geometry": {
"type": "Point",
"coordinates": [
-9.6643103442363,
53.105765577622
]
}
},
{
"type": "Feature",
"properties": {
"name": "Inis Mor, Aran Islands",
"img": "https://scontent-nrt1-1.xx.fbcdn.net/v/t1.18169-9/564276_4579135475925_1452845447_n.jpg?stp=dst-jpg_s130x130&_nc_cat=100&ccb=1-7&_nc_sid=caaa8d&_nc_ohc=ol4Vit2jxc8AX99ZUDn&_nc_ht=scontent-nrt1-1.xx&edm=AC7C4-wEAAAA&oh=00_AT-nMPADdHwceZ2GEoyu3c8qN0VuVQJJWp3zFZvykQxJ2g&oe=630D7F60"
},
"geometry": {
"type": "Point",
"coordinates": [
-9.6643103442363,
53.105765577622
]
}
},
...
]
- Mapbox 图层及其 Popup 设置图片
- 发布自 Mapbox 的基本代码
map.addSource('places', {
"type":"geojson",
"data":fbjson
});
map.addLayer({
"id": "places",
"source": "fbplaces",
"type": "circle",
"paint": {
"circle-radius": 3.5,
"circle-color": "#ff00aa",
"circle-opacity":0.6
}
},
);
map.on('mousemove', function (e) {
var fe = map.queryRenderedFeatures(e.point, {layers: ['places']});
if(fe.length){
var clon = fe[0].geometry.coordinates[0];
var clat = fe[0].geometry.coordinates[1];
var place_name = fe[0].properties.name;
var popupcontent = place_name+"<br><table><tr>";
for(var j=0; j < fe.length; j++){
if (j<3){
var n = fe.length - j-1;
var img_url = fe[n].properties.img;
popupcontent += "<td> <img src='"+img_url+"'/> </td>";
}
}
popup.setLngLat([clon,clat])
.setHTML(popupcontent+"</tr></table>")
.addTo(map);
} else {
popup.remove();
}
});
2.2. 结果与问题
将鼠标悬停到 Point 时会出现弹出窗口
- Graph API token 只能使用 1-2 小时，所以每次都需要提前创建 API token。
- 前端初学者，在Facebook的开发者页面手动获取并复制Token并粘在可视化屏幕上
- 由于私人信息，无法检索例如整体用户的公开帖子。只有 Appli 批准的用户可以服用
- 此页面完全是客户端，不存储在数据库中
- 可能放错了 POI。如果要创建详细地图，请在 Facebook 上设置其他位置
在最后
如果你想尝试
https://github.com/bordoray/facebook-insight
就这样
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308622507.html