@arcgis/core/views/2d/layers/VectorTileLayerView2D.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.19/LICENSE.txt */
import{__decorate as e}from"tslib";import has from"../../../core/has.js";import{clone as t}from"../../../core/lang.js";import i from"../../../core/Logger.js";import{destroyMaybe as s}from"../../../core/maybe.js";import{isAbortError as r}from"../../../core/promiseUtils.js";import{pt2px as a}from"../../../core/screenUtils.js";import{property as l,subclass as n}from"../../../core/accessorSupport/decorators.js";import{diff as o,hasDiff as h}from"../../../core/accessorSupport/diffUtils.js";import u from"../../../geometry/Point.js";import{create as y}from"../../../geometry/support/aaBoundingRect.js";import{equals as c}from"../../../geometry/support/spatialReferenceUtils.js";import{isVectorTileGraphicOrigin as d}from"../../../graphic/isVectorTileGraphicOrigin.js";import{tileSizeInTileUnits as p,tileSizeInPixels as _}from"../engine/vectorTiles/constants.js";import{TileHandler as f}from"../engine/vectorTiles/TileHandler.js";import{TileManager as g}from"../engine/vectorTiles/TileManager.js";import{VectorTile as m}from"../engine/vectorTiles/VectorTile.js";import{VectorTileContainer as T}from"../engine/vectorTiles/VectorTileContainer.js";import C from"../engine/vectorTiles/VectorTileFeatureIndex.js";import v from"../engine/vectorTiles/style/StyleRepository.js";import{LayerView2D as w}from"./LayerView2D.js";import R from"../tiling/TileInfoViewPOT.js";import H from"../tiling/TileQueue.js";import I from"../../layers/VectorTileLayerView.js";import{TaskPriority as Q}from"../../support/Scheduler.js";const S=2.5;let P=class extends(w(I)){constructor(){super(...arguments),this._styleChanges=[],this._fetchQueue=null,this._parseQueue=null,this._tileHandlerPromise=null,this._isTileHandlerReady=!1,this._styeChanged=!1,this._spriteSourceChanged=!1}get fading(){return this._vectorTileContainer?.fading??!1}get hasVisibleFeatures(){const e=this._vectorTileContainer.children;for(const t of e)if(t.hasFeatures())return!0;return!1}get spriteSourceChanged(){return this._spriteSourceChanged}get styleChanged(){return this._styeChanged}async hitTest(e,t){const i=this._tileHandlerPromise,s=this._vectorTileContainer?.symbolFader;if(!i||!this._isTileHandlerReady||!s)return;await i;const r=has("esri-vtl-search-tolerance")??0,l=r>0?r:S,n=this.view.state,{rotation:o,pixelRatio:h}=this.view.state,u=a(l)*h;let y=null;const c=this._vectorTileContainer?.symbolRepository;c&&(y=c.querySymbols(t,u,s.decluttererOffset,{}));const d=this._tileManager.getIntersectingTiles(t.x,t.y,u,n,y);if((!d||0===d.length)&&0===y?.length)return null;e=e.clone().normalize();const p=[],_=[];for(const a of d)p.push(this._queryTile(_,e,u,o,a,y?.filter(e=>e.tileKey.id===a.id)));return await Promise.all(p),_}update(e){if(this._tileHandlerPromise&&this._isTileHandlerReady)return e.pixelRatio!==this._tileHandler.devicePixelRatio?(this._tileHandler.devicePixelRatio=e.pixelRatio,void this._loadStyle()):void(this._styleChanges.length>0?this._tileHandlerPromise=this._applyStyleChanges():(this._pauseQueues(),this._fetchQueue.state=e.state,this._parseQueue.state=e.state,this._tileManager.update(e)||this.requestUpdate(),this._resumeQueues()))}attach(){const{style:e}=this.layer.currentStyleInfo;this._styleRepository=new v(e),this._tileInfoView=new R(this.layer.tileInfo,this.layer.fullExtent),this._vectorTileContainer=new T(this._tileInfoView),this._tileHandler=new f(this.layer,this._styleRepository,window.devicePixelRatio||1,this.layer.tileInfo.lods.length-1),this.container.addChild(this._vectorTileContainer),this._start(),this.addAttachHandles([this.layer.on("paint-change",e=>{if(this._styeChanged=!0,e.isDataDriven)this._styleChanges.push({type:0,data:e}),this.requestUpdate();else{const t=this._styleRepository,i=t.getLayerById(e.layer);if(!i)return;const s=3===i.type;t.setPaintProperties(e.layer,e.paint),s&&this._vectorTileContainer?.restartDeclutter(),this._vectorTileContainer?.requestRender()}}),this.layer.on("layout-change",e=>{const t=this._styleRepository,i=t.getLayerById(e.layer);if(!i)return;this._styeChanged=!0;const s=o(i.layout,e.layout);if(null!=s){if(h(s,"visibility")&&1===b(s))return t.setLayoutProperties(e.layer,e.layout),3===i.type&&this._vectorTileContainer?.restartDeclutter(),void this._vectorTileContainer?.requestRender();this._styleChanges.push({type:1,data:e}),this.requestUpdate()}}),this.layer.on("style-layer-visibility-change",e=>{const t=this._styleRepository,i=t.getLayerById(e.layer);i&&(this._styeChanged=!0,t.setStyleLayerVisibility(e.layer,e.visibility),3===i.type&&this._vectorTileContainer?.restartDeclutter(),this._vectorTileContainer?.requestRender())}),this.layer.on("style-layer-change",e=>{this._styleChanges.push({type:2,data:e}),this._styeChanged=!0,this.requestUpdate()}),this.layer.on("delete-style-layer",e=>{this._styleChanges.push({type:3,data:e}),this._styeChanged=!0,this.requestUpdate()}),this.layer.on("load-style",()=>this._loadStyle()),this.layer.on("spriteSource-change",e=>{this._spriteSourceChanged=!0,this._styleChanges.push({type:4,data:e});const t=this._styleRepository.layers;for(const i of t)switch(i.type){case 3:i.getLayoutProperty("icon-image")&&this._styleChanges.push({type:1,data:{layer:i.id,layout:i.layout}});break;case 2:i.getPaintProperty("line-pattern")&&this._styleChanges.push({type:0,data:{layer:i.id,paint:i.paint,isDataDriven:i.isPainterDataDriven()}});break;case 1:i.getLayoutProperty("fill-pattern")&&this._styleChanges.push({type:0,data:{layer:i.id,paint:i.paint,isDataDriven:i.isPainterDataDriven()}})}this.requestUpdate()})])}detach(){this._stop(),this.container.removeAllChildren(),this._vectorTileContainer=s(this._vectorTileContainer),this._tileHandler=s(this._tileHandler)}viewChange(){this.requestUpdate()}moveEnd(){this.requestUpdate()}supportsSpatialReference(e){return c(this.layer.tileInfo?.spatialReference,e)}canResume(){let e=super.canResume();const{currentStyleInfo:t}=this.layer;if(e&&t?.layerDefinition){const i=this.view.scale,{minScale:s,maxScale:r}=t.layerDefinition;t?.layerDefinition&&(s&&s<i&&(e=!1),r&&r>i&&(e=!1))}return e}isUpdating(){return this.fading}acquireTile(e){const t=this._createVectorTile(e);return this._updatingHandles.addPromise(this._fetchQueue.push(t.key).then(e=>this._parseQueue.push({key:t.key,data:e})).then(e=>{t.once("attach",()=>this.requestUpdate()),t.setData(e),this.requestUpdate()}).catch(e=>{r(e)||i.getLogger(this).error(e)})),t}releaseTile(e){const t=e.key.id;this._fetchQueue.abort(t),this._parseQueue.abort(t),this.requestUpdate()}async doRefresh(){if(!this.attached)return;if(this.suspended)return this._tileManager.clear(),void this.requestUpdate();this._isTileHandlerReady=!1,this._pauseQueues(),this._clearQueues(),this._tileManager.clearCache(),this._resumeQueues();const e=this._vectorTileContainer.children,t=[];try{for(const i of e){const e=this._updatingHandles.addPromise(this._fetchQueue.push(i.key).then(e=>this._parseQueue.push({key:i.key,data:e})).then(e=>i.setData(e)).finally(()=>i.featureIndex=null));t.push(e)}await Promise.all(t)}catch(s){i.getLogger(this).error("error refreshing vector-tiles layer-view",s),this._resumeQueues(),this._isTileHandlerReady=!0}this._isTileHandlerReady=!0,this.requestUpdate()}_start(){if(this._stop(),this._tileManager=new g({acquireTile:e=>this.acquireTile(e),releaseTile:e=>this.releaseTile(e),tileInfoView:this._tileInfoView},this._vectorTileContainer),!this.layer.currentStyleInfo)return;const e=new AbortController,t=this._tileHandler.start({signal:e.signal}).then(()=>{this._fetchQueue=new H({tileInfoView:this._tileInfoView,process:(e,t)=>this._getTileData(e,t),concurrency:15,scheduler:this.scheduler,priority:Q.MAPVIEW_FETCH_QUEUE}),this._parseQueue=new H({tileInfoView:this._tileInfoView,process:(e,t)=>this._parseTileData(e,t),concurrency:8,scheduler:this.scheduler,priority:Q.MAPVIEW_VECTOR_TILE_PARSING_QUEUE}),this.requestUpdate(),this._isTileHandlerReady=!0});this._tileHandler.spriteMosaic.then(e=>{this._vectorTileContainer.setStyleResources(e,this._tileHandler.glyphMosaic,this._styleRepository,this._tileInfoView),this.requestUpdate()}),this._tileHandlerAbortController=e,this._tileHandlerPromise=t}_stop(){if(!this._tileHandlerAbortController||!this._vectorTileContainer)return;const e=this._tileHandlerAbortController;e&&e.abort(),this._tileHandlerPromise=null,this._isTileHandlerReady=!1,this._fetchQueue=s(this._fetchQueue),this._parseQueue=s(this._parseQueue),this._tileManager=s(this._tileManager),this._vectorTileContainer.removeAllChildren()}async _getTileData(e,t){return this._tileHandler.fetchTileData(e,t)}async _parseTileData(e,t){return this._tileHandler.parseTileData(e,t)}async _applyStyleChanges(){this._isTileHandlerReady=!1,this._pauseQueues(),this._clearQueues(),this._tileManager.clearCache();const e=this._styleChanges;try{await this._tileHandler.updateStyle(e)}catch(o){i.getLogger(this).error("error applying vector-tiles style update",o.message),this._resumeQueues(),this._isTileHandlerReady=!0}const t=this._styleRepository,s=new Set,r=new Set;for(const i of e){if(3!==i.type&&2!==i.type)continue;const e=2===i.type?i.data.layer.id:i.data.layer,a=t.getLayerById(e);a&&(s.add(a.uid),3===a.type&&r.add(a.uid))}const a=this._vectorTileContainer.children,l=this._vectorTileContainer?.symbolFader?.symbolRepository;l&&r.size>0&&l.deleteStyleLayers(Array.from(r));const n=new Set;if(e.forEach(e=>{let i;switch(e.type){case 0:t.setPaintProperties(e.data.layer,e.data.paint),i=e.data.layer;break;case 1:t.setLayoutProperties(e.data.layer,e.data.layout),i=e.data.layer;break;case 3:return void t.deleteStyleLayer(e.data.layer);case 2:t.setStyleLayer(e.data.layer,e.data.index),i=e.data.layer.id;break;case 4:this._vectorTileContainer.setSpriteMosaic(this._tileHandler.setSpriteSource(e.data.spriteSource))}if(i){const e=t.getLayerById(i);e&&n.add(e.uid)}}),s.size>0){const e=Array.from(s);this._vectorTileContainer.deleteStyleLayers(e);for(const t of a)t.deleteLayerData(e)}if(this._resumeQueues(),n.size>0){const e=Array.from(n),t=[];for(const i of a){const s=this._updatingHandles.addPromise(this._fetchQueue.push(i.key).then(t=>this._parseQueue.push({key:i.key,data:t,styleLayerUIDs:e})).then(e=>i.setData(e)).finally(()=>i.featureIndex=null));t.push(s)}await Promise.all(t)}this._styleChanges=[],this._isTileHandlerReady=!0,this.requestUpdate()}async _loadStyle(){const{style:e}=this.layer.currentStyleInfo,i=t(e);this._isTileHandlerReady=!1,this._pauseQueues(),this._clearQueues(),this._styleRepository=new v(i),this._vectorTileContainer.destroy(),this._tileManager.clear(),this._tileHandlerAbortController.abort(),this._tileHandlerAbortController=new AbortController;const{signal:s}=this._tileHandlerAbortController;try{this._tileHandlerPromise=this._tileHandler.setStyle(this._styleRepository,i,this.layer.tileInfo.lods.length-1),await this._tileHandlerPromise}catch(n){if(!r(n))throw n}if(s.aborted)return this._resumeQueues(),this._isTileHandlerReady=!0,this._styeChanged=!1,this._spriteSourceChanged=!1,void this.requestUpdate();const a=await this._tileHandler.spriteMosaic,l=this._vectorTileContainer;this._tileInfoView=new R(this.layer.tileInfo,this.layer.fullExtent),l.setStyleResources(a,this._tileHandler.glyphMosaic,this._styleRepository,this._tileInfoView),this._tileManager=new g({acquireTile:e=>this.acquireTile(e),releaseTile:e=>this.releaseTile(e),tileInfoView:this._tileInfoView},this._vectorTileContainer),this._resumeQueues(),this._isTileHandlerReady=!0,this.requestUpdate(),this._styeChanged=!1,this._spriteSourceChanged=!1}_createVectorTile(e){const t=this._tileInfoView.getTileBounds(y(),e),i=this._tileInfoView.getTileResolution(e.level);return new m(e,i,t[0],t[3],512,512,this._styleRepository)}async _queryTile(e,t,i,s,r,a){if(0===r.layerData.size)return;const l=this._ensureTileIndex(r),[n,o,h,u]=this._tileInfoView.getTileBounds(y(),r.key,!0),c=p*((t.x-n)/(h-n)),f=p*(1-(t.y-o)/(u-o)),g=i*(p/_),m=await l.queryAttributes(c,f,g,s,a);for(const y of m)y.graphic.geometry=this._tileToMapPoint(y.tilePoint,r.transforms.tileUnitsToPixels),e.push({type:"graphic",layer:this.layer,graphic:y.graphic,mapPoint:t.clone()});e.sort((e,t)=>(d(t.graphic.origin)?t.graphic.origin.layerIndex:0)-(d(e.graphic.origin)?e.graphic.origin.layerIndex:0))}_tileToMapPoint(e,t){if(!e)return null;const i=e[0]*t[0]+e[1]*t[3]+t[6],s=e[0]*t[1]+e[1]*t[4]+t[7],r=this.view.state,a=[0,0];return r.toMap(a,[i,s]),new u({x:a[0],y:a[1],spatialReference:r.spatialReference})}_ensureTileIndex(e){let t=e.featureIndex;return t||(t=C.create(e.key,e.layerData,this._styleRepository,this._tileHandler,this.layer),e.featureIndex=t),t}_pauseQueues(){this._fetchQueue.pause(),this._parseQueue.pause()}_resumeQueues(){this._fetchQueue.resume(),this._parseQueue.resume()}_clearQueues(){this._fetchQueue.clear(),this._parseQueue.clear()}};function b(e){if(null==e)return 0;switch(e.type){case"partial":return Object.keys(e.diff).length;case"complete":return Math.max(Object.keys(e.oldValue).length,Object.keys(e.newValue).length);case"collection":return Object.keys(e.added).length+Object.keys(e.changed).length+Object.keys(e.removed).length}}e([l()],P.prototype,"_isTileHandlerReady",void 0),P=e([n("esri.views.2d.layers.VectorTileLayerView2D")],P);const V=P;export{V as default};