传单：折线下的标签

Question

我想在传单中为折线做静态标签（在我的线下并平行我的线）。

例如： http://jsfiddle.net/jypp24oq/5/

firstpolyline.bindLabel('Even polylines can have labels.', { noHide: true });

但'noHide'参数不适用于折线？而且我想做标记并行我的行。

我怎么做？

Answer 1

您无法将标签绑定到折线。它将需要基于您想要将其绑定到的行的其他坐标。

查看小提琴上的示例，其中包含一个名为“bindLabelEx”的辅助函数，可以为您处理折线标记：

https://jsfiddle.net/jZv7W/158/

$(document).ready(function() {
  L.Polyline.include({
    bindLabelEx: function (content, options) {
      if (!this.label || this.label.options !== options) {
        this.label = new L.Label(options, this);
      }

      var latlngs = this.getLatLngs();
      var nPoint = latlngs.length;

      var lats = [];
      var lngs = [];
      for(var i = 0; i < nPoint; i++) {
        lats.push(latlngs[i].lat);
        lngs.push(latlngs[i].lng);
      }

      var minLat = Math.min.apply(null, lats);
      var maxLat = Math.max.apply(null, lats);
      var minLng = Math.min.apply(null, lngs);
      var maxLng = Math.max.apply(null, lngs);

      var pointM = {
        lat: (minLat + maxLat) / 2,
        lng: (minLng + maxLng) / 2
      };

      this.label.setContent(content);
      this._showLabelAdded = true;
      this._showLabel({
        latlng: pointM
      });
    }
  });

  L.RotatedMarker = L.Marker.extend({
    _setPos: function(pos) {
      L.Marker.prototype._setPos.call(this, pos);
      if (L.DomUtil.TRANSFORM) {
        // use the CSS transform rule if available
        this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
      } else if (L.Browser.ie) {
        // fallback for IE6, IE7, IE8
        var rad = this.options.angle * L.LatLng.DEG_TO_RAD,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad);
        this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
          costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
      }
    }
  });

  L.rotatedMarker = function(pos, options) {
      return new L.RotatedMarker(pos, options);
  };

  //example user location
  var userLocation = new L.LatLng(28.735, 77.524);

  var map = L.map('map').setView(userLocation, 10);
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
  }).addTo(map);

  var pointA = new L.LatLng(28.635308, 77.22496);
  var pointB = new L.LatLng(28.984461, 77.70641);
  //var pointC = new L.LatLng(29.03, 77.20);
  //var pointD = new L.LatLng(28.52, 77.45);

  var pointM = new L.LatLng( (pointA.lat + pointB.lat) / 2, (pointA.lng + pointB.lng) / 2);

  var pointList = [pointA, pointB];
  //var pointList = [pointA, pointB, pointC, pointD];

  var firstpolyline = new L.Polyline(pointList, {
      color: 'red',
      weight: 3,
      opacity: 0.5,
      smoothFactor: 1
  });

  firstpolyline.addTo(map).bindLabelEx('Even polylines can have labels.', { noHide: true, showLabelAdded: true });

  var angle = Math.atan( (pointB.lat - pointA.lat) / (pointB.lng - pointA.lng) );
  angle *= 180 / Math.PI + 5;

  var marker = L.rotatedMarker(pointM, {
    icon: L.divIcon({
      className: 'label',
      html: 'Do you want me to do?',
      iconSize: [160, 40]
    }),
    angle: -angle
    //draggable: true
  });

  marker.addTo(map);

  /*
  var ll = marker.getLatLng();
  marker.options.angle = -45 * (180 / Math.PI); 
  market.setLatLng(ll);
  */
});

Answer 2

您可以通过以下公式计算和设置每个中间点位置，创建附加到折线中间点Math.round(arrPolylinePoints.length / 2) - 1; 的标签，

{{1}}