UNPKG

terra-draw-mapbox-gl-adapter

Version:
3 lines (2 loc) 5.47 kB
import{TerraDrawExtend as e}from"terra-draw";class t extends e.TerraDrawBaseAdapter{constructor(e){super(e),this._renderBeforeLayerId=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}_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"]}})}_addLineLayer(e){return this._map.addLayer({id:e,source:e,type:"line",layout:{"line-sort-key":["get","zIndex"]},paint:{"line-width":["get","lineStringWidth"],"line-color":["get","lineStringColor"]}})}_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-radius":["get","pointWidth"],"circle-color":["get","pointColor"]}})}_addLayer(e,t){"Point"===t&&this._addPointLayer(e),"LineString"===t&&this._addLineLayer(e),"Polygon"===t&&(this._addFillLayer(e),this._addFillOutlineLayer(e))}_addGeoJSONLayer(e,t){const i=`td-${e.toLowerCase()}`;return this._addGeoJSONSource(i,t),this._addLayer(i,e),i}_setGeoJSONLayerData(e,t){const i=`td-${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(()=>{const i=[...e.created,...e.updated,...e.unchanged],n=[],o=[],r=[];for(let e=0;e<i.length;e++){const a=i[e],{properties:s}=a,l=t[s.mode](a);"Point"===a.geometry.type?(s.pointColor=l.pointColor,s.pointOutlineColor=l.pointOutlineColor,s.pointOutlineWidth=l.pointOutlineWidth,s.pointWidth=l.pointWidth,s.zIndex=l.zIndex,n.push(a)):"LineString"===a.geometry.type?(s.lineStringColor=l.lineStringColor,s.lineStringWidth=l.lineStringWidth,o.push(a)):"Polygon"===a.geometry.type&&(s.polygonFillColor=l.polygonFillColor,s.polygonFillOpacity=l.polygonFillOpacity,s.polygonOutlineColor=l.polygonOutlineColor,s.polygonOutlineWidth=l.polygonOutlineWidth,r.push(a))}const a=this.changedIds.deletion||this.changedIds.styling,s=a||this.changedIds.linestrings,l=a||this.changedIds.polygons;(a||this.changedIds.points)&&this._setGeoJSONLayerData("Point",n),s&&this._setGeoJSONLayerData("LineString",o),l&&this._setGeoJSONLayerData("Polygon",r),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._map.removeLayer("td-point"),this._map.removeSource("td-point"),this._map.removeLayer("td-linestring"),this._map.removeSource("td-linestring"),this._map.removeLayer("td-polygon"),this._map.removeLayer("td-polygon-outline"),this._map.removeSource("td-polygon")}register(e){var t;super.register(e);const i=this._addGeoJSONLayer("Polygon",[]),n=this._addGeoJSONLayer("LineString",[]),o=this._addGeoJSONLayer("Point",[]);this._renderBeforeLayerId&&(this._map.moveLayer(o,this._renderBeforeLayerId),this._map.moveLayer(n,o),this._map.moveLayer(i+"-outline",n),this._map.moveLayer(i,n)),null!=(t=this._currentModeCallbacks)&&t.onReady&&this._currentModeCallbacks.onReady()}}export{t as TerraDrawMapboxGLAdapter}; //# sourceMappingURL=terra-draw-mapbox-gl-adapter.modern.js.map