当前位置:   article > 正文

leaflet获取geojson的中心点位,并在中心点位加文字标注(leaflet添加文字标注)_l.geojson 绑定标注

l.geojson 绑定标注

 效果如下图所示:

 代码如下所示   getCenter方法获取中心点位

  1. //geojson数据显示
  2. var lakeLayer = L.geoJson(geojson, {
  3. style: {
  4. weight: 2,
  5. opacity: 1,
  6. color: '#2f8ffc',
  7. fillOpacity: 0.2,
  8. fillColor: '#6ba7de'
  9. }
  10. }).addTo(map);
  11. //显示文字
  12. var content = "<div>名称:大官湖</div>" +
  13. "<div>时间:2020-05-04</div>" +
  14. "<div>面积:8.52 K㎡</div>";
  15. marker的icon文字
  16. var myIcon = L.divIcon({
  17. html: "<div style='color:#fff;'>"+content+"</div>",
  18. className: 'my-div-icon',
  19. iconSize: 100
  20. });
  21. //中心点位
  22. L.marker(lakeLayer.getBounds().getCenter(), { icon: myIcon}).addTo(map);
  23. //定位到geojson数据上
  24. map.fitBounds(lakeLayer.getBounds());

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Guff_9hys/article/detail/941089
推荐阅读
  

闽ICP备14008679号