小冊子：折線下的標籤

Question

我想爲小冊子中的折線做靜態標籤（在我的線條和平行線下）。

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

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

但 'noHide' parametr不是折線工作？並且我想要標記並行我的線。

我該怎麼做？

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

您可以創建連接到位於中間點iconless markers標籤通過下面的公式計算並設置每個中點位置，您的多段線的折線圖，

Math.round(arrPolylinePoints.length/2) - 1;