我正在开发一个网页地图,只需点击就可以飞到不同的位置,就像在这个Mapbox GL示例(https://docs.mapbox.com/help/tutorials/building-a-store-locator/#getting-started)中一样。但是,我试图从外部文件加载GeoJSON功能,我可以得到点,但不是列表项。基本上,我无法弄清楚如何使用此方法获取列表(buildLocationList(stores);)。有没有办法将外部GeoJSON文件的变量名称设置为“存储”。任何帮助,将不胜感激。
var stores = "https://raw.githubusercontent.com/aarontaveras/Test/master/sweetgreen.geojson";
map.on('load', function () {
// Add the data to your map as a layer
map.addLayer({
id: 'locations',
type: 'symbol',
// Add a GeoJSON source containing place coordinates and information.
source: {
type: 'geojson',
data: stores
},
layout: {
'icon-image': 'circle-15',
'icon-allow-overlap': true,
}
});
// Initialize the list
buildLocationList(stores);
});
function buildLocationList(data) {
for (i = 0; i < data.features.length; i++) {
// Create an array of all the stores and their properties
var currentFeature = data.features[i];
// Shorten data.feature.properties to just `prop` so we're not
// writing this long form over and over again.
var prop = currentFeature.properties;
// Select the listing container in the HTML
var listings = document.getElementById('listings');
// Append a div with the class 'item' for each store
var listing = listings.appendChild(document.createElement('div'));
listing.className = 'item';
listing.id = "listing-" + i;
// Create a new link with the class 'title' for each store
// and fill it with the store address
var link = listing.appendChild(document.createElement('a'));
link.href = '#';
link.className = 'title';
link.dataPosition = i;
link.innerHTML = prop.address;
// Create a new div with the class 'details' for each store
// and fill it with the city and phone number
var details = listing.appendChild(document.createElement('div'));
details.innerHTML = prop.city;
if (prop.phone) {
details.innerHTML += ' · ' + prop.phoneFormatted;
}
我能够轻松地从外部源加载数据,但仍然在努力构建列表。
var stores = 'https://raw.githubusercontent.com/aarontaveras/Test/master/sweetgreen.geojson';
map.on('load', function () {
map.addSource("locations", {
type: 'geojson',
data: stores
});
map.addLayer({
"id": "locations",
"type": "symbol",
"source": "locations",
"layout": {
'icon-image': 'circle-15',
'icon-allow-overlap': true,
}
});
});
Mapbox GeoJSON源data属性可以是GeoJSON文件的URL,也可以是内联GeoJSON。因此,您可以获取GeoJSON数据并将其直接传递给源,并使用它来构建您的位置列表。
考虑示例:
map.on('load', () => {
fetch(stores)
.then(response => response.json())
.then((data) => {
map.addSource("locations", {
type: 'geojson',
data: data
});
map.addLayer(...);
buildLocationList(data);
});
});