热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

与Leaflet的多边形标签

如何解决《与Leaflet的多边形标签》经验,为你挑选了1个好方法。

在GeoJSON中使用传单7.3和多边形数据,如何在字段中添加标签:NAME?

以下是当前GeoJSON多边形数据的示例.我想在多边形的中心启用固定标签,重叠OK.

var districts = L.geoJson(null, {
  style: function (feature) {
    return {
      color: "green",
      fill: true,
      opacity: 0.8
    };
  },


onEachFeature(feature, layer) {
    layer.on('mouseover', function () {
      this.setStyle({
        'fillColor': '#0000ff'
      });
    });
    layer.on('mouseout', function () {
      this.setStyle({
        'fillColor': '#ff0000'
      });
    });
    layer.on('click', function () {
    window.location = feature.properties.URL;
    });
}

});

$.getJSON("data/districts.geojson", function (data) {
  districts.addData(data);
});

YaFred.. 5

onEachFeature回调中,您可以获取由GeoJSON图层创建的L.Polygon的中心并将标签绑定到它.

var polygOnCenter= layer.getBounds().getCenter();

// e.g. using Leaflet.label plugin
L.marker(polygonCenter)
    .bindLabel(feature.properties['NAME'], { noHide: true })
    .addTo(map);

这是一个例子:http://jsfiddle.net/FranceImage/ro54bqbz/使用Leaflet.label



1> YaFred..:

onEachFeature回调中,您可以获取由GeoJSON图层创建的L.Polygon的中心并将标签绑定到它.

var polygOnCenter= layer.getBounds().getCenter();

// e.g. using Leaflet.label plugin
L.marker(polygonCenter)
    .bindLabel(feature.properties['NAME'], { noHide: true })
    .addTo(map);

这是一个例子:http://jsfiddle.net/FranceImage/ro54bqbz/使用Leaflet.label


推荐阅读
author-avatar
原来我不帅S_420
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有