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

DOE GIS API

import{_ as e}from"../../../chunks/tslib.es6.js";import t from"../../../Graphic.js";import{clone as i}from"../../../core/lang.js";import s from"../../../core/Logger.js";import{isNone as r,destroyMaybe as a}from"../../../core/maybe.js";import{isAbortError as l}from"../../../core/promiseUtils.js";import{watch as n,initial as o}from"../../../core/reactiveUtils.js";import{property as h}from"../../../core/accessorSupport/decorators/property.js";import"../../../core/accessorSupport/ensureType.js";import{subclass as u}from"../../../core/accessorSupport/decorators/subclass.js";import{diff as c,hasDiff as y}from"../../../core/accessorSupport/diffUtils.js";import{create as p}from"../../../geometry/support/aaBoundingRect.js";import{equals as d}from"../../../geometry/support/spatialReferenceUtils.js";import{StyleUpdateType as _}from"../engine/vectorTiles/enums.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 C}from"../engine/vectorTiles/VectorTileContainer.js";import{StyleLayerType as T}from"../engine/vectorTiles/style/StyleDefinition.js";import v from"../engine/vectorTiles/style/StyleRepository.js";import{LayerView2DMixin as R}from"./LayerView2D.js";import H from"./support/DebugOverlay.js";import w from"../tiling/TileInfoViewPOT.js";import S from"../tiling/TileQueue.js";import D from"../../layers/LayerView.js";let Q=class extends(R(D)){constructor(){super(...arguments),this._styleChanges=[],this._fetchQueue=null,this._parseQueue=null,this._tileHandlerPromise=null,this._isTileHandlerReady=!1,this._collisionOverlay=null,this.fading=!1,this._getCollidersMesh=e=>{const{pixelRatio:t}=e.state;let i=0;const s=[],r=[];for(const a of this._vectorTileContainer.children)if(a.symbols)for(const[e,l]of a.symbols)for(const a of l)for(const e of a.colliders){const l=(e.xScreen+e.dxScreen)*t,n=(e.yScreen+e.dyScreen)*t,o=e.width*t,h=e.height*t,u=a.unique.parts[e.partIndex].targetOpacity>.5;if(!u&&"all"!==this.layer.showCollisionBoxes)continue;const c=3,y=1,p=3,d=0,_=u?2:0,f=u?3:0,g=H.makeFlags(_,f);s.push(l,n,g,l+o,n,g,l,n+h,g,l+o,n+h,g),r.push(i+0,i+1,i+2,i+1,i+3,i+2),i+=4;const m=u?c:y,C=u?p:d,T=H.makeFlags(m,C);s.push(l,n,T,l+o,n,T,l,n+1,T,l+o,n+1,T),r.push(i+0,i+1,i+2,i+1,i+3,i+2),i+=4,s.push(l,n+h-1,T,l+o,n+h-1,T,l,n+h,T,l+o,n+h,T),r.push(i+0,i+1,i+2,i+1,i+3,i+2),i+=4,s.push(l,n,T,l+1,n,T,l,n+h,T,l+1,n+h,T),r.push(i+0,i+1,i+2,i+1,i+3,i+2),i+=4,s.push(l+o-1,n,T,l+o,n,T,l+o-1,n+h,T,l+o,n+h,T),r.push(i+0,i+1,i+2,i+1,i+3,i+2),i+=4}return{vertexData:new Int16Array(s),indexData:new Uint32Array(r)}},this._getCollidersColors=()=>[1,.5,0,1,1,0,0,1,0,1,.5,1,0,.5,0,1],this._getCollidersOpacities=()=>[.05,.01,.15,.2]}async hitTest(e,i){if(!this._tileHandlerPromise)return null;await this._tileHandlerPromise;const s=await this._vectorTileContainer.hitTest(i);if(!s||0===s.length)return null;const r=s[0]-1,a=this._styleRepository,l=a.getStyleLayerByUID(r);if(!l)return null;const n=a.getStyleLayerIndex(l.id);return[{type:"graphic",mapPoint:e,layer:this.layer,graphic:new t({attributes:{layerId:n,layerName:l.id,layerUID:r},layer:this.layer,sourceLayer:this.layer})}]}update(e){if(this._tileHandlerPromise&&this._isTileHandlerReady)return e.pixelRatio!==this._tileHandler.devicePixelRatio?(this._start(),void(this._tileHandler.devicePixelRatio=e.pixelRatio)):void(this._styleChanges.length>0?this._tileHandlerPromise=this._applyStyleChanges():(this._fetchQueue.pause(),this._parseQueue.pause(),this._fetchQueue.state=e.state,this._parseQueue.state=e.state,this._tileManager.update(e)||this.requestUpdate(),this._parseQueue.resume(),this._fetchQueue.resume()))}attach(){const{style:e}=this.layer.currentStyleInfo;this._styleRepository=new v(e),this._tileInfoView=new w(this.layer.tileInfo,this.layer.fullExtent),this._vectorTileContainer=new C(this._tileInfoView),this._tileHandler=new f(this.layer,this._styleRepository,window.devicePixelRatio||1),this.container.addChild(this._vectorTileContainer),this._start(),this.addAttachHandles([this._vectorTileContainer.on("fade-start",(()=>{this.fading=!0,this.notifyChange("updating"),this.requestUpdate()})),this._vectorTileContainer.on("fade-complete",(()=>{this._collisionOverlay?.requestRender(),this.fading=!1,this.notifyChange("updating"),this.requestUpdate()})),n((()=>this.layer.showCollisionBoxes),(e=>{"none"!==e?this._collisionOverlay||(this._collisionOverlay=new H({getMesh:this._getCollidersMesh,getColors:this._getCollidersColors,getOpacities:this._getCollidersOpacities}),this.container.addChild(this._collisionOverlay)):this._collisionOverlay&&(this.container.removeChild(this._collisionOverlay),this._collisionOverlay=null),this.container.requestRender()}),o),this.layer.on("paint-change",(e=>{if(e.isDataDriven)this._styleChanges.push({type:_.PAINTER_CHANGED,data:e}),this.notifyChange("updating"),this.requestUpdate();else{const t=this._styleRepository,i=t.getLayerById(e.layer);if(!i)return;const s=i.type===T.SYMBOL;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;const s=c(i.layout,e.layout);if(!r(s)){if(y(s,"visibility")&&1===L(s))return t.setLayoutProperties(e.layer,e.layout),i.type===T.SYMBOL&&this._vectorTileContainer.restartDeclutter(),void this._vectorTileContainer.requestRender();this._styleChanges.push({type:_.LAYOUT_CHANGED,data:e}),this.notifyChange("updating"),this.requestUpdate()}})),this.layer.on("style-layer-visibility-change",(e=>{const t=this._styleRepository,i=t.getLayerById(e.layer);i&&(t.setStyleLayerVisibility(e.layer,e.visibility),i.type===T.SYMBOL&&this._vectorTileContainer.restartDeclutter(),this._vectorTileContainer.requestRender())})),this.layer.on("style-layer-change",(e=>{this._styleChanges.push({type:_.LAYER_CHANGED,data:e}),this.notifyChange("updating"),this.requestUpdate()})),this.layer.on("delete-style-layer",(e=>{this._styleChanges.push({type:_.LAYER_REMOVED,data:e}),this.notifyChange("updating"),this.requestUpdate()})),this.layer.on("load-style",(()=>this._loadStyle())),this.layer.on("spriteSource-change",(e=>{this._newSpriteSource=e.spriteSource,this._styleChanges.push({type:_.SPRITES_CHANGED,data:null});const t=this._styleRepository.layers;for(const i of t)switch(i.type){case T.SYMBOL:i.getLayoutProperty("icon-image")&&this._styleChanges.push({type:_.LAYOUT_CHANGED,data:{layer:i.id,layout:i.layout}});break;case T.LINE:i.getPaintProperty("line-pattern")&&this._styleChanges.push({type:_.PAINTER_CHANGED,data:{layer:i.id,paint:i.paint,isDataDriven:i.isPainterDataDriven()}});break;case T.FILL:i.getLayoutProperty("fill-pattern")&&this._styleChanges.push({type:_.PAINTER_CHANGED,data:{layer:i.id,paint:i.paint,isDataDriven:i.isPainterDataDriven()}})}this.notifyChange("updating"),this.requestUpdate()}))])}detach(){this._stop(),this.container.removeAllChildren(),this._vectorTileContainer=a(this._vectorTileContainer),this._tileHandler=a(this._tileHandler)}moveStart(){this.requestUpdate()}viewChange(){this.requestUpdate()}moveEnd(){this._collisionOverlay&&this._vectorTileContainer.restartDeclutter(),this.requestUpdate()}supportsSpatialReference(e){return d(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&&t.layerDefinition&&(s&&s<i&&(e=!1),r&&r>i&&(e=!1))}return e}isUpdating(){const e=this._vectorTileContainer.children;return!this._isTileHandlerReady||!this._fetchQueue||!this._parseQueue||this._fetchQueue.updating||this._parseQueue.updating||e.length>0&&e.some((e=>e.invalidating))||this.fading}acquireTile(e){const t=this._createVectorTile(e);return this._tileHandlerPromise?.then((()=>{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(),this.notifyChange("updating")})).catch((e=>{this.notifyChange("updating"),l(e)||s.getLogger(this.declaredClass).error(e)}))})),t}releaseTile(e){const t=e.key.id;this._fetchQueue.abort(t),this._parseQueue.abort(t),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 S({tileInfoView:this._tileInfoView,process:(e,t)=>this._getTileData(e,t),concurrency:15}),this._parseQueue=new S({tileInfoView:this._tileInfoView,process:(e,t)=>this._parseTileData(e,t),concurrency:8}),this.requestUpdate(),this._isTileHandlerReady=!0}));this._tileHandler.spriteMosaic.then((e=>{this._vectorTileContainer.setStyleResources(e,this._tileHandler.glyphMosaic,this._styleRepository),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=a(this._fetchQueue),this._parseQueue=a(this._parseQueue),this._tileManager=a(this._tileManager),this._vectorTileContainer.removeAllChildren()}async _getTileData(e,t){const i=await this._tileHandler.fetchTileData(e,t);return this.notifyChange("updating"),i}async _parseTileData(e,t){return this._tileHandler.parseTileData(e,t)}async _applyStyleChanges(){this._isTileHandlerReady=!1,this._fetchQueue.pause(),this._parseQueue.pause(),this._fetchQueue.clear(),this._parseQueue.clear(),this._tileManager.clearCache();const e=this._styleChanges;try{await this._tileHandler.updateStyle(e)}catch(n){s.getLogger(this.declaredClass).error("error applying vector-tiles style update",n.message),this._fetchQueue.resume(),this._parseQueue.resume(),this._isTileHandlerReady=!0}const t=this._styleRepository,i=[];e.forEach((e=>{if(e.type!==_.LAYER_REMOVED)return;const s=e.data,r=t.getLayerById(s.layer);r&&i.push(r.uid)}));const r=[];let a;e.forEach((e=>{const i=e.type,s=e.data;switch(i){case _.PAINTER_CHANGED:t.setPaintProperties(s.layer,s.paint),a=s.layer;break;case _.LAYOUT_CHANGED:t.setLayoutProperties(s.layer,s.layout),a=s.layer;break;case _.LAYER_REMOVED:return void t.deleteStyleLayer(s.layer);case _.LAYER_CHANGED:t.setStyleLayer(s.layer,s.index),a=s.layer.id;break;case _.SPRITES_CHANGED:this._vectorTileContainer.setSpriteMosaic(this._tileHandler.setSpriteSource(this._newSpriteSource)),this._newSpriteSource=null,a=null}const l=t.getLayerById(a);l&&r.push(l.uid)}));const l=this._vectorTileContainer.children;if(i.length>0){this._vectorTileContainer.deleteStyleLayers(i);for(const e of l)e.deleteLayerData(i)}if(this._fetchQueue.resume(),this._parseQueue.resume(),r.length>0){const e=[];for(const t of l){const i=this._fetchQueue.push(t.key).then((e=>this._parseQueue.push({key:t.key,data:e,styleLayerUIDs:r}))).then((e=>t.setData(e)));e.push(i)}await Promise.all(e)}this._styleChanges=[],this._isTileHandlerReady=!0,this.notifyChange("updating"),this.requestUpdate()}async _loadStyle(){const{style:e}=this.layer.currentStyleInfo,t=i(e);this._isTileHandlerReady=!1,this._fetchQueue.pause(),this._parseQueue.pause(),this._fetchQueue.clear(),this._parseQueue.clear(),this.notifyChange("updating"),this._styleRepository=new v(t),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,t),await this._tileHandlerPromise}catch(a){if(!l(a))throw a}if(s.aborted)return this._fetchQueue.resume(),this._parseQueue.resume(),this._isTileHandlerReady=!0,this.notifyChange("updating"),void this.requestUpdate();const r=await this._tileHandler.spriteMosaic;this._vectorTileContainer.setStyleResources(r,this._tileHandler.glyphMosaic,this._styleRepository),this._fetchQueue.resume(),this._parseQueue.resume(),this._isTileHandlerReady=!0,this.notifyChange("updating"),this.requestUpdate()}_createVectorTile(e){const t=this._tileInfoView.getTileBounds(p(),e),i=this._tileInfoView.getTileResolution(e.level);return new m(e,i,t[0],t[3],512,512,this._styleRepository)}};function L(e){if(r(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([h()],Q.prototype,"_fetchQueue",void 0),e([h()],Q.prototype,"_parseQueue",void 0),e([h()],Q.prototype,"_isTileHandlerReady",void 0),e([h()],Q.prototype,"fading",void 0),Q=e([u("esri.views.2d.layers.VectorTileLayerView2D")],Q);const I=Q;export{I as default};