如何从 topojson 文件中获取文本标签以多边形显示?
How to get text labels to show in polygons from a topojson file?
我正在制作一张用 Leaflet 构建的地图,并且有一个 topoJSON 文件,它是构成欧洲和世界其他地区的国家边界的 featureCollection。要素集合包含每个国家/地区的属性名称。
问题:让国家名称以每个国家/地区的多边形为中心的推荐方法是什么?我应该使用传单的工具提示功能吗?我使用 this example 作为起点,但无法显示我的文本标签。有任何想法吗?我有一个 topojson 文件,其中包含我试图从中提取的属性。
var earth = L.geoJson();
earth.bindTooltip('text label', {
permanent: true,
direction: 'center'
});
var naturalEarth = omnivore.topojson('https://gist.githubusercontent.com/dosstx/dcd1b4ebe3892527b12759226a21b900/raw/81abff4d455dbabe800c56aa7736dd4cbbfd1f64/topo.json', null, earth);
要使用 Leaflet omnivore 将工具提示绑定到每一层,请在准备就绪后使用 Leaflet's eachLayer
function 遍历 topojson 中的所有层。
例如
var naturalEarth = omnivore.topojson('https://gist.githubusercontent.com/dosstx/dcd1b4ebe3892527b12759226a21b900/raw/81abff4d455dbabe800c56aa7736dd4cbbfd1f64/topo.json', null, earth)
.on('ready', function() {
naturalEarth.eachLayer(function(layer) {
//console.log(layer); //to inspect what properties are available
layer.bindTooltip(layer.feature.properties.FORMAL_EN, {
permanent: true
});
});
});
已更新 JSFiddle:https://jsfiddle.net/kjLjhbe1/8/
我正在制作一张用 Leaflet 构建的地图,并且有一个 topoJSON 文件,它是构成欧洲和世界其他地区的国家边界的 featureCollection。要素集合包含每个国家/地区的属性名称。
问题:让国家名称以每个国家/地区的多边形为中心的推荐方法是什么?我应该使用传单的工具提示功能吗?我使用 this example 作为起点,但无法显示我的文本标签。有任何想法吗?我有一个 topojson 文件,其中包含我试图从中提取的属性。
var earth = L.geoJson();
earth.bindTooltip('text label', {
permanent: true,
direction: 'center'
});
var naturalEarth = omnivore.topojson('https://gist.githubusercontent.com/dosstx/dcd1b4ebe3892527b12759226a21b900/raw/81abff4d455dbabe800c56aa7736dd4cbbfd1f64/topo.json', null, earth);
要使用 Leaflet omnivore 将工具提示绑定到每一层,请在准备就绪后使用 Leaflet's eachLayer
function 遍历 topojson 中的所有层。
例如
var naturalEarth = omnivore.topojson('https://gist.githubusercontent.com/dosstx/dcd1b4ebe3892527b12759226a21b900/raw/81abff4d455dbabe800c56aa7736dd4cbbfd1f64/topo.json', null, earth)
.on('ready', function() {
naturalEarth.eachLayer(function(layer) {
//console.log(layer); //to inspect what properties are available
layer.bindTooltip(layer.feature.properties.FORMAL_EN, {
permanent: true
});
});
});
已更新 JSFiddle:https://jsfiddle.net/kjLjhbe1/8/