markus/lifo-dijkstraserv
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

Import L.LabelTextCollision.js and ctxtextpath.js into repo

Browse Source
This commit is contained in:
Markus Koch 2020-04-19 22:47:35 +02:00
parent 94c05d5358
commit 9c703b50aa
3 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
htdocs/index.html
View File

@ -10,8 +10,8 @@
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<script src="awesomemarkers/leaflet.awesome-markers.js"></script>
<!-- Streets -->
<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='leafletjs/ctxtextpath.js'></script>
<script src='leafletjs/L.LabelTextCollision.js'></script>
<script src='leafletjs/Leaflet.streetlabels.js'></script>
<!-- Map Editor -->
<script src='leafletjs/Leaflet.Editable.js'></script>

13
htdocs/leafletjs/L.LabelTextCollision.js Normal file
View File

@ -0,0 +1,13 @@
L.LabelTextCollision=L.Canvas.extend({options:{collisionFlg:true},initialize:function(options){options=L.Util.setOptions(this,options);},_handleMouseHover:function(e,point){var id,layer;for(id in this._drawnLayers){layer=this._drawnLayers[id];if(layer.options.interactive&&layer._containsPoint(point)){L.DomUtil.addClass(this._containerText,'leaflet-interactive');this._fireEvent([layer],e,'mouseover');this._hoveredLayer=layer;}}
if(this._hoveredLayer){this._fireEvent([this._hoveredLayer],e);}},_handleMouseOut:function(e,point){var layer=this._hoveredLayer;if(layer&&(e.type==='mouseout'||!layer._containsPoint(point))){L.DomUtil.removeClass(this._containerText,'leaflet-interactive');this._fireEvent([layer],e,'mouseout');this._hoveredLayer=null;}},_updateTransform:function(center,zoom){L.Canvas.prototype._updateTransform.call(this,center,zoom);var scale=this._map.getZoomScale(zoom,this._zoom),position=L.DomUtil.getPosition(this._container),viewHalf=this._map.getSize().multiplyBy(0.5+this.options.padding),currentCenterPoint=this._map.project(this._center,zoom),destCenterPoint=this._map.project(center,zoom),centerOffset=destCenterPoint.subtract(currentCenterPoint),topLeftOffset=viewHalf.multiplyBy(-scale).add(position).add(viewHalf).subtract(centerOffset);if(L.Browser.any3d){L.DomUtil.setTransform(this._containerText,topLeftOffset,scale);}else{L.DomUtil.setPosition(this._containerText,topLeftOffset);}},_initContainer:function(options){L.Canvas.prototype._initContainer.call(this);this._containerText=document.createElement('canvas');L.DomEvent.on(this._containerText,'mousemove',L.Util.throttle(this._onMouseMove,32,this),this).on(this._containerText,'click dblclick mousedown mouseup contextmenu',this._onClick,this).on(this._containerText,'mouseout',this._handleMouseOut,this);this._ctxLabel=this._containerText.getContext('2d');L.DomUtil.addClass(this._containerText,'leaflet-zoom-animated');this.getPane().appendChild(this._containerText);},_update:function(){this._textList=[];L.Renderer.prototype._update.call(this);var b=this._bounds,container=this._containerText,size=b.getSize(),m=L.Browser.retina?2:1;L.DomUtil.setPosition(container,b.min);container.width=m*size.x;container.height=m*size.y;container.style.width=size.x+'px';container.style.height=size.y+'px';container.style.zIndex='4';this._container.style.zIndex='3';if(L.Browser.retina){this._ctxLabel.scale(2,2);}
this._ctxLabel.translate(-b.min.x,-b.min.y);L.Canvas.prototype._update.call(this);},_updatePoly:function(layer,closed){L.Canvas.prototype._updatePoly.call(this,layer,closed);this._text(this._ctxLabel,layer);},_updateCircle:function(layer){L.Canvas.prototype._updateCircle.call(this,layer);this._text(this._ctxLabel,layer);},_text:function(ctx,layer){if(layer.options.text!=undefined){ctx.globalAlpha=1;var p=layer._point;var textPoint;if(p==undefined){if(layer._parts.length==0||layer._parts[0].length==0){return;}
p=this._getCenter(layer._parts[0]);}
var offsetX=0;var offsetY=0;ctx.lineWidth=4.0;ctx.font="16px 'Meiryo'";var textWidth=(ctx.measureText(layer.options.text).width)
+p.x;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.strokeStyle="white";ctx.strokeText(layer.options.text,p.x+offsetX,p.y
+offsetY);if(layer.options.textColor==undefined){ctx.fillStyle="blue";}else{ctx.fillStyle=layer.options.textColor;}
ctx.fillText(layer.options.text,p.x+offsetX,p.y
+offsetY);}},_getCenter:function(points){var i,halfDist,segDist,dist,p1,p2,ratio,len=points.length;if(!len){return null;}
for(i=0,halfDist=0;i<len-1;i++){halfDist+=points[i].distanceTo(points[i+1])/2;}
if(halfDist===0){return points[0];}
for(i=0,dist=0;i<len-1;i++){p1=points[i];p2=points[i+1];segDist=p1.distanceTo(p2);dist+=segDist;if(dist>halfDist){ratio=(dist-halfDist)/segDist;var resutl=[p2.x-ratio*(p2.x-p1.x),p2.y-ratio*(p2.y-p1.y)];return L.point(resutl[0],resutl[1]);}}},});

35
htdocs/leafletjs/ctxtextpath.js Normal file
View File

@ -0,0 +1,35 @@
(function()
{function dist2D(x1,y1,x2,y2)
{var dx=x2-x1;var dy=y2-y1;return Math.sqrt(dx*dx+dy*dy);}
CanvasRenderingContext2D.prototype.textOverflow="";CanvasRenderingContext2D.prototype.textJustify=false;CanvasRenderingContext2D.prototype.textStrokeMin=0;var state=[];var save=CanvasRenderingContext2D.prototype.save;CanvasRenderingContext2D.prototype.save=function()
{state.push({textOverflow:this.textOverflow,textJustify:this.textJustify,textStrokeMin:this.textStrokeMin,});save.call(this);}
var restore=CanvasRenderingContext2D.prototype.restore;CanvasRenderingContext2D.prototype.restore=function()
{restore.call(this);var s=state.pop();this.textOverflow=s.textOverflow;this.textJustify=s.textJustify;this.textStrokeMin=s.textStrokeMin;}
CanvasRenderingContext2D.prototype.textPath=function(text,path)
{var di,dpos=0;var pos=2;function pointAt(dl)
{if(!di||dpos+di<dl)
{for(;pos<path.length;)
{di=dist2D(path[pos-2],path[pos-1],path[pos],path[pos+1]);if(dpos+di>dl)break;pos+=2;if(pos>=path.length)break;dpos+=di;}}
var x,y,dt=dl-dpos;if(pos>=path.length)
{pos=path.length-2;}
if(!dt)
{x=path[pos-2];y=path[pos-1];}
else
{x=path[pos-2]+(path[pos]-path[pos-2])*dt/di;y=path[pos-1]+(path[pos+1]-path[pos-1])*dt/di;}
return[x,y,Math.atan2(path[pos+1]-path[pos-1],path[pos]-path[pos-2])];}
var letterPadding=this.measureText(" ").width*0.25;var d=0;for(var i=2;i<path.length;i+=2)
{d+=dist2D(path[i-2],path[i-1],path[i],path[i+1])}
if(d<this.minWidth)return;var nbspace=text.split(" ").length-1;if(this.textOverflow!="visible")
{if(d<this.measureText(text).width+(text.length-1+nbspace)*letterPadding)
{var overflow=(this.textOverflow=="ellipsis")?'\u2026':this.textOverflow||"";var dt=overflow.length-1;do
{if(text[text.length-1]===" ")nbspace--;text=text.slice(0,-1);}while(text&&d<this.measureText(text+overflow).width+(text.length+dt+nbspace)*letterPadding)
text+=overflow;}}
var start=0;switch(this.textJustify||this.textAlign)
{case true:case "center":case "end":case "right":{if(this.textJustify)
{start=0;letterPadding=(d-this.measureText(text).width)/(text.length-1+nbspace);}
else
{start=d-this.measureText(text).width-(text.length+nbspace)*letterPadding;if(this.textAlign=="center")start/=2;}
break;}
default:break;}
for(var t=0;t<text.length;t++)
{var letter=text[t];var wl=this.measureText(letter).width;var p=pointAt(start+wl/2);this.save();this.textAlign="center";this.translate(p[0],p[1]);this.rotate(p[2]);if(this.lineWidth>0.1)this.strokeText(letter,0,0);this.fillText(letter,0,0);this.restore();start+=wl+letterPadding*(letter==" "?2:1);}};})();