使用 mapbox 时忽略 geojson
geojson ignored when using mapbox
为什么 mapbox 忽略我的 geoJson 标记符号、标记颜色和标记大小?如果出于某种原因它忽略了,你如何设置?
示例 geoJson:
"properties": {
"id": 578202,
"name": "University of North Carolina at Charlotte",
"marker-symbol": "marker",
"marker-color": "#ff8888",
"marker-size": "small",
"description": 1
}
脚本:
$.getJSON(url, function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function(feature, layer) {
var popupContent = feature.properties.name +'project(s)';
layer.bindPopup(popupContent, {
closeButton: true,
minWidth: 225
});
}
});
var map = L.mapbox.map('map', '', {
attributionControl: false
});
geojson.addTo(map);
});
发生这种情况是因为 L.GeoJSON
不会自动知道您要设置标记选项,因此如果遇到点要素,它只会添加一个默认标记。如果你想用点特征做一些特殊的事情,你可以使用L.GeoJSON
的pointToLayer
函数,查看下面的例子:
var geoJsonLayer = L.geoJson(geoJson, {
pointToLayer: function (feature, latLng) {
return L.marker(latLng, {
icon: L.mapbox.marker.icon(feature.properties)
});
}
}).addTo(map);
唯一的问题是它还将所有其他属性添加为标记图标的选项。就个人而言,我会编写一些逻辑,以便只将相关属性添加到图标选项中。
这是一个关于 Plunker 的工作示例:http://plnkr.co/edit/3OJPXxOYdzX8mSnjEb90?p=preview
正如 tmcw 在评论中指出的(见下文):您可以使用 L.mapbox.featureLayer
,它完全可以完成您想要使用 L.GeoJSON
完成的工作,而无需求助于 pointToLayer
上面描述的方法,它只使用适当的属性。它甚至可以为您加载数据,这样您就可以摆脱 jQuery 的 $.getJSON
。 Win/win 情况如果你问我。您只需执行以下操作即可:
L.mapbox.featureLayer(url).addTo(map);
这是 Plunker 上的工作示例:http://plnkr.co/edit/Og6tuYDIkTX7ftedoR3C?p=preview
为什么 mapbox 忽略我的 geoJson 标记符号、标记颜色和标记大小?如果出于某种原因它忽略了,你如何设置?
示例 geoJson:
"properties": {
"id": 578202,
"name": "University of North Carolina at Charlotte",
"marker-symbol": "marker",
"marker-color": "#ff8888",
"marker-size": "small",
"description": 1
}
脚本:
$.getJSON(url, function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function(feature, layer) {
var popupContent = feature.properties.name +'project(s)';
layer.bindPopup(popupContent, {
closeButton: true,
minWidth: 225
});
}
});
var map = L.mapbox.map('map', '', {
attributionControl: false
});
geojson.addTo(map);
});
发生这种情况是因为 L.GeoJSON
不会自动知道您要设置标记选项,因此如果遇到点要素,它只会添加一个默认标记。如果你想用点特征做一些特殊的事情,你可以使用L.GeoJSON
的pointToLayer
函数,查看下面的例子:
var geoJsonLayer = L.geoJson(geoJson, {
pointToLayer: function (feature, latLng) {
return L.marker(latLng, {
icon: L.mapbox.marker.icon(feature.properties)
});
}
}).addTo(map);
唯一的问题是它还将所有其他属性添加为标记图标的选项。就个人而言,我会编写一些逻辑,以便只将相关属性添加到图标选项中。
这是一个关于 Plunker 的工作示例:http://plnkr.co/edit/3OJPXxOYdzX8mSnjEb90?p=preview
正如 tmcw 在评论中指出的(见下文):您可以使用 L.mapbox.featureLayer
,它完全可以完成您想要使用 L.GeoJSON
完成的工作,而无需求助于 pointToLayer
上面描述的方法,它只使用适当的属性。它甚至可以为您加载数据,这样您就可以摆脱 jQuery 的 $.getJSON
。 Win/win 情况如果你问我。您只需执行以下操作即可:
L.mapbox.featureLayer(url).addTo(map);
这是 Plunker 上的工作示例:http://plnkr.co/edit/Og6tuYDIkTX7ftedoR3C?p=preview