ol-elevation-profile 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +97 -0
- package/dist/ol-elevation-profile.css +110 -0
- package/dist/ol-elevation-profile.esm.js +740 -0
- package/dist/ol-elevation-profile.esm.min.js +16 -0
- package/dist/ol-elevation-profile.js +759 -0
- package/dist/ol-elevation-profile.min.js +16 -0
- package/package.json +75 -0
- package/src/ol-elevation-profile.css +110 -0
- package/src/ol-elevation-profile.js +738 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/*! ol-elevation-profile | MIT License | https://github.com/lc-4918/ol-elevation-profile */
|
|
2
|
+
import t from"ol/control/Control.js";import e from"ol/Overlay.js";import{unByKey as s}from"ol/Observable.js";import{toLonLat as o}from"ol/proj.js";import{getDistance as i}from"ol/sphere.js";import{boundingExtent as l}from"ol/extent.js";import*as n from"d3";
|
|
3
|
+
/**
|
|
4
|
+
* Synchronized elevation profile control for OpenLayers, rendered with d3.
|
|
5
|
+
*
|
|
6
|
+
* Reads elevation (Z) directly from 3D line geometries (`[lon, lat, z]`),
|
|
7
|
+
* so no external elevation service is queried. Clicking (or hovering) a track
|
|
8
|
+
* shows its profile; a marker stays synchronized on both the map and the chart.
|
|
9
|
+
*
|
|
10
|
+
* Peer dependencies (provided by the host application, not bundled):
|
|
11
|
+
* - OpenLayers >= 6 (https://openlayers.org/)
|
|
12
|
+
* - d3 >= 7 (https://d3js.org/)
|
|
13
|
+
*
|
|
14
|
+
* @module ol-elevation-profile
|
|
15
|
+
* @license MIT
|
|
16
|
+
*/const a={steelblue:{area:"#4682b4",line:"#3a6d96",axis:"#555",text:"#222",focus:"#e6550d"},lime:{area:"#9ccc2f",line:"#7da521",axis:"#555",text:"#222",focus:"#d62728"},purple:{area:"#9467bd",line:"#76529c",axis:"#555",text:"#222",focus:"#ff9f1c"},slate:{area:"#7c8a99",line:"#4a5560",axis:"#5a6570",text:"#26303a",focus:"#2f81f7"},graphite:{area:"#9a948c",line:"#5c574f",axis:"#5c574f",text:"#2b2823",focus:"#e07a3f"},amber:{area:"#f0a23b",line:"#c4671a",axis:"#7a5a36",text:"#3a2a16",focus:"#1f6fb2"}},r=["top","bottom","left","right","top-left","top-right","bottom-left","bottom-right"],h={immersion:"docked",position:"bottom",width:520,height:180,margins:{unit:"px",top:20,right:24,bottom:30,left:48},units:"meters",dataProjection:null,maxPoints:2e3,smoothing:0,theme:"steelblue",color:null,trackLayer:null,transparency:!1,transparencyLevel:.45,grid:!0,slope:!1,slopeClassSize:2.5,slopeColors:null,slopeSeparators:!0,slopeLegend:!0,maxClasses:8,maxLegendClasses:8,xTicks:null,yTicks:null,show:"click",collapsable:!0,collapsed:!1,followMap:!0,marker:!0,hideOnMapClick:!0,responsive:!0,mobileBreakpoint:640,zoom:!1,tooltipItems:["distance","elevation"],headerItems:["distance","ascent","descent","minmax"],titleProperty:"name",titleLink:null,labels:{distance:"Distance",elevation:"Altitude",slope:"Pente",ascent:"D+",descent:"D-",empty:"Cliquez un tracé",zoomStart:"Définir le début (A)",zoomEnd:"Définir la fin (B)",zoomAll:"Tout voir"}};function p(t,e){const s={};return Object.keys(t).forEach(e=>{s[e]=t[e]}),e&&Object.keys(e).forEach(o=>{e[o]&&"object"==typeof e[o]&&!Array.isArray(e[o])&&t[o]&&"object"==typeof t[o]?s[o]=p(t[o],e[o]):s[o]=e[o]}),s}const c=t=>String(t).replace(/[&<>"']/g,t=>({"&":"&","<":"<",">":">",'"':""","'":"'"}[t])),d=t=>"string"==typeof t&&/^(https?:)?\/\/|^mailto:/i.test(t);function u(t,e,s){let o=t;if("function"==typeof o)try{o=o(e,s)}catch(t){return null}if(Array.isArray(o)&&(o=o[0]),o&&o.getStroke){const t=o.getStroke();if(t)return t.getColor()}return null}const m=(t,e)=>{if("imperial"===e){const e=t/1609.344;return e<.2?`${Math.round(3.28084*t)} ft`:`${e.toFixed(e<10?2:1)} mi`}return t<1e3?`${Math.round(t)} m`:`${(t/1e3).toFixed(t<1e4?2:1)} km`},_=(t,e)=>"imperial"===e?`${Math.round(3.28084*t)} ft`:`${Math.round(t)} m`;const f='<svg viewBox="0 0 24 24"><path d="M5 13h14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>',g='<svg viewBox="0 0 24 24"><path d="M3 19l5-7 4 4 4-6 5 9z" fill="currentColor" opacity=".85"/></svg>';class y extends t{constructor(t){const e=p(h,t||{});-1===r.indexOf(e.position)&&(e.position="bottom");const s=function(t){const e=document.createElement("div");return e.className=`ol-elevation-profile ol-unselectable ol-control oep-pos-${t.position} oep-theme-${"string"==typeof t.theme?t.theme:"custom"}`+("floating"===t.immersion?" oep-floating":""),e}(e);super({element:s,target:t&&t.target}),this.options=e,this.slopeColors=e.slopeColors||null,this._feature=null,this._fullSamples=null,this._fullStats=null,this._samples=null,this._stats=null,this._marker=null,this._collapsed=!!e.collapsed,this._cropMode=!1,this._zoomA=null,this._zoomB=null,this._armed=null,this._fitRes=null,this._onResize=()=>{this._feature&&!this._collapsed&&this._render()},this._buildDom(s),s.style.display="none"}static featureHasZ(t){const e=t&&t.getGeometry&&t.getGeometry();if(!e)return!1;const s="MultiLineString"===e.getType()?e.getCoordinates():[e.getCoordinates()];for(const t of s)for(const e of t)if(e.length>2&&isFinite(e[2]))return!0;return!1}_buildDom(t){const e=this.options;this._applyTheme(),this._applyTransparency();const s=document.createElement("div");s.className="oep-header",this._titleEl=document.createElement("span"),this._titleEl.className="oep-title",this._titleEl.textContent=e.labels.empty,this._statsEl=document.createElement("span"),this._statsEl.className="oep-stats",s.appendChild(this._titleEl),s.appendChild(this._statsEl),this._toolbar=document.createElement("span"),this._toolbar.className="oep-toolbar";const o=(t,e,s,o)=>{const i=document.createElement("button");return i.type="button",i.className=`oep-tbtn ${t}`,i.innerHTML=e,i.title=s,i.setAttribute("aria-label",s),i.addEventListener("click",o),this._toolbar.appendChild(i),i};this._btnA=o("oep-a",'<svg viewBox="0 0 24 24"><path d="M7 5v14M11 12h8m0 0-3-3m3 3-3 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',e.labels.zoomStart,()=>this._arm("A")),this._btnB=o("oep-b",'<svg viewBox="0 0 24 24"><path d="M17 5v14M13 12H5m0 0 3-3m-3 3 3 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',e.labels.zoomEnd,()=>this._arm("B")),this._btnAll=o("oep-all",'<svg viewBox="0 0 24 24"><path d="M4 12h16M4 12l4-4M4 12l4 4M20 12l-4-4M20 12l-4 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',e.labels.zoomAll,()=>this._exitZoom()),s.appendChild(this._toolbar);const i=document.createElement("button");i.className="oep-toggle",i.type="button",i.setAttribute("aria-label","Réduire ou agrandir le profil"),i.innerHTML=this._collapsed?g:f,i.addEventListener("click",()=>this.toggleCollapsed()),s.appendChild(i),this._toggleBtn=i,this._legendEl=document.createElement("div"),this._legendEl.className="oep-legend",this._legendEl.style.display="none",this._body=document.createElement("div"),this._body.className="oep-body",t.appendChild(s),t.appendChild(this._legendEl),t.appendChild(this._body),this._applyCollapsable(),this._updateZoomButtons(),this._collapsed&&t.classList.add("oep-collapsed")}_resolveColor(){const t=this.options;return t.color?"auto"===t.color?this._featureColor():t.color:null}_featureColor(){const t=this._feature;if(!t)return null;const e=this.getMap()?this.getMap().getView().getResolution():1;let s=u(t.getStyle&&t.getStyle(),t,e);return!s&&this.options.trackLayer&&(s=u(this.options.trackLayer.getStyle&&this.options.trackLayer.getStyle(),t,e)),function(t){if(null==t)return null;if("string"==typeof t)return t;if(Array.isArray(t)){const e=t.length>3?t[3]:1;return`rgba(${0|t[0]},${0|t[1]},${0|t[2]},${e})`}return null}(s)}_applyTheme(){const t=this.options,e="object"==typeof t.theme?t.theme:a[t.theme]||a.steelblue;this.themeColors=e;const s=this.element,o=this._resolveColor(),i=o||e.area;let l=e.line;if(o)try{l=String(n.color(o).darker(.7))}catch(t){l=o}s.style.setProperty("--oep-area",i),s.style.setProperty("--oep-line",l),s.style.setProperty("--oep-axis",e.axis),s.style.setProperty("--oep-text",e.text),s.style.setProperty("--oep-focus",e.focus)}_applyTransparency(){const t=this.options.transparency;let e;e=!1===t||null==t?1:!0===t?this.options.transparencyLevel:Math.max(0,Math.min(1,+t)),this.element.style.setProperty("--oep-bg",`rgba(255,255,255,${e})`),this.element.classList.toggle("oep-transparent",e<1)}_applyCollapsable(){const t=this.options.collapsable;this._toggleBtn.style.display=t?"":"none",!t&&this._collapsed&&this.toggleCollapsed(!1)}toggleCollapsed(t){this._collapsed="boolean"==typeof t?t:!this._collapsed,this.element.classList.toggle("oep-collapsed",this._collapsed),this._toggleBtn.innerHTML=this._collapsed?g:f,!this._collapsed&&this._feature&&this._render(),this._adjustAttribution()}_availWidth(){const t=this.getMap(),e=t&&t.getTargetElement&&t.getTargetElement();return e&&e.clientWidth||("undefined"!=typeof window?window.innerWidth:1024)}_isMobile(){return this.options.responsive&&"undefined"!=typeof window&&window.innerWidth<=(this.options.mobileBreakpoint||640)}_applyPlacement(){const t=this._isMobile();let e=this.options.position;return t&&(e=/top/.test(e)?"top":"bottom"),this.element.className=this.element.className.replace(/oep-pos-\S+/,`oep-pos-${e}`),this.element.classList.toggle("oep-mobile",t),t}_adjustAttribution(){const t=this.getMap(),e=t&&t.getTargetElement&&t.getTargetElement(),s=e&&e.querySelector&&e.querySelector(".ol-attribution");if(!s)return;if(s.style.bottom="",s.style.right="","none"===this.element.style.display||this._collapsed)return;const o=e.getBoundingClientRect(),i=this.element.getBoundingClientRect();if(!i.height)return;const l=o.bottom-i.bottom,n=o.right-i.right;l<i.height&&n<24&&(s.style.right=`${Math.max(0,Math.round(n))}px`,s.style.bottom=`${Math.round(i.height+2*l)}px`)}setMap(t){const o=this.getMap();if(super.setMap(t),this._mapKeys&&(this._mapKeys.forEach(s),this._mapKeys=null),o&&"undefined"!=typeof window&&window.removeEventListener("resize",this._onResize),this._marker&&!t&&this._marker.setPosition(void 0),!t)return;const i=this.options;if(i.dataProjection||(i.dataProjection=t.getView().getProjection()),i.marker&&!this._marker){const s=document.createElement("div");s.className="oep-marker",this._marker=new e({element:s,positioning:"center-center",stopEvent:!1}),t.addOverlay(this._marker)}"undefined"!=typeof window&&window.addEventListener("resize",this._onResize);const l=e=>t.forEachFeatureAtPixel(e,t=>{const e=t.getGeometry();return e&&/LineString/.test(e.getType())?t:void 0});this._mapKeys=[],this._mapKeys.push(t.on("mouseover"===i.show?"pointermove":"click",t=>{const e=l(t.pixel);e&&e!==this._feature&&this.setFeature(e)})),i.hideOnMapClick&&this._mapKeys.push(t.on("click",t=>{!l(t.pixel)&&this._feature&&this.clear()})),i.followMap&&this._mapKeys.push(t.on("pointermove",e=>{if(!this._feature||this._collapsed)return;const s=this._feature.getGeometry().getClosestPoint(e.coordinate),o=t.getPixelFromCoordinate(s);o&&(Math.hypot(o[0]-e.pixel[0],o[1]-e.pixel[1])<14?this._focusByCoord(s):this._clearFocus())})),this._mapKeys.push(t.on("moveend",()=>{this._cropMode&&this._fitRes&&t.getView().getResolution()>1.25*this._fitRes&&this._exitZoom()})),this._mapKeys.push(t.on("change:size",this._onResize))}setFeature(t){return this._feature=t||null,this._cropMode=!1,this._zoomA=null,this._zoomB=null,this._armed=null,t?(this.element.style.display="",this._compute(),this._updateZoomButtons(),this._collapsed||this._render(),this):(this._fullSamples=this._samples=null,this._clear(),this)}clear(){return this.setFeature(null)}getStats(){return this._stats}setTheme(t){return this.options.theme=t,this._applyTheme(),this._feature&&!this._collapsed&&this._render(),this}setColor(t){return this.options.color=t||null,this._applyTheme(),this._feature&&!this._collapsed&&this._render(),this}setOptions(t){return this.options=p(this.options,t||{}),t&&"slopeColors"in t&&(this.slopeColors=t.slopeColors||null),t&&(t.theme||"color"in t)&&this._applyTheme(),t&&("transparency"in t||"transparencyLevel"in t)&&this._applyTransparency(),t&&"collapsable"in t&&this._applyCollapsable(),t&&"zoom"in t&&this._updateZoomButtons(),t&&void 0!==t.width&&"number"==typeof t.width&&(this.options.width=t.width),this._feature&&(this._compute(),this._updateZoomButtons(),this._collapsed||this._render()),this}_compute(){const t=this.options,e=this._feature.getGeometry(),s="MultiLineString"===e.getType()?e.getCoordinates():[e.getCoordinates()],l=t.dataProjection||this.getMap()&&this.getMap().getView().getProjection()||"EPSG:3857",n=[];let a=0,r=null;for(const t of s)for(const e of t){const t=o(e,l);r&&(a+=i(r,t)),r=t,n.push({x:a,z:e.length>2&&isFinite(e[2])?e[2]:0,coord:e})}t.smoothing>0&&this._smooth(n,t.smoothing);const h=this._decimate(n,t.maxPoints);this._addSlope(h),this._fullSamples=h,this._fullStats=this._statsOf(h,!0),this._samples=h,this._stats=this._fullStats}_statsOf(t,e){let s=0,o=0,i=1/0,l=-1/0,n=0;for(let e=0;e<t.length;e++){const a=t[e].z;if(a<i&&(i=a),a>l&&(l=a),e>0){const i=a-t[e-1].z;i>0?s+=i:o-=i}const r=Math.abs(t[e].slope||0);r>n&&(n=r)}return{distance:t.length?t[t.length-1].x-t[0].x:0,ascent:s,descent:o,min:isFinite(i)?i:0,max:isFinite(l)?l:0,maxAbsSlope:n,points:t.length}}_smooth(t,e){if(!(e>0)||t.length<3)return;const s=e/2,o=t.map(t=>t.z);let i=0,l=0,n=0;for(let e=0;e<t.length;e++){const a=t[e].x;for(;i<t.length&&t[i].x<a-s;)n-=o[i],i++;for(;l<t.length&&t[l].x<=a+s;)n+=o[l],l++;t[e].z=l>i?n/(l-i):o[e]}}_decimate(t,e){const s=t=>({x:t.x,z:t.z,coord:t.coord});if(!e||t.length<=e)return t.map(s);const o=t.length/e,i=[];for(let l=0;l<e;l++)i.push(s(t[Math.floor(l*o)]));return i.push(s(t[t.length-1])),i}_addSlope(t){for(let e=1;e<t.length;e++){const s=t[e].x-t[e-1].x;t[e].slope=s>0?(t[e].z-t[e-1].z)/s*100:0}t.length&&(t[0].slope=t.length>1?t[1].slope:0)}_slopeScale(){const t=this.options.slopeClassSize||2.5,e=this.options.maxClasses||8,s=Math.max(1,Math.floor((this._stats.maxAbsSlope||0)/t)),o=Math.min(s,e-1),i=s>o;let l;if(this.slopeColors&&this.slopeColors.length){const t=n.interpolateRgbBasis(this.slopeColors);l=e=>t(o?e/o:0)}else{const t=n.scaleLinear().domain([0,.16,.42,.68,1]).range(["#2166ac","#27a35a","#ffe000","#f4791f","#d7191c"]).interpolate(n.interpolateRgb).clamp(!0);l=e=>String(t(o?e/o:0))}return{classSize:t,maxIdx:o,capped:i,colorByIndex:l}}_classIndex(t,e){return Math.min(e.maxIdx,Math.floor(Math.abs(t)/e.classSize))}_renderHeader(){const t=this.options,e=this._stats,s=this._feature,o=s.get&&s.get(t.titleProperty)||"Profil",i=t.titleLink&&s.get&&s.get(t.titleLink);d(i)?this._titleEl.innerHTML=`<a href="${c(i)}" target="_blank" rel="noopener">${c(o)}</a>`:this._titleEl.textContent=o,this._titleEl.setAttribute("title",o);const l=[],n=[];if(t.headerItems.forEach(o=>{if("string"==typeof o){if("distance"===o)l.push(`<b>${m(e.distance,t.units)}</b>`),n.push(m(e.distance,t.units));else if("ascent"===o)l.push(`<span class="oep-up">${t.labels.ascent} ${_(e.ascent,t.units)}</span>`),n.push(`${t.labels.ascent} ${_(e.ascent,t.units)}`);else if("descent"===o)l.push(`<span class="oep-down">${t.labels.descent} ${_(e.descent,t.units)}</span>`),n.push(`${t.labels.descent} ${_(e.descent,t.units)}`);else if("min"===o)l.push(_(e.min,t.units)),n.push(_(e.min,t.units));else if("max"===o)l.push(_(e.max,t.units)),n.push(_(e.max,t.units));else if("minmax"===o){const s=`${_(e.min,t.units)}–${_(e.max,t.units)}`;l.push(s),n.push(s)}}else if(o&&o.property){const t=s.get&&s.get(o.property);if(null==t||""===t)return;const e=o.label?`${o.label} `:"";o.asLink&&d(t)?(l.push(`${e}<a href="${c(t)}" target="_blank" rel="noopener">${c(o.linkText||o.label||t)}</a>`),n.push(`${o.label||""} ${t}`)):(l.push(c(e+t)),n.push(e+t))}}),this._statsEl.innerHTML=l.join(" · "),this._statsEl.setAttribute("title",n.join(" · ")),this._legendEl.innerHTML="",t.slope&&t.slopeLegend){const t=this._slopeScale();for(let e=0;e<=t.maxIdx;e++){const s=t.colorByIndex(e),o=t.capped&&e===t.maxIdx?`≥ ${e*t.classSize} %`:`${e*t.classSize}–${(e+1)*t.classSize} %`,i=document.createElement("span");i.className="oep-leg-it",i.innerHTML=`<i class="oep-sw" style="background:${s}"></i>${o}`,this._legendEl.appendChild(i)}this._legendEl.style.display=""}else this._legendEl.style.display="none"}_render(){const t=this.options,e=this._stats,s=this._samples;if(!s||!s.length)return;this._applyTheme();const o=this._applyPlacement();this._renderHeader();const i=t.margins,l=i.unit||"px",a=t=>"px"===l?t:t*(parseFloat(getComputedStyle(this.element).fontSize)||16),r=this._availWidth(),h="auto"===t.width||"100%"===t.width||"full"===t.width?r:Math.min("number"==typeof t.width?t.width:parseFloat(t.width)||r,r);this.element.style.width=o?"":`${h}px`;const p=this.element.clientWidth||(o?r:h),c=Math.max(220,p-16),d="number"==typeof t.height?t.height:180,u=a(i.top),m=a(i.right),_=a(i.bottom),f=a(i.left),g=Math.max(10,c-f-m),y=Math.max(10,d-u-_),x=null!=t.xTicks?t.xTicks:Math.max(2,Math.round(g/80)),b=null!=t.yTicks?t.yTicks:Math.max(2,Math.round(y/40));this._body.innerHTML="";const M=n.select(this._body).append("svg").attr("class","oep-svg").attr("width",c).attr("height",d).attr("viewBox",`0 0 ${c} ${d}`),k=M.append("g").attr("transform",`translate(${f},${u})`),z=n.scaleLinear().domain([0,e.distance]).range([0,g]),v=.1*(e.max-e.min)||10,E=n.scaleLinear().domain([e.min-v,e.max+v]).range([y,0]).nice();this._x=z,this._y=E,this._dims={innerW:g,innerH:y},t.grid&&k.append("g").attr("class","oep-grid").call(n.axisLeft(E).ticks(b).tickSize(-g).tickFormat(""));const C="imperial"===t.units?1609.344:1e3;const w=n.area().x(t=>z(t.x)).y0(y).y1(t=>E(t.z));if(t.slope){const e=this._slopeScale(),o=[];let i=1;for(;i<s.length;){const t=this._classIndex(s[i].slope,e);let l=i;for(;l+1<s.length&&this._classIndex(s[l+1].slope,e)===t;)l++;k.append("path").datum(s.slice(i-1,l+1)).attr("class","oep-area-slope").attr("fill",e.colorByIndex(t)).attr("d",w),i>1&&o.push(s[i-1]),i=l+1}t.slopeSeparators&&o.forEach(t=>{k.append("line").attr("class","oep-slope-sep").attr("x1",z(t.x)).attr("x2",z(t.x)).attr("y1",E(t.z)).attr("y2",y)})}else k.append("path").datum(s).attr("class","oep-area").attr("d",w);k.append("path").datum(s).attr("class","oep-line").attr("d",n.line().x(t=>z(t.x)).y(t=>E(t.z))),k.append("g").attr("class","oep-axis oep-axis-x").attr("transform",`translate(0,${y})`).call(n.axisBottom(z).ticks(x).tickFormat(t=>(t/C).toFixed(t/C<10?1:0))),k.append("text").attr("class","oep-axis-label").attr("x",g).attr("y",y+_-4).attr("text-anchor","end").text((t=>"imperial"===t?"mi":"km")(t.units)),k.append("g").attr("class","oep-axis oep-axis-y").call(n.axisLeft(E).ticks(b).tickFormat(e=>"imperial"===t.units?Math.round(3.28084*e):e)),t.zoom&&!this._cropMode&&[["A",this._zoomA],["B",this._zoomB]].forEach(([t,e])=>{if(null==e)return;const s=z(e);k.append("line").attr("class","oep-ab-line").attr("x1",s).attr("x2",s).attr("y1",0).attr("y2",y),k.append("text").attr("class","oep-ab-label").attr("x",s).attr("y",-6).attr("text-anchor","middle").text(t)});const S=k.append("g").attr("class","oep-focus").style("display","none");S.append("line").attr("class","oep-focus-line").attr("y1",0).attr("y2",y),S.append("circle").attr("class","oep-focus-dot").attr("r",4);const $=S.append("g").attr("class","oep-focus-label");$.append("rect").attr("class","oep-focus-bg"),$.append("text").attr("class","oep-focus-txt"),this._focus=S;const B=n.bisector(t=>t.x).left,L=t=>{const s=n.pointer(t,k.node())[0];return Math.max(0,Math.min(e.distance,z.invert(s)))},T=M.append("rect").attr("class","oep-overlay").attr("x",f).attr("y",u).attr("width",g).attr("height",y);T.on("mousemove",t=>{const e=L(t),o=B(s,e,1),i=s[o-1],l=s[o]||i,n=e-i.x>l.x-e?l:i;this._setFocus(n),this._marker&&this._marker.setPosition(n.coord)}).on("mouseout",()=>this._clearFocus()),T.on("click",t=>{if(!this._armed||this._cropMode)return;const e=L(t);"A"===this._armed?this._zoomA=e:this._zoomB=e,this._armed=null,this._updateZoomButtons(),null!=this._zoomA&&null!=this._zoomB?this._applyZoom():this._render()}),this._armed&&T.style("cursor","col-resize"),this._adjustAttribution()}_arm(t){this._armed=this._armed===t?null:t,this._updateZoomButtons(),this._focus&&this._render()}_updateZoomButtons(){const t=!!this.options.zoom&&!!this._feature;this._toolbar.style.display=t?"":"none";const e=this._cropMode;this._btnA.style.display=t&&!e?"":"none",this._btnB.style.display=t&&!e?"":"none",this._btnAll.style.display=t&&e?"":"none",this._btnA.classList.toggle("armed","A"===this._armed),this._btnB.classList.toggle("armed","B"===this._armed)}_applyZoom(){const t=Math.min(this._zoomA,this._zoomB),e=Math.max(this._zoomA,this._zoomB),s=this._fullSamples.filter(s=>s.x>=t&&s.x<=e);if(s.length<2)return;const o=s[0].x,i=s.map(t=>({x:t.x-o,z:t.z,coord:t.coord,slope:t.slope})),n=s.map(t=>t.coord);this._samples=i,this._stats=this._statsOf(i,!1),this._cropMode=!0,this._updateZoomButtons(),this._render();const a=this.getMap();if(a){const t=l(n),e=a.getView();try{this._fitRes=e.getResolutionForExtent(t,a.getSize())}catch(t){this._fitRes=null}e.fit(t,{padding:[40,40,40,40],duration:400})}}_exitZoom(){this._cropMode=!1,this._zoomA=null,this._zoomB=null,this._armed=null,this._fitRes=null,this._samples=this._fullSamples,this._stats=this._fullStats,this._updateZoomButtons(),this._collapsed||this._render();const t=this.getMap();t&&this._feature&&t.getView().fit(this._feature.getGeometry().getExtent(),{padding:[40,40,40,40],duration:400})}_tooltipText(t){const e=this.options,s=[];return e.tooltipItems.forEach(o=>{var i;"distance"===o?s.push(m(t.x,e.units)):"elevation"===o?s.push(_(t.z,e.units)):"slope"===o&&s.push(`${(i=t.slope||0)>=0?"+":""}${i.toFixed(1)} %`)}),s.join(" · ")}_setFocus(t){if(!this._focus)return;const e=this._x,s=this._y;this._focus.style("display",null),this._focus.select(".oep-focus-line").attr("x1",e(t.x)).attr("x2",e(t.x)),this._focus.select(".oep-focus-dot").attr("cx",e(t.x)).attr("cy",s(t.z));let o=s(t.z)-16;o<12&&(o=s(t.z)+22);const i=this._focus.select(".oep-focus-txt").attr("x",e(t.x)).attr("y",o).text(this._tooltipText(t)),l=i.node().getBBox();this._focus.select(".oep-focus-bg").attr("x",l.x-4).attr("y",l.y-2).attr("width",l.width+8).attr("height",l.height+4),e(t.x)+l.width/2>this._dims.innerW?i.attr("text-anchor","end"):e(t.x)-l.width/2<0?i.attr("text-anchor","start"):i.attr("text-anchor","middle")}_focusByCoord(t){const e=this._samples;if(!e)return;let s=null,o=1/0;for(const i of e){const e=i.coord[0]-t[0],l=i.coord[1]-t[1],n=e*e+l*l;n<o&&(o=n,s=i)}s&&(this._setFocus(s),this._marker&&this._marker.setPosition(s.coord))}_clearFocus(){this._focus&&this._focus.style("display","none"),this._marker&&this._marker.setPosition(void 0)}_clear(){this._body.innerHTML="",this._legendEl.innerHTML="",this._legendEl.style.display="none",this._titleEl.textContent=this.options.labels.empty,this._titleEl.removeAttribute("title"),this._statsEl.innerHTML="",this._statsEl.removeAttribute("title"),this._cropMode=!1,this._updateZoomButtons(),this._clearFocus(),this.element.style.display="none",this._adjustAttribution()}}y.addTheme=(t,e)=>{a[t]=e},y.THEMES=a,y.POSITIONS=r,y.version="0.5.0";export{y as default};
|