创建 mapbox 地图后如何更新 GeoJSON?
How can I update GeoJSON on my mapbox map after it has been created?
我有这个html:
<div id="clickthis"><p>addGeoJSON</p></div>
<div id='raw'></div>
<div id='map'></div>
这是我的 javascript 代码:
var geojson = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978,38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"description": "1714 14th St NW, Washington DC",
"marker-color": "#fc4353",
"marker-size": "large",
"marker-symbol": "monument"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"description": "155 9th St, San Francisco",
"marker-color": "#fc4353",
"marker-size": "large",
"marker-symbol": "harbor"
}
}
];
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwcGllc3RpY2tlciIsImEiOiJIn0.IgCoorxIUvE0CjcPriROeQ';
var map = L.mapbox.map('map', 'mappiesticker.kh78ogof').setView([34, -118.50], 9);
$('#clickthis').click(function(){
alert('alkr');
dataLayer = L.mapbox.featureLayer(geojson);
dataLayer.addTo(map);
})
当我单击 div 时会触发警报,但没有其他任何反应。我尝试使用 .setGeoJSON 函数,但它返回未定义。我得出的结论是,这仅在您创建地图时使用,而不是在创建后添加 GeoJSON
我在使用您的令牌时遇到 401 错误:
Failed to load resource: the server responded with a status of 401 (Unauthorized)
当我将您的代码与 Mapbox 的示例令牌和地图一起使用时(请注意,您应该使用自己的令牌和地图)它非常好:
L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
var map = L.mapbox.map('mapbox', 'examples.map-i86nkdio', {
'center': [0, 0],
'zoom': 1
});
Plunker 上的工作示例:http://plnkr.co/edit/wrlC7AAHLBWsDgzk8PRw?p=preview
我会仔细检查您的帐户令牌和地图 ID。
我有这个html:
<div id="clickthis"><p>addGeoJSON</p></div>
<div id='raw'></div>
<div id='map'></div>
这是我的 javascript 代码:
var geojson = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978,38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"description": "1714 14th St NW, Washington DC",
"marker-color": "#fc4353",
"marker-size": "large",
"marker-symbol": "monument"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"description": "155 9th St, San Francisco",
"marker-color": "#fc4353",
"marker-size": "large",
"marker-symbol": "harbor"
}
}
];
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwcGllc3RpY2tlciIsImEiOiJIn0.IgCoorxIUvE0CjcPriROeQ';
var map = L.mapbox.map('map', 'mappiesticker.kh78ogof').setView([34, -118.50], 9);
$('#clickthis').click(function(){
alert('alkr');
dataLayer = L.mapbox.featureLayer(geojson);
dataLayer.addTo(map);
})
当我单击 div 时会触发警报,但没有其他任何反应。我尝试使用 .setGeoJSON 函数,但它返回未定义。我得出的结论是,这仅在您创建地图时使用,而不是在创建后添加 GeoJSON
我在使用您的令牌时遇到 401 错误:
Failed to load resource: the server responded with a status of 401 (Unauthorized)
当我将您的代码与 Mapbox 的示例令牌和地图一起使用时(请注意,您应该使用自己的令牌和地图)它非常好:
L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
var map = L.mapbox.map('mapbox', 'examples.map-i86nkdio', {
'center': [0, 0],
'zoom': 1
});
Plunker 上的工作示例:http://plnkr.co/edit/wrlC7AAHLBWsDgzk8PRw?p=preview
我会仔细检查您的帐户令牌和地图 ID。