javascript - 如何从 topojson 文件中获取文本标签以多边形显示?

标签 javascript leaflet topojson

我正在制作一张使用 Leaflet 构建的 map ,并且有一个 topoJSON 文件,该文件是构成欧洲和世界其他地区的国家边界的 featureCollection。要素集合包含每个国家/地区的属性名称。

问题:让国家名称以每个国家的多边形为中心的推荐方法是什么?我应该使用传单的工具提示功能吗?我正在使用 this example作为起点,但无法显示我的文本标签。有任何想法吗?我有一个 topojson 文件,其中包含我试图从中提取的属性。

My fiddle

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 将工具提示绑定(bind)到每一层,请使用 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/

关于javascript - 如何从 topojson 文件中获取文本标签以多边形显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41818470/

相关文章:

javascript - 使用 d3.js 和 topoJSON 创建非洲 map

javascript - Leaflet 中的 TopoJSON,来自 Omnivore : reading properties

r - 是否可以在 R 中读取 geoJSON 或 topoJSON 文件来绘制等值线图?

javascript - 在 AngularJS 应用程序中使用 Lo-Dash 从 REST 返回总和

javascript - 并排对齐 div,没有空白的黑色空间

javascript - HTML 中的嵌套文本链接

javascript - createWriteStream 的标记选项

javascript - 如何避免 Leaflet Tile Layer WMS 实现中的闪烁?

javascript - 在同一页面上显示 3 个传单 map

javascript - Leaflet JS,获取道路限速