qm-map-maplibre-gl 0.0.3 → 0.0.4

package/dist/qm-map.es.js

@@ -1514,7 +1514,9 @@ var ce = t((e) => {
 		let e = u.current.getAll();
 		e.features && e.features.length > 0 && n({ data: e });
 	};
-	return i(() => (l && !u.current && (u.current = new p({
+	return i(() => {
+		r && d(r);
+	}, [r]), i(() => (l && !u.current && (u.current = new p({
 		displayControlsDefault: !1,
 		styles: ue,
 		defaultMode: "simple_select"

package/dist/qm-map.umd.js

@@ -25,4 +25,4 @@ endobj
       height: 100%;
       visibility: hidden;
       pointer-events: none;
-    `;let i=document.createElement(`div`),a=this.toPixels(this.width),o=this.toPixels(this.height);i.style.cssText=`position:absolute;top:0;left:0;width:${a}px;height:${o}px;`,n.appendChild(i),document.body.appendChild(n);let s=new r.Map({container:i,style:this.map.getStyle(),center:this.map.getCenter(),zoom:this.map.getZoom(),bearing:this.map.getBearing(),pitch:this.map.getPitch(),interactive:!1,fadeDuration:0,attributionControl:!1,canvasContextAttributes:{preserveDrawingBuffer:!0},transformRequest:this.map._requestManager._transformRequestFn});this.map.getTerrain()&&(s.setMaxPitch(85),s.setPitch(this.map.getPitch()));let c=this.map.style?.imageManager?.images||[];Object.keys(c).forEach(e=>{s.hasImage(e)||s.addImage(e,c[e].data)});let l=()=>new Promise(e=>{if(!s.isStyleLoaded()||!s.areTilesLoaded()){setTimeout(l,100);return}setTimeout(e,200)});s.once(`idle`,async()=>{await l(),this.northIcon&&(await new Y(this.northIconOptions).addToMap(s,this.width,this.height),await new Promise(e=>{s.once(`idle`,()=>{setTimeout(e,200)})})),new te(this.map,s,this.markerOptions).renderMarkers()&&await new Promise(e=>{s.once(`idle`,()=>{setTimeout(e,200)})});let r=s.getCanvas(),i=r.getContext(`webgl`)||r.getContext(`webgl2`);i&&i.readPixels(0,0,1,1,i.RGBA,i.UNSIGNED_BYTE,new Uint8Array(4));let a=`map.${this.format}`,o=new K;switch(this.format){case z.PNG:o.toPNG(r,a);break;case z.JPEG:o.toJPEG(r,a,this.jpegQuality);break;case z.PDF:new ne(this.width,this.height,this.unit).generate(r,a);break;case z.SVG:new re().toSVG(r,a,this.width,this.height,this.unit,this.dpi);break}s.remove(),n.remove(),Object.defineProperty(window,"devicePixelRatio",{get:()=>t}),this.hideLoading(),e?.()})}toPixels(e){return this.unit===B.mm?96/25.4*e:96*e}showLoading(){let e=document.createElement(`div`);e.className=`qm-print-loading-overlay`,e.innerHTML=`<div class="qm-print-loading-spinner"></div><div class="qm-print-loading-text">正在生成...</div>`,document.body.appendChild(e)}hideLoading(){document.querySelector(`.qm-print-loading-overlay`)?.remove()}},ae=(0,t.memo)(e=>{let{map:r}=D(),[i,a]=(0,t.useState)(!1),[o,s]=(0,t.useState)({PageSize:V.A4,PageOrientation:H.横向,Format:z.PDF,DPI:U[300],Crosshair:!0,PrintableArea:!0}),c=(0,t.useRef)(null),l=(0,t.useRef)(null);(0,t.useEffect)(()=>{if(r)return i?(o.Crosshair&&(c.current=new W(r),c.current.create()),o.PrintableArea&&(l.current=new G(r),l.current.create()),u()):(c.current?.destroy(),c.current=null,l.current?.destroy(),l.current=null),()=>{c.current?.destroy(),l.current?.destroy()}},[r,i,o.Crosshair,o.PrintableArea,o.PageSize,o.PageOrientation]);let u=(0,t.useCallback)(()=>{if(!l.current)return;let e=o.PageSize;o.PageOrientation===H.纵向?l.current.updateArea(e[1],e[0]):l.current.updateArea(e[0],e[1])},[o.PageSize,o.PageOrientation]),d=(0,t.useCallback)(()=>{if(!r)return;let e=[...o.PageSize];o.PageOrientation===H.纵向&&(e=[e[1],e[0]]),new ie(r,e,o.DPI,o.Format,B.mm,{jpegQuality:o.JPEGQuality,northIcon:!0}).generate(()=>{a(!1)})},[r,o]),f=e=>{console.log(`打印面板：`,e),a(e)},p=Object.entries(V).map(([e,t])=>(0,n.jsx)(`option`,{value:JSON.stringify(t),children:e},e)),g=Object.entries(H).map(([e,t])=>(0,n.jsx)(`option`,{value:t,children:e},e)),_=Object.entries(z).map(([e,t])=>(0,n.jsx)(`option`,{value:t,children:e},e)),v=Object.entries(U).map(([e,t])=>(0,n.jsx)(`option`,{value:t,children:e},e));return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(h,{name:`打印`,position:e.position,icon:m.Print,openHandle:f,title:`点击打开打印设置面板`,children:(0,n.jsx)(n.Fragment,{})}),(0,n.jsxs)(`div`,{className:`qm-print-panel ${i?`open`:``}`,style:{position:`absolute`,top:(e.position.top??0)+34,right:e.position.right??10},children:[(0,n.jsx)(`table`,{className:`qm-print-panel-table`,children:(0,n.jsxs)(`tbody`,{children:[(0,n.jsxs)(`tr`,{children:[(0,n.jsx)(`td`,{children:(0,n.jsx)(`label`,{children:`页面尺寸`})}),(0,n.jsx)(`td`,{children:(0,n.jsx)(`select`,{id:`print-page-size`,value:JSON.stringify(o.PageSize),onChange:e=>{s(t=>({...t,PageSize:JSON.parse(e.target.value)})),u()},children:p})})]}),(0,n.jsxs)(`tr`,{children:[(0,n.jsx)(`td`,{children:(0,n.jsx)(`label`,{children:`布局方向`})}),(0,n.jsx)(`td`,{children:(0,n.jsx)(`select`,{id:`print-orientation`,value:o.PageOrientation,onChange:e=>{s(t=>({...t,PageOrientation:e.target.value})),u()},children:g})})]}),(0,n.jsxs)(`tr`,{children:[(0,n.jsx)(`td`,{children:(0,n.jsx)(`label`,{children:`导出格式`})}),(0,n.jsx)(`td`,{children:(0,n.jsx)(`select`,{id:`print-format`,value:o.Format,onChange:e=>s(t=>({...t,Format:e.target.value})),children:_})})]}),(0,n.jsxs)(`tr`,{children:[(0,n.jsx)(`td`,{children:(0,n.jsx)(`label`,{children:`DPI`})}),(0,n.jsx)(`td`,{children:(0,n.jsx)(`select`,{id:`print-dpi`,value:o.DPI,onChange:e=>s(t=>({...t,DPI:Number(e.target.value)})),children:v})})]})]})}),(0,n.jsx)(`button`,{type:`button`,className:`qm-print-export-button`,onClick:d,title:`根据设置导出地图`,children:`导 出`})]})]})});function oe(e,t){let n=e.getCenter(),r=e.getZoom(),i=e.getBearing(),a=e.getPitch();t.forEach(e=>{e.jumpTo({center:n,zoom:r,bearing:i,pitch:a})})}function se(...e){let t;t=e.length===1&&Array.isArray(e[0])?e[0]:e;let n=[];t.forEach((e,r)=>{let i=t.filter((e,t)=>t!==r);n[r]=()=>a(e,i)});function r(){t.forEach((e,t)=>{e.on(`move`,n[t])})}function i(){t.forEach((e,t)=>{e.off(`move`,n[t])})}function a(e,t){i(),oe(e,t),r()}return r(),()=>{i()}}var Z=class{options;_mapA;_mapB;_horizontal;_bounds;currentPosition=0;_swiper;_controlContainer;_clearSync;_onResize;_eventTarget;constructor(e,t,n,r={}){this.options={orientation:`vertical`,mousemove:!1,...r},this._mapA=e,this._mapB=t,this._horizontal=this.options.orientation===`horizontal`,this._eventTarget=new EventTarget,this._swiper=document.createElement(`div`),this._swiper.className=this._horizontal?`compare-swiper-horizontal`:`compare-swiper-vertical`,this._controlContainer=document.createElement(`div`),this._controlContainer.className=this._horizontal?`maplibregl-compare maplibregl-compare-horizontal`:`maplibregl-compare`,this._controlContainer.appendChild(this._swiper),this._mountContainer(n),this._bounds=this._mapB.getContainer().getBoundingClientRect();let i=this._horizontal?this._bounds.height/2:this._bounds.width/2;this._setPosition(i),this._clearSync=se(this._mapA,this._mapB),this._onResize=()=>{this._bounds=this._mapB.getContainer().getBoundingClientRect(),this.currentPosition&&this._setPosition(this.currentPosition)},this._mapB.on(`resize`,this._onResize),this.options.mousemove&&(this._mapA.getContainer().addEventListener(`mousemove`,this._onMove),this._mapB.getContainer().addEventListener(`mousemove`,this._onMove)),this._swiper.addEventListener(`mousedown`,this._onDown),this._swiper.addEventListener(`touchstart`,this._onDown)}_mountContainer(e){if(typeof e==`string`){let t=document.querySelector(e);if(!t)throw Error(`找不到容器`);t.appendChild(this._controlContainer)}else if(e instanceof HTMLElement)e.appendChild(this._controlContainer);else throw Error(`容器必须是字符串选择器或 HTML 元素`)}_setPointerEvents(e){this._controlContainer.style.pointerEvents=e,this._swiper.style.pointerEvents=e}_onDown=e=>{`touches`in e?(document.addEventListener(`touchmove`,this._onMove),document.addEventListener(`touchend`,this._onTouchEnd)):(document.addEventListener(`mousemove`,this._onMove),document.addEventListener(`mouseup`,this._onMouseUp))};_setPosition(e){let t=this._horizontal?this._bounds.height:this._bounds.width,n=Math.max(0,Math.min(e,t)),r=this._horizontal?`translate(0, ${n}px)`:`translate(${n}px, 0)`;this._controlContainer.style.transform=r,this._controlContainer.style.webkitTransform=r;let i=this._bounds.height,a,o;this._horizontal?(a=`rect(0, 999em, ${n}px, 0)`,o=`rect(${n}px, 999em, ${i}px, 0)`):(a=`rect(0, ${n}px, ${i}px, 0)`,o=`rect(0, 999em, ${i}px, ${n}px)`),this._mapA.getContainer().style.clip=a,this._mapB.getContainer().style.clip=o,this.currentPosition=n}_onMove=e=>{this.options.mousemove&&this._setPointerEvents(`none`),this._horizontal?this._setPosition(this._getY(e)):this._setPosition(this._getX(e))};_onMouseUp=()=>{document.removeEventListener(`mousemove`,this._onMove),document.removeEventListener(`mouseup`,this._onMouseUp),this._emitSlideEnd()};_onTouchEnd=()=>{document.removeEventListener(`touchmove`,this._onMove),document.removeEventListener(`touchend`,this._onTouchEnd),this._emitSlideEnd()};_emitSlideEnd(){this._eventTarget.dispatchEvent(new CustomEvent(`slideend`,{detail:{currentPosition:this.currentPosition}}))}_getX(e){let t=(`touches`in e?e.touches[0]:e).clientX-this._bounds.left;return Math.max(0,Math.min(t,this._bounds.width))}_getY(e){let t=(`touches`in e?e.touches[0]:e).clientY-this._bounds.top;return Math.max(0,Math.min(t,this._bounds.height))}setSlider(e){this._setPosition(e)}on(e,t){this._eventTarget.addEventListener(e,e=>{let n=e.detail;t(n)})}off(e,t){this._eventTarget.removeEventListener(e,t)}remove(){this._clearSync(),this._mapB.off(`resize`,this._onResize),[this._mapA,this._mapB].forEach(e=>{let t=e.getContainer();t.style.clip=``,t.removeEventListener(`mousemove`,this._onMove)}),this._swiper.removeEventListener(`mousedown`,this._onDown),this._swiper.removeEventListener(`touchstart`,this._onDown),this._controlContainer.remove()}};window.maplibregl&&(window.maplibregl.Compare=Z);var ce=(0,t.memo)(e=>{let{title:r,open:a=!1,maskClosable:o=!0,mask:s,width:c=520,footer:l,onCancel:u,destroyOnHidden:d=!1,className:f,style:p,children:m,centered:h=!1}=e,g=s?.closable===void 0?o:s.closable,[_,v]=(0,t.useState)(a);(0,t.useEffect)(()=>{if(a)v(!0),document.body.style.overflow=`hidden`;else if(document.body.style.overflow=``,d){let e=setTimeout(()=>{v(!1)},200);return()=>clearTimeout(e)}},[a,d]),(0,t.useEffect)(()=>()=>{document.body.style.overflow=``},[]);let y=(0,t.useCallback)(e=>{e.target===e.currentTarget&&g&&u?.()},[g,u]),b=(0,t.useCallback)(e=>{e.stopPropagation(),u?.()},[u]);return _?(0,i.createPortal)((0,n.jsxs)(`div`,{className:`qm-modal-wrapper ${a?`qm-modal-open`:``} ${h?`qm-modal-centered`:``}`,children:[(0,n.jsx)(`div`,{className:`qm-modal-mask ${a?`qm-modal-mask-enter`:`qm-modal-mask-leave`}`}),(0,n.jsx)(`div`,{className:`qm-modal-container`,onClick:y,children:(0,n.jsxs)(`div`,{className:`qm-modal ${f||``} ${a?`qm-modal-enter`:`qm-modal-leave`}`,style:{width:typeof c==`number`?`${c}px`:c,...p},onClick:e=>e.stopPropagation(),children:[r&&(0,n.jsxs)(`div`,{className:`qm-modal-header`,children:[(0,n.jsx)(`div`,{className:`qm-modal-title`,children:r}),(0,n.jsx)(`button`,{type:`button`,className:`qm-modal-close`,onClick:b,"aria-label":`关闭`,children:(0,n.jsx)(`span`,{className:`qm-modal-close-x`,children:`×`})})]}),(0,n.jsx)(`div`,{className:`qm-modal-body`,children:m}),l!==null&&(0,n.jsx)(`div`,{className:`qm-modal-footer`,children:l})]})})]}),document.body):null}),le=(0,t.memo)(e=>{let{map:r}=D(),[i,a]=(0,t.useState)(!1),[o,s]=(0,t.useState)(null),[c,l]=(0,t.useState)(null),u=(0,t.useCallback)(e=>{a(e)},[]);return(0,t.useEffect)(()=>{if(o&&c){let e=document.getElementById(`swipeContainer`);e&&(new Z(o,c,e,{mousemove:!1,orientation:`vertical`}),o.setCenter(r.getCenter()),o.setZoom(r.getZoom()),o.setBearing(r.getBearing()),c.setPitch(r.getPitch()))}},[o,c]),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(h,{name:`卷帘对比`,position:{...e.position},icon:m.Swipe,openHandle:u,title:`点击打开卷帘对比面板，对比两期地图数据`,children:(0,n.jsx)(n.Fragment,{})}),(0,n.jsx)(ce,{title:`卷帘对比`,mask:{closable:!1},open:i,width:1e3,footer:null,onCancel:()=>a(!1),destroyOnHidden:!0,children:(0,n.jsxs)(`div`,{id:`swipeContainer`,className:`maplibregl-swipe`,children:[(0,n.jsx)(k,{mapOptions:{...r.options,id:`swipeBeforeMap`},mapLayerSettting:r.mapLayerSetting,onMapLoad:e=>s(e),className:`swipe-map-container`,children:(0,n.jsx)(L,{position:{top:10,left:10}})}),(0,n.jsx)(k,{mapOptions:{...r.options,id:`swipeAfterMap`},mapLayerSettting:r.mapLayerSetting,onMapLoad:e=>l(e),className:`swipe-map-container`,children:(0,n.jsx)(L,{position:{top:10,right:10}})})]})})]})}),Q={Point:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAARxJREFUWEft1LEuREEYxfHf9jRLIRIqnUSpoOEFREUh3kFBo6LYKEj0StEp8ARUEvUmOg2NSHT07pW73XK/mZBtZto5c87/npn7dYx4dUacrwCUBkoDpYHcBiYwjTG84g2fOUMtB+AYu0PC9nGUCpEK8IyZX0IOq72DFIgUgFusBMw3cBnQfUuiAOu4ippivLqmj4g+ClDfby9i2Gjm8BTRRwFusBYxbDTLuI/oowCn2IkYNpoF9CP6KMA2ziOGjWYS7xF9FKDbfFE9fNrWSTWU9tpEg/0oQK3fwkWL8Qtmo+Epv+HAc6kawWfVfz4/JOQOqynhOQD1mXr+b2IRU3jAI65Tw3MBcnJ+PJPyBv40OOcRFoDSQGngXxr4App1HCGF2UdQAAAAAElFTkSuQmCC`,Line:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAp1JREFUWEe9l0uIjlEYx3+zsZGFsqCUe0hEiXFJ7iklxUxZMcVIE7IZFm4TJWYzLolQLKYmTKLIJYaYRolyySULpMRmFkwoC85/Oq/ejvO93zlHvWf7vc95fu/z/J//8341lHuWArOBJ8AVpa4pMf9eYE8u311gQVkAdcB5z8vWlwXgvn3G0lIWwFjgracC48oCUG63CmeBhmoAs4CJwC/gKtD7H6JtBg4C14FNwPtqU6CRueEkHGqCvyRC3JHqge3AoeyOogo8BGY6yY6aKmxJABicq94M4FEIwFdgkJPsmglengCwErgEPAem5OOLKnAfmOska7FiimU4AWwEjgBbQwHmA12eTCkQEtwIQJW4HApQC/QALwE52aScm8VAzAEeWA0MMXb8OxRgH7ATOAOst0F5Sw2FyMavE1jtVrRIA9pY04ANwOlcYCzETWAJ0AicCgVQv9S3PjuKakP+hELIxLLYYcDnUACVXLS3ABmS74RAZPdIS/oO+OdUaoFmVoqVDnYXzFw1CPn9WmAXsD8UYKBV7ABgYYVRDGmHbFvqHwNMBZ6GAqyws/oGmBDoOL5KrAIumo33ARhZ6R5fCw5bvz9nhLguEECPuRDaI8uAY8DmGAB9OOgDYo2pQEcEgAuRhX4zK1im5k5S/+9uBaTUbrMyfxhyudb3SACN2idPjOslfx9xAaR4OdxtI6DFkcn1uDadT2xNwPEQEd4D5tmNpc2Vcj4a5xzuBKqy8oJCHxgPvLZPjDbz+y4lux27VmAR8Mr6iOzYe7IWSO3606BxeQFMTkweHSaAHcABJ7LerN8L0bclBAjgmeeNHwPTE+6LDhGAeu06lTbhqOjbEgIEcNLu6nx4G7At4b7okEyEEqBW50+g3dyifzGlnD8S4H8a/N0aLAAAAABJRU5ErkJggg==`,Rectangle:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAASxJREFUWEft16FKBWEQBeDvvodBRCw+gFWbgtVkEkWLil6wGbSLgiZBxKDFajB6owgGwSQ3GMTmMyhz3YVluRdW+BcM/4FlYXf2zPnPzMJMxy92cYx7POGgeJ76dooFfOEGZx1sIV5UsYKrxNmH5emGgEfMJE7WmC4EvGK69sUbPhuzNAscR1xV9EJA1D56oIo59JrxNo5axnUt+jAEBMr6vGO/aJDGzH8InMU5pjDos1JAcHwXp47Tt4kHhJBB7iwgO5AdyA5kB7ID2YHsQHbg3ziwXgyLMaYdYa+loXAztqGCe7vcjG6xVEvYxUliEYu4q3EOVrOYhuv4QD+xgDFM1jj7owQkzj2S7jkEDCvBKi4Tq4gyR64qNsq/YA2xOgUuWtyMQsQ8JrCDlx+OVWdvFenv8gAAAABJRU5ErkJggg==`,Polygon:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAxVJREFUWEe1133InnMUB/DPKCQS87ZQtrJ5yT8LUShaJKHWzMSaWqkt07LyEjEvQykrL2WRFautoZBt3hoRhkRqjLyUKMuyGLHWan3X73q6unff7t+953Lq6um5nt855/s7z/ec870mqLfDcBeuwd94E7fUu/c/OWGEAIuxvOf8Ejw6Qox9jo4C4HtM6ZPsM/Q+/TAdWfx/xtbmwCgANuP0ytt+hE3IzzznYW3L9znMy++jAHgIt/cAeAw7cApOKwAPrAR5L5bWAjgKH+DUEjzVGETCizEV03AGzsTxfUC9jstqATyM2/Aqrqq8YXPsEPzTxyfkXVID4AK8iwNKmbeMCCDHV+DGlt83mImvagC8XG79CG7dj+SNy7VYiYNxOdbXkHA+nsFfCA92jQNAXH/EyTgRvwwDkJJ/WYi0AE+NM3ncPywteQ4+HQbgAdyJzzG9g+QJ8VL534fIIfTAOXASvsNBuLS0XBcYHsdNGKvoIBKuKUvnRVzdReYS4w48iPtwz6AK5MYZErFUIrO7K7uhdMLTTVv2q0DIcRaWlfXbVfLEuQRv4DVc0a7AE6U38y5t8jsmdpm5xMpYTmeNETsVWIgne5KFLDf/DwCOxm/4FZOaCvTb8+mALJ7dHYPIpoyayjQ8BttSgZDshJ5E28vk6zj/3nA/YHIZcHt3QXb6op5MUTghYteWcf4KzseFeD8ADkWmXhia/d1Y9sCzHSK4srRgQMS2YX67DQ8vxIj4zKT6s4D6uCMQ7yGrvW0bBk3C5vAnpVQ79xPE2ZhRej66cB8bBCD67h0chzEBWQkiJU5rR5pdNMRn/X8JknyAZCfE8gHS+03Qjn0EZpUnibPEGguhox834n6cW/7wBxYPU0R3I+o1lnlxLL4uUzM6Lze8vnAlur+xb/EW1mFD633Uc6RYtEbefzEMQHxX4bqeUiZ4BlWWVWOZbm+XNssWrbIaAOHA3AHRUoUsl5Q4eu/fqqytQzUAVmNOn8DhRRTOT6MmbZ+vAZDbpwptewGzx5O48a0BkLNLizTPAomYeL7M9HFj2AMTmY45mDBG5AAAAABJRU5ErkJggg==`,Trash:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA71JREFUWEfNl2nIVlUQx3+vgoRrai6lpaaiJbgU5QeXygVREVdUxF0RTa0oF3BBW6AFxRUXXHLrg5qgIgruS35QM1ooI3LFXdyKKAiq83+ZI+Pj83jPKynOpzlzZ87935n/mTm3iHTZB7ye6L4feCPFtyjFyXz+LYGvXJP2TnLKAfB+BpAZ9jxp7ySnPABmFgAh+wMBGAoMyfiyWH/V936S6rcaWKUMPA1cLGF9/w/3G0DVWILPAWXhUcoqYFhJOPBQwD2WACoAv9nn1gSuuE+vayxfAhzJSUkvoDKwIsdeA7hstmeAS/55vgxMAz40p4+A6S4gHrMzwPMBjG9OUR8mdrsY7aU9JW2BQ1kAxgV2LjCnecA7LmAqIFCSMsDfpj8B/Gn6FOBjFzMXeNvWLYBvswAMCl+3xpxWAiNcwGTgE1uXdS9V6nWsJO8Cc1yMSjLc1g2Ak1kAugFbzWkD0M8FvAfMsnVF4HfTfS8ZA4gjUdYDfW2Ry6m8A6MNcNACdgBd3GZKpVIqqRJSe9P0esAp03M5sD0QtrM9Kw/8kZWBpsB35vQVIEBRxgILbSF2XzX9ReBH0/sD+uooIl1r4J9A7tL+5dLznYLnQoc6a44C0twFjQqte6mta7kW/hJw3Ow9gC0uRqRrBtwO2XsyBUClwPxb5qi01ndBIlM853UCuc7Zs1aAsiXpBOx0MSKdjuz5EPtsCgD5KF3KzjWgugsaDGiKSQQs1r19SPNus7/mOCSTylQN+DmU5oVUACKX0vUXUM4AKXYA8IVt0iisfzG9K7DN9FeBY6aXMtKpT8imZ3dJoVlwOnQztV2JgKh+Eh2nSLAmYf2T2fsAG00XiX8w3ZdTd8p2qQAiceRfG7hgger3m0wXsb43fWAoyVrTGwK/mi6iqvYS9ZbuqQB061EtJaqb6ifxTepl4BuzjwSWmS6ixZc2Do3shNlVOgG9SwqVYLND62uqhqLGImkZmtRR08eHxjTf9KeA66a/4nx0fEenAhDTxXiJGL7X9I7uiKm5HDb7ROAz0323U833mH02MCEVgKbgW+bsG4t+NiIYXT4PmI9G9gemq9vpGEtUc2VTouv8PbfpQiXQZvEeoOm4ziH/OkxEHSs1nEhOnRhlQ8fS/xF5cipLcZDd2a4QAI1UpUzyJrA4N3WJa03GReabOyWLzYUA6A6w3AJ1B4j1TXzvHbdJwKe2ys3kfQH0Br60wKwfkSxQ8Uelp+NDZgk6ALuydi7hc52gOC8yAei2o5Ga+juehaX4JySf03+JLrAhSDUYWAAAAABJRU5ErkJggg==`,Reset:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAuRJREFUWEfVl1moTWEUx3+31M1U5JYxxQuJa7xvEg+UMpOkDFcevChEGUMi8/gkD24kSaIkRJEhM1cyJA83JMKD5AUPvv9tfVpOe5999j3XkVX7tPfZa/h/3/p/a61dxT+Wqn8cn/8SwAhgHDAW6Ap0A9oDH+y6C5wHrgNfsnY4zw6MBhYD07Kc2vu3wD5gP/A9zaYUAG3NycIUJ2+A98AA24lCtYfAVuBkkn0WgB7AYdvyaH8BOAe8ABqBT85xf2CgXesLAq4EthWCKAagD3AGqDWjp8B24EiJKRBPpD/Y6eu/S96+GIBjwGwXfCbwrMTgXm15SM0O98cw4FF8TgMgsok8ktfA+BYGj3GWArvt4SowphDAhsDwz8ABoNqC9TWlRcDBFqy80OQKoJMk2Rh+FLO5EOkmEmY60AY4YYriwNRWCC4XQwGdiCjiWJMAiBgX3QuRbK49a6s6hDQsAI6nHaUcAP1i64GGyAEdtfnmSKnoEgj4ErjtwLwDeuYIlqQ6yxaidw1AfQQwCLgGdHJWX4GO7vl33soAoRrxxOzvh3pS50/BWmBTgnOxVpXMp6kMDHwL9aEdoAra2wPQ6i8Dw837j1DDVwcO7CwnWoLtPUANTf2hurAOzLPcnALWAc9bObjcaeW97NjXJBWiOcDRvxBYLrsDIrNEXKjNakatjWNCSPFZX2MqDWCFNShhUHneW0kAKvF3XHdUZWysJIBloa7ssu0XyWfovlIAaoCPjlCjbGbMBKDuVQe8Clt3ugxGqurF+rIFWBN9Ze2A5sBDpqwxbDNwKweQPcASp38zFLuR3j4LgAZNjWJRfhoIHaUHRYBMsRY/xOk0AWrBf0gWAClr0NQ0o6nIixgtIBpKdamLTgrj1uQwN8ZhJuo3d74kwKUAiHarAOUvj2jV6qICkCh5AMhBv7D1E+0Sk9PkBqAvJI14ApEqeQF4R/okU447u+uxDTH+W6HojpUDIE8qUnV/AUEbfiHgdnTrAAAAAElFTkSuQmCC`},$=[{id:`point`,title:`绘制点：点击地图绘制点要素`,mode:`draw_point`,icon:Q.Point},{id:`line`,title:`绘制线：点击地图开始，双击结束绘制线要素`,mode:`draw_line_string`,icon:Q.Line},{id:`polygon`,title:`绘制面：点击地图开始，双击结束绘制面要素`,mode:`draw_polygon`,icon:Q.Polygon},{id:`reset`,title:`清除：删除所有绘制的要素`,mode:`simple_select`,icon:Q.Reset}],ue=[{id:`gl-draw-line`,type:`line`,filter:[`all`,[`==`,`$type`,`LineString`]],layout:{"line-cap":`round`,"line-join":`round`},paint:{"line-color":`#D20C0C`,"line-dasharray":[.2,2],"line-width":2}},{id:`gl-draw-polygon-fill`,type:`fill`,filter:[`all`,[`==`,`$type`,`Polygon`]],paint:{"fill-color":`#D20C0C`,"fill-outline-color":`#D20C0C`,"fill-opacity":.3}},{id:`gl-draw-polygon-midpoint`,type:`circle`,filter:[`all`,[`==`,`$type`,`Point`],[`==`,`meta`,`midpoint`]],paint:{"circle-radius":5,"circle-color":`#fbb03b`}},{id:`gl-draw-polygon-stroke-active`,type:`line`,filter:[`all`,[`==`,`$type`,`Polygon`]],layout:{"line-cap":`round`,"line-join":`round`},paint:{"line-color":`#D20C0C`,"line-dasharray":[.3,3],"line-width":3}},{id:`gl-draw-polygon-and-line-vertex-halo-active`,type:`circle`,filter:[`all`,[`==`,`meta`,`vertex`],[`==`,`$type`,`Point`]],paint:{"circle-radius":5,"circle-color":`#FFF`}},{id:`gl-draw-polygon-and-line-vertex-active`,type:`circle`,filter:[`all`,[`==`,`meta`,`vertex`],[`==`,`$type`,`Point`]],paint:{"circle-radius":3,"circle-color":`#D20C0C`}},{id:`gl-draw-point-point-stroke-active`,type:`circle`,filter:[`all`,[`==`,`$type`,`Point`],[`==`,`meta`,`feature`],[`==`,`active`,`true`]],paint:{"circle-radius":8,"circle-color":`#FFF`}},{id:`gl-draw-point-active`,type:`circle`,filter:[`all`,[`==`,`$type`,`Point`],[`==`,`meta`,`feature`],[`==`,`active`,`true`]],paint:{"circle-radius":6,"circle-color":`#D20C0C`}},{id:`gl-draw-point-point-stroke-inactive`,type:`circle`,filter:[`all`,[`==`,`$type`,`Point`],[`==`,`meta`,`feature`],[`==`,`active`,`false`]],paint:{"circle-radius":8,"circle-color":`#FFF`}},{id:`gl-draw-point-inactive`,type:`circle`,filter:[`all`,[`==`,`$type`,`Point`],[`==`,`meta`,`feature`],[`==`,`active`,`false`]],paint:{"circle-radius":6,"circle-color":`#D20C0C`}}],de=(0,t.memo)(e=>{let{position:r,onDraw:i,initFeature:o,modes:s}=e,c=s?$.filter(e=>s.includes(e.mode)||e.id===`reset`):$,{map:l}=D(),u=(0,t.useRef)(null),d=e=>{if(l&&e.features&&u.current){let t=b(e.features[0]);t&&l.fitBounds(t,{maxZoom:16});let n=u.current.add(e);u.current.changeMode(`simple_select`,{featureIds:n})}},f=(e,t)=>{if(!u.current||!l)return;t===`reset`&&u.current.deleteAll(),u.current.changeMode(e);let n=l.getCanvas();e===`simple_select`?n.style.cursor=``:n.style.cursor=`crosshair`},p=()=>{if(!u.current)return;let e=u.current.getAll();e.features&&e.features.length>0&&i({data:e})};return(0,t.useEffect)(()=>(l&&!u.current&&(u.current=new a.default({displayControlsDefault:!1,styles:ue,defaultMode:`simple_select`}),l.addControl(u.current,`bottom-left`),l.on(`draw.create`,p),l.on(`draw.delete`,p),l.on(`draw.update`,p),l.on(`draw.modechange`,e=>{let t=l.getCanvas();e.mode===`simple_select`?t.style.cursor=``:t.style.cursor=`crosshair`}),o&&d(o)),()=>{}),[]),(0,n.jsx)(`div`,{className:`mapboxgl-draw`,style:{...r},children:(0,n.jsx)(`div`,{className:`mapboxgl-draw-bar`,children:(0,n.jsx)(`div`,{children:c.map(e=>(0,n.jsx)(`div`,{title:e.title,className:`mapboxgl-draw-bar-button`,style:{backgroundImage:`url(${e.icon})`},onClick:()=>f(e.mode,e.id)},e.id))})})})});e.BaseLayer=x,e.BaseWidget=h,e.Draw=de,e.LayerGroupWrapper=C,e.LayerList=L,e.LayerWrapper=S,e.Legend=R,e.MapContext=E,e.MapWidget=k,e.MapWrapper=T,e.Print=ae,e.Swipe=le,e.useMap=D});
+    `;let i=document.createElement(`div`),a=this.toPixels(this.width),o=this.toPixels(this.height);i.style.cssText=`position:absolute;top:0;left:0;width:${a}px;height:${o}px;`,n.appendChild(i),document.body.appendChild(n);let s=new r.Map({container:i,style:this.map.getStyle(),center:this.map.getCenter(),zoom:this.map.getZoom(),bearing:this.map.getBearing(),pitch:this.map.getPitch(),interactive:!1,fadeDuration:0,attributionControl:!1,canvasContextAttributes:{preserveDrawingBuffer:!0},transformRequest:this.map._requestManager._transformRequestFn});this.map.getTerrain()&&(s.setMaxPitch(85),s.setPitch(this.map.getPitch()));let c=this.map.style?.imageManager?.images||[];Object.keys(c).forEach(e=>{s.hasImage(e)||s.addImage(e,c[e].data)});let l=()=>new Promise(e=>{if(!s.isStyleLoaded()||!s.areTilesLoaded()){setTimeout(l,100);return}setTimeout(e,200)});s.once(`idle`,async()=>{await l(),this.northIcon&&(await new Y(this.northIconOptions).addToMap(s,this.width,this.height),await new Promise(e=>{s.once(`idle`,()=>{setTimeout(e,200)})})),new te(this.map,s,this.markerOptions).renderMarkers()&&await new Promise(e=>{s.once(`idle`,()=>{setTimeout(e,200)})});let r=s.getCanvas(),i=r.getContext(`webgl`)||r.getContext(`webgl2`);i&&i.readPixels(0,0,1,1,i.RGBA,i.UNSIGNED_BYTE,new Uint8Array(4));let a=`map.${this.format}`,o=new K;switch(this.format){case z.PNG:o.toPNG(r,a);break;case z.JPEG:o.toJPEG(r,a,this.jpegQuality);break;case z.PDF:new ne(this.width,this.height,this.unit).generate(r,a);break;case z.SVG:new re().toSVG(r,a,this.width,this.height,this.unit,this.dpi);break}s.remove(),n.remove(),Object.defineProperty(window,"devicePixelRatio",{get:()=>t}),this.hideLoading(),e?.()})}toPixels(e){return this.unit===B.mm?96/25.4*e:96*e}showLoading(){let e=document.createElement(`div`);e.className=`qm-print-loading-overlay`,e.innerHTML=`<div class="qm-print-loading-spinner"></div><div class="qm-print-loading-text">正在生成...</div>`,document.body.appendChild(e)}hideLoading(){document.querySelector(`.qm-print-loading-overlay`)?.remove()}},ae=(0,t.memo)(e=>{let{map:r}=D(),[i,a]=(0,t.useState)(!1),[o,s]=(0,t.useState)({PageSize:V.A4,PageOrientation:H.横向,Format:z.PDF,DPI:U[300],Crosshair:!0,PrintableArea:!0}),c=(0,t.useRef)(null),l=(0,t.useRef)(null);(0,t.useEffect)(()=>{if(r)return i?(o.Crosshair&&(c.current=new W(r),c.current.create()),o.PrintableArea&&(l.current=new G(r),l.current.create()),u()):(c.current?.destroy(),c.current=null,l.current?.destroy(),l.current=null),()=>{c.current?.destroy(),l.current?.destroy()}},[r,i,o.Crosshair,o.PrintableArea,o.PageSize,o.PageOrientation]);let u=(0,t.useCallback)(()=>{if(!l.current)return;let e=o.PageSize;o.PageOrientation===H.纵向?l.current.updateArea(e[1],e[0]):l.current.updateArea(e[0],e[1])},[o.PageSize,o.PageOrientation]),d=(0,t.useCallback)(()=>{if(!r)return;let e=[...o.PageSize];o.PageOrientation===H.纵向&&(e=[e[1],e[0]]),new ie(r,e,o.DPI,o.Format,B.mm,{jpegQuality:o.JPEGQuality,northIcon:!0}).generate(()=>{a(!1)})},[r,o]),f=e=>{console.log(`打印面板：`,e),a(e)},p=Object.entries(V).map(([e,t])=>(0,n.jsx)(`option`,{value:JSON.stringify(t),children:e},e)),g=Object.entries(H).map(([e,t])=>(0,n.jsx)(`option`,{value:t,children:e},e)),_=Object.entries(z).map(([e,t])=>(0,n.jsx)(`option`,{value:t,children:e},e)),v=Object.entries(U).map(([e,t])=>(0,n.jsx)(`option`,{value:t,children:e},e));return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(h,{name:`打印`,position:e.position,icon:m.Print,openHandle:f,title:`点击打开打印设置面板`,children:(0,n.jsx)(n.Fragment,{})}),(0,n.jsxs)(`div`,{className:`qm-print-panel ${i?`open`:``}`,style:{position:`absolute`,top:(e.position.top??0)+34,right:e.position.right??10},children:[(0,n.jsx)(`table`,{className:`qm-print-panel-table`,children:(0,n.jsxs)(`tbody`,{children:[(0,n.jsxs)(`tr`,{children:[(0,n.jsx)(`td`,{children:(0,n.jsx)(`label`,{children:`页面尺寸`})}),(0,n.jsx)(`td`,{children:(0,n.jsx)(`select`,{id:`print-page-size`,value:JSON.stringify(o.PageSize),onChange:e=>{s(t=>({...t,PageSize:JSON.parse(e.target.value)})),u()},children:p})})]}),(0,n.jsxs)(`tr`,{children:[(0,n.jsx)(`td`,{children:(0,n.jsx)(`label`,{children:`布局方向`})}),(0,n.jsx)(`td`,{children:(0,n.jsx)(`select`,{id:`print-orientation`,value:o.PageOrientation,onChange:e=>{s(t=>({...t,PageOrientation:e.target.value})),u()},children:g})})]}),(0,n.jsxs)(`tr`,{children:[(0,n.jsx)(`td`,{children:(0,n.jsx)(`label`,{children:`导出格式`})}),(0,n.jsx)(`td`,{children:(0,n.jsx)(`select`,{id:`print-format`,value:o.Format,onChange:e=>s(t=>({...t,Format:e.target.value})),children:_})})]}),(0,n.jsxs)(`tr`,{children:[(0,n.jsx)(`td`,{children:(0,n.jsx)(`label`,{children:`DPI`})}),(0,n.jsx)(`td`,{children:(0,n.jsx)(`select`,{id:`print-dpi`,value:o.DPI,onChange:e=>s(t=>({...t,DPI:Number(e.target.value)})),children:v})})]})]})}),(0,n.jsx)(`button`,{type:`button`,className:`qm-print-export-button`,onClick:d,title:`根据设置导出地图`,children:`导 出`})]})]})});function oe(e,t){let n=e.getCenter(),r=e.getZoom(),i=e.getBearing(),a=e.getPitch();t.forEach(e=>{e.jumpTo({center:n,zoom:r,bearing:i,pitch:a})})}function se(...e){let t;t=e.length===1&&Array.isArray(e[0])?e[0]:e;let n=[];t.forEach((e,r)=>{let i=t.filter((e,t)=>t!==r);n[r]=()=>a(e,i)});function r(){t.forEach((e,t)=>{e.on(`move`,n[t])})}function i(){t.forEach((e,t)=>{e.off(`move`,n[t])})}function a(e,t){i(),oe(e,t),r()}return r(),()=>{i()}}var Z=class{options;_mapA;_mapB;_horizontal;_bounds;currentPosition=0;_swiper;_controlContainer;_clearSync;_onResize;_eventTarget;constructor(e,t,n,r={}){this.options={orientation:`vertical`,mousemove:!1,...r},this._mapA=e,this._mapB=t,this._horizontal=this.options.orientation===`horizontal`,this._eventTarget=new EventTarget,this._swiper=document.createElement(`div`),this._swiper.className=this._horizontal?`compare-swiper-horizontal`:`compare-swiper-vertical`,this._controlContainer=document.createElement(`div`),this._controlContainer.className=this._horizontal?`maplibregl-compare maplibregl-compare-horizontal`:`maplibregl-compare`,this._controlContainer.appendChild(this._swiper),this._mountContainer(n),this._bounds=this._mapB.getContainer().getBoundingClientRect();let i=this._horizontal?this._bounds.height/2:this._bounds.width/2;this._setPosition(i),this._clearSync=se(this._mapA,this._mapB),this._onResize=()=>{this._bounds=this._mapB.getContainer().getBoundingClientRect(),this.currentPosition&&this._setPosition(this.currentPosition)},this._mapB.on(`resize`,this._onResize),this.options.mousemove&&(this._mapA.getContainer().addEventListener(`mousemove`,this._onMove),this._mapB.getContainer().addEventListener(`mousemove`,this._onMove)),this._swiper.addEventListener(`mousedown`,this._onDown),this._swiper.addEventListener(`touchstart`,this._onDown)}_mountContainer(e){if(typeof e==`string`){let t=document.querySelector(e);if(!t)throw Error(`找不到容器`);t.appendChild(this._controlContainer)}else if(e instanceof HTMLElement)e.appendChild(this._controlContainer);else throw Error(`容器必须是字符串选择器或 HTML 元素`)}_setPointerEvents(e){this._controlContainer.style.pointerEvents=e,this._swiper.style.pointerEvents=e}_onDown=e=>{`touches`in e?(document.addEventListener(`touchmove`,this._onMove),document.addEventListener(`touchend`,this._onTouchEnd)):(document.addEventListener(`mousemove`,this._onMove),document.addEventListener(`mouseup`,this._onMouseUp))};_setPosition(e){let t=this._horizontal?this._bounds.height:this._bounds.width,n=Math.max(0,Math.min(e,t)),r=this._horizontal?`translate(0, ${n}px)`:`translate(${n}px, 0)`;this._controlContainer.style.transform=r,this._controlContainer.style.webkitTransform=r;let i=this._bounds.height,a,o;this._horizontal?(a=`rect(0, 999em, ${n}px, 0)`,o=`rect(${n}px, 999em, ${i}px, 0)`):(a=`rect(0, ${n}px, ${i}px, 0)`,o=`rect(0, 999em, ${i}px, ${n}px)`),this._mapA.getContainer().style.clip=a,this._mapB.getContainer().style.clip=o,this.currentPosition=n}_onMove=e=>{this.options.mousemove&&this._setPointerEvents(`none`),this._horizontal?this._setPosition(this._getY(e)):this._setPosition(this._getX(e))};_onMouseUp=()=>{document.removeEventListener(`mousemove`,this._onMove),document.removeEventListener(`mouseup`,this._onMouseUp),this._emitSlideEnd()};_onTouchEnd=()=>{document.removeEventListener(`touchmove`,this._onMove),document.removeEventListener(`touchend`,this._onTouchEnd),this._emitSlideEnd()};_emitSlideEnd(){this._eventTarget.dispatchEvent(new CustomEvent(`slideend`,{detail:{currentPosition:this.currentPosition}}))}_getX(e){let t=(`touches`in e?e.touches[0]:e).clientX-this._bounds.left;return Math.max(0,Math.min(t,this._bounds.width))}_getY(e){let t=(`touches`in e?e.touches[0]:e).clientY-this._bounds.top;return Math.max(0,Math.min(t,this._bounds.height))}setSlider(e){this._setPosition(e)}on(e,t){this._eventTarget.addEventListener(e,e=>{let n=e.detail;t(n)})}off(e,t){this._eventTarget.removeEventListener(e,t)}remove(){this._clearSync(),this._mapB.off(`resize`,this._onResize),[this._mapA,this._mapB].forEach(e=>{let t=e.getContainer();t.style.clip=``,t.removeEventListener(`mousemove`,this._onMove)}),this._swiper.removeEventListener(`mousedown`,this._onDown),this._swiper.removeEventListener(`touchstart`,this._onDown),this._controlContainer.remove()}};window.maplibregl&&(window.maplibregl.Compare=Z);var ce=(0,t.memo)(e=>{let{title:r,open:a=!1,maskClosable:o=!0,mask:s,width:c=520,footer:l,onCancel:u,destroyOnHidden:d=!1,className:f,style:p,children:m,centered:h=!1}=e,g=s?.closable===void 0?o:s.closable,[_,v]=(0,t.useState)(a);(0,t.useEffect)(()=>{if(a)v(!0),document.body.style.overflow=`hidden`;else if(document.body.style.overflow=``,d){let e=setTimeout(()=>{v(!1)},200);return()=>clearTimeout(e)}},[a,d]),(0,t.useEffect)(()=>()=>{document.body.style.overflow=``},[]);let y=(0,t.useCallback)(e=>{e.target===e.currentTarget&&g&&u?.()},[g,u]),b=(0,t.useCallback)(e=>{e.stopPropagation(),u?.()},[u]);return _?(0,i.createPortal)((0,n.jsxs)(`div`,{className:`qm-modal-wrapper ${a?`qm-modal-open`:``} ${h?`qm-modal-centered`:``}`,children:[(0,n.jsx)(`div`,{className:`qm-modal-mask ${a?`qm-modal-mask-enter`:`qm-modal-mask-leave`}`}),(0,n.jsx)(`div`,{className:`qm-modal-container`,onClick:y,children:(0,n.jsxs)(`div`,{className:`qm-modal ${f||``} ${a?`qm-modal-enter`:`qm-modal-leave`}`,style:{width:typeof c==`number`?`${c}px`:c,...p},onClick:e=>e.stopPropagation(),children:[r&&(0,n.jsxs)(`div`,{className:`qm-modal-header`,children:[(0,n.jsx)(`div`,{className:`qm-modal-title`,children:r}),(0,n.jsx)(`button`,{type:`button`,className:`qm-modal-close`,onClick:b,"aria-label":`关闭`,children:(0,n.jsx)(`span`,{className:`qm-modal-close-x`,children:`×`})})]}),(0,n.jsx)(`div`,{className:`qm-modal-body`,children:m}),l!==null&&(0,n.jsx)(`div`,{className:`qm-modal-footer`,children:l})]})})]}),document.body):null}),le=(0,t.memo)(e=>{let{map:r}=D(),[i,a]=(0,t.useState)(!1),[o,s]=(0,t.useState)(null),[c,l]=(0,t.useState)(null),u=(0,t.useCallback)(e=>{a(e)},[]);return(0,t.useEffect)(()=>{if(o&&c){let e=document.getElementById(`swipeContainer`);e&&(new Z(o,c,e,{mousemove:!1,orientation:`vertical`}),o.setCenter(r.getCenter()),o.setZoom(r.getZoom()),o.setBearing(r.getBearing()),c.setPitch(r.getPitch()))}},[o,c]),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(h,{name:`卷帘对比`,position:{...e.position},icon:m.Swipe,openHandle:u,title:`点击打开卷帘对比面板，对比两期地图数据`,children:(0,n.jsx)(n.Fragment,{})}),(0,n.jsx)(ce,{title:`卷帘对比`,mask:{closable:!1},open:i,width:1e3,footer:null,onCancel:()=>a(!1),destroyOnHidden:!0,children:(0,n.jsxs)(`div`,{id:`swipeContainer`,className:`maplibregl-swipe`,children:[(0,n.jsx)(k,{mapOptions:{...r.options,id:`swipeBeforeMap`},mapLayerSettting:r.mapLayerSetting,onMapLoad:e=>s(e),className:`swipe-map-container`,children:(0,n.jsx)(L,{position:{top:10,left:10}})}),(0,n.jsx)(k,{mapOptions:{...r.options,id:`swipeAfterMap`},mapLayerSettting:r.mapLayerSetting,onMapLoad:e=>l(e),className:`swipe-map-container`,children:(0,n.jsx)(L,{position:{top:10,right:10}})})]})})]})}),Q={Point:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAARxJREFUWEft1LEuREEYxfHf9jRLIRIqnUSpoOEFREUh3kFBo6LYKEj0StEp8ARUEvUmOg2NSHT07pW73XK/mZBtZto5c87/npn7dYx4dUacrwCUBkoDpYHcBiYwjTG84g2fOUMtB+AYu0PC9nGUCpEK8IyZX0IOq72DFIgUgFusBMw3cBnQfUuiAOu4ippivLqmj4g+ClDfby9i2Gjm8BTRRwFusBYxbDTLuI/oowCn2IkYNpoF9CP6KMA2ziOGjWYS7xF9FKDbfFE9fNrWSTWU9tpEg/0oQK3fwkWL8Qtmo+Epv+HAc6kawWfVfz4/JOQOqynhOQD1mXr+b2IRU3jAI65Tw3MBcnJ+PJPyBv40OOcRFoDSQGngXxr4App1HCGF2UdQAAAAAElFTkSuQmCC`,Line:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAp1JREFUWEe9l0uIjlEYx3+zsZGFsqCUe0hEiXFJ7iklxUxZMcVIE7IZFm4TJWYzLolQLKYmTKLIJYaYRolyySULpMRmFkwoC85/Oq/ejvO93zlHvWf7vc95fu/z/J//8341lHuWArOBJ8AVpa4pMf9eYE8u311gQVkAdcB5z8vWlwXgvn3G0lIWwFjgracC48oCUG63CmeBhmoAs4CJwC/gKtD7H6JtBg4C14FNwPtqU6CRueEkHGqCvyRC3JHqge3AoeyOogo8BGY6yY6aKmxJABicq94M4FEIwFdgkJPsmglengCwErgEPAem5OOLKnAfmOska7FiimU4AWwEjgBbQwHmA12eTCkQEtwIQJW4HApQC/QALwE52aScm8VAzAEeWA0MMXb8OxRgH7ATOAOst0F5Sw2FyMavE1jtVrRIA9pY04ANwOlcYCzETWAJ0AicCgVQv9S3PjuKakP+hELIxLLYYcDnUACVXLS3ABmS74RAZPdIS/oO+OdUaoFmVoqVDnYXzFw1CPn9WmAXsD8UYKBV7ABgYYVRDGmHbFvqHwNMBZ6GAqyws/oGmBDoOL5KrAIumo33ARhZ6R5fCw5bvz9nhLguEECPuRDaI8uAY8DmGAB9OOgDYo2pQEcEgAuRhX4zK1im5k5S/+9uBaTUbrMyfxhyudb3SACN2idPjOslfx9xAaR4OdxtI6DFkcn1uDadT2xNwPEQEd4D5tmNpc2Vcj4a5xzuBKqy8oJCHxgPvLZPjDbz+y4lux27VmAR8Mr6iOzYe7IWSO3606BxeQFMTkweHSaAHcABJ7LerN8L0bclBAjgmeeNHwPTE+6LDhGAeu06lTbhqOjbEgIEcNLu6nx4G7At4b7okEyEEqBW50+g3dyifzGlnD8S4H8a/N0aLAAAAABJRU5ErkJggg==`,Rectangle:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAASxJREFUWEft16FKBWEQBeDvvodBRCw+gFWbgtVkEkWLil6wGbSLgiZBxKDFajB6owgGwSQ3GMTmMyhz3YVluRdW+BcM/4FlYXf2zPnPzMJMxy92cYx7POGgeJ76dooFfOEGZx1sIV5UsYKrxNmH5emGgEfMJE7WmC4EvGK69sUbPhuzNAscR1xV9EJA1D56oIo59JrxNo5axnUt+jAEBMr6vGO/aJDGzH8InMU5pjDos1JAcHwXp47Tt4kHhJBB7iwgO5AdyA5kB7ID2YHsQHbg3ziwXgyLMaYdYa+loXAztqGCe7vcjG6xVEvYxUliEYu4q3EOVrOYhuv4QD+xgDFM1jj7owQkzj2S7jkEDCvBKi4Tq4gyR64qNsq/YA2xOgUuWtyMQsQ8JrCDlx+OVWdvFenv8gAAAABJRU5ErkJggg==`,Polygon:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAxVJREFUWEe1133InnMUB/DPKCQS87ZQtrJ5yT8LUShaJKHWzMSaWqkt07LyEjEvQykrL2WRFautoZBt3hoRhkRqjLyUKMuyGLHWan3X73q6unff7t+953Lq6um5nt855/s7z/ec870mqLfDcBeuwd94E7fUu/c/OWGEAIuxvOf8Ejw6Qox9jo4C4HtM6ZPsM/Q+/TAdWfx/xtbmwCgANuP0ytt+hE3IzzznYW3L9znMy++jAHgIt/cAeAw7cApOKwAPrAR5L5bWAjgKH+DUEjzVGETCizEV03AGzsTxfUC9jstqATyM2/Aqrqq8YXPsEPzTxyfkXVID4AK8iwNKmbeMCCDHV+DGlt83mImvagC8XG79CG7dj+SNy7VYiYNxOdbXkHA+nsFfCA92jQNAXH/EyTgRvwwDkJJ/WYi0AE+NM3ncPywteQ4+HQbgAdyJzzG9g+QJ8VL534fIIfTAOXASvsNBuLS0XBcYHsdNGKvoIBKuKUvnRVzdReYS4w48iPtwz6AK5MYZErFUIrO7K7uhdMLTTVv2q0DIcRaWlfXbVfLEuQRv4DVc0a7AE6U38y5t8jsmdpm5xMpYTmeNETsVWIgne5KFLDf/DwCOxm/4FZOaCvTb8+mALJ7dHYPIpoyayjQ8BttSgZDshJ5E28vk6zj/3nA/YHIZcHt3QXb6op5MUTghYteWcf4KzseFeD8ADkWmXhia/d1Y9sCzHSK4srRgQMS2YX67DQ8vxIj4zKT6s4D6uCMQ7yGrvW0bBk3C5vAnpVQ79xPE2ZhRej66cB8bBCD67h0chzEBWQkiJU5rR5pdNMRn/X8JknyAZCfE8gHS+03Qjn0EZpUnibPEGguhox834n6cW/7wBxYPU0R3I+o1lnlxLL4uUzM6Lze8vnAlur+xb/EW1mFD633Uc6RYtEbefzEMQHxX4bqeUiZ4BlWWVWOZbm+XNssWrbIaAOHA3AHRUoUsl5Q4eu/fqqytQzUAVmNOn8DhRRTOT6MmbZ+vAZDbpwptewGzx5O48a0BkLNLizTPAomYeL7M9HFj2AMTmY45mDBG5AAAAABJRU5ErkJggg==`,Trash:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA71JREFUWEfNl2nIVlUQx3+vgoRrai6lpaaiJbgU5QeXygVREVdUxF0RTa0oF3BBW6AFxRUXXHLrg5qgIgruS35QM1ooI3LFXdyKKAiq83+ZI+Pj83jPKynOpzlzZ87935n/mTm3iHTZB7ye6L4feCPFtyjFyXz+LYGvXJP2TnLKAfB+BpAZ9jxp7ySnPABmFgAh+wMBGAoMyfiyWH/V936S6rcaWKUMPA1cLGF9/w/3G0DVWILPAWXhUcoqYFhJOPBQwD2WACoAv9nn1gSuuE+vayxfAhzJSUkvoDKwIsdeA7hstmeAS/55vgxMAz40p4+A6S4gHrMzwPMBjG9OUR8mdrsY7aU9JW2BQ1kAxgV2LjCnecA7LmAqIFCSMsDfpj8B/Gn6FOBjFzMXeNvWLYBvswAMCl+3xpxWAiNcwGTgE1uXdS9V6nWsJO8Cc1yMSjLc1g2Ak1kAugFbzWkD0M8FvAfMsnVF4HfTfS8ZA4gjUdYDfW2Ry6m8A6MNcNACdgBd3GZKpVIqqRJSe9P0esAp03M5sD0QtrM9Kw/8kZWBpsB35vQVIEBRxgILbSF2XzX9ReBH0/sD+uooIl1r4J9A7tL+5dLznYLnQoc6a44C0twFjQqte6mta7kW/hJw3Ow9gC0uRqRrBtwO2XsyBUClwPxb5qi01ndBIlM853UCuc7Zs1aAsiXpBOx0MSKdjuz5EPtsCgD5KF3KzjWgugsaDGiKSQQs1r19SPNus7/mOCSTylQN+DmU5oVUACKX0vUXUM4AKXYA8IVt0iisfzG9K7DN9FeBY6aXMtKpT8imZ3dJoVlwOnQztV2JgKh+Eh2nSLAmYf2T2fsAG00XiX8w3ZdTd8p2qQAiceRfG7hgger3m0wXsb43fWAoyVrTGwK/mi6iqvYS9ZbuqQB061EtJaqb6ifxTepl4BuzjwSWmS6ixZc2Do3shNlVOgG9SwqVYLND62uqhqLGImkZmtRR08eHxjTf9KeA66a/4nx0fEenAhDTxXiJGL7X9I7uiKm5HDb7ROAz0323U833mH02MCEVgKbgW+bsG4t+NiIYXT4PmI9G9gemq9vpGEtUc2VTouv8PbfpQiXQZvEeoOm4ziH/OkxEHSs1nEhOnRhlQ8fS/xF5cipLcZDd2a4QAI1UpUzyJrA4N3WJa03GReabOyWLzYUA6A6w3AJ1B4j1TXzvHbdJwKe2ys3kfQH0Br60wKwfkSxQ8Uelp+NDZgk6ALuydi7hc52gOC8yAei2o5Ga+juehaX4JySf03+JLrAhSDUYWAAAAABJRU5ErkJggg==`,Reset:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAuRJREFUWEfVl1moTWEUx3+31M1U5JYxxQuJa7xvEg+UMpOkDFcevChEGUMi8/gkD24kSaIkRJEhM1cyJA83JMKD5AUPvv9tfVpOe5999j3XkVX7tPfZa/h/3/p/a61dxT+Wqn8cn/8SwAhgHDAW6Ap0A9oDH+y6C5wHrgNfsnY4zw6MBhYD07Kc2vu3wD5gP/A9zaYUAG3NycIUJ2+A98AA24lCtYfAVuBkkn0WgB7AYdvyaH8BOAe8ABqBT85xf2CgXesLAq4EthWCKAagD3AGqDWjp8B24EiJKRBPpD/Y6eu/S96+GIBjwGwXfCbwrMTgXm15SM0O98cw4FF8TgMgsok8ktfA+BYGj3GWArvt4SowphDAhsDwz8ABoNqC9TWlRcDBFqy80OQKoJMk2Rh+FLO5EOkmEmY60AY4YYriwNRWCC4XQwGdiCjiWJMAiBgX3QuRbK49a6s6hDQsAI6nHaUcAP1i64GGyAEdtfnmSKnoEgj4ErjtwLwDeuYIlqQ6yxaidw1AfQQwCLgGdHJWX4GO7vl33soAoRrxxOzvh3pS50/BWmBTgnOxVpXMp6kMDHwL9aEdoAra2wPQ6i8Dw837j1DDVwcO7CwnWoLtPUANTf2hurAOzLPcnALWAc9bObjcaeW97NjXJBWiOcDRvxBYLrsDIrNEXKjNakatjWNCSPFZX2MqDWCFNShhUHneW0kAKvF3XHdUZWysJIBloa7ssu0XyWfovlIAaoCPjlCjbGbMBKDuVQe8Clt3ugxGqurF+rIFWBN9Ze2A5sBDpqwxbDNwKweQPcASp38zFLuR3j4LgAZNjWJRfhoIHaUHRYBMsRY/xOk0AWrBf0gWAClr0NQ0o6nIixgtIBpKdamLTgrj1uQwN8ZhJuo3d74kwKUAiHarAOUvj2jV6qICkCh5AMhBv7D1E+0Sk9PkBqAvJI14ApEqeQF4R/okU447u+uxDTH+W6HojpUDIE8qUnV/AUEbfiHgdnTrAAAAAElFTkSuQmCC`},$=[{id:`point`,title:`绘制点：点击地图绘制点要素`,mode:`draw_point`,icon:Q.Point},{id:`line`,title:`绘制线：点击地图开始，双击结束绘制线要素`,mode:`draw_line_string`,icon:Q.Line},{id:`polygon`,title:`绘制面：点击地图开始，双击结束绘制面要素`,mode:`draw_polygon`,icon:Q.Polygon},{id:`reset`,title:`清除：删除所有绘制的要素`,mode:`simple_select`,icon:Q.Reset}],ue=[{id:`gl-draw-line`,type:`line`,filter:[`all`,[`==`,`$type`,`LineString`]],layout:{"line-cap":`round`,"line-join":`round`},paint:{"line-color":`#D20C0C`,"line-dasharray":[.2,2],"line-width":2}},{id:`gl-draw-polygon-fill`,type:`fill`,filter:[`all`,[`==`,`$type`,`Polygon`]],paint:{"fill-color":`#D20C0C`,"fill-outline-color":`#D20C0C`,"fill-opacity":.3}},{id:`gl-draw-polygon-midpoint`,type:`circle`,filter:[`all`,[`==`,`$type`,`Point`],[`==`,`meta`,`midpoint`]],paint:{"circle-radius":5,"circle-color":`#fbb03b`}},{id:`gl-draw-polygon-stroke-active`,type:`line`,filter:[`all`,[`==`,`$type`,`Polygon`]],layout:{"line-cap":`round`,"line-join":`round`},paint:{"line-color":`#D20C0C`,"line-dasharray":[.3,3],"line-width":3}},{id:`gl-draw-polygon-and-line-vertex-halo-active`,type:`circle`,filter:[`all`,[`==`,`meta`,`vertex`],[`==`,`$type`,`Point`]],paint:{"circle-radius":5,"circle-color":`#FFF`}},{id:`gl-draw-polygon-and-line-vertex-active`,type:`circle`,filter:[`all`,[`==`,`meta`,`vertex`],[`==`,`$type`,`Point`]],paint:{"circle-radius":3,"circle-color":`#D20C0C`}},{id:`gl-draw-point-point-stroke-active`,type:`circle`,filter:[`all`,[`==`,`$type`,`Point`],[`==`,`meta`,`feature`],[`==`,`active`,`true`]],paint:{"circle-radius":8,"circle-color":`#FFF`}},{id:`gl-draw-point-active`,type:`circle`,filter:[`all`,[`==`,`$type`,`Point`],[`==`,`meta`,`feature`],[`==`,`active`,`true`]],paint:{"circle-radius":6,"circle-color":`#D20C0C`}},{id:`gl-draw-point-point-stroke-inactive`,type:`circle`,filter:[`all`,[`==`,`$type`,`Point`],[`==`,`meta`,`feature`],[`==`,`active`,`false`]],paint:{"circle-radius":8,"circle-color":`#FFF`}},{id:`gl-draw-point-inactive`,type:`circle`,filter:[`all`,[`==`,`$type`,`Point`],[`==`,`meta`,`feature`],[`==`,`active`,`false`]],paint:{"circle-radius":6,"circle-color":`#D20C0C`}}],de=(0,t.memo)(e=>{let{position:r,onDraw:i,initFeature:o,modes:s}=e,c=s?$.filter(e=>s.includes(e.mode)||e.id===`reset`):$,{map:l}=D(),u=(0,t.useRef)(null),d=e=>{if(l&&e.features&&u.current){let t=b(e.features[0]);t&&l.fitBounds(t,{maxZoom:16});let n=u.current.add(e);u.current.changeMode(`simple_select`,{featureIds:n})}},f=(e,t)=>{if(!u.current||!l)return;t===`reset`&&u.current.deleteAll(),u.current.changeMode(e);let n=l.getCanvas();e===`simple_select`?n.style.cursor=``:n.style.cursor=`crosshair`},p=()=>{if(!u.current)return;let e=u.current.getAll();e.features&&e.features.length>0&&i({data:e})};return(0,t.useEffect)(()=>{o&&d(o)},[o]),(0,t.useEffect)(()=>(l&&!u.current&&(u.current=new a.default({displayControlsDefault:!1,styles:ue,defaultMode:`simple_select`}),l.addControl(u.current,`bottom-left`),l.on(`draw.create`,p),l.on(`draw.delete`,p),l.on(`draw.update`,p),l.on(`draw.modechange`,e=>{let t=l.getCanvas();e.mode===`simple_select`?t.style.cursor=``:t.style.cursor=`crosshair`}),o&&d(o)),()=>{}),[]),(0,n.jsx)(`div`,{className:`mapboxgl-draw`,style:{...r},children:(0,n.jsx)(`div`,{className:`mapboxgl-draw-bar`,children:(0,n.jsx)(`div`,{children:c.map(e=>(0,n.jsx)(`div`,{title:e.title,className:`mapboxgl-draw-bar-button`,style:{backgroundImage:`url(${e.icon})`},onClick:()=>f(e.mode,e.id)},e.id))})})})});e.BaseLayer=x,e.BaseWidget=h,e.Draw=de,e.LayerGroupWrapper=C,e.LayerList=L,e.LayerWrapper=S,e.Legend=R,e.MapContext=E,e.MapWidget=k,e.MapWrapper=T,e.Print=ae,e.Swipe=le,e.useMap=D});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qm-map-maplibre-gl",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/qm-map.es.js",