在标记之间动态绘制线条
Drawing lines dynamically between markers
我刚刚开始接触神奇的 MapBox。
在我的地图上,我有一个下拉菜单,可以加载新标记并删除旧标记,一切正常(代码如下)。
var pin_layer = L.mapbox.featureLayer().addTo(map);
$('select.traveller').on('change',function(){
map.removeLayer(pin_layer);
pin_layer = L.mapbox.featureLayer().addTo(map);
var markers = '[';
$.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){
$.each( data, function(k, item) {
markers += '{ "type": "Feature",' +
'"geometry": { ' +
'"type": "Point", ' +
'"coordinates": ['+item.long+', '+item.lat+']},' +
'"properties": {' +
'"id": "'+item.id+'",' +
'"image": "'+item.image+'",' +
'"marker-symbol": "star",' +
'"marker-color": "#ff8888",' +
'"marker-size": "large",' +
'"title": "'+item.title+'", ' +
'"description": "'+item.description+'"' +
'}' +
'},';
});
markers = markers.substring(0, markers.length - 1);
markers += ']';
pin_layer.setGeoJSON(JSON.parse(markers));
},'json');
})
我现在想按照标记的添加顺序在标记之间画线。即标记 1 到标记 2,标记 2 到标记 3 等。我尝试使用下面的代码 link 但它没有绘制任何线条,它也没有抛出任何错误。
https://www.mapbox.com/mapbox.js/example/v1.0.0/line-marker/
有没有人成功完成此操作或知道任何用于绘制线条的示例代码?
首先我要说,你有一个非常奇怪的方法来构建那个标记数组。您可以直接执行此操作而无需 string/object 转换内容。在循环数据时,您可以立即创建一个包含线串坐标的数组,在带有注释的代码中进行解释:
$.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){
// Create empty featureLayer
var featureLayer = L.mapbox.featureLayer().addTo(map);
// Create empty featureCollection
var featureCollection = {
"type": "FeatureCollection",
"features": []
};
// Create empty array to hold coordinates for line.
var lineArray = [];
// Looping over the data
$.each(data, function (k, item) {
// Create new feature object and push to featureCollection
featureCollection.features.push({
"type": "Feature",
"properties": {
"id": item.id,
"title": item.title,
"description": item.description,
"image": item.image,
"marker-symbol": "star",
"marker-color": "#ff8888",
"marker-size": "large"
},
"geometry": {
"type": "Point",
"coordinates": [
item.long,
item.lat
]
}
});
// Add coordinates to the array at id position
// Setting the key to ID will result in a sorted array
lineArray[item.id] = [item.lat, item.long];
});
// Set featureCollection to featureLayer
featureLayer.setGeoJSON(featureCollection);
// Reset array keys to normal so L.Polyline can handle them
// If your ID's are not consecutive or they didn't start with 0
// you could end up with keys like: 1,2,5,8,9
// linestring can't handle that, this resets the keys
// to normal: 0,1,2,3,4,5,6 etc and keeps the order
lineArray = lineArray.filter(function(){return true});
// Creating polyline with array
var polyline = L.polyline(lineArray).addTo(map);
},'json');
这是一个关于 Plunker 的工作示例:http://plnkr.co/edit/FM9u66BnbsQy39c8fast?p=preview
(请注意,我使用的是 jquery 的 getJSON 而不是你正在做的,但你应该得到相同的结果)
我刚刚开始接触神奇的 MapBox。
在我的地图上,我有一个下拉菜单,可以加载新标记并删除旧标记,一切正常(代码如下)。
var pin_layer = L.mapbox.featureLayer().addTo(map);
$('select.traveller').on('change',function(){
map.removeLayer(pin_layer);
pin_layer = L.mapbox.featureLayer().addTo(map);
var markers = '[';
$.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){
$.each( data, function(k, item) {
markers += '{ "type": "Feature",' +
'"geometry": { ' +
'"type": "Point", ' +
'"coordinates": ['+item.long+', '+item.lat+']},' +
'"properties": {' +
'"id": "'+item.id+'",' +
'"image": "'+item.image+'",' +
'"marker-symbol": "star",' +
'"marker-color": "#ff8888",' +
'"marker-size": "large",' +
'"title": "'+item.title+'", ' +
'"description": "'+item.description+'"' +
'}' +
'},';
});
markers = markers.substring(0, markers.length - 1);
markers += ']';
pin_layer.setGeoJSON(JSON.parse(markers));
},'json');
})
我现在想按照标记的添加顺序在标记之间画线。即标记 1 到标记 2,标记 2 到标记 3 等。我尝试使用下面的代码 link 但它没有绘制任何线条,它也没有抛出任何错误。
https://www.mapbox.com/mapbox.js/example/v1.0.0/line-marker/
有没有人成功完成此操作或知道任何用于绘制线条的示例代码?
首先我要说,你有一个非常奇怪的方法来构建那个标记数组。您可以直接执行此操作而无需 string/object 转换内容。在循环数据时,您可以立即创建一个包含线串坐标的数组,在带有注释的代码中进行解释:
$.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){
// Create empty featureLayer
var featureLayer = L.mapbox.featureLayer().addTo(map);
// Create empty featureCollection
var featureCollection = {
"type": "FeatureCollection",
"features": []
};
// Create empty array to hold coordinates for line.
var lineArray = [];
// Looping over the data
$.each(data, function (k, item) {
// Create new feature object and push to featureCollection
featureCollection.features.push({
"type": "Feature",
"properties": {
"id": item.id,
"title": item.title,
"description": item.description,
"image": item.image,
"marker-symbol": "star",
"marker-color": "#ff8888",
"marker-size": "large"
},
"geometry": {
"type": "Point",
"coordinates": [
item.long,
item.lat
]
}
});
// Add coordinates to the array at id position
// Setting the key to ID will result in a sorted array
lineArray[item.id] = [item.lat, item.long];
});
// Set featureCollection to featureLayer
featureLayer.setGeoJSON(featureCollection);
// Reset array keys to normal so L.Polyline can handle them
// If your ID's are not consecutive or they didn't start with 0
// you could end up with keys like: 1,2,5,8,9
// linestring can't handle that, this resets the keys
// to normal: 0,1,2,3,4,5,6 etc and keeps the order
lineArray = lineArray.filter(function(){return true});
// Creating polyline with array
var polyline = L.polyline(lineArray).addTo(map);
},'json');
这是一个关于 Plunker 的工作示例:http://plnkr.co/edit/FM9u66BnbsQy39c8fast?p=preview
(请注意,我使用的是 jquery 的 getJSON 而不是你正在做的,但你应该得到相同的结果)