bbl-mapbox-react 0.0.26 → 0.0.28
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 +1 -1
- package/dist/index.mjs +2 -2
- package/dist/types.d.ts +2 -1
- 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=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=`
|
|
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,t=!0)=>{if(Ve(`edit`),t&&(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;
|
package/dist/index.mjs
CHANGED
|
@@ -6782,8 +6782,8 @@ const Mapbox = forwardRef((e, c) => {
|
|
|
6782
6782
|
jt,
|
|
6783
6783
|
Qe
|
|
6784
6784
|
]);
|
|
6785
|
-
let mn = (e) => "mode" in e, hn = useCallback((e) => {
|
|
6786
|
-
if (tt("edit"), Mt(), rt(null), W.current = !0, mn(e)) {
|
|
6785
|
+
let mn = (e) => "mode" in e, hn = useCallback((e, t = !0) => {
|
|
6786
|
+
if (tt("edit"), t && (Mt(), rt(null)), W.current = !0, mn(e)) {
|
|
6787
6787
|
if (e.mode === "marker") e.markerStyle ? (lt.current = e.markerStyle, G.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null, H(null), U("marker"), e.markerStyle.src && e.markerStyle.width ? Pt({
|
|
6788
6788
|
id: "custom",
|
|
6789
6789
|
name: e.markerStyle.name || "Marker",
|
package/dist/types.d.ts
CHANGED
|
@@ -629,6 +629,7 @@ export interface MapboxRef {
|
|
|
629
629
|
* 绘制完成后自动退出绘制模式
|
|
630
630
|
*
|
|
631
631
|
* @param options 绘制选项（MarkerTemplate 或 DrawingOptions）
|
|
632
|
+
* @param clearPickedLocation 是否在绘制前清除选址结果（默认 true）
|
|
632
633
|
*
|
|
633
634
|
* @example
|
|
634
635
|
* // 绘制 Marker（传入 MarkerTemplate）
|
|
@@ -637,7 +638,7 @@ export interface MapboxRef {
|
|
|
637
638
|
* // 绘制矩形
|
|
638
639
|
* mapboxRef.current?.startDrawing({ mode: 'rectangle' });
|
|
639
640
|
*/
|
|
640
|
-
startDrawing: (options: MarkerTemplate | DrawingOptions) => void;
|
|
641
|
+
startDrawing: (options: MarkerTemplate | DrawingOptions, clearPickedLocation?: boolean) => void;
|
|
641
642
|
/**
|
|
642
643
|
* 获取指定实体的渲染器实例
|
|
643
644
|
* @param id 实体 ID
|