Compare commits
No commits in common. "ba466fe474572c67b3c5fbfe2b2699ee2bea2fb1" and "6a86056a8776cc35de290562cb55939e05ed3020" have entirely different histories.
ba466fe474
...
6a86056a87
@ -12,7 +12,7 @@
|
|||||||
<!-- Streets -->
|
<!-- Streets -->
|
||||||
<script src='https://rawcdn.githack.com/Viglino/Canvas-TextPath/9a757d745071e0eaf2440a1d02117dad38f5b6dd/ctxtextpath.js'></script>
|
<script src='https://rawcdn.githack.com/Viglino/Canvas-TextPath/9a757d745071e0eaf2440a1d02117dad38f5b6dd/ctxtextpath.js'></script>
|
||||||
<script src='https://rawcdn.githack.com/yakitoritabetai/Leaflet.LabelTextCollision/90fe755cc7ec5d97b71e2e953464fa5369d6e655/dist/L.LabelTextCollision.js'></script>
|
<script src='https://rawcdn.githack.com/yakitoritabetai/Leaflet.LabelTextCollision/90fe755cc7ec5d97b71e2e953464fa5369d6e655/dist/L.LabelTextCollision.js'></script>
|
||||||
<script src='leafletjs/Leaflet.streetlabels.js'></script>
|
<script src='https://raw.githack.com/triedeti/Leaflet.streetlabels/master/src/Leaflet.streetlabels.js'></script>
|
||||||
<!-- Map Editor -->
|
<!-- Map Editor -->
|
||||||
<script src='leafletjs/Leaflet.Editable.js'></script>
|
<script src='leafletjs/Leaflet.Editable.js'></script>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@ -1,199 +0,0 @@
|
|||||||
/*
|
|
||||||
*
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
L.StreetLabels = L.LabelTextCollision
|
|
||||||
.extend({
|
|
||||||
|
|
||||||
options: {
|
|
||||||
/**
|
|
||||||
* Default property name to display the tooltip
|
|
||||||
*/
|
|
||||||
propertyName: 'name',
|
|
||||||
showLabelIf: null,
|
|
||||||
fontStyle: {
|
|
||||||
dynamicFontSize: false,
|
|
||||||
fontSize: 10,
|
|
||||||
fontSizeUnit: "px",
|
|
||||||
lineWidth: 4.0,
|
|
||||||
fillStyle: "black",
|
|
||||||
strokeStyle: "white",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
initialize: function (options) {
|
|
||||||
L.LabelTextCollision.prototype.initialize.call(this, options);
|
|
||||||
L.Util.stamp(this);
|
|
||||||
this._layers = this._layers || {};
|
|
||||||
},
|
|
||||||
|
|
||||||
_initContainer: function (options) {
|
|
||||||
L.LabelTextCollision.prototype._initContainer.call(this, options);
|
|
||||||
|
|
||||||
//Register the add/remove layers event to update the annotations accordingly
|
|
||||||
if (this._map) {
|
|
||||||
var handleLayerChanges = function () {
|
|
||||||
this._reset();
|
|
||||||
this._redraw();
|
|
||||||
}.bind(this);
|
|
||||||
this._map.on("layerremove", L.Util.throttle(handleLayerChanges, 32, this));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_text: function (ctx, layer) {
|
|
||||||
|
|
||||||
if (layer && layer.feature && layer.feature.properties && layer.feature.properties[this.options.propertyName] !== 'undefined') {
|
|
||||||
|
|
||||||
if (this.options.showLabelIf) {
|
|
||||||
if (this.options.showLabelIf.call(this, layer.feature) === false) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var layerText = layer.feature.properties[this.options.propertyName];
|
|
||||||
ctx.globalAlpha = 1;
|
|
||||||
var p;
|
|
||||||
|
|
||||||
// polygon or polyline
|
|
||||||
if (layer._parts.length === 0 || layer._parts[0].length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (layer instanceof L.Polygon && this._map.hasLayer(layer)) {
|
|
||||||
p = this._getCentroid(layer);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
p = this._getCenter(layer._parts[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!p) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// label bounds offset
|
|
||||||
var offsetX = 0;
|
|
||||||
var offsetY = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* TODO setting for custom font
|
|
||||||
*/
|
|
||||||
ctx.lineWidth = this.options.fontStyle.lineWidth;
|
|
||||||
|
|
||||||
var fontSize = this.options.fontStyle.fontSize;
|
|
||||||
|
|
||||||
if (this._map && this.options.fontStyle.dynamicFontSize === true) {
|
|
||||||
fontSize = this._getDynamicFontSize();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.font = fontSize + this.options.fontStyle.fontSizeUnit + " 'Helvetica Neue',Helvetica,Arial,sans-serif";
|
|
||||||
|
|
||||||
// Collision detection
|
|
||||||
var textWidth = (ctx.measureText(layerText).width) + p.x;// + offsetX;
|
|
||||||
|
|
||||||
var textHeight = p.y + offsetY + 20;
|
|
||||||
|
|
||||||
var bounds = L.bounds(
|
|
||||||
L.point(p.x + offsetX, p.y + offsetY), L.point(
|
|
||||||
textWidth, textHeight));
|
|
||||||
|
|
||||||
if (this.options.collisionFlg) {
|
|
||||||
|
|
||||||
for (var index in this._textList) {
|
|
||||||
var pointBounds = this._textList[index];
|
|
||||||
if (pointBounds.intersects(bounds)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this._textList.push(bounds);
|
|
||||||
|
|
||||||
|
|
||||||
ctx.fillStyle = this.options.fontStyle.fillStyle;
|
|
||||||
ctx.strokeStyle = this.options.fontStyle.strokeStyle;
|
|
||||||
|
|
||||||
if (layer instanceof L.Polygon || layer instanceof L.CircleMarker) {
|
|
||||||
var textLength = ctx.measureText(layerText).width;
|
|
||||||
ctx.strokeText(layerText, p.x + offsetX - textLength / 2, p.y + offsetY);
|
|
||||||
ctx.fillText(layerText, p.x + offsetX - textLength / 2, p.y + offsetY);
|
|
||||||
}
|
|
||||||
if (layer instanceof L.Polyline) {
|
|
||||||
/**
|
|
||||||
* Render text alongside the polyline
|
|
||||||
* **/
|
|
||||||
var startCoords = layer.getLatLngs()[0];
|
|
||||||
var stopCoords = layer.getLatLngs()[layer.getLatLngs().length - 1];
|
|
||||||
|
|
||||||
//Flip lineString if bearing is negative
|
|
||||||
flip = (this._getBearing(startCoords, stopCoords) < 0);
|
|
||||||
|
|
||||||
if (layer._parts) {
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
ctx.textBaseline = "middle";
|
|
||||||
ctx.lineWidth = 3;
|
|
||||||
layer._parts.forEach(function (part) {
|
|
||||||
//Build the points list for the first part
|
|
||||||
var pathPoints = [];
|
|
||||||
for (var i = 0; i < part.length; i++) {
|
|
||||||
var linePart = (flip ? part[part.length - 1 - i] : part[i]);
|
|
||||||
pathPoints.push(linePart.x);
|
|
||||||
pathPoints.push(linePart.y);
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.textPath(layerText, pathPoints);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/***
|
|
||||||
* Returns the bearing in degrees clockwise from north (0 degrees)
|
|
||||||
from the first L.LatLng to the second, at the first LatLng
|
|
||||||
@param {L.LatLng} latlng1: origin point of the bearing
|
|
||||||
@param {L.LatLng} latlng2: destination point of the bearing
|
|
||||||
@returns {float} degrees clockwise from north.
|
|
||||||
Source: https://makinacorpus.github.io/Leaflet.GeometryUtil/leaflet.geometryutil.js.html
|
|
||||||
*/
|
|
||||||
_getBearing: function (startCoords, stopCoords) {
|
|
||||||
if (startCoords.lat == stopCoords.lat) {
|
|
||||||
if (startCoords.lng > stopCoords.lng)
|
|
||||||
return -180;
|
|
||||||
else
|
|
||||||
return 180;
|
|
||||||
}
|
|
||||||
if (startCoords.lng == stopCoords.lng) {
|
|
||||||
if (startCoords.lat > stopCoords.lat)
|
|
||||||
return -90;
|
|
||||||
else
|
|
||||||
return 90;
|
|
||||||
}
|
|
||||||
var angle = Math.atan(stopCoords.lng - startCoords.lng, stopCoords.lat - startCoords.lat) * 180 / Math.Pi;
|
|
||||||
return angle;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
Returns a clone with reversed coordinates.
|
|
||||||
@param {L.PolyLine} polyline polyline to reverse
|
|
||||||
@returns {L.PolyLine} polyline reversed
|
|
||||||
Source: https://makinacorpus.github.io/Leaflet.GeometryUtil/leaflet.geometryutil.js.html
|
|
||||||
*/
|
|
||||||
_getLineStringReverse: function (polyline) {
|
|
||||||
var latLngs = polyline.getLatLngs().slice(0).reverse();
|
|
||||||
polyline.setLatLngs(latLngs);
|
|
||||||
return polyline;
|
|
||||||
},
|
|
||||||
|
|
||||||
_getDynamicFontSize: function () {
|
|
||||||
return parseInt(this._map.getZoom());
|
|
||||||
},
|
|
||||||
|
|
||||||
_getCentroid: function (layer) {
|
|
||||||
if (layer && layer.getCenter && this._map) {
|
|
||||||
var latlngCenter = layer.getCenter();
|
|
||||||
var containerPoint = this._map.latLngToContainerPoint(latlngCenter);
|
|
||||||
return this._map.containerPointToLayerPoint(containerPoint);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user