terra-draw-maplibre-gl-adapter
Version:
Terra Draw Adapter for Maplibre GL JS
3 lines (2 loc) • 8.12 kB
JavaScript
import{TerraDrawExtend as e}from"terra-draw";function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)({}).hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},t.apply(null,arguments)}class i extends e.TerraDrawBaseAdapter{constructor(e){super(e),this._renderBeforeLayerId=void 0,this._prefixId=void 0,this._initialDragPan=void 0,this._initialDragRotate=void 0,this._nextRender=void 0,this._map=void 0,this._container=void 0,this.changedIds={deletion:!1,points:!1,linestrings:!1,polygons:!1,styling:!1},this._map=e.map,this._container=this._map.getContainer(),this._initialDragRotate=this._map.dragRotate.isEnabled(),this._initialDragPan=this._map.dragPan.isEnabled(),this._renderBeforeLayerId=e.renderBelowLayerId,this._prefixId=e.prefixId||"td"}hashCode(e){let t=0;for(let i=0;i<e.length;i++)t=(t<<5)-t+e.charCodeAt(i),t|=0;return Math.abs(t)}resizeImage(e,t,i,n){const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{const e=document.createElement("canvas");e.width=t,e.height=i;const a=e.getContext("2d");if(!a)throw new Error("Could not get canvas context");a.drawImage(r,0,0,t,i);const o=e.toDataURL();n(o)},r.src=e}toGlDashArrayFromPixels(e,t){if(!e)return null;const[i,n]=e;if(!Number.isFinite(i)||!Number.isFinite(n)||i<0||n<0)return null;const r=Math.max(1e-4,t);return[i/r,n/r]}isMapLibreAtLeast(e){const t=this._map.version;if(!t)return!1;const i=e=>{const t=e.match(/(\d+)\.(\d+)\.(\d+)/);return t?[parseInt(t[1],10),parseInt(t[2],10),parseInt(t[3],10)]:null},n=i(t),r=i(e);if(!n||!r)return!0;const[a,o,s]=n,[l,d,h]=r;return a!==l?a>l:o!==d?o>d:s>=h}_addGeoJSONSource(e,t){this._map.addSource(e,{type:"geojson",data:{type:"FeatureCollection",features:t},tolerance:0})}_addFillLayer(e){return this._map.addLayer({id:e,source:e,type:"fill",layout:{"fill-sort-key":["get","zIndex"]},paint:{"fill-color":["get","polygonFillColor"],"fill-opacity":["get","polygonFillOpacity"]}})}_addFillOutlineLayer(e){return this._map.addLayer({id:e+"-outline",source:e,type:"line",layout:{"line-sort-key":["get","zIndex"]},paint:{"line-width":["get","polygonOutlineWidth"],"line-color":["get","polygonOutlineColor"],"line-opacity":["get","polygonOutlineOpacity"]}})}_addLineLayer(e){const i={};return this.isMapLibreAtLeast("5.8.0")&&(i["line-dasharray"]=["coalesce",["get","lineStringDash"],["literal",[1,0]]]),this._map.addLayer({id:e,source:e,type:"line",layout:{"line-sort-key":["get","zIndex"]},paint:t({},i,{"line-width":["get","lineStringWidth"],"line-color":["get","lineStringColor"],"line-opacity":["get","lineStringOpacity"]})})}_addPointLayer(e){return this._map.addLayer({id:e,source:e,type:"circle",layout:{"circle-sort-key":["get","zIndex"]},paint:{"circle-stroke-color":["get","pointOutlineColor"],"circle-stroke-width":["get","pointOutlineWidth"],"circle-stroke-opacity":["get","pointOutlineOpacity"],"circle-radius":["get","pointWidth"],"circle-color":["get","pointColor"],"circle-opacity":["get","pointOpacity"]}})}_addMarkerLayer(e){return this._map.addLayer({id:e+"-marker",source:e,type:"symbol",filter:["has","markerId"],layout:{"icon-image":["image",["get","markerId"]],"icon-anchor":"bottom","icon-allow-overlap":!0}})}_addLayer(e,t){"Point"===t&&(this._addPointLayer(e),this._addMarkerLayer(e)),"LineString"===t&&this._addLineLayer(e),"Polygon"===t&&(this._addFillLayer(e),this._addFillOutlineLayer(e))}_addGeoJSONLayer(e,t){const i=`${this._prefixId}-${e.toLowerCase()}`;return this._addGeoJSONSource(i,t),this._addLayer(i,e),i}_setGeoJSONLayerData(e,t){const i=`${this._prefixId}-${e.toLowerCase()}`;return this._map.getSource(i).setData({type:"FeatureCollection",features:t}),i}updateChangedIds(e){[...e.updated,...e.created].forEach(e=>{"Point"===e.geometry.type?this.changedIds.points=!0:"LineString"===e.geometry.type?this.changedIds.linestrings=!0:"Polygon"===e.geometry.type&&(this.changedIds.polygons=!0)}),e.deletedIds.length>0&&(this.changedIds.deletion=!0),0===e.created.length&&0===e.updated.length&&0===e.deletedIds.length&&(this.changedIds.styling=!0)}getLngLatFromEvent(e){const{left:t,top:i}=this._container.getBoundingClientRect();return this.unproject(e.clientX-t,e.clientY-i)}getMapEventElement(){return this._map.getCanvas()}setDraggability(e){e?(this._initialDragRotate&&this._map.dragRotate.enable(),this._initialDragPan&&this._map.dragPan.enable()):(this._initialDragRotate&&this._map.dragRotate.disable(),this._initialDragPan&&this._map.dragPan.disable())}project(e,t){const{x:i,y:n}=this._map.project({lng:e,lat:t});return{x:i,y:n}}unproject(e,t){const{lng:i,lat:n}=this._map.unproject({x:e,y:t});return{lng:i,lat:n}}setCursor(e){const t=this._map.getCanvas();"unset"===e?t.style.removeProperty("cursor"):t.style.cursor=e}setDoubleClickToZoom(e){e?this._map.doubleClickZoom.enable():this._map.doubleClickZoom.disable()}render(e,t){this.updateChangedIds(e),this._nextRender&&cancelAnimationFrame(this._nextRender),this._nextRender=requestAnimationFrame(()=>{if(!this._currentModeCallbacks)return;const i=[...e.created,...e.updated,...e.unchanged],n=[],r=[],a=[];for(let e=0;e<i.length;e++){const o=i[e],{properties:s}=o,l=t[s.mode](o);if(s.zIndex=l.zIndex,s.zIndex=l.zIndex,"Point"===o.geometry.type){s.pointColor=l.pointColor,s.pointOutlineColor=l.pointOutlineColor,s.pointOutlineWidth=l.pointOutlineWidth;const e=l.pointOutlineOpacity;s.pointOutlineOpacity=void 0===e?1:e,s.pointWidth=l.pointWidth;const t=l.pointOpacity;if(s.pointOpacity=void 0===t?1:t,l.markerUrl&&l.markerWidth&&l.markerHeight){const e=`marker-${this.hashCode(l.markerUrl)}`;this._map.hasImage(e)||this.resizeImage(l.markerUrl,l.markerWidth,l.markerHeight,t=>{this._map.loadImage(t).then(t=>{this._map.hasImage(e)||this._map.addImage(e,t.data)})}),s.markerId=e,s.pointWidth=0}n.push(o)}else if("LineString"===o.geometry.type){s.lineStringDash=this.toGlDashArrayFromPixels(l.lineStringDash,l.lineStringWidth),s.lineStringColor=l.lineStringColor,s.lineStringWidth=l.lineStringWidth;const e=l.lineStringOpacity;s.lineStringOpacity=void 0===e?1:e,r.push(o)}else if("Polygon"===o.geometry.type){const e=l.polygonOutlineOpacity;s.polygonFillColor=l.polygonFillColor,s.polygonFillOpacity=l.polygonFillOpacity,s.polygonOutlineOpacity=void 0===e?1:e,s.polygonOutlineColor=l.polygonOutlineColor,s.polygonOutlineWidth=l.polygonOutlineWidth,a.push(o)}}const o=this.changedIds.deletion||this.changedIds.styling,s=o||this.changedIds.linestrings,l=o||this.changedIds.polygons;(o||this.changedIds.points)&&this._setGeoJSONLayerData("Point",n),s&&this._setGeoJSONLayerData("LineString",r),l&&this._setGeoJSONLayerData("Polygon",a),this.changedIds={points:!1,linestrings:!1,polygons:!1,deletion:!1,styling:!1}})}clear(){this._currentModeCallbacks&&(this._currentModeCallbacks.onClear(),this._nextRender&&(cancelAnimationFrame(this._nextRender),this._nextRender=void 0),this._setGeoJSONLayerData("Point",[]),this._setGeoJSONLayerData("LineString",[]),this._setGeoJSONLayerData("Polygon",[]))}getCoordinatePrecision(){return super.getCoordinatePrecision()}unregister(){super.unregister(),this.changedIds={points:!1,linestrings:!1,polygons:!1,deletion:!1,styling:!1},this._map.removeLayer(`${this._prefixId}-point`),this._map.removeLayer(`${this._prefixId}-point-marker`),this._map.removeSource(`${this._prefixId}-point`),this._map.removeLayer(`${this._prefixId}-linestring`),this._map.removeSource(`${this._prefixId}-linestring`),this._map.removeLayer(`${this._prefixId}-polygon`),this._map.removeLayer(`${this._prefixId}-polygon-outline`),this._map.removeSource(`${this._prefixId}-polygon`)}register(e){var t;super.register(e);const i=this._addGeoJSONLayer("Polygon",[]),n=this._addGeoJSONLayer("LineString",[]),r=this._addGeoJSONLayer("Point",[]);var a;this._renderBeforeLayerId&&(this._map.moveLayer(r,this._renderBeforeLayerId),this._map.moveLayer(n,r),this._map.moveLayer(`${i}-outline`,n),this._map.moveLayer(i,`${i}-outline`)),null!=(t=this._currentModeCallbacks)&&t.onReady&&(null==(a=this._currentModeCallbacks)||a.onReady())}}export{i as TerraDrawMapLibreGLAdapter};
//# sourceMappingURL=terra-draw-maplibre-gl-adapter.modern.js.map