diff options
| -rw-r--r-- | htdocs/index.html | 4 | ||||
| -rw-r--r-- | htdocs/leafletjs/L.LabelTextCollision.js | 13 | ||||
| -rw-r--r-- | htdocs/leafletjs/ctxtextpath.js | 35 |
3 files changed, 50 insertions, 2 deletions
diff --git a/htdocs/index.html b/htdocs/index.html index d9cff65..2d77687 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -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> diff --git a/htdocs/leafletjs/L.LabelTextCollision.js b/htdocs/leafletjs/L.LabelTextCollision.js new file mode 100644 index 0000000..7855f66 --- /dev/null +++ b/htdocs/leafletjs/L.LabelTextCollision.js @@ -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]);}}},});
\ No newline at end of file diff --git a/htdocs/leafletjs/ctxtextpath.js b/htdocs/leafletjs/ctxtextpath.js new file mode 100644 index 0000000..c9389cb --- /dev/null +++ b/htdocs/leafletjs/ctxtextpath.js @@ -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);}};})();
\ No newline at end of file |