bbl-mapbox-react 0.0.25 → 0.0.26
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/dist/index.cjs +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +235 -227
- package/dist/types.d.ts +21 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -54,7 +54,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
|
|
|
54
54
|
z-index: 9999;
|
|
55
55
|
transform: translate(-50%, -50%);
|
|
56
56
|
opacity: 0.8;
|
|
57
|
-
`;let i=document.createElement(`img`);i.src=e.icon,i.style.width=`${r}px`,i.style.height=`${e.size||e.height||r}px`,i.style.objectFit=`contain`,n.appendChild(i),document.body.appendChild(n),ot.current=n;let a=e=>{ot.current&&(ot.current.style.left=`${e.clientX}px`,ot.current.style.top=`${e.clientY}px`)};document.addEventListener(`mousemove`,a),n.dataset.cleanup=`true`,n._cleanup=()=>{document.removeEventListener(`mousemove`,a)}}else t&&(t.getCanvas().style.cursor=``)},[]),$=(0,c.useCallback)(()=>{if(ot.current){let e=ot.current._cleanup;e&&e(),ot.current.remove(),ot.current=null}let e=z.current;e&&(e.getCanvas().style.cursor=``)},[]),Tt=(0,c.useCallback)((e,t,n)=>{if(!e.getSource(t)){if(!e.getStyle().glyphs){let t=e.style,n=`/gis-fonts/{fontstack}/{range}.pbf`;t.glyphs=n,t.stylesheet&&(t.stylesheet.glyphs=n)}e.addSource(t,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:n,type:`symbol`,source:t,filter:[`==`,`$type`,`Point`],layout:{"text-field":[`get`,`label`],"text-size":12,"text-font":[`Open Sans Bold`,`Arial Unicode MS Bold`],"text-allow-overlap":!0,"text-rotation-alignment":`map`,"text-offset":[0,-.8]},paint:{"text-color":`#ffffff`,"text-halo-color":`rgba(0, 0, 0, 0.8)`,"text-halo-width":1}})}},[]),Et=(0,c.useCallback)(()=>{let e=z.current;e&&(e.getSource(`rect-preview-source`)||(e.addSource(`rect-preview-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`rect-preview-fill`,type:`fill`,source:`rect-preview-source`,paint:{"fill-color":`#3388ff`,"fill-opacity":.1}}),e.addLayer({id:`rect-preview-line`,type:`line`,source:`rect-preview-source`,paint:{"line-color":`#3388ff`,"line-width":2,"line-dasharray":[4,4]}}),Tt(e,`rect-preview-measure-source`,`rect-preview-measure-label`)))},[Tt]),Dt=(0,c.useCallback)((e,t)=>{let n=z.current;if(!n)return;let r=n.getSource(`rect-preview-source`);if(!r)return;let[i,a]=e,[o,s]=t,c=[[Math.min(i,o),Math.max(a,s)],[Math.max(i,o),Math.max(a,s)],[Math.max(i,o),Math.min(a,s)],[Math.min(i,o),Math.min(a,s)],[Math.min(i,o),Math.max(a,s)]];r.setData({type:`Feature`,geometry:{type:`Polygon`,coordinates:[c]},properties:{}});let l=Je.current,u=l?.strokeColor??`#3388ff`,d=l?.strokeWidth??2,f=l?.fillColor??`#3388ff`,p=l?.fillOpacity??.1;n.getLayer(`rect-preview-line`)&&(n.setPaintProperty(`rect-preview-line`,`line-color`,u),n.setPaintProperty(`rect-preview-line`,`line-width`,d)),n.getLayer(`rect-preview-fill`)&&(n.setPaintProperty(`rect-preview-fill`,`fill-color`,f),n.setPaintProperty(`rect-preview-fill`,`fill-opacity`,p));let m=n.getSource(`rect-preview-measure-source`);if(m){let e=On.current,t=[],n=c[0],r=c[1],i=c[2];if(e?.showArea){let e=[(n[0]+i[0])/2,(n[1]+i[1])/2],a=O(n,r),o=O(r,i);t.push({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{label:A(a*o)}})}if(e?.showLength){let e=[(n[0]+r[0])/2,(n[1]+r[1])/2];t.push({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{label:j(O(n,r))}});let a=[(r[0]+i[0])/2,(r[1]+i[1])/2];t.push({type:`Feature`,geometry:{type:`Point`,coordinates:a},properties:{label:j(O(r,i))}})}m.setData({type:`FeatureCollection`,features:t})}},[]),Ot=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=e.getSource(`rect-preview-source`);t&&t.setData({type:`FeatureCollection`,features:[]});let n=e.getSource(`rect-preview-measure-source`);n&&n.setData({type:`FeatureCollection`,features:[]})},[]),kt=(0,c.useCallback)(()=>{qe(null),Ot()},[Ot]),At=(0,c.useCallback)(()=>{let e=z.current;e&&(e.getSource(`circle-preview-source`)||(e.addSource(`circle-preview-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`circle-preview-fill`,type:`fill`,source:`circle-preview-source`,paint:{"fill-color":`#3388ff`,"fill-opacity":.1}}),e.addLayer({id:`circle-preview-line`,type:`line`,source:`circle-preview-source`,paint:{"line-color":`#3388ff`,"line-width":2,"line-dasharray":[4,4]}}),Tt(e,`circle-preview-measure-source`,`circle-preview-measure-label`),e.getSource(`circle-preview-radius-source`)||(e.addSource(`circle-preview-radius-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`circle-preview-radius-line`,type:`line`,source:`circle-preview-radius-source`,paint:{"line-color":`#ffffff`,"line-width":1,"line-opacity":1,"line-dasharray":[4,4]}}))))},[Tt]),jt=(0,c.useCallback)((e,t,n=64)=>{let[r,i]=e,a=[],o=t/6371e3,s=i*Math.PI/180;for(let e=0;e<=n;e++){let t=e/n*2*Math.PI,c=o*Math.cos(t),l=o*Math.sin(t)/Math.cos(s),u=i+c*180/Math.PI,d=r+l*180/Math.PI;a.push([d,u])}return a},[]),Mt=(0,c.useCallback)((e,t)=>{let[n,r]=e,[i,a]=t,o=(a-r)*Math.PI/180,s=(i-n)*Math.PI/180,c=Math.sin(o/2)*Math.sin(o/2)+Math.cos(r*Math.PI/180)*Math.cos(a*Math.PI/180)*Math.sin(s/2)*Math.sin(s/2);return 6371e3*(2*Math.atan2(Math.sqrt(c),Math.sqrt(1-c)))},[]),Nt=(0,c.useCallback)((e,t)=>{let n=z.current;if(!n)return;let r=n.getSource(`circle-preview-source`);if(!r)return;let i=Mt(e,t),a=jt(e,i);r.setData({type:`Feature`,geometry:{type:`Polygon`,coordinates:[a]},properties:{}});let o=J.current,s=o?.strokeColor??`#3388ff`,c=o?.strokeWidth??2,l=o?.fillColor??`#3388ff`,u=o?.fillOpacity??.1;n.getLayer(`circle-preview-line`)&&(n.setPaintProperty(`circle-preview-line`,`line-color`,s),n.setPaintProperty(`circle-preview-line`,`line-width`,c)),n.getLayer(`circle-preview-fill`)&&(n.setPaintProperty(`circle-preview-fill`,`fill-color`,l),n.setPaintProperty(`circle-preview-fill`,`fill-opacity`,u));let d=On.current,f=[],p=[];if(d?.showArea){let t=Math.PI*i*i;f.push({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{label:A(t)}})}if(d?.showRadius){let t=J.current?.radiusAngle??90,n=D(e,i,t),r=[(e[0]+n[0])/2,(e[1]+n[1])/2];p.push({type:`Feature`,geometry:{type:`LineString`,coordinates:[e,n]},properties:{}}),f.push({type:`Feature`,geometry:{type:`Point`,coordinates:r},properties:{label:j(i)}})}let m=n.getSource(`circle-preview-measure-source`);m&&m.setData({type:`FeatureCollection`,features:f});let h=n.getSource(`circle-preview-radius-source`);h&&h.setData({type:`FeatureCollection`,features:p})},[Mt,jt]),Pt=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=e.getSource(`circle-preview-source`);t&&t.setData({type:`FeatureCollection`,features:[]});let n=e.getSource(`circle-preview-measure-source`);n&&n.setData({type:`FeatureCollection`,features:[]});let r=e.getSource(`circle-preview-radius-source`);r&&r.setData({type:`FeatureCollection`,features:[]})},[]),Ft=(0,c.useCallback)(()=>{Y.current=null,Pt()},[Pt]),It=(0,c.useCallback)(()=>{let e=z.current;e&&(e.getSource(`polygon-preview-source`)||(e.addSource(`polygon-preview-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`polygon-preview-fill`,type:`fill`,source:`polygon-preview-source`,paint:{"fill-color":`#3388ff`,"fill-opacity":.1}}),e.addLayer({id:`polygon-preview-line`,type:`line`,source:`polygon-preview-source`,paint:{"line-color":`#3388ff`,"line-width":2,"line-dasharray":[4,4]}}),e.addSource(`polygon-vertices-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`polygon-vertices`,type:`circle`,source:`polygon-vertices-source`,paint:{"circle-radius":5,"circle-color":`#3388ff`,"circle-stroke-color":`#ffffff`,"circle-stroke-width":2}}),Tt(e,`polygon-preview-measure-source`,`polygon-preview-measure-label`)))},[Tt]),Lt=(0,c.useCallback)((e,t)=>{let n=z.current;if(!n)return;let r=n.getSource(`polygon-preview-source`),i=n.getSource(`polygon-vertices-source`);if(!r||!i)return;let a=[...e,t];if(a.length>=3){let e=[...a,a[0]];r.setData({type:`Feature`,geometry:{type:`Polygon`,coordinates:[e]},properties:{}})}else a.length===2?r.setData({type:`Feature`,geometry:{type:`LineString`,coordinates:a},properties:{}}):r.setData({type:`FeatureCollection`,features:[]});i.setData({type:`FeatureCollection`,features:e.map(e=>({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{}}))});let o=X.current,s=o?.strokeColor??`#3388ff`,c=o?.strokeWidth??2,l=o?.fillColor??`#3388ff`,u=o?.fillOpacity??.1;n.getLayer(`polygon-preview-line`)&&(n.setPaintProperty(`polygon-preview-line`,`line-color`,s),n.setPaintProperty(`polygon-preview-line`,`line-width`,c)),n.getLayer(`polygon-preview-fill`)&&(n.setPaintProperty(`polygon-preview-fill`,`fill-color`,l),n.setPaintProperty(`polygon-preview-fill`,`fill-opacity`,u)),n.getLayer(`polygon-vertices`)&&n.setPaintProperty(`polygon-vertices`,`circle-color`,s);let d=n.getSource(`polygon-preview-measure-source`);if(d){let e=On.current,t=[];if(e?.showArea&&a.length>=3){let e=[...a,a[0]],n=ee(e),r=0,i=0;for(let e of a)r+=e[0],i+=e[1];r/=a.length,i/=a.length,t.push({type:`Feature`,geometry:{type:`Point`,coordinates:[r,i]},properties:{label:A(n)}})}if(e?.showLength&&a.length>=2){for(let e=0;e<a.length-1;e++){let n=a[e],r=a[e+1],i=[(n[0]+r[0])/2,(n[1]+r[1])/2];t.push({type:`Feature`,geometry:{type:`Point`,coordinates:i},properties:{label:j(O(n,r))}})}if(a.length>=3){let e=a[a.length-1],n=a[0],r=[(e[0]+n[0])/2,(e[1]+n[1])/2];t.push({type:`Feature`,geometry:{type:`Point`,coordinates:r},properties:{label:j(O(e,n))}})}}d.setData({type:`FeatureCollection`,features:t})}},[]),Rt=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=e.getSource(`polygon-preview-source`);t&&t.setData({type:`FeatureCollection`,features:[]});let n=e.getSource(`polygon-vertices-source`);n&&n.setData({type:`FeatureCollection`,features:[]});let r=e.getSource(`polygon-preview-measure-source`);r&&r.setData({type:`FeatureCollection`,features:[]})},[]),zt=(0,c.useCallback)(()=>{Z.current=[],Rt()},[Rt]),Bt=(0,c.useCallback)(()=>{let e=z.current;e&&(e.getSource(`square-preview-source`)||(e.addSource(`square-preview-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`square-preview-fill`,type:`fill`,source:`square-preview-source`,paint:{"fill-color":`#3388ff`,"fill-opacity":.1}}),e.addLayer({id:`square-preview-line`,type:`line`,source:`square-preview-source`,paint:{"line-color":`#3388ff`,"line-width":2,"line-dasharray":[4,4]}}),Tt(e,`square-preview-measure-source`,`square-preview-measure-label`)))},[Tt]),Vt=(0,c.useCallback)((e,t)=>{let[n,r]=e,i=t/2/6371e3,a=r*Math.PI/180,o=i*180/Math.PI,s=i*180/Math.PI/Math.cos(a);return[[n-s,r+o],[n+s,r+o],[n+s,r-o],[n-s,r-o],[n-s,r+o]]},[]),Ht=(0,c.useCallback)((e,t)=>{let n=z.current;if(!n)return;let r=n.getSource(`square-preview-source`);if(!r)return;let i=Mt(e,t)*2,a=Vt(e,i);r.setData({type:`Feature`,geometry:{type:`Polygon`,coordinates:[a]},properties:{}});let o=nt.current,s=o?.strokeColor??`#3388ff`,c=o?.strokeWidth??2,l=o?.fillColor??`#3388ff`,u=o?.fillOpacity??.1;n.getLayer(`square-preview-line`)&&(n.setPaintProperty(`square-preview-line`,`line-color`,s),n.setPaintProperty(`square-preview-line`,`line-width`,c)),n.getLayer(`square-preview-fill`)&&(n.setPaintProperty(`square-preview-fill`,`fill-color`,l),n.setPaintProperty(`square-preview-fill`,`fill-opacity`,u));let d=n.getSource(`square-preview-measure-source`);if(d){let t=On.current,n=[];if(t?.showArea&&n.push({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{label:A(i*i)}}),t?.showLength){let e=[(a[1][0]+a[2][0])/2,(a[1][1]+a[2][1])/2];n.push({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{label:j(i)}})}d.setData({type:`FeatureCollection`,features:n})}},[Mt,Vt]),Ut=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=e.getSource(`square-preview-source`);t&&t.setData({type:`FeatureCollection`,features:[]});let n=e.getSource(`square-preview-measure-source`);n&&n.setData({type:`FeatureCollection`,features:[]})},[]),Wt=(0,c.useCallback)(()=>{rt.current=null,Ut()},[Ut]),Gt=(0,c.useCallback)(()=>{let e=z.current;e&&(e.getSource(`polyline-preview-source`)||(e.addSource(`polyline-preview-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`polyline-preview-line`,type:`line`,source:`polyline-preview-source`,paint:{"line-color":`#3388ff`,"line-width":2,"line-dasharray":[4,4]}}),e.addSource(`polyline-vertices-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`polyline-vertices`,type:`circle`,source:`polyline-vertices-source`,paint:{"circle-radius":5,"circle-color":`#3388ff`,"circle-stroke-color":`#ffffff`,"circle-stroke-width":2}}),Tt(e,`polyline-preview-measure-source`,`polyline-preview-measure-label`)))},[Tt]),Kt=(0,c.useCallback)((e,t)=>{let n=z.current;if(!n)return;let r=n.getSource(`polyline-preview-source`),i=n.getSource(`polyline-vertices-source`);if(!r||!i)return;let a=[...e,t];a.length>=2?r.setData({type:`Feature`,geometry:{type:`LineString`,coordinates:a},properties:{}}):r.setData({type:`FeatureCollection`,features:[]}),i.setData({type:`FeatureCollection`,features:e.map(e=>({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{}}))});let o=it.current,s=o?.strokeColor??`#3388ff`,c=o?.strokeWidth??2;n.getLayer(`polyline-preview-line`)&&(n.setPaintProperty(`polyline-preview-line`,`line-color`,s),n.setPaintProperty(`polyline-preview-line`,`line-width`,c)),n.getLayer(`polyline-vertices`)&&n.setPaintProperty(`polyline-vertices`,`circle-color`,s);let l=n.getSource(`polyline-preview-measure-source`);if(l){let e=On.current,t=[];if(e?.showLength&&a.length>=2)for(let e=0;e<a.length-1;e++){let n=a[e],r=a[e+1],i=[(n[0]+r[0])/2,(n[1]+r[1])/2];t.push({type:`Feature`,geometry:{type:`Point`,coordinates:i},properties:{label:j(O(n,r))}})}l.setData({type:`FeatureCollection`,features:t})}},[]),qt=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=e.getSource(`polyline-preview-source`);t&&t.setData({type:`FeatureCollection`,features:[]});let n=e.getSource(`polyline-vertices-source`);n&&n.setData({type:`FeatureCollection`,features:[]});let r=e.getSource(`polyline-preview-measure-source`);r&&r.setData({type:`FeatureCollection`,features:[]})},[]),Jt=(0,c.useCallback)(()=>{at.current=[],qt()},[qt]),Yt=(0,c.useCallback)(e=>{W(e),wt(e),e?(G(`marker`),kt(),Ft(),zt(),Wt(),Jt()):G(null)},[wt,kt,Ft,zt,Wt,Jt]),Xt=(0,c.useCallback)(e=>{if(G(e),e===`rectangle`){W(null),$(),Ft(),zt(),Wt(),Jt();let e=z.current;e&&(e.getCanvas().style.cursor=`crosshair`)}else if(e===`circle`){W(null),$(),kt(),zt(),Wt(),Jt();let e=z.current;e&&(e.getCanvas().style.cursor=`crosshair`)}else if(e===`polygon`){W(null),$(),kt(),Ft(),Wt(),Jt();let e=z.current;e&&(e.getCanvas().style.cursor=`crosshair`)}else if(e===`square`){W(null),$(),kt(),Ft(),zt(),Jt();let e=z.current;e&&(e.getCanvas().style.cursor=`crosshair`)}else if(e===`polyline`){W(null),$(),kt(),Ft(),zt(),Wt();let e=z.current;e&&(e.getCanvas().style.cursor=`crosshair`)}else e===`marker`?(kt(),Ft(),zt(),Wt(),Jt()):(W(null),$(),kt(),Ft(),zt(),Wt(),Jt())},[$,kt,Ft,zt,Wt,Jt]),Zt=(0,c.useCallback)(e=>{if(e!==`picker`){let e=f.value&&isFinite(f.value.lng)&&isFinite(f.value.lat),t=f.showMarker!==!1;(!e||!t)&&St(),Ue(null)}e!==`edit`&&(W(null),G(null),kt(),Jt(),$()),Ve(e)},[St,$,kt,Jt]),Qt=(0,c.useCallback)(()=>Be,[Be]),$t=(0,c.useCallback)(()=>He,[He]),en=(0,c.useCallback)(()=>{St(),Ue(null)},[St]);(0,c.useEffect)(()=>{if(!Re)return;let e=f.value;if(e&&isFinite(e.lng)&&isFinite(e.lat)){let t=[e.lng,e.lat];Ue(e),xt(t)}},[f.value,xt,Re]);let tn=e=>`mode`in e,nn=(0,c.useCallback)(e=>{if(Ve(`edit`),St(),Ue(null),q.current=!0,tn(e)){if(e.mode===`marker`)e.markerStyle?(Xe.current=e.markerStyle,Je.current=null,J.current=null,X.current=null,nt.current=null,it.current=null,W(null),G(`marker`),e.markerStyle.src&&e.markerStyle.width?wt({id:`custom`,name:e.markerStyle.name||`Marker`,icon:e.markerStyle.src,width:e.markerStyle.width}):$()):e.template&&(Xe.current=null,Je.current=null,J.current=null,X.current=null,nt.current=null,it.current=null,W(e.template),G(`marker`),wt(e.template));else if(e.mode===`rectangle`){Je.current=e.rectangleStyle||null,Xe.current=null,J.current=null,X.current=null,nt.current=null,it.current=null,W(null),G(`rectangle`),$();let t=z.current;t&&(t.getCanvas().style.cursor=`crosshair`)}else if(e.mode===`circle`){J.current=e.circleStyle||null,Je.current=null,Xe.current=null,X.current=null,nt.current=null,it.current=null,W(null),G(`circle`),$();let t=z.current;t&&(t.getCanvas().style.cursor=`crosshair`)}else if(e.mode===`polygon`){X.current=e.polygonStyle||null,Je.current=null,Xe.current=null,J.current=null,nt.current=null,it.current=null,W(null),G(`polygon`),$();let t=z.current;t&&(t.getCanvas().style.cursor=`crosshair`)}else if(e.mode===`square`){nt.current=e.squareStyle||null,Je.current=null,Xe.current=null,J.current=null,X.current=null,it.current=null,W(null),G(`square`),$();let t=z.current;t&&(t.getCanvas().style.cursor=`crosshair`)}else if(e.mode===`polyline`){it.current=e.polylineStyle||null,Je.current=null,Xe.current=null,J.current=null,X.current=null,nt.current=null,W(null),G(`polyline`),$();let t=z.current;t&&(t.getCanvas().style.cursor=`crosshair`)}}else W(e),G(`marker`),wt(e),Je.current=null,Xe.current=null,J.current=null,X.current=null,nt.current=null,it.current=null},[St,wt,$]);(0,c.useImperativeHandle)(t,()=>({startAnimation:dt,stopAnimation:ft,toggleAnimation:pt,getMap:()=>z.current,openPopup:e=>ht(e,`programmatic`),closePopup:gt,closeAllPopups:_t,isPopupOpen:vt,toggleUnitTrajectory:mt,flyTo:yt,flyToEntities:bt,getMode:Qt,setMode:Zt,getPickedLocation:$t,clearPickedLocation:en,startDrawing:nn,getRenderer:e=>B.current.get(e),setEditingEntities:e=>{for(let t of ut.current)e.map(String).includes(String(t))||B.current.get(t)?.setEditing?.(!1);for(let t of e)B.current.get(t)?.setEditing?.(!0);Q.current&&=(B.current.get(Q.current.entityId)?.cancelEditPreview?.(),null),lt(e)},getEditingEntities:()=>ut.current,startRoutePlanning:e=>{Se.current?.startPlanning(e)},getRoadHighlightControl:()=>we.current}),[dt,ft,pt,ht,gt,_t,vt,mt,yt,bt,Qt,Zt,$t,en,nn]);let rn=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=new Set(v.map(e=>e.id)),n=new Set(B.current.keys());for(let e of n)t.has(e)||(B.current.get(e)?.destroy(),B.current.delete(e));let r=new Set(y.map(String));for(let t of v){let n=S(t,b),i=B.current.get(n.id);if(i)if(n.type===`radar`&&i instanceof oe)i.update(n);else if(n.type===`image`&&i instanceof ce)i.update(n);else if(n.type===`marker`&&i instanceof le)i.update(n);else if(n.type===`unit`&&i instanceof ue)i.update(n);else if(n.type===`polygon`&&i instanceof de)i.update(n);else if(n.type===`circle`)if(n.fillType===`radial-gradient`)if(i instanceof ge)i.update(n);else{i.destroy();let t=new ge(e,n,C,w,T,E);B.current.set(n.id,t),t.setSelected(r.has(String(n.id)))}else if(i instanceof me)i.update(n);else{i.destroy();let t=new me(e,n,C,w,T,E);B.current.set(n.id,t),t.setSelected(r.has(String(n.id)))}else (n.type===`square`&&i instanceof ve||n.type===`rectangle`&&i instanceof be||n.type===`polyline`&&i instanceof fe)&&i.update(n);else{let t=null;n.type===`radar`?t=new oe(e,n,C,w):n.type===`image`?t=new ce(e,n,C,w):n.type===`marker`?t=new le(e,n,C,w):n.type===`unit`?t=new ue(e,n,C,w):n.type===`polygon`?t=new de(e,n,C,w,T,k):n.type===`circle`?t=n.fillType===`radial-gradient`?new ge(e,n,C,w,T,E):new me(e,n,C,w,T,E):n.type===`square`?t=new ve(e,n,C,w,T,k):n.type===`rectangle`?t=new be(e,n,C,w,T,k):n.type===`polyline`&&(t=new fe(e,n,C,w,k)),t&&(B.current.set(n.id,t),t.setSelected(r.has(String(n.id))),ut.current.map(String).includes(String(n.id))&&t.setEditing?.(!0))}}for(let e of ut.current){let t=B.current.get(e);t&&t.setEditing?.(!0)}},[v,y,b,C,w,T,E,k]),an=(0,c.useCallback)(()=>{for(let e of B.current.values())e.destroy();B.current.clear()},[]),on=(0,c.useCallback)(e=>{let t=e.getStyle();if(!t?.layers)return;let n=[`polygon-`,`polyline-`,`circle-`,`square-`,`rectangle-`,`radar-`,`image-`,`unit-`,`marker-`];for(let e of t.layers)if(n.some(t=>e.id.startsWith(t)))return e.id},[]),sn=(0,c.useCallback)(e=>{let t=_,n={"raster-opacity":e.opacity??1},r=e.brightness??t?.brightness,i=e.saturation??t?.saturation,a=e.contrast??t?.contrast,o=e.hueRotate??t?.hueRotate;return r!==void 0&&(n[`raster-brightness-min`]=0,n[`raster-brightness-max`]=r),i!==void 0&&(n[`raster-saturation`]=i),a!==void 0&&(n[`raster-contrast`]=a),o!==void 0&&(n[`raster-hue-rotate`]=o),n},[_]),cn=(0,c.useCallback)((e,t)=>{let n=`base-layer-source-${t.id}`,r=`base-layer-${t.id}`,i={type:`raster`,tiles:[t.url],tileSize:t.tileSize??256,minzoom:t.minzoom??0,maxzoom:t.maxzoom??22,scheme:t.scheme??`xyz`};t.bounds&&(i.bounds=t.bounds),t.attribution&&(i.attribution=t.attribution),e.addSource(n,i);let a=on(e);e.addLayer({id:r,type:`raster`,source:n,paint:sn(t),layout:{visibility:t.visible===!1?`none`:`visible`}},a)},[on,sn]),ln=(0,c.useCallback)(async(e,t)=>{try{let n=await(await fetch(t.url)).json(),r=`base-layer-source-${t.id}`,i=`base-layer-${t.id}`;if(!De.current.has(t.id))return;let a=n.format===`pbf`||n.vector_layers,o=on(e);if(a){let t={type:`vector`,tiles:n.tiles,minzoom:n.minzoom??0,maxzoom:n.maxzoom??22};n.bounds&&(t.bounds=n.bounds),n.attribution&&(t.attribution=n.attribution),e.addSource(r,t)}else e.addSource(r,{type:`raster`,tiles:n.tiles,tileSize:t.tileSize??n.tileSize??256,minzoom:n.minzoom??0,maxzoom:n.maxzoom??22,bounds:n.bounds,attribution:n.attribution}),e.addLayer({id:i,type:`raster`,source:r,paint:sn(t),layout:{visibility:t.visible===!1?`none`:`visible`}},o)}catch(e){console.error(`Failed to load TileJSON from ${t.url}:`,e)}},[on,sn]),un=(0,c.useCallback)(async(e,t)=>{try{let n=await(await fetch(t.url)).json();if(!De.current.has(t.id))return;if(n.sources)for(let[r,i]of Object.entries(n.sources)){let n=`base-layer-source-${t.id}-${r}`;e.getSource(n)||e.addSource(n,i)}let r=on(e);if(n.layers)for(let i of n.layers){let n=`base-layer-${t.id}-${i.id}`;if(e.getLayer(n))continue;let a={...i,id:n,source:i.source?`base-layer-source-${t.id}-${i.source}`:void 0};i.type===`raster`&&(a.paint={...a.paint,...sn(t)}),t.visible===!1&&(a.layout={...a.layout,visibility:`none`}),e.addLayer(a,r)}if(n.glyphs&&!e.getStyle().glyphs){let t=e.style;t.glyphs=n.glyphs,t.stylesheet&&(t.stylesheet.glyphs=n.glyphs)}}catch(e){console.error(`Failed to load Style JSON from ${t.url}:`,e)}},[on,sn]),dn=(0,c.useCallback)((e,t)=>{let n=e.getStyle();if(!n)return;let r=`base-layer-${t}`,i=n.layers?.filter(e=>e.id.startsWith(r))??[];for(let t of i)e.getLayer(t.id)&&e.removeLayer(t.id);let a=`base-layer-source-${t}`,o=n.sources??{};for(let t of Object.keys(o))t.startsWith(a)&&e.getSource(t)&&e.removeSource(t)},[]),fn=(0,c.useCallback)(e=>{let t=z.current;if(!t)return;let n=new Set(e.map(e=>e.id)),r=De.current;for(let e of r)n.has(e)||(dn(t,e),r.delete(e));for(let n of e)if(r.has(n.id)){let e=`base-layer-${n.id}`;if(t.getLayer(e)){let r=sn(n);for(let[n,i]of Object.entries(r))t.setPaintProperty(e,n,i);t.setLayoutProperty(e,`visibility`,n.visible===!1?`none`:`visible`)}}else switch(r.add(n.id),n.type){case`raster`:cn(t,n);break;case`tilejson`:ln(t,n);break;case`style`:un(t,n);break;default:{let e=n;e.url&&cn(t,{...e,type:`raster`})}}},[cn,ln,un,dn,sn]),pn=(0,c.useCallback)(e=>{let t=e;for(;t;){let e=t.getAttribute?.(`data-entity-id`);if(e)return e;t=t.parentElement}return null},[]),mn=(0,c.useCallback)(e=>{let t=[e.lngLat.lng,e.lngLat.lat],n={x:e.point.x,y:e.point.y},r=Sn.current;if(r===`picker`){let e={lng:t[0],lat:t[1]};Ue(e),xt(t),Cn.current?.(e);return}if(st.current)return;if(r===`edit`){let e=Tn.current;if(e===`rectangle`){let e=En.current;if(!e)qe(t);else{let n=Je.current,r=S({...n,id:n?.id??Ct(),type:`rectangle`,bounds:[e,t]},b);Ot();let i=z.current;if(i&&!B.current.has(r.id)){let e=new be(i,r,C,w,T,k);B.current.set(r.id,e)}Dn.current.onRectangleAdd?.(r),qe(null),Je.current=null,q.current&&(q.current=!1,G(null),i&&(i.getCanvas().style.cursor=``))}return}if(e===`circle`){let e=Y.current;if(!e)Y.current={center:t};else{let n=Mt(e.center,t),r=J.current,i=S({...r,id:r?.id??Ct(),type:`circle`,center:e.center,radius:n},b);Pt();let a=z.current;if(a&&!B.current.has(i.id)){let e=new me(a,i,C,w,T,E);B.current.set(i.id,e)}Dn.current.onCircleAdd?.(i),Y.current=null,J.current=null,q.current&&(q.current=!1,G(null),a&&(a.getCanvas().style.cursor=``))}return}if(e===`polygon`){let e=Z.current;if(e.length>=3){let n=e[0];if(Mt(n,t)<20){let t=X.current,n=S({...t,id:t?.id??Ct(),type:`polygon`,coordinates:[...e]},b);Rt();let r=z.current;if(r&&!B.current.has(n.id)){let e=new de(r,n,C,w,T,k);B.current.set(n.id,e)}Dn.current.onPolygonAdd?.(n),Z.current=[],X.current=null,q.current&&(q.current=!1,G(null),r&&(r.getCanvas().style.cursor=``));return}}Z.current=[...e,t];return}if(e===`square`){let e=rt.current;if(!e)rt.current={center:t};else{let n=Mt(e.center,t)*2,r=nt.current,i=S({...r,id:r?.id??Ct(),type:`square`,center:e.center,length:n},b);Ut();let a=z.current;if(a&&!B.current.has(i.id)){let e=new ve(a,i,C,w,T,k);B.current.set(i.id,e)}Dn.current.onSquareAdd?.(i),rt.current=null,nt.current=null,q.current&&(q.current=!1,G(null),a&&(a.getCanvas().style.cursor=``))}return}if(e===`polyline`){at.current=[...at.current,t];return}let n=Xe.current;if(n&&n.src&&n.width){let e={...n,id:n.id??Ct(),type:`marker`,center:t,src:n.src,width:n.width};Dn.current.onMarkerAdd?.(e),W(null),G(null),$(),Xe.current=null,q.current=!1;return}let r=wn.current;if(r){let e={id:Ct(),type:`marker`,name:r.name,center:t,src:r.icon,width:r.size||r.width||32};r.customData!==void 0&&(e.customData=r.customData),Dn.current.onMarkerAdd?.(e),W(null),G(null),$(),q.current=!1;return}}if(ut.current.length>0){let e=z.current?.getZoom()??12;if(Q.current){let{entityId:e,activeHandle:n}=Q.current,r=B.current.get(e);if(r?.applyHandleMove){let e=r.applyHandleMove(n,t);Dn.current.onEntityEdit?.(e)}Q.current=null;return}for(let n of ut.current){let r=B.current.get(n);if(!r?.getEditHandleAt)continue;let i=r.getEditHandleAt(t,e);if(i){if(i.type===`midpoint`&&r.addVertex){let e=r.addVertex(i.index,i.position);Dn.current.onEntityEdit?.(e),Q.current={entityId:n,activeHandle:{type:`vertex`,index:i.index+1,position:i.position}}}else Q.current={entityId:n,activeHandle:i};return}}}let i=yn.current,a=bn.current,o=xn.current,s=pn(e.originalEvent.target);if(s){let e=i.find(e=>String(e.id)===s);if(e){if(a?.(e),e.popup){let t=e.popup.content??L?.(e);t&&et(e.popup,I,t).trigger===`click`&&o(s,`click`,n)}return}}for(let[t,r]of B.current){let s=r.getLabelLayerId();if(s&&z.current?.getLayer(s)&&z.current.queryRenderedFeatures(e.point,{layers:[s]}).length>0){let e=i.find(e=>e.id===t);if(e){if(a?.(e),e.popup){let r=e.popup.content??L?.(e);r&&et(e.popup,I,r).trigger===`click`&&o(t,`click`,n)}return}}}for(let[e,r]of B.current)if(r.isPointInEntity(t)){let t=i.find(t=>t.id===e);if(t){if(a?.(t),t.popup){let r=t.popup.content??L?.(t);r&&et(t.popup,I,r).trigger===`click`&&o(e,`click`,n)}return}}},[I,L,pn]),hn=(0,c.useCallback)(e=>{let t=[e.lngLat.lng,e.lngLat.lat];if(Q.current){let{entityId:e,activeHandle:n}=Q.current;B.current.get(e)?.updateEditPreview?.(n,t);return}let n=Tn.current,r=En.current;n===`rectangle`&&r&&Dt(r,t);let i=Y.current;n===`circle`&&i&&Nt(i.center,t);let a=Z.current;n===`polygon`&&a.length>0&&Lt(a,t);let o=rt.current;n===`square`&&o&&Ht(o.center,t);let s=at.current;n===`polyline`&&s.length>0&&Kt(s,t);let c=yn.current,l=xn.current;for(let[e,n]of B.current)if(n.isPointInEntity(t)){let t=c.find(t=>t.id===e);if(!t?.popup)continue;let n=t.popup.content??L?.(t);if(!n)continue;let r=et(t.popup,I,n);if(r.trigger===`hover`){Me.current&&clearTimeout(Me.current),Me.current=window.setTimeout(()=>{l(e,`hover`)},r.hoverDelay);return}}if(Me.current&&=(clearTimeout(Me.current),null),H?.openedBy===`hover`){let e=B.current.get(H.entityId);e&&!e.isPointInEntity(t)&>(H.entityId)}},[I,L,H,gt,Dt,Nt,Lt,Ht,Kt]),gn=(0,c.useCallback)(e=>{if(e.preventDefault(),st.current)return;if(ut.current.length>0){let t=[e.lngLat.lng,e.lngLat.lat];if(Q.current){B.current.get(Q.current.entityId)?.cancelEditPreview?.(),Q.current=null;return}let n=z.current?.getZoom()??12;for(let e of ut.current){let r=B.current.get(e);if(!r?.getEditHandleAt||!r.deleteVertex)continue;let i=r.getEditHandleAt(t,n);if(i&&i.type===`vertex`){let e=r.deleteVertex(i.index);e&&Dn.current.onEntityEdit?.(e);return}}}if(Sn.current!==`edit`)return;if(wn.current){W(null),G(null),$();return}let t=Tn.current;if(t===`rectangle`){if(En.current)qe(null),Ot();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}return}if(t===`circle`){if(Y.current)Y.current=null,Pt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}return}if(t===`polygon`){let e=Z.current;if(e.length>=3){let t=X.current,n=S({...t,id:t?.id??Ct(),type:`polygon`,coordinates:[...e]},b);Rt();let r=z.current;if(r&&!B.current.has(n.id)){let e=new de(r,n,C,w,T,k);B.current.set(n.id,e)}Dn.current.onPolygonAdd?.(n),Z.current=[],X.current=null,q.current&&(q.current=!1,G(null),r&&(r.getCanvas().style.cursor=``))}else if(e.length>0)Z.current=[],Rt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}return}if(t===`square`){if(rt.current)rt.current=null,Ut();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}return}if(t===`polyline`){let e=at.current;if(e.length>=2){let t=it.current,n=S({...t,id:t?.id??Ct(),type:`polyline`,coordinates:[...e]},b);qt();let r=z.current;if(r&&!B.current.has(n.id)){let e=new fe(r,n,C,w,k);B.current.set(n.id,e)}Dn.current.onPolylineAdd?.(n),at.current=[],it.current=null,q.current&&(q.current=!1,G(null),r&&(r.getCanvas().style.cursor=``))}else if(e.length>0)at.current=[],qt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}return}let n=[e.lngLat.lng,e.lngLat.lat],r={x:e.point.x,y:e.point.y},i=yn.current,a=pn(e.originalEvent.target);if(a){let e=i.find(e=>String(e.id)===a);if(e){_n(e,r,n);return}}for(let[t,a]of B.current){let o=a.getLabelLayerId();if(o&&z.current?.getLayer(o)&&z.current.queryRenderedFeatures(e.point,{layers:[o]}).length>0){let e=i.find(e=>e.id===t);if(e){_n(e,r,n);return}}}for(let[e,t]of B.current)if(t.isPointInEntity(n)){let t=i.find(t=>t.id===e);if(t){_n(t,r,n);return}}},[pn,$,Ot,Pt,Rt,Ut,qt]),_n=(0,c.useCallback)((e,t,n)=>{let r=ye.current?.getBoundingClientRect(),i=r?{x:t.x+r.left,y:t.y+r.top}:t;Pe({position:i,lngLat:n,items:[{key:`delete`,label:`删除`,icon:(0,p.jsx)(`img`,{src:Ie,alt:`delete`,style:{width:`18px`,flexShrink:0}}),danger:!0,onClick:()=>{Dn.current.onEntityDelete?.(e)}}]})},[]),vn=(0,c.useCallback)(()=>{Pe(null)},[]);(0,c.useEffect)(()=>{let e=document.createElement(`div`);return e.id=`mapbox-popup-container-${Date.now()}`,e.style.cssText=`
|
|
57
|
+
`;let i=document.createElement(`img`);i.src=e.icon,i.style.width=`${r}px`,i.style.height=`${e.size||e.height||r}px`,i.style.objectFit=`contain`,n.appendChild(i),document.body.appendChild(n),ot.current=n;let a=e=>{ot.current&&(ot.current.style.left=`${e.clientX}px`,ot.current.style.top=`${e.clientY}px`)};document.addEventListener(`mousemove`,a),n.dataset.cleanup=`true`,n._cleanup=()=>{document.removeEventListener(`mousemove`,a)}}else t&&(t.getCanvas().style.cursor=``)},[]),$=(0,c.useCallback)(()=>{if(ot.current){let e=ot.current._cleanup;e&&e(),ot.current.remove(),ot.current=null}let e=z.current;e&&(e.getCanvas().style.cursor=``)},[]),Tt=(0,c.useCallback)((e,t,n)=>{if(!e.getSource(t)){if(!e.getStyle().glyphs){let t=e.style,n=`/gis-fonts/{fontstack}/{range}.pbf`;t.glyphs=n,t.stylesheet&&(t.stylesheet.glyphs=n)}e.addSource(t,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:n,type:`symbol`,source:t,filter:[`==`,`$type`,`Point`],layout:{"text-field":[`get`,`label`],"text-size":12,"text-font":[`Open Sans Bold`,`Arial Unicode MS Bold`],"text-allow-overlap":!0,"text-rotation-alignment":`map`,"text-offset":[0,-.8]},paint:{"text-color":`#ffffff`,"text-halo-color":`rgba(0, 0, 0, 0.8)`,"text-halo-width":1}})}},[]),Et=(0,c.useCallback)(()=>{let e=z.current;e&&(e.getSource(`rect-preview-source`)||(e.addSource(`rect-preview-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`rect-preview-fill`,type:`fill`,source:`rect-preview-source`,paint:{"fill-color":`#3388ff`,"fill-opacity":.1}}),e.addLayer({id:`rect-preview-line`,type:`line`,source:`rect-preview-source`,paint:{"line-color":`#3388ff`,"line-width":2,"line-dasharray":[4,4]}}),Tt(e,`rect-preview-measure-source`,`rect-preview-measure-label`)))},[Tt]),Dt=(0,c.useCallback)((e,t)=>{let n=z.current;if(!n)return;let r=n.getSource(`rect-preview-source`);if(!r)return;let[i,a]=e,[o,s]=t,c=[[Math.min(i,o),Math.max(a,s)],[Math.max(i,o),Math.max(a,s)],[Math.max(i,o),Math.min(a,s)],[Math.min(i,o),Math.min(a,s)],[Math.min(i,o),Math.max(a,s)]];r.setData({type:`Feature`,geometry:{type:`Polygon`,coordinates:[c]},properties:{}});let l=Je.current,u=l?.strokeColor??`#3388ff`,d=l?.strokeWidth??2,f=l?.fillColor??`#3388ff`,p=l?.fillOpacity??.1;n.getLayer(`rect-preview-line`)&&(n.setPaintProperty(`rect-preview-line`,`line-color`,u),n.setPaintProperty(`rect-preview-line`,`line-width`,d)),n.getLayer(`rect-preview-fill`)&&(n.setPaintProperty(`rect-preview-fill`,`fill-color`,f),n.setPaintProperty(`rect-preview-fill`,`fill-opacity`,p));let m=n.getSource(`rect-preview-measure-source`);if(m){let e=Mn.current,t=[],n=c[0],r=c[1],i=c[2];if(e?.showArea){let e=[(n[0]+i[0])/2,(n[1]+i[1])/2],a=O(n,r),o=O(r,i);t.push({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{label:A(a*o)}})}if(e?.showLength){let e=[(n[0]+r[0])/2,(n[1]+r[1])/2];t.push({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{label:j(O(n,r))}});let a=[(r[0]+i[0])/2,(r[1]+i[1])/2];t.push({type:`Feature`,geometry:{type:`Point`,coordinates:a},properties:{label:j(O(r,i))}})}m.setData({type:`FeatureCollection`,features:t})}},[]),Ot=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=e.getSource(`rect-preview-source`);t&&t.setData({type:`FeatureCollection`,features:[]});let n=e.getSource(`rect-preview-measure-source`);n&&n.setData({type:`FeatureCollection`,features:[]})},[]),kt=(0,c.useCallback)(()=>{qe(null),Ot()},[Ot]),At=(0,c.useCallback)(()=>{let e=z.current;e&&(e.getSource(`circle-preview-source`)||(e.addSource(`circle-preview-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`circle-preview-fill`,type:`fill`,source:`circle-preview-source`,paint:{"fill-color":`#3388ff`,"fill-opacity":.1}}),e.addLayer({id:`circle-preview-line`,type:`line`,source:`circle-preview-source`,paint:{"line-color":`#3388ff`,"line-width":2,"line-dasharray":[4,4]}}),Tt(e,`circle-preview-measure-source`,`circle-preview-measure-label`),e.getSource(`circle-preview-radius-source`)||(e.addSource(`circle-preview-radius-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`circle-preview-radius-line`,type:`line`,source:`circle-preview-radius-source`,paint:{"line-color":`#ffffff`,"line-width":1,"line-opacity":1,"line-dasharray":[4,4]}}))))},[Tt]),jt=(0,c.useCallback)((e,t,n=64)=>{let[r,i]=e,a=[],o=t/6371e3,s=i*Math.PI/180;for(let e=0;e<=n;e++){let t=e/n*2*Math.PI,c=o*Math.cos(t),l=o*Math.sin(t)/Math.cos(s),u=i+c*180/Math.PI,d=r+l*180/Math.PI;a.push([d,u])}return a},[]),Mt=(0,c.useCallback)((e,t)=>{let[n,r]=e,[i,a]=t,o=(a-r)*Math.PI/180,s=(i-n)*Math.PI/180,c=Math.sin(o/2)*Math.sin(o/2)+Math.cos(r*Math.PI/180)*Math.cos(a*Math.PI/180)*Math.sin(s/2)*Math.sin(s/2);return 6371e3*(2*Math.atan2(Math.sqrt(c),Math.sqrt(1-c)))},[]),Nt=(0,c.useCallback)((e,t)=>{let n=z.current;if(!n)return;let r=n.getSource(`circle-preview-source`);if(!r)return;let i=Mt(e,t),a=jt(e,i);r.setData({type:`Feature`,geometry:{type:`Polygon`,coordinates:[a]},properties:{}});let o=J.current,s=o?.strokeColor??`#3388ff`,c=o?.strokeWidth??2,l=o?.fillColor??`#3388ff`,u=o?.fillOpacity??.1;n.getLayer(`circle-preview-line`)&&(n.setPaintProperty(`circle-preview-line`,`line-color`,s),n.setPaintProperty(`circle-preview-line`,`line-width`,c)),n.getLayer(`circle-preview-fill`)&&(n.setPaintProperty(`circle-preview-fill`,`fill-color`,l),n.setPaintProperty(`circle-preview-fill`,`fill-opacity`,u));let d=Mn.current,f=[],p=[];if(d?.showArea){let t=Math.PI*i*i;f.push({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{label:A(t)}})}if(d?.showRadius){let t=J.current?.radiusAngle??90,n=D(e,i,t),r=[(e[0]+n[0])/2,(e[1]+n[1])/2];p.push({type:`Feature`,geometry:{type:`LineString`,coordinates:[e,n]},properties:{}}),f.push({type:`Feature`,geometry:{type:`Point`,coordinates:r},properties:{label:j(i)}})}let m=n.getSource(`circle-preview-measure-source`);m&&m.setData({type:`FeatureCollection`,features:f});let h=n.getSource(`circle-preview-radius-source`);h&&h.setData({type:`FeatureCollection`,features:p})},[Mt,jt]),Pt=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=e.getSource(`circle-preview-source`);t&&t.setData({type:`FeatureCollection`,features:[]});let n=e.getSource(`circle-preview-measure-source`);n&&n.setData({type:`FeatureCollection`,features:[]});let r=e.getSource(`circle-preview-radius-source`);r&&r.setData({type:`FeatureCollection`,features:[]})},[]),Ft=(0,c.useCallback)(()=>{Y.current=null,Pt()},[Pt]),It=(0,c.useCallback)(()=>{let e=z.current;e&&(e.getSource(`polygon-preview-source`)||(e.addSource(`polygon-preview-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`polygon-preview-fill`,type:`fill`,source:`polygon-preview-source`,paint:{"fill-color":`#3388ff`,"fill-opacity":.1}}),e.addLayer({id:`polygon-preview-line`,type:`line`,source:`polygon-preview-source`,paint:{"line-color":`#3388ff`,"line-width":2,"line-dasharray":[4,4]}}),e.addSource(`polygon-vertices-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`polygon-vertices`,type:`circle`,source:`polygon-vertices-source`,paint:{"circle-radius":5,"circle-color":`#3388ff`,"circle-stroke-color":`#ffffff`,"circle-stroke-width":2}}),Tt(e,`polygon-preview-measure-source`,`polygon-preview-measure-label`)))},[Tt]),Lt=(0,c.useCallback)((e,t)=>{let n=z.current;if(!n)return;let r=n.getSource(`polygon-preview-source`),i=n.getSource(`polygon-vertices-source`);if(!r||!i)return;let a=[...e,t];if(a.length>=3){let e=[...a,a[0]];r.setData({type:`Feature`,geometry:{type:`Polygon`,coordinates:[e]},properties:{}})}else a.length===2?r.setData({type:`Feature`,geometry:{type:`LineString`,coordinates:a},properties:{}}):r.setData({type:`FeatureCollection`,features:[]});i.setData({type:`FeatureCollection`,features:e.map(e=>({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{}}))});let o=X.current,s=o?.strokeColor??`#3388ff`,c=o?.strokeWidth??2,l=o?.fillColor??`#3388ff`,u=o?.fillOpacity??.1;n.getLayer(`polygon-preview-line`)&&(n.setPaintProperty(`polygon-preview-line`,`line-color`,s),n.setPaintProperty(`polygon-preview-line`,`line-width`,c)),n.getLayer(`polygon-preview-fill`)&&(n.setPaintProperty(`polygon-preview-fill`,`fill-color`,l),n.setPaintProperty(`polygon-preview-fill`,`fill-opacity`,u)),n.getLayer(`polygon-vertices`)&&n.setPaintProperty(`polygon-vertices`,`circle-color`,s);let d=n.getSource(`polygon-preview-measure-source`);if(d){let e=Mn.current,t=[];if(e?.showArea&&a.length>=3){let e=[...a,a[0]],n=ee(e),r=0,i=0;for(let e of a)r+=e[0],i+=e[1];r/=a.length,i/=a.length,t.push({type:`Feature`,geometry:{type:`Point`,coordinates:[r,i]},properties:{label:A(n)}})}if(e?.showLength&&a.length>=2){for(let e=0;e<a.length-1;e++){let n=a[e],r=a[e+1],i=[(n[0]+r[0])/2,(n[1]+r[1])/2];t.push({type:`Feature`,geometry:{type:`Point`,coordinates:i},properties:{label:j(O(n,r))}})}if(a.length>=3){let e=a[a.length-1],n=a[0],r=[(e[0]+n[0])/2,(e[1]+n[1])/2];t.push({type:`Feature`,geometry:{type:`Point`,coordinates:r},properties:{label:j(O(e,n))}})}}d.setData({type:`FeatureCollection`,features:t})}},[]),Rt=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=e.getSource(`polygon-preview-source`);t&&t.setData({type:`FeatureCollection`,features:[]});let n=e.getSource(`polygon-vertices-source`);n&&n.setData({type:`FeatureCollection`,features:[]});let r=e.getSource(`polygon-preview-measure-source`);r&&r.setData({type:`FeatureCollection`,features:[]})},[]),zt=(0,c.useCallback)(()=>{Z.current=[],Rt()},[Rt]),Bt=(0,c.useCallback)(()=>{let e=z.current;e&&(e.getSource(`square-preview-source`)||(e.addSource(`square-preview-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`square-preview-fill`,type:`fill`,source:`square-preview-source`,paint:{"fill-color":`#3388ff`,"fill-opacity":.1}}),e.addLayer({id:`square-preview-line`,type:`line`,source:`square-preview-source`,paint:{"line-color":`#3388ff`,"line-width":2,"line-dasharray":[4,4]}}),Tt(e,`square-preview-measure-source`,`square-preview-measure-label`)))},[Tt]),Vt=(0,c.useCallback)((e,t)=>{let[n,r]=e,i=t/2/6371e3,a=r*Math.PI/180,o=i*180/Math.PI,s=i*180/Math.PI/Math.cos(a);return[[n-s,r+o],[n+s,r+o],[n+s,r-o],[n-s,r-o],[n-s,r+o]]},[]),Ht=(0,c.useCallback)((e,t)=>{let n=z.current;if(!n)return;let r=n.getSource(`square-preview-source`);if(!r)return;let i=Mt(e,t)*2,a=Vt(e,i);r.setData({type:`Feature`,geometry:{type:`Polygon`,coordinates:[a]},properties:{}});let o=nt.current,s=o?.strokeColor??`#3388ff`,c=o?.strokeWidth??2,l=o?.fillColor??`#3388ff`,u=o?.fillOpacity??.1;n.getLayer(`square-preview-line`)&&(n.setPaintProperty(`square-preview-line`,`line-color`,s),n.setPaintProperty(`square-preview-line`,`line-width`,c)),n.getLayer(`square-preview-fill`)&&(n.setPaintProperty(`square-preview-fill`,`fill-color`,l),n.setPaintProperty(`square-preview-fill`,`fill-opacity`,u));let d=n.getSource(`square-preview-measure-source`);if(d){let t=Mn.current,n=[];if(t?.showArea&&n.push({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{label:A(i*i)}}),t?.showLength){let e=[(a[1][0]+a[2][0])/2,(a[1][1]+a[2][1])/2];n.push({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{label:j(i)}})}d.setData({type:`FeatureCollection`,features:n})}},[Mt,Vt]),Ut=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=e.getSource(`square-preview-source`);t&&t.setData({type:`FeatureCollection`,features:[]});let n=e.getSource(`square-preview-measure-source`);n&&n.setData({type:`FeatureCollection`,features:[]})},[]),Wt=(0,c.useCallback)(()=>{rt.current=null,Ut()},[Ut]),Gt=(0,c.useCallback)(()=>{let e=z.current;e&&(e.getSource(`polyline-preview-source`)||(e.addSource(`polyline-preview-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`polyline-preview-line`,type:`line`,source:`polyline-preview-source`,paint:{"line-color":`#3388ff`,"line-width":2,"line-dasharray":[4,4]}}),e.addSource(`polyline-vertices-source`,{type:`geojson`,data:{type:`FeatureCollection`,features:[]}}),e.addLayer({id:`polyline-vertices`,type:`circle`,source:`polyline-vertices-source`,paint:{"circle-radius":5,"circle-color":`#3388ff`,"circle-stroke-color":`#ffffff`,"circle-stroke-width":2}}),Tt(e,`polyline-preview-measure-source`,`polyline-preview-measure-label`)))},[Tt]),Kt=(0,c.useCallback)((e,t)=>{let n=z.current;if(!n)return;let r=n.getSource(`polyline-preview-source`),i=n.getSource(`polyline-vertices-source`);if(!r||!i)return;let a=[...e,t];a.length>=2?r.setData({type:`Feature`,geometry:{type:`LineString`,coordinates:a},properties:{}}):r.setData({type:`FeatureCollection`,features:[]}),i.setData({type:`FeatureCollection`,features:e.map(e=>({type:`Feature`,geometry:{type:`Point`,coordinates:e},properties:{}}))});let o=it.current,s=o?.strokeColor??`#3388ff`,c=o?.strokeWidth??2;n.getLayer(`polyline-preview-line`)&&(n.setPaintProperty(`polyline-preview-line`,`line-color`,s),n.setPaintProperty(`polyline-preview-line`,`line-width`,c)),n.getLayer(`polyline-vertices`)&&n.setPaintProperty(`polyline-vertices`,`circle-color`,s);let l=n.getSource(`polyline-preview-measure-source`);if(l){let e=Mn.current,t=[];if(e?.showLength&&a.length>=2)for(let e=0;e<a.length-1;e++){let n=a[e],r=a[e+1],i=[(n[0]+r[0])/2,(n[1]+r[1])/2];t.push({type:`Feature`,geometry:{type:`Point`,coordinates:i},properties:{label:j(O(n,r))}})}l.setData({type:`FeatureCollection`,features:t})}},[]),qt=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=e.getSource(`polyline-preview-source`);t&&t.setData({type:`FeatureCollection`,features:[]});let n=e.getSource(`polyline-vertices-source`);n&&n.setData({type:`FeatureCollection`,features:[]});let r=e.getSource(`polyline-preview-measure-source`);r&&r.setData({type:`FeatureCollection`,features:[]})},[]),Jt=(0,c.useCallback)(()=>{at.current=[],qt()},[qt]),Yt=(0,c.useCallback)(e=>{W(e),wt(e),e?(G(`marker`),kt(),Ft(),zt(),Wt(),Jt()):G(null)},[wt,kt,Ft,zt,Wt,Jt]),Xt=(0,c.useCallback)(e=>{if(G(e),e===`rectangle`){W(null),$(),Ft(),zt(),Wt(),Jt();let e=z.current;e&&(e.getCanvas().style.cursor=`crosshair`)}else if(e===`circle`){W(null),$(),kt(),zt(),Wt(),Jt();let e=z.current;e&&(e.getCanvas().style.cursor=`crosshair`)}else if(e===`polygon`){W(null),$(),kt(),Ft(),Wt(),Jt();let e=z.current;e&&(e.getCanvas().style.cursor=`crosshair`)}else if(e===`square`){W(null),$(),kt(),Ft(),zt(),Jt();let e=z.current;e&&(e.getCanvas().style.cursor=`crosshair`)}else if(e===`polyline`){W(null),$(),kt(),Ft(),zt(),Wt();let e=z.current;e&&(e.getCanvas().style.cursor=`crosshair`)}else e===`marker`?(kt(),Ft(),zt(),Wt(),Jt()):(W(null),$(),kt(),Ft(),zt(),Wt(),Jt())},[$,kt,Ft,zt,Wt,Jt]),Zt=(0,c.useCallback)(e=>{if(e!==`picker`){let e=f.value&&isFinite(f.value.lng)&&isFinite(f.value.lat),t=f.showMarker!==!1;(!e||!t)&&St(),Ue(null)}e!==`edit`&&(W(null),G(null),kt(),Jt(),$()),Ve(e)},[St,$,kt,Jt]),Qt=(0,c.useCallback)(()=>Be,[Be]),$t=(0,c.useCallback)(()=>He,[He]),en=(0,c.useCallback)(()=>{St(),Ue(null)},[St]),tn=(0,c.useRef)(null),nn=(0,c.useRef)(`display`),rn=(0,c.useRef)({}),an=(0,c.useCallback)((e={})=>(tn.current&&=(tn.current(null),null),new Promise(t=>{tn.current=t,nn.current=En.current,rn.current=e,Zt(`picker`)})),[Zt]);(0,c.useEffect)(()=>{if(!Re)return;let e=f.value;if(e&&isFinite(e.lng)&&isFinite(e.lat)){let t=[e.lng,e.lat];Ue(e),xt(t)}},[f.value,xt,Re]);let on=e=>`mode`in e,sn=(0,c.useCallback)(e=>{if(Ve(`edit`),St(),Ue(null),q.current=!0,on(e)){if(e.mode===`marker`)e.markerStyle?(Xe.current=e.markerStyle,Je.current=null,J.current=null,X.current=null,nt.current=null,it.current=null,W(null),G(`marker`),e.markerStyle.src&&e.markerStyle.width?wt({id:`custom`,name:e.markerStyle.name||`Marker`,icon:e.markerStyle.src,width:e.markerStyle.width}):$()):e.template&&(Xe.current=null,Je.current=null,J.current=null,X.current=null,nt.current=null,it.current=null,W(e.template),G(`marker`),wt(e.template));else if(e.mode===`rectangle`){Je.current=e.rectangleStyle||null,Xe.current=null,J.current=null,X.current=null,nt.current=null,it.current=null,W(null),G(`rectangle`),$();let t=z.current;t&&(t.getCanvas().style.cursor=`crosshair`)}else if(e.mode===`circle`){J.current=e.circleStyle||null,Je.current=null,Xe.current=null,X.current=null,nt.current=null,it.current=null,W(null),G(`circle`),$();let t=z.current;t&&(t.getCanvas().style.cursor=`crosshair`)}else if(e.mode===`polygon`){X.current=e.polygonStyle||null,Je.current=null,Xe.current=null,J.current=null,nt.current=null,it.current=null,W(null),G(`polygon`),$();let t=z.current;t&&(t.getCanvas().style.cursor=`crosshair`)}else if(e.mode===`square`){nt.current=e.squareStyle||null,Je.current=null,Xe.current=null,J.current=null,X.current=null,it.current=null,W(null),G(`square`),$();let t=z.current;t&&(t.getCanvas().style.cursor=`crosshair`)}else if(e.mode===`polyline`){it.current=e.polylineStyle||null,Je.current=null,Xe.current=null,J.current=null,X.current=null,nt.current=null,W(null),G(`polyline`),$();let t=z.current;t&&(t.getCanvas().style.cursor=`crosshair`)}}else W(e),G(`marker`),wt(e),Je.current=null,Xe.current=null,J.current=null,X.current=null,nt.current=null,it.current=null},[St,wt,$]);(0,c.useImperativeHandle)(t,()=>({startAnimation:dt,stopAnimation:ft,toggleAnimation:pt,getMap:()=>z.current,openPopup:e=>ht(e,`programmatic`),closePopup:gt,closeAllPopups:_t,isPopupOpen:vt,toggleUnitTrajectory:mt,flyTo:yt,flyToEntities:bt,getMode:Qt,setMode:Zt,getPickedLocation:$t,clearPickedLocation:en,startDrawing:sn,getRenderer:e=>B.current.get(e),setEditingEntities:e=>{for(let t of ut.current)e.map(String).includes(String(t))||B.current.get(t)?.setEditing?.(!1);for(let t of e)B.current.get(t)?.setEditing?.(!0);Q.current&&=(B.current.get(Q.current.entityId)?.cancelEditPreview?.(),null),lt(e)},getEditingEntities:()=>ut.current,startPicking:an,startRoutePlanning:e=>{Se.current?.startPlanning(e)},getRoadHighlightControl:()=>we.current}),[dt,ft,pt,ht,gt,_t,vt,mt,yt,bt,Qt,Zt,$t,en,sn,an]);let cn=(0,c.useCallback)(()=>{let e=z.current;if(!e)return;let t=new Set(v.map(e=>e.id)),n=new Set(B.current.keys());for(let e of n)t.has(e)||(B.current.get(e)?.destroy(),B.current.delete(e));let r=new Set(y.map(String));for(let t of v){let n=S(t,b),i=B.current.get(n.id);if(i)if(n.type===`radar`&&i instanceof oe)i.update(n);else if(n.type===`image`&&i instanceof ce)i.update(n);else if(n.type===`marker`&&i instanceof le)i.update(n);else if(n.type===`unit`&&i instanceof ue)i.update(n);else if(n.type===`polygon`&&i instanceof de)i.update(n);else if(n.type===`circle`)if(n.fillType===`radial-gradient`)if(i instanceof ge)i.update(n);else{i.destroy();let t=new ge(e,n,C,w,T,E);B.current.set(n.id,t),t.setSelected(r.has(String(n.id)))}else if(i instanceof me)i.update(n);else{i.destroy();let t=new me(e,n,C,w,T,E);B.current.set(n.id,t),t.setSelected(r.has(String(n.id)))}else (n.type===`square`&&i instanceof ve||n.type===`rectangle`&&i instanceof be||n.type===`polyline`&&i instanceof fe)&&i.update(n);else{let t=null;n.type===`radar`?t=new oe(e,n,C,w):n.type===`image`?t=new ce(e,n,C,w):n.type===`marker`?t=new le(e,n,C,w):n.type===`unit`?t=new ue(e,n,C,w):n.type===`polygon`?t=new de(e,n,C,w,T,k):n.type===`circle`?t=n.fillType===`radial-gradient`?new ge(e,n,C,w,T,E):new me(e,n,C,w,T,E):n.type===`square`?t=new ve(e,n,C,w,T,k):n.type===`rectangle`?t=new be(e,n,C,w,T,k):n.type===`polyline`&&(t=new fe(e,n,C,w,k)),t&&(B.current.set(n.id,t),t.setSelected(r.has(String(n.id))),ut.current.map(String).includes(String(n.id))&&t.setEditing?.(!0))}}for(let e of ut.current){let t=B.current.get(e);t&&t.setEditing?.(!0)}},[v,y,b,C,w,T,E,k]),ln=(0,c.useCallback)(()=>{for(let e of B.current.values())e.destroy();B.current.clear()},[]),un=(0,c.useCallback)(e=>{let t=e.getStyle();if(!t?.layers)return;let n=[`polygon-`,`polyline-`,`circle-`,`square-`,`rectangle-`,`radar-`,`image-`,`unit-`,`marker-`];for(let e of t.layers)if(n.some(t=>e.id.startsWith(t)))return e.id},[]),dn=(0,c.useCallback)(e=>{let t=_,n={"raster-opacity":e.opacity??1},r=e.brightness??t?.brightness,i=e.saturation??t?.saturation,a=e.contrast??t?.contrast,o=e.hueRotate??t?.hueRotate;return r!==void 0&&(n[`raster-brightness-min`]=0,n[`raster-brightness-max`]=r),i!==void 0&&(n[`raster-saturation`]=i),a!==void 0&&(n[`raster-contrast`]=a),o!==void 0&&(n[`raster-hue-rotate`]=o),n},[_]),fn=(0,c.useCallback)((e,t)=>{let n=`base-layer-source-${t.id}`,r=`base-layer-${t.id}`,i={type:`raster`,tiles:[t.url],tileSize:t.tileSize??256,minzoom:t.minzoom??0,maxzoom:t.maxzoom??22,scheme:t.scheme??`xyz`};t.bounds&&(i.bounds=t.bounds),t.attribution&&(i.attribution=t.attribution),e.addSource(n,i);let a=un(e);e.addLayer({id:r,type:`raster`,source:n,paint:dn(t),layout:{visibility:t.visible===!1?`none`:`visible`}},a)},[un,dn]),pn=(0,c.useCallback)(async(e,t)=>{try{let n=await(await fetch(t.url)).json(),r=`base-layer-source-${t.id}`,i=`base-layer-${t.id}`;if(!De.current.has(t.id))return;let a=n.format===`pbf`||n.vector_layers,o=un(e);if(a){let t={type:`vector`,tiles:n.tiles,minzoom:n.minzoom??0,maxzoom:n.maxzoom??22};n.bounds&&(t.bounds=n.bounds),n.attribution&&(t.attribution=n.attribution),e.addSource(r,t)}else e.addSource(r,{type:`raster`,tiles:n.tiles,tileSize:t.tileSize??n.tileSize??256,minzoom:n.minzoom??0,maxzoom:n.maxzoom??22,bounds:n.bounds,attribution:n.attribution}),e.addLayer({id:i,type:`raster`,source:r,paint:dn(t),layout:{visibility:t.visible===!1?`none`:`visible`}},o)}catch(e){console.error(`Failed to load TileJSON from ${t.url}:`,e)}},[un,dn]),mn=(0,c.useCallback)(async(e,t)=>{try{let n=await(await fetch(t.url)).json();if(!De.current.has(t.id))return;if(n.sources)for(let[r,i]of Object.entries(n.sources)){let n=`base-layer-source-${t.id}-${r}`;e.getSource(n)||e.addSource(n,i)}let r=un(e);if(n.layers)for(let i of n.layers){let n=`base-layer-${t.id}-${i.id}`;if(e.getLayer(n))continue;let a={...i,id:n,source:i.source?`base-layer-source-${t.id}-${i.source}`:void 0};i.type===`raster`&&(a.paint={...a.paint,...dn(t)}),t.visible===!1&&(a.layout={...a.layout,visibility:`none`}),e.addLayer(a,r)}if(n.glyphs&&!e.getStyle().glyphs){let t=e.style;t.glyphs=n.glyphs,t.stylesheet&&(t.stylesheet.glyphs=n.glyphs)}}catch(e){console.error(`Failed to load Style JSON from ${t.url}:`,e)}},[un,dn]),hn=(0,c.useCallback)((e,t)=>{let n=e.getStyle();if(!n)return;let r=`base-layer-${t}`,i=n.layers?.filter(e=>e.id.startsWith(r))??[];for(let t of i)e.getLayer(t.id)&&e.removeLayer(t.id);let a=`base-layer-source-${t}`,o=n.sources??{};for(let t of Object.keys(o))t.startsWith(a)&&e.getSource(t)&&e.removeSource(t)},[]),gn=(0,c.useCallback)(e=>{let t=z.current;if(!t)return;let n=new Set(e.map(e=>e.id)),r=De.current;for(let e of r)n.has(e)||(hn(t,e),r.delete(e));for(let n of e)if(r.has(n.id)){let e=`base-layer-${n.id}`;if(t.getLayer(e)){let r=dn(n);for(let[n,i]of Object.entries(r))t.setPaintProperty(e,n,i);t.setLayoutProperty(e,`visibility`,n.visible===!1?`none`:`visible`)}}else switch(r.add(n.id),n.type){case`raster`:fn(t,n);break;case`tilejson`:pn(t,n);break;case`style`:mn(t,n);break;default:{let e=n;e.url&&fn(t,{...e,type:`raster`})}}},[fn,pn,mn,hn,dn]),_n=(0,c.useCallback)(e=>{let t=e;for(;t;){let e=t.getAttribute?.(`data-entity-id`);if(e)return e;t=t.parentElement}return null},[]),vn=(0,c.useCallback)(e=>{let t=[e.lngLat.lng,e.lngLat.lat],n={x:e.point.x,y:e.point.y},r=En.current;if(r===`picker`){let e={lng:t[0],lat:t[1]};Ue(e),xt(t),Dn.current?.(e),tn.current&&(tn.current(e),tn.current=null,St(),Ue(null),Zt(nn.current));return}if(st.current)return;if(r===`edit`){let e=kn.current;if(e===`rectangle`){let e=An.current;if(!e)qe(t);else{let n=Je.current,r=S({...n,id:n?.id??Ct(),type:`rectangle`,bounds:[e,t]},b);Ot();let i=z.current;if(i&&!B.current.has(r.id)){let e=new be(i,r,C,w,T,k);B.current.set(r.id,e)}jn.current.onRectangleAdd?.(r),qe(null),Je.current=null,q.current&&(q.current=!1,G(null),i&&(i.getCanvas().style.cursor=``))}return}if(e===`circle`){let e=Y.current;if(!e)Y.current={center:t};else{let n=Mt(e.center,t),r=J.current,i=S({...r,id:r?.id??Ct(),type:`circle`,center:e.center,radius:n},b);Pt();let a=z.current;if(a&&!B.current.has(i.id)){let e=new me(a,i,C,w,T,E);B.current.set(i.id,e)}jn.current.onCircleAdd?.(i),Y.current=null,J.current=null,q.current&&(q.current=!1,G(null),a&&(a.getCanvas().style.cursor=``))}return}if(e===`polygon`){let e=Z.current;if(e.length>=3){let n=e[0];if(Mt(n,t)<20){let t=X.current,n=S({...t,id:t?.id??Ct(),type:`polygon`,coordinates:[...e]},b);Rt();let r=z.current;if(r&&!B.current.has(n.id)){let e=new de(r,n,C,w,T,k);B.current.set(n.id,e)}jn.current.onPolygonAdd?.(n),Z.current=[],X.current=null,q.current&&(q.current=!1,G(null),r&&(r.getCanvas().style.cursor=``));return}}Z.current=[...e,t];return}if(e===`square`){let e=rt.current;if(!e)rt.current={center:t};else{let n=Mt(e.center,t)*2,r=nt.current,i=S({...r,id:r?.id??Ct(),type:`square`,center:e.center,length:n},b);Ut();let a=z.current;if(a&&!B.current.has(i.id)){let e=new ve(a,i,C,w,T,k);B.current.set(i.id,e)}jn.current.onSquareAdd?.(i),rt.current=null,nt.current=null,q.current&&(q.current=!1,G(null),a&&(a.getCanvas().style.cursor=``))}return}if(e===`polyline`){at.current=[...at.current,t];return}let n=Xe.current;if(n&&n.src&&n.width){let e={...n,id:n.id??Ct(),type:`marker`,center:t,src:n.src,width:n.width};jn.current.onMarkerAdd?.(e),W(null),G(null),$(),Xe.current=null,q.current=!1;return}let r=On.current;if(r){let e={id:Ct(),type:`marker`,name:r.name,center:t,src:r.icon,width:r.size||r.width||32};r.customData!==void 0&&(e.customData=r.customData),jn.current.onMarkerAdd?.(e),W(null),G(null),$(),q.current=!1;return}}if(ut.current.length>0){let e=z.current?.getZoom()??12;if(Q.current){let{entityId:e,activeHandle:n}=Q.current,r=B.current.get(e);if(r?.applyHandleMove){let e=r.applyHandleMove(n,t);jn.current.onEntityEdit?.(e)}Q.current=null;return}for(let n of ut.current){let r=B.current.get(n);if(!r?.getEditHandleAt)continue;let i=r.getEditHandleAt(t,e);if(i){if(i.type===`midpoint`&&r.addVertex){let e=r.addVertex(i.index,i.position);jn.current.onEntityEdit?.(e),Q.current={entityId:n,activeHandle:{type:`vertex`,index:i.index+1,position:i.position}}}else Q.current={entityId:n,activeHandle:i};return}}}let i=Cn.current,a=wn.current,o=Tn.current,s=_n(e.originalEvent.target);if(s){let e=i.find(e=>String(e.id)===s);if(e){if(a?.(e),e.popup){let t=e.popup.content??L?.(e);t&&et(e.popup,I,t).trigger===`click`&&o(s,`click`,n)}return}}for(let[t,r]of B.current){let s=r.getLabelLayerId();if(s&&z.current?.getLayer(s)&&z.current.queryRenderedFeatures(e.point,{layers:[s]}).length>0){let e=i.find(e=>e.id===t);if(e){if(a?.(e),e.popup){let r=e.popup.content??L?.(e);r&&et(e.popup,I,r).trigger===`click`&&o(t,`click`,n)}return}}}for(let[e,r]of B.current)if(r.isPointInEntity(t)){let t=i.find(t=>t.id===e);if(t){if(a?.(t),t.popup){let r=t.popup.content??L?.(t);r&&et(t.popup,I,r).trigger===`click`&&o(e,`click`,n)}return}}},[I,L,_n]),yn=(0,c.useCallback)(e=>{let t=[e.lngLat.lng,e.lngLat.lat];if(Q.current){let{entityId:e,activeHandle:n}=Q.current;B.current.get(e)?.updateEditPreview?.(n,t);return}let n=kn.current,r=An.current;n===`rectangle`&&r&&Dt(r,t);let i=Y.current;n===`circle`&&i&&Nt(i.center,t);let a=Z.current;n===`polygon`&&a.length>0&&Lt(a,t);let o=rt.current;n===`square`&&o&&Ht(o.center,t);let s=at.current;n===`polyline`&&s.length>0&&Kt(s,t);let c=Cn.current,l=Tn.current;for(let[e,n]of B.current)if(n.isPointInEntity(t)){let t=c.find(t=>t.id===e);if(!t?.popup)continue;let n=t.popup.content??L?.(t);if(!n)continue;let r=et(t.popup,I,n);if(r.trigger===`hover`){Me.current&&clearTimeout(Me.current),Me.current=window.setTimeout(()=>{l(e,`hover`)},r.hoverDelay);return}}if(Me.current&&=(clearTimeout(Me.current),null),H?.openedBy===`hover`){let e=B.current.get(H.entityId);e&&!e.isPointInEntity(t)&>(H.entityId)}},[I,L,H,gt,Dt,Nt,Lt,Ht,Kt]),bn=(0,c.useCallback)(e=>{if(e.preventDefault(),tn.current){tn.current(null),tn.current=null,St(),Ue(null),Zt(nn.current);return}if(st.current)return;if(ut.current.length>0){let t=[e.lngLat.lng,e.lngLat.lat];if(Q.current){B.current.get(Q.current.entityId)?.cancelEditPreview?.(),Q.current=null;return}let n=z.current?.getZoom()??12;for(let e of ut.current){let r=B.current.get(e);if(!r?.getEditHandleAt||!r.deleteVertex)continue;let i=r.getEditHandleAt(t,n);if(i&&i.type===`vertex`){let e=r.deleteVertex(i.index);e&&jn.current.onEntityEdit?.(e);return}}}if(En.current!==`edit`)return;if(On.current){W(null),G(null),$();return}let t=kn.current;if(t===`rectangle`){if(An.current)qe(null),Ot();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}return}if(t===`circle`){if(Y.current)Y.current=null,Pt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}return}if(t===`polygon`){let e=Z.current;if(e.length>=3){let t=X.current,n=S({...t,id:t?.id??Ct(),type:`polygon`,coordinates:[...e]},b);Rt();let r=z.current;if(r&&!B.current.has(n.id)){let e=new de(r,n,C,w,T,k);B.current.set(n.id,e)}jn.current.onPolygonAdd?.(n),Z.current=[],X.current=null,q.current&&(q.current=!1,G(null),r&&(r.getCanvas().style.cursor=``))}else if(e.length>0)Z.current=[],Rt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}return}if(t===`square`){if(rt.current)rt.current=null,Ut();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}return}if(t===`polyline`){let e=at.current;if(e.length>=2){let t=it.current,n=S({...t,id:t?.id??Ct(),type:`polyline`,coordinates:[...e]},b);qt();let r=z.current;if(r&&!B.current.has(n.id)){let e=new fe(r,n,C,w,k);B.current.set(n.id,e)}jn.current.onPolylineAdd?.(n),at.current=[],it.current=null,q.current&&(q.current=!1,G(null),r&&(r.getCanvas().style.cursor=``))}else if(e.length>0)at.current=[],qt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}return}let n=[e.lngLat.lng,e.lngLat.lat],r={x:e.point.x,y:e.point.y},i=Cn.current,a=_n(e.originalEvent.target);if(a){let e=i.find(e=>String(e.id)===a);if(e){xn(e,r,n);return}}for(let[t,a]of B.current){let o=a.getLabelLayerId();if(o&&z.current?.getLayer(o)&&z.current.queryRenderedFeatures(e.point,{layers:[o]}).length>0){let e=i.find(e=>e.id===t);if(e){xn(e,r,n);return}}}for(let[e,t]of B.current)if(t.isPointInEntity(n)){let t=i.find(t=>t.id===e);if(t){xn(t,r,n);return}}},[_n,$,Ot,Pt,Rt,Ut,qt]),xn=(0,c.useCallback)((e,t,n)=>{let r=ye.current?.getBoundingClientRect(),i=r?{x:t.x+r.left,y:t.y+r.top}:t;Pe({position:i,lngLat:n,items:[{key:`delete`,label:`删除`,icon:(0,p.jsx)(`img`,{src:Ie,alt:`delete`,style:{width:`18px`,flexShrink:0}}),danger:!0,onClick:()=>{jn.current.onEntityDelete?.(e)}}]})},[]),Sn=(0,c.useCallback)(()=>{Pe(null)},[]);(0,c.useEffect)(()=>{let e=document.createElement(`div`);return e.id=`mapbox-popup-container-${Date.now()}`,e.style.cssText=`
|
|
58
58
|
position: fixed;
|
|
59
59
|
top: 0;
|
|
60
60
|
left: 0;
|
|
@@ -70,4 +70,4 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
|
|
|
70
70
|
pointer-events: none;
|
|
71
71
|
height: 100%;
|
|
72
72
|
z-index: ${(I?.zIndex??1e3)+100};
|
|
73
|
-
`,document.body.appendChild(e),Fe.current=e,()=>{document.body.contains(e)&&document.body.removeChild(e)}},[I?.zIndex]);let yn=(0,c.useRef)(v);yn.current=v;let bn=(0,c.useRef)(se);bn.current=se;let xn=(0,c.useRef)(ht);xn.current=ht;let Sn=(0,c.useRef)(Be);Sn.current=Be;let Cn=(0,c.useRef)(m);Cn.current=m;let wn=(0,c.useRef)(We);wn.current=We;let Tn=(0,c.useRef)(Ge);Tn.current=Ge;let En=(0,c.useRef)(K);En.current=K;let Dn=(0,c.useRef)(d);Dn.current=d;let On=(0,c.useRef)(b);On.current=b,(0,c.useEffect)(()=>{let e=e=>{if(e.key===`Escape`&&Q.current){B.current.get(Q.current.entityId)?.cancelEditPreview?.(),Q.current=null;return}if(e.key===`Escape`&&Be===`edit`){if(We&&(W(null),G(null),$()),Ge===`rectangle`)if(K)qe(null),Ot();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}if(Ge===`circle`)if(Y.current)Y.current=null,Pt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}if(Ge===`polygon`)if(Z.current.length>0)Z.current=[],Rt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}if(Ge===`square`)if(rt.current)rt.current=null,Ut();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}if(Ge===`polyline`)if(at.current.length>0)at.current=[],qt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[Be,We,Ge,K,$,Ot,Pt,Rt,Ut,qt]),(0,c.useEffect)(()=>{let e=z.current;if(!e||!H)return;let t=H.entityId,n=H.config,r=()=>{let r=yn.current.find(e=>e.id===t);if(!r){_t();return}let{position:i}=tt(r,n,e,void 0,je.current);je.current&&(je.current.style.left=`${i.x}px`,je.current.style.top=`${i.y}px`)},i=setTimeout(()=>{r()},50);return e.on(`move`,r),e.on(`zoom`,r),e.on(`rotate`,r),e.on(`pitch`,r),()=>{clearTimeout(i),e.off(`move`,r),e.off(`zoom`,r),e.off(`rotate`,r),e.off(`pitch`,r)}},[H?.entityId,_t]),(0,c.useEffect)(()=>{let e=z.current,t=ye.current;if(!e||!Ne||!t)return;let n=Ne.lngLat,r=()=>{let r=e.project(n),i=t.clientWidth,a=t.clientHeight;if(r.x<0||r.x>i||r.y<0||r.y>a){vn();return}let o=t.getBoundingClientRect(),s=r.x+o.left,c=r.y+o.top;Le.current&&(Le.current.style.left=`${s}px`,Le.current.style.top=`${c}px`)};return e.on(`move`,r),e.on(`zoom`,r),e.on(`rotate`,r),e.on(`pitch`,r),()=>{e.off(`move`,r),e.off(`zoom`,r),e.off(`rotate`,r),e.off(`pitch`,r)}},[Ne?.lngLat,vn]),(0,c.useEffect)(()=>{if(!ye.current)return;let e={version:8,sources:{},layers:[]},{dragPan:t=!0,scrollZoom:c=!0,doubleClickZoom:u=!0,touchZoomRotate:d=!0,keyboard:f=!0,dragRotate:p=!0,pitchWithRotate:m=!0,touchPitch:_=!0,boxZoom:y=!0}=h,b=new l.default.Map({container:ye.current,style:o||e,center:n,zoom:r,pitch:i,bearing:a,maxBounds:s,dragPan:t,scrollZoom:c,doubleClickZoom:u,touchZoomRotate:d,keyboard:f,dragRotate:p,pitchWithRotate:m,touchPitch:_,boxZoom:y,transformRequest:(e,t)=>{if(t===`Glyphs`){let t=e.match(/\/fonts\/([^/]+)\/(\d+-\d+)\.pbf/);if(t){let e=decodeURIComponent(t[1]),n=t[2],r=e.split(`,`)[0].trim();return{url:`/gis-fonts/${encodeURIComponent(r)}/${n}.pbf`}}}return{url:e}}});return z.current=b,b.on(`load`,()=>{if(!b.getStyle().glyphs){let e=b.style,t=`/gis-fonts/{fontstack}/{range}.pbf`;e.glyphs=t,e.stylesheet&&(e.stylesheet.glyphs=t)}V.current.clear(),v.forEach(e=>{V.current.set(e.id,e)}),fn(g),rn(),Et(),At(),It(),Bt(),Gt(),ze(b),ae?.(b)}),b.on(`click`,mn),b.on(`mousemove`,hn),b.on(`contextmenu`,gn),()=>{b.off(`click`,mn),b.off(`mousemove`,hn),b.off(`contextmenu`,gn),an(),St(),$(),kt(),Jt(),b.remove(),z.current=null}},[]),(0,c.useEffect)(()=>{if(z.current){if(!z.current.isStyleLoaded()){z.current.once(`load`,()=>{V.current.clear(),v.forEach(e=>{V.current.set(e.id,e)}),rn()});return}V.current.clear(),v.forEach(e=>{V.current.set(e.id,e)}),rn()}},[v,rn]),(0,c.useEffect)(()=>{!z.current||!z.current.isStyleLoaded()||(an(),rn())},[C,w,T,E,k,an,rn]),(0,c.useEffect)(()=>{if(z.current){if(!z.current.isStyleLoaded()){z.current.once(`load`,()=>{fn(g)});return}fn(g)}},[g,fn]);let kn=(0,c.useRef)(void 0),An=(0,c.useRef)(!0),jn=(0,c.useRef)(g);jn.current=g;let Mn=(0,c.useRef)(fn);Mn.current=fn;let Nn=(0,c.useRef)(an);Nn.current=an;let Pn=(0,c.useRef)(rn);Pn.current=rn;let Fn=(0,c.useRef)(Et);Fn.current=Et;let In=(0,c.useRef)(At);In.current=At;let Ln=(0,c.useRef)(It);Ln.current=It;let Rn=(0,c.useRef)(Bt);Rn.current=Bt;let zn=(0,c.useRef)(Gt);zn.current=Gt,(0,c.useEffect)(()=>{let e=z.current;if(!e)return;let t=o||{version:8,sources:{},layers:[]};if(An.current){An.current=!1,kn.current=o;return}kn.current!==o&&(kn.current=o,e.setStyle(t),e.once(`style.load`,()=>{if(!e.getStyle().glyphs){let t=e.style,n=`/gis-fonts/{fontstack}/{range}.pbf`;t.glyphs=n,t.stylesheet&&(t.stylesheet.glyphs=n)}De.current.clear(),Mn.current(jn.current),Nn.current(),Pn.current(),Fn.current(),In.current(),Ln.current(),Rn.current(),zn.current()}))},[o]),(0,c.useEffect)(()=>{let e=new Set(y.map(String));for(let[t,n]of B.current)n.setSelected(e.has(String(t)))},[y]);let Bn=(0,c.useRef)({});(0,c.useEffect)(()=>{let e=z.current;if(!e)return;let t=Bn.current,o=n&&(t.center?.[0]!==n[0]||t.center?.[1]!==n[1]),s=t.zoom!==r,c=t.pitch!==i,l=t.bearing!==a;!o&&!s&&!c&&!l||(Bn.current={center:n,zoom:r,pitch:i,bearing:a},e.jumpTo({center:n,zoom:r,pitch:i,bearing:a}))},[n,r,i,a]);let Vn=(()=>M===!1?null:M===!0?{enabled:!0}:M)(),Hn=(()=>N===!1?null:N===!0?{enabled:!0}:N)(),Un=(()=>te===!1?null:te===!0?{enabled:!0}:te)(),Wn=(()=>{if(P===!1)return null;let e,t,n;if(g&&g.length>0){let r=g.find(e=>e.hasRoadNetwork===!0)||g[0];if(r.type===`style`){let t=z.current?.getStyle();if(t?.sources){let n=`base-layer-source-${r.id}-`,i=Object.keys(t.sources).find(e=>e.startsWith(n));i&&(e=i)}}else e=`base-layer-source-${r.id}`;t=r.roadNetworkSourceLayer||`road`,n=r.roadNetworkClassField}return P===!0?{enabled:!0,source:e,sourceLayer:t,classField:n}:{...P,source:P.source||e,sourceLayer:P.sourceLayer||t,classField:P.classField||n}})(),Gn=(()=>F?F===!0?{enabled:!0}:F:null)(),Kn=(()=>ne?ne===!0?{enabled:!0}:ne:null)(),qn=(()=>re||null)(),Jn=(0,c.useMemo)(()=>{let e=[];for(let t of g)if(t.applyRasterPaint)if(t.type===`style`){let n=z.current;if(n){let r=`base-layer-${t.id}-`,i=n.getStyle();if(i?.layers)for(let t of i.layers)t.id.startsWith(r)&&t.type===`raster`&&e.push(t.id)}}else e.push(`base-layer-${t.id}`);return e},[g,Re]);return(0,p.jsxs)(`div`,{className:`comp-mapbox ${Be===`picker`?`comp-mapbox--picker-mode`:``} ${he}`,style:_e,children:[(0,p.jsx)(`div`,{ref:ye,className:`comp-mapbox__map`}),Be===`picker`&&f.showCrosshair===!0&&(0,p.jsxs)(`div`,{className:`comp-mapbox__crosshair`,children:[(0,p.jsx)(`div`,{className:`comp-mapbox__crosshair-h`,style:f.crosshairColor?{backgroundColor:f.crosshairColor}:void 0}),(0,p.jsx)(`div`,{className:`comp-mapbox__crosshair-v`,style:f.crosshairColor?{backgroundColor:f.crosshairColor}:void 0})]}),(0,p.jsxs)(`div`,{className:`comp-mapbox__edit-controls${Be===`edit`&&d.showEditTools!==!1&&(d.markerTemplates&&d.markerTemplates.length>0||d.showRectangleTool||d.showCircleTool||d.showPolygonTool||d.showSquareTool||d.showPolylineTool)||Wn&&Wn.enabled!==!1||qn&&qn.enabled!==!1?``:` comp-mapbox__edit-controls--hidden`}`,children:[Be===`edit`&&d.showEditTools!==!1&&(d.markerTemplates&&d.markerTemplates.length>0||d.showRectangleTool||d.showCircleTool||d.showPolygonTool||d.showSquareTool||d.showPolylineTool)&&(0,p.jsx)(Ze,{markerTemplates:d.markerTemplates||[],selectedTemplate:We,onTemplateSelect:Yt,drawMode:Ge,onDrawModeChange:Xt,showRectangleTool:d.showRectangleTool,showCircleTool:d.showCircleTool,showPolygonTool:d.showPolygonTool,showSquareTool:d.showSquareTool,showPolylineTool:d.showPolylineTool}),(0,p.jsx)(ke,{ref:we,map:Re,showButton:!!(Wn&&Wn.enabled!==!1),highlightWidth:Wn?.highlightWidth,defaultRoadTypes:Wn?.defaultRoadTypes,defaultMinWidth:Wn?.defaultMinWidth,source:Wn?.source,sourceLayer:Wn?.sourceLayer,classField:Wn?.classField,className:Wn?.className,style:Wn?.style}),qn&&qn.enabled!==!1&&(0,p.jsx)($e,{ref:Se,map:Re,pointCount:qn.pointCount,showPointCountInput:qn.showPointCountInput,visualType:qn.visualType,onSelectFinished:qn.onSelectFinished})]}),(Vn?.enabled!==!1||Hn?.enabled!==!1||Un?.enabled!==!1||Gn&&Gn.enabled!==!1||Kn&&Kn.enabled!==!1)&&(0,p.jsxs)(`div`,{className:`comp-mapbox__controls`,children:[Vn&&Vn.enabled!==!1&&(0,p.jsx)(Ce,{map:Re,precision:Vn.precision,className:Vn.className,style:Vn.style}),Hn&&Hn.enabled!==!1&&(0,p.jsx)(Te,{map:Re,maxWidth:Hn.maxWidth,unit:Hn.unit,className:Hn.className,style:Hn.style}),Gn&&Gn.enabled!==!1&&(0,p.jsx)(Ke,{map:Re,entityConfig:b,onDrawModeChange:e=>{st.current=e},className:Gn.className,style:Gn.style}),Kn&&Kn.enabled!==!1&&(0,p.jsx)(Ye,{map:Re,value:_,onChange:ie,rasterPaintLayerIds:Jn,className:Kn.className,style:Kn.style}),Un&&Un.enabled!==!1&&(0,p.jsx)(Ee,{map:Re,initialCenter:n,initialZoom:r,initialPitch:i,initialBearing:a,duration:Un.duration,className:Un.className,style:Un.style})]}),!(qn&&qn.enabled!==!1)&&(0,p.jsx)($e,{ref:Se,map:Re,showButton:!1}),H&&Ae.current&&(0,p.jsx)(xe,{popupState:H,onClose:()=>gt(H.entityId),portalContainer:Ae.current,popupRef:je}),Ne&&Fe.current&&(0,p.jsx)(Qe,{menuState:Ne,onClose:vn,portalContainer:Fe.current,menuRef:Le})]})});st.displayName=`Mapbox`,exports.BaseCanvasRenderer=ne,exports.COLOR_SCHEMES=C,exports.CanvasCircleRenderer=ge,exports.CanvasImageRenderer=ce,exports.CanvasRadarRenderer=oe,exports.CircleRenderer=me,exports.ContextMenu=Qe,exports.CoordinateDisplay=Ce,exports.DEFAULT_NAME_CONFIG=h,exports.DEFAULT_SELECT_NAME_CONFIG=g,exports.EditControl=Ze,exports.EntityPopup=xe,exports.Mapbox=st,exports.MarkerRenderer=le,exports.POPUP_DEFAULTS=T,exports.PolygonRenderer=de,exports.PolylineRenderer=fe,exports.RADAR_DEFAULTS=w,exports.ROAD_TYPE_OPTIONS=E,exports.RectangleRenderer=be,exports.ResetViewControl=Ee,exports.RoadHighlightControl=ke,exports.ScaleControl=Te,exports.SquareRenderer=ve,exports.UnitRenderer=ue,exports.bearing=k,exports.calculatePopupPosition=tt,exports.confidenceToOpacity=F,exports.destinationPoint=D,exports.distance=O,exports.mergePopupConfig=et,exports.resolveNameConfig=x;
|
|
73
|
+
`,document.body.appendChild(e),Fe.current=e,()=>{document.body.contains(e)&&document.body.removeChild(e)}},[I?.zIndex]);let Cn=(0,c.useRef)(v);Cn.current=v;let wn=(0,c.useRef)(se);wn.current=se;let Tn=(0,c.useRef)(ht);Tn.current=ht;let En=(0,c.useRef)(Be);En.current=Be;let Dn=(0,c.useRef)(m);Dn.current=m;let On=(0,c.useRef)(We);On.current=We;let kn=(0,c.useRef)(Ge);kn.current=Ge;let An=(0,c.useRef)(K);An.current=K;let jn=(0,c.useRef)(d);jn.current=d;let Mn=(0,c.useRef)(b);Mn.current=b,(0,c.useEffect)(()=>{let e=e=>{if(e.key===`Escape`&&Q.current){B.current.get(Q.current.entityId)?.cancelEditPreview?.(),Q.current=null;return}if(e.key===`Escape`&&Be===`edit`){if(We&&(W(null),G(null),$()),Ge===`rectangle`)if(K)qe(null),Ot();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}if(Ge===`circle`)if(Y.current)Y.current=null,Pt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}if(Ge===`polygon`)if(Z.current.length>0)Z.current=[],Rt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}if(Ge===`square`)if(rt.current)rt.current=null,Ut();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}if(Ge===`polyline`)if(at.current.length>0)at.current=[],qt();else{G(null);let e=z.current;e&&(e.getCanvas().style.cursor=``)}}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[Be,We,Ge,K,$,Ot,Pt,Rt,Ut,qt]),(0,c.useEffect)(()=>{let e=z.current;if(!e||!H)return;let t=H.entityId,n=H.config,r=()=>{let r=Cn.current.find(e=>e.id===t);if(!r){_t();return}let{position:i}=tt(r,n,e,void 0,je.current);je.current&&(je.current.style.left=`${i.x}px`,je.current.style.top=`${i.y}px`)},i=setTimeout(()=>{r()},50);return e.on(`move`,r),e.on(`zoom`,r),e.on(`rotate`,r),e.on(`pitch`,r),()=>{clearTimeout(i),e.off(`move`,r),e.off(`zoom`,r),e.off(`rotate`,r),e.off(`pitch`,r)}},[H?.entityId,_t]),(0,c.useEffect)(()=>{let e=z.current,t=ye.current;if(!e||!Ne||!t)return;let n=Ne.lngLat,r=()=>{let r=e.project(n),i=t.clientWidth,a=t.clientHeight;if(r.x<0||r.x>i||r.y<0||r.y>a){Sn();return}let o=t.getBoundingClientRect(),s=r.x+o.left,c=r.y+o.top;Le.current&&(Le.current.style.left=`${s}px`,Le.current.style.top=`${c}px`)};return e.on(`move`,r),e.on(`zoom`,r),e.on(`rotate`,r),e.on(`pitch`,r),()=>{e.off(`move`,r),e.off(`zoom`,r),e.off(`rotate`,r),e.off(`pitch`,r)}},[Ne?.lngLat,Sn]),(0,c.useEffect)(()=>{if(!ye.current)return;let e={version:8,sources:{},layers:[]},{dragPan:t=!0,scrollZoom:c=!0,doubleClickZoom:u=!0,touchZoomRotate:d=!0,keyboard:f=!0,dragRotate:p=!0,pitchWithRotate:m=!0,touchPitch:_=!0,boxZoom:y=!0}=h,b=new l.default.Map({container:ye.current,style:o||e,center:n,zoom:r,pitch:i,bearing:a,maxBounds:s,dragPan:t,scrollZoom:c,doubleClickZoom:u,touchZoomRotate:d,keyboard:f,dragRotate:p,pitchWithRotate:m,touchPitch:_,boxZoom:y,transformRequest:(e,t)=>{if(t===`Glyphs`){let t=e.match(/\/fonts\/([^/]+)\/(\d+-\d+)\.pbf/);if(t){let e=decodeURIComponent(t[1]),n=t[2],r=e.split(`,`)[0].trim();return{url:`/gis-fonts/${encodeURIComponent(r)}/${n}.pbf`}}}return{url:e}}});return z.current=b,b.on(`load`,()=>{if(!b.getStyle().glyphs){let e=b.style,t=`/gis-fonts/{fontstack}/{range}.pbf`;e.glyphs=t,e.stylesheet&&(e.stylesheet.glyphs=t)}V.current.clear(),v.forEach(e=>{V.current.set(e.id,e)}),gn(g),cn(),Et(),At(),It(),Bt(),Gt(),ze(b),ae?.(b)}),b.on(`click`,vn),b.on(`mousemove`,yn),b.on(`contextmenu`,bn),()=>{b.off(`click`,vn),b.off(`mousemove`,yn),b.off(`contextmenu`,bn),ln(),St(),$(),kt(),Jt(),b.remove(),z.current=null}},[]),(0,c.useEffect)(()=>{if(z.current){if(!z.current.isStyleLoaded()){z.current.once(`load`,()=>{V.current.clear(),v.forEach(e=>{V.current.set(e.id,e)}),cn()});return}V.current.clear(),v.forEach(e=>{V.current.set(e.id,e)}),cn()}},[v,cn]),(0,c.useEffect)(()=>{!z.current||!z.current.isStyleLoaded()||(ln(),cn())},[C,w,T,E,k,ln,cn]),(0,c.useEffect)(()=>{if(z.current){if(!z.current.isStyleLoaded()){z.current.once(`load`,()=>{gn(g)});return}gn(g)}},[g,gn]);let Nn=(0,c.useRef)(void 0),Pn=(0,c.useRef)(!0),Fn=(0,c.useRef)(g);Fn.current=g;let In=(0,c.useRef)(gn);In.current=gn;let Ln=(0,c.useRef)(ln);Ln.current=ln;let Rn=(0,c.useRef)(cn);Rn.current=cn;let zn=(0,c.useRef)(Et);zn.current=Et;let Bn=(0,c.useRef)(At);Bn.current=At;let Vn=(0,c.useRef)(It);Vn.current=It;let Hn=(0,c.useRef)(Bt);Hn.current=Bt;let Un=(0,c.useRef)(Gt);Un.current=Gt,(0,c.useEffect)(()=>{let e=z.current;if(!e)return;let t=o||{version:8,sources:{},layers:[]};if(Pn.current){Pn.current=!1,Nn.current=o;return}Nn.current!==o&&(Nn.current=o,e.setStyle(t),e.once(`style.load`,()=>{if(!e.getStyle().glyphs){let t=e.style,n=`/gis-fonts/{fontstack}/{range}.pbf`;t.glyphs=n,t.stylesheet&&(t.stylesheet.glyphs=n)}De.current.clear(),In.current(Fn.current),Ln.current(),Rn.current(),zn.current(),Bn.current(),Vn.current(),Hn.current(),Un.current()}))},[o]),(0,c.useEffect)(()=>{let e=new Set(y.map(String));for(let[t,n]of B.current)n.setSelected(e.has(String(t)))},[y]);let Wn=(0,c.useRef)({});(0,c.useEffect)(()=>{let e=z.current;if(!e)return;let t=Wn.current,o=n&&(t.center?.[0]!==n[0]||t.center?.[1]!==n[1]),s=t.zoom!==r,c=t.pitch!==i,l=t.bearing!==a;!o&&!s&&!c&&!l||(Wn.current={center:n,zoom:r,pitch:i,bearing:a},e.jumpTo({center:n,zoom:r,pitch:i,bearing:a}))},[n,r,i,a]);let Gn=(()=>M===!1?null:M===!0?{enabled:!0}:M)(),Kn=(()=>N===!1?null:N===!0?{enabled:!0}:N)(),qn=(()=>te===!1?null:te===!0?{enabled:!0}:te)(),Jn=(()=>{if(P===!1)return null;let e,t,n;if(g&&g.length>0){let r=g.find(e=>e.hasRoadNetwork===!0)||g[0];if(r.type===`style`){let t=z.current?.getStyle();if(t?.sources){let n=`base-layer-source-${r.id}-`,i=Object.keys(t.sources).find(e=>e.startsWith(n));i&&(e=i)}}else e=`base-layer-source-${r.id}`;t=r.roadNetworkSourceLayer||`road`,n=r.roadNetworkClassField}return P===!0?{enabled:!0,source:e,sourceLayer:t,classField:n}:{...P,source:P.source||e,sourceLayer:P.sourceLayer||t,classField:P.classField||n}})(),Yn=(()=>F?F===!0?{enabled:!0}:F:null)(),Xn=(()=>ne?ne===!0?{enabled:!0}:ne:null)(),Zn=(()=>re||null)(),Qn=(0,c.useMemo)(()=>{let e=[];for(let t of g)if(t.applyRasterPaint)if(t.type===`style`){let n=z.current;if(n){let r=`base-layer-${t.id}-`,i=n.getStyle();if(i?.layers)for(let t of i.layers)t.id.startsWith(r)&&t.type===`raster`&&e.push(t.id)}}else e.push(`base-layer-${t.id}`);return e},[g,Re]);return(0,p.jsxs)(`div`,{className:`comp-mapbox ${Be===`picker`?`comp-mapbox--picker-mode`:``} ${he}`,style:_e,children:[(0,p.jsx)(`div`,{ref:ye,className:`comp-mapbox__map`}),Be===`picker`&&f.showCrosshair===!0&&(0,p.jsxs)(`div`,{className:`comp-mapbox__crosshair`,children:[(0,p.jsx)(`div`,{className:`comp-mapbox__crosshair-h`,style:f.crosshairColor?{backgroundColor:f.crosshairColor}:void 0}),(0,p.jsx)(`div`,{className:`comp-mapbox__crosshair-v`,style:f.crosshairColor?{backgroundColor:f.crosshairColor}:void 0})]}),(0,p.jsxs)(`div`,{className:`comp-mapbox__edit-controls${Be===`edit`&&d.showEditTools!==!1&&(d.markerTemplates&&d.markerTemplates.length>0||d.showRectangleTool||d.showCircleTool||d.showPolygonTool||d.showSquareTool||d.showPolylineTool)||Jn&&Jn.enabled!==!1||Zn&&Zn.enabled!==!1?``:` comp-mapbox__edit-controls--hidden`}`,children:[Be===`edit`&&d.showEditTools!==!1&&(d.markerTemplates&&d.markerTemplates.length>0||d.showRectangleTool||d.showCircleTool||d.showPolygonTool||d.showSquareTool||d.showPolylineTool)&&(0,p.jsx)(Ze,{markerTemplates:d.markerTemplates||[],selectedTemplate:We,onTemplateSelect:Yt,drawMode:Ge,onDrawModeChange:Xt,showRectangleTool:d.showRectangleTool,showCircleTool:d.showCircleTool,showPolygonTool:d.showPolygonTool,showSquareTool:d.showSquareTool,showPolylineTool:d.showPolylineTool}),(0,p.jsx)(ke,{ref:we,map:Re,showButton:!!(Jn&&Jn.enabled!==!1),highlightWidth:Jn?.highlightWidth,defaultRoadTypes:Jn?.defaultRoadTypes,defaultMinWidth:Jn?.defaultMinWidth,source:Jn?.source,sourceLayer:Jn?.sourceLayer,classField:Jn?.classField,className:Jn?.className,style:Jn?.style}),Zn&&Zn.enabled!==!1&&(0,p.jsx)($e,{ref:Se,map:Re,pointCount:Zn.pointCount,showPointCountInput:Zn.showPointCountInput,visualType:Zn.visualType,onSelectFinished:Zn.onSelectFinished})]}),(Gn?.enabled!==!1||Kn?.enabled!==!1||qn?.enabled!==!1||Yn&&Yn.enabled!==!1||Xn&&Xn.enabled!==!1)&&(0,p.jsxs)(`div`,{className:`comp-mapbox__controls`,children:[Gn&&Gn.enabled!==!1&&(0,p.jsx)(Ce,{map:Re,precision:Gn.precision,className:Gn.className,style:Gn.style}),Kn&&Kn.enabled!==!1&&(0,p.jsx)(Te,{map:Re,maxWidth:Kn.maxWidth,unit:Kn.unit,className:Kn.className,style:Kn.style}),Yn&&Yn.enabled!==!1&&(0,p.jsx)(Ke,{map:Re,entityConfig:b,onDrawModeChange:e=>{st.current=e},className:Yn.className,style:Yn.style}),Xn&&Xn.enabled!==!1&&(0,p.jsx)(Ye,{map:Re,value:_,onChange:ie,rasterPaintLayerIds:Qn,className:Xn.className,style:Xn.style}),qn&&qn.enabled!==!1&&(0,p.jsx)(Ee,{map:Re,initialCenter:n,initialZoom:r,initialPitch:i,initialBearing:a,duration:qn.duration,className:qn.className,style:qn.style})]}),!(Zn&&Zn.enabled!==!1)&&(0,p.jsx)($e,{ref:Se,map:Re,showButton:!1}),H&&Ae.current&&(0,p.jsx)(xe,{popupState:H,onClose:()=>gt(H.entityId),portalContainer:Ae.current,popupRef:je}),Ne&&Fe.current&&(0,p.jsx)(Qe,{menuState:Ne,onClose:Sn,portalContainer:Fe.current,menuRef:Le})]})});st.displayName=`Mapbox`,exports.BaseCanvasRenderer=ne,exports.COLOR_SCHEMES=C,exports.CanvasCircleRenderer=ge,exports.CanvasImageRenderer=ce,exports.CanvasRadarRenderer=oe,exports.CircleRenderer=me,exports.ContextMenu=Qe,exports.CoordinateDisplay=Ce,exports.DEFAULT_NAME_CONFIG=h,exports.DEFAULT_SELECT_NAME_CONFIG=g,exports.EditControl=Ze,exports.EntityPopup=xe,exports.Mapbox=st,exports.MarkerRenderer=le,exports.POPUP_DEFAULTS=T,exports.PolygonRenderer=de,exports.PolylineRenderer=fe,exports.RADAR_DEFAULTS=w,exports.ROAD_TYPE_OPTIONS=E,exports.RectangleRenderer=be,exports.ResetViewControl=Ee,exports.RoadHighlightControl=ke,exports.ScaleControl=Te,exports.SquareRenderer=ve,exports.UnitRenderer=ue,exports.bearing=k,exports.calculatePopupPosition=tt,exports.confidenceToOpacity=F,exports.destinationPoint=D,exports.distance=O,exports.mergePopupConfig=et,exports.resolveNameConfig=x;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { Mapbox } from './Mapbox';
|
|
2
|
-
export type { MapboxProps, MapboxRef, MapEntity, BaseEntity, RadarEntity, ImageEntity, MarkerEntity, BaseMarkerEntity, UnitEntity, PolygonEntity, PolylineEntity, CircleEntity, SquareEntity, RectangleEntity, EntityId, Location, PopupConfig, PopupDefaults, PopupTrigger, PopupAnimation, PopupPosition, PopupState, LayerConfig, RasterLayerConfig, StyleLayerConfig, TileJSONLayerConfig, LayerType, TileScheme, CoordinateDisplayConfig, ScaleControlConfig, ResetViewControlConfig, RoadHighlightControlConfig, RoadClass, RoadTypeOption, InteractionOptions, EditHandleType, EditHandle, MapMode, DrawMode, DrawingOptions, MarkerStyleOptions, RectangleStyleOptions, CircleStyleOptions, PolygonStyleOptions, PolylineStyleOptions, SquareStyleOptions, PickerResult, PickerModeConfig, EditModeConfig, MarkerTemplate, RenderContext, ColorScheme, CircleFillType, CircleGradientAnimation, NameConfig, RoadHighlightControlRef, } from './types';
|
|
2
|
+
export type { MapboxProps, MapboxRef, MapEntity, BaseEntity, RadarEntity, ImageEntity, MarkerEntity, BaseMarkerEntity, UnitEntity, PolygonEntity, PolylineEntity, CircleEntity, SquareEntity, RectangleEntity, EntityId, Location, PopupConfig, PopupDefaults, PopupTrigger, PopupAnimation, PopupPosition, PopupState, LayerConfig, RasterLayerConfig, StyleLayerConfig, TileJSONLayerConfig, LayerType, TileScheme, CoordinateDisplayConfig, ScaleControlConfig, ResetViewControlConfig, RoadHighlightControlConfig, RoadClass, RoadTypeOption, InteractionOptions, EditHandleType, EditHandle, MapMode, DrawMode, DrawingOptions, MarkerStyleOptions, RectangleStyleOptions, CircleStyleOptions, PolygonStyleOptions, PolylineStyleOptions, SquareStyleOptions, PickerResult, PickerModeConfig, StartPickingOptions, EditModeConfig, MarkerTemplate, RenderContext, ColorScheme, CircleFillType, CircleGradientAnimation, NameConfig, RoadHighlightControlRef, } from './types';
|
|
3
3
|
export { COLOR_SCHEMES, RADAR_DEFAULTS, POPUP_DEFAULTS, ROAD_TYPE_OPTIONS, DEFAULT_NAME_CONFIG, DEFAULT_SELECT_NAME_CONFIG, resolveNameConfig } from './types';
|
|
4
4
|
export { EntityPopup } from './components/EntityPopup';
|
|
5
5
|
export { CoordinateDisplay } from './components/CoordinateDisplay';
|