从geoJSON数据更新maplibre/mapbox geoJSON行
从geoJSON数据更新maplibre/mapbox geoJSON行
提问于 2022-07-27 22:07:58
我目前正在客户端从我的Node Socket.IO服务器接收一些坐标(lat，lon)。我使用这些坐标更新标记，并使用回调函数：
socket.on("geolocation-data", function(msg) {
// update marker position
marker.setLngLat([msg.lon, msg.lat]);
}到现在为止还好。现在我想在我收到的坐标和另一个不动点之间画一条线。
我正在添加一个数据源(具有任意初始值)，然后在一个单独的函数中添加一个层：
map.on('load', function() {
map.addSource('route', {
'type': 'geojson',
'data': 'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[40, 40],
[50, 50],
]
}
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}
});我尝试在map.getSource('route').setData(// new data here)回调中添加sockets.io，但无法更新行。只要我把它移到外面并把它放到map.on('load')里面，它就能工作，但前提是我必须硬编码一些值。
我做错了什么？
编辑:我也尝试过将套接字函数放入map.on('load')函数中，但是它也没有工作。
回答 1
Stack Overflow用户
发布于 2022-07-28 05:48:51
解决了！
我把lat，lon而不是lon，lat放到新的数据中(在标记数据中，它是正确的)。
因此，总体结构是：
map.on('load', function () {
socket.on("geolocation-data", function (msg) {
// do something
//update variable geoJSONline, according to the msg
map.getSource('route').setData(geoJSONline);
}
map.addSource('route', {
type: 'geojson',
data: geoJSONline
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}})；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73145113
复制相关文章
相似问题
腾讯云开发者
