使用经度和纬度数组在地图框上绘制 [英] Using an array of longitudes and latitudes to plot on mapbox
问题描述
我正在尝试在我的Web应用程序中实现Mapbox api，但是遇到了麻烦.我的目标是从数组中获取经度和纬度，然后将其插入坐标中.我曾尝试使用一个循环，但似乎无法正常工作.如果有人有任何解决方案，将不胜感激！请注意，我拿出了我的访问令牌
i am trying to implement Mapbox api into my web application however i have reached a snag. My objective is to grab the longitudes and latitudes from my array and insert them into the coordinates. I have tried using a loop that loops through but it does not seem to work. If anyone has any solution it be greatly appreciated! note i took out my access token
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Draw GeoJSON points</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var longLat = [
[53.515333, -6.190796],
[53.342686, -6.403656],
[51.678091, -9.624023],
[52.768293, -1.560059]
];
mapboxgl.accessToken = 'undefined';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [-96, 37.8],
zoom: 3
});
map.on('load', function () {
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"icon": "monument"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"icon": "harbor"
}
}]
}
},
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
</script>
</body>
</html>
推荐答案
I've got no mapbox experience, but basing on this documentation page, i came up with following;
您需要在for循环中创建要素集合(数组)，像这样:
You need to create your features collection (array) within for loop, like that:
var featureCollection = []; // Initialize empty collection
// Your longLat collection
var longLat = [
[53.515333, -6.190796],
[53.342686, -6.403656],
[51.678091, -9.624023],
[52.768293, -1.560059]
];
// for every item object within longLat
for(var itemIndex in longLat) {
// push new feature to the collection
featureCollection.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": longLat[itemIndex]
},
"properties": {
"title": "Mapbox DC",
"icon": "monument"
}
});
}
请尝试是否可以跳过属性(图标和标题).目前，它们已经过硬编码.
然后，您以这种方式将它们传递给地图本身:
Then, you pass them to the map itself this way:
map.on('load', function () {
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": featureCollection
}
},
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
我不确定所有含义是什么(例如带有所有图标的layout)，但这只是从所提到的示例中提取的，因此它不应破坏任何内容.
I'm not sure what all of the things mean (like layout with all icons for example), but that's just taken from the mentioned example, so it should not break anything.
这篇关于使用经度和纬度数组在地图框上绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
