esri-map-view/dist/components/esri-scene-view2.js

Display an Esri map view as a web component.

import{proxyCustomElement as t,HTMLElement as s,createEvent as i,getAssetPath as e,h,transformTag as a}from"@stencil/core/internal/client";import{p as n,e as r,i as o,a as l,b as c,s as p,f as w,c as d,d as m}from"./utils.js";const u=t(class extends s{watchAPIKeyHandler(t,s){t!=s&&(this.esriConfig.apiKey=t)}watchBasemapHandler(t,s){const i=this;i.viewChangePending||i.mapChangePending?i.mapLoadError.emit(new Error("Cannot change the map while a viewpoint change is in process.")):t!=s&&(i.mapChangePending=!0,i.updateEsriScene(t).then((()=>{i.basemap=t,i.mapChangePending=!1,i.mapLoaded.emit("loaded"),i.layers&&i.addLayers(i.layers)})).catch((t=>{i.mapChangePending=!1,i.mapLoadError.emit(t.toString())})))}watchWebSceneHandler(t,s){this.viewChangePending||this.mapChangePending?this.mapLoadError.emit(new Error("Cannot change the map while a viewpoint change is in process.")):t!=s&&(this.mapChangePending=!0,this.webscene=t,this.updateEsriWebScene(t).then((()=>{console.log("web scene change mapLoaded, new web scene should be showing"),this.esriSceneView&&this.esriWebScene&&(this.esriSceneView.map=this.esriWebScene),this.mapChangePending=!1,this.mapLoaded.emit("loaded"),this.layers&&this.addLayers(this.layers)})).catch((t=>{console.log(`web scene change, Map loading failed ${t.toString()}`),this.mapChangePending=!1,this.mapLoadError.emit(t.toString())})))}watchViewPointHandler(t,s){const i=this;if(i.viewChangePending||i.mapChangePending)i.mapLoadError.emit(new Error("Cannot change the viewpoint while a map change is in process."));else if(t!=s)if(i.parsedViewpoint=!1,i.viewpoint=t,i.verifyViewpoint()){if(null==i.esriSceneView)return;i.viewChangePending=!0,i.esriSceneView.goTo({center:[i.longitude,i.latitude],zoom:i.levelOfDetail}).then((function(){i.viewChangePending=!1,i.addGraphics()})).catch((function(){i.viewChangePending=!1,i.viewpoint=s,i.verifyViewpoint()}))}else i.viewpoint=s,i.verifyViewpoint()}watchCameraPositionHandler(t,s){const i=this;if(t!=s)if(i.cameraposition=t,i.verifyViewpoint()){if(null==i.esriSceneView)return;i.viewChangePending=!0,i.esriSceneView.goTo({center:[i.longitude,i.latitude],zoom:i.levelOfDetail}).then((function(){i.viewChangePending=!1})).catch((function(){i.viewChangePending=!1,i.cameraposition=s,i.verifyViewpoint()}))}else i.cameraposition=s,i.verifyViewpoint()}watchLayersHandler(t,s){t!=s&&(this.layers=t,this.addLayers(t))}watchSearchHandler(t,s){t!=s&&(this.removeSearchWidget(),this.search=t,this.verifySearch()&&this.createSearchWidget(this.search))}watchSymbolHandler(t,s){t!=s&&(this.symbol=t,this.addGraphics())}watchSymbolOffsetHandler(t,s){t!=s&&(this.symboloffset=t,this.parsedOffset=n(t),this.addGraphics())}watchPopupTitleHandler(t,s){t!=s&&(this.popuptitle=t,this.addGraphics())}watchPopupInfoHandler(t,s){t!=s&&(this.popupinfo=t,this.addGraphics())}watchUIHandler(t,s){t!=s&&this.constrainUI(t,!0)}watchMinMaxAltHandler(t,s){t!=s&&(this.minmaxalt=t,this.verifyMinMaxAltitude()||(this.minmaxalt=s,this.verifyMinMaxAltitude()))}constructor(t){super(),!1!==t&&this.__registerHost(),this.mapLoaded=i(this,"mapLoaded",7),this.mapLoadError=i(this,"mapLoadError",7),this.ArcGISJavaScriptVersion="4.34",this.assetPath=e("./assets/"),this.sceneViewWidgets=["zoom","compass","navigation-toggle"],this.esriMap=null,this.esriWebScene=null,this.esriSceneView=null,this.symbolGraphic=null,this.searchWidget=null,this.longitude=0,this.latitude=0,this.levelOfDetail=2,this.minAltitude=0,this.maxAltitude=2e7,this.parsedViewpoint=!1,this.cameraSettings=null,this.defaultBasemap="arcgis-imagery-standard",this.viewChangePending=!1,this.mapChangePending=!1,this.esriMapOptions={url:`https://js.arcgis.com/${this.ArcGISJavaScriptVersion}/`,css:!0},this.apikey="YOUR_API_KEY",this.basemap="arcgis/imagery/standard",this.webscene="",this.viewpoint="",this.cameraposition="",this.layers="",this.search="",this.symbol="",this.symboloffset="",this.popuptitle="",this.popupinfo="",this.ui="",this.minmaxalt="",this.verifyProps(),r.setDefaultOptions(this.esriMapOptions),r.loadCss(`${this.esriMapOptions.url}/esri/css/main.css`),this.setAuthentication().then((()=>{this.createEsriScene().then((()=>{this.mapLoaded.emit("map-created")})).catch((t=>{console.log(`Map loading failed ${t.toString()}`),this.mapLoadError.emit(t.toString())}))})).catch((t=>{console.log(`Authentication failed ${t.toString()}`),this.mapLoadError.emit(t.toString())}))}componentDidLoad(){this.createEsriSceneView().then((()=>{this.mapLoaded.emit("view-created"),this.symbol&&this.addGraphics()}))}setAuthentication(){return new Promise(((t,s)=>{r.loadModules(["esri/config"]).then((([s])=>{this.esriConfig=s,this.apikey?this.esriConfig.apiKey=this.apikey:this.esriConfig.request.useIdentity=!0,t()})).catch((t=>{s(t)}))}))}async createEsriScene(){return new Promise(((t,s)=>{o(this.webscene)?this.updateEsriWebScene(this.webscene).then((()=>{t()})).catch((t=>{s(t)})):this.updateEsriScene(this.basemap).then((()=>{t()})).catch((t=>{s(t)}))}))}async updateEsriWebScene(t){return new Promise(((s,i)=>{r.loadModules(["esri/WebScene"]).then((([i])=>{this.esriWebScene=new i({portalItem:{id:t}}),s()})).catch((t=>{i(t)}))}))}async updateEsriScene(t){return new Promise(((s,i)=>{o(t)?r.loadModules(["esri/Map","esri/Basemap","esri/layers/VectorTileLayer"]).then((([i,e,h])=>{const a=new e({baseLayers:[new h({portalItem:{id:t}})]});this.esriMap?this.esriMap.basemap=a:this.esriMap=new i({basemap:a}),s()})).catch((t=>{i(t)})):r.loadModules(["esri/Map","esri/Basemap"]).then((([i,e])=>{const h=new e({style:{id:t,language:"en"}});this.esriMap?this.esriMap.basemap=h:this.esriMap=new i({basemap:h,ground:"world-elevation"}),s()})).catch((t=>{i(t)}))}))}async createEsriSceneView(){const[t]=await r.loadModules(["esri/views/SceneView"]),s=this.hostElement.querySelector("div");!this.webscene||this.cameraSettings||this.parsedViewpoint?this.cameraSettings?null==this.esriSceneView?this.esriSceneView=new t({container:s,map:this.esriMap||this.esriWebScene,camera:{position:{x:this.cameraSettings.x,y:this.cameraSettings.y,z:this.cameraSettings.z},heading:this.cameraSettings.heading,tilt:this.cameraSettings.tilt}}):this.esriSceneView.map=this.esriMap||this.esriWebScene:null==this.esriSceneView?this.esriSceneView=new t({container:s,zoom:this.levelOfDetail,center:[this.longitude,this.latitude],map:this.esriMap||this.esriWebScene}):this.esriSceneView.map=this.esriMap||this.esriWebScene:null==this.esriSceneView?this.esriSceneView=new t({container:s,map:this.esriWebScene}):this.esriSceneView.map=this.esriWebScene,this.esriSceneView&&(this.constrainUI(this.ui,!0),this.layers&&this.addLayers(this.layers),l(this.search)&&"off"!=this.search&&this.createSearchWidget(this.search))}addLayers(t){const s=t.split(",");for(let t=s.length;t>=0;t--){const i=s[t];o(i)||c(i)||s.splice(t,1)}s.length>0&&r.loadModules(["esri/layers/FeatureLayer","esri/layers/Layer","esri/portal/PortalItem"]).then((([t,i,e])=>{this.esriMap.layers.removeAll(),s.forEach((s=>{if(o(s)){const t=new e({id:s});i.fromPortalItem({portalItem:t}).then((t=>{this.esriMap.layers.add(t)})).catch((t=>{console.log(`Layer ${s} loading failed ${t.toString()}`)}))}else if(c(s)){const i=new t({url:s});i&&this.esriMap.layers.add(i)}}))}))}async createSearchWidget(t){const[s]=await r.loadModules(["esri/widgets/Search"]),i=new s({view:this.esriSceneView});this.esriSceneView.ui.add(i,{position:t,index:0}),this.searchWidget=i}async removeSearchWidget(){this.searchWidget&&(this.esriSceneView.ui.remove(this.searchWidget),this.searchWidget=null)}async addGraphics(){this.esriSceneView&&(0===this.symbol.indexOf("pin:")?this.showPin(this.symbol.substring(4)):this.symbol.length>0&&this.showSymbol(this.symbol))}updateGraphicSymbol(t){null!=this.symbolGraphic&&this.esriSceneView.graphics.remove(this.symbolGraphic),this.symbolGraphic=t,this.esriSceneView.graphics.add(t)}async showSymbol(t){const s=this.parsedOffset.x.toString(),i=this.parsedOffset.y.toString();let e;e=null==t.match(/https?:\/\//)?this.assetPath+t+".png":t;const[h,a,n]=await r.loadModules(["esri/symbols/PictureMarkerSymbol","esri/Graphic","esri/geometry/Point"],this.esriMapOptions),o=new a({geometry:new n({longitude:this.longitude,latitude:this.latitude}),symbol:new h({url:e,width:"64px",height:"64px",xoffset:s,yoffset:i}),popupTemplate:{title:this.popuptitle,content:this.popupinfo}});this.updateGraphicSymbol(o)}async showPin(t){const[s,i,e]=await r.loadModules(["esri/symbols/TextSymbol","esri/Graphic","esri/geometry/Point"]);let h=this.parsedOffset.x,a=this.parsedOffset.y;const n=new i({geometry:new e({longitude:this.longitude,latitude:this.latitude}),symbol:new s({color:t,haloColor:"black",haloSize:"2px",text:"",font:{size:30,family:"CalciteWebCoreIcons"},xoffset:h,yoffset:a}),popupTemplate:{title:this.popuptitle,content:this.popupinfo}});this.updateGraphicSymbol(n)}render(){return h("div",{key:"b7cfdfd6ae36cc201e6ca8a9d3ae2237743ef98e",class:"esri-scene-view"})}constrainUI(t,s){let i;return p(t)?s||(this.esriSceneView.ui.add(this.sceneViewWidgets),this.esriSceneView.constraints={},i=!1):(this.esriSceneView.ui.remove(this.sceneViewWidgets),this.esriSceneView.constraints={altitude:{min:this.minAltitude,max:this.maxAltitude}},i=!0),i}verifySceneProps(){return(this.webscene&&!o(this.webscene)||!c(this.webscene))&&(this.webscene=null),this.basemap||this.webscene||(this.basemap=this.defaultBasemap),!(!this.webscene&&!this.basemap)}verifyViewpoint(){if(this.cameraposition)this.cameraSettings=w(this.cameraposition),this.longitude=this.cameraSettings.x,this.latitude=this.cameraSettings.y;else if(this.viewpoint||this.webscene||(this.viewpoint="0,0,2"),this.viewpoint){const t=d(this.viewpoint);this.longitude=t.longitude,this.latitude=t.latitude,this.levelOfDetail=t.levelOfDetail,this.parsedViewpoint=!0}return!0}verifySearch(){let t=!0;return this.search=this.search.toLocaleLowerCase(),this.search&&!l(this.search)?(this.search=null,t=!1):"off"==this.search&&(this.search=null),t}verifyMinMaxAltitude(){const t=m(this.minmaxalt,0,2e7);return this.minAltitude=t.min,this.maxAltitude=t.max,!0}verifyProps(){let t=!0;return t=this.verifySceneProps(),t=this.verifyViewpoint(),t=this.verifySearch(),t=this.verifyMinMaxAltitude(),this.parsedOffset=n(this.symboloffset),t}static get assetsDirs(){return["assets"]}get hostElement(){return this}static get watchers(){return{apikey:[{watchAPIKeyHandler:0}],basemap:[{watchBasemapHandler:0}],webscene:[{watchWebSceneHandler:0}],viewpoint:[{watchViewPointHandler:0}],cameraPosition:[{watchCameraPositionHandler:0}],layers:[{watchLayersHandler:0}],search:[{watchSearchHandler:0}],symbol:[{watchSymbolHandler:0}],symboloffset:[{watchSymbolOffsetHandler:0}],popuptitle:[{watchPopupTitleHandler:0}],popupinfo:[{watchPopupInfoHandler:0}],ui:[{watchUIHandler:0}],minmaxalt:[{watchMinMaxAltHandler:0}]}}static get style(){return".esri-scene-view{height:100%;width:100%;padding:0;margin:0}"}},[0,"esri-scene-view",{apikey:[1537],basemap:[1537],webscene:[1537],viewpoint:[1537],cameraposition:[1537],layers:[1537],search:[1537],symbol:[1537],symboloffset:[1537],popuptitle:[1537],popupinfo:[1537],ui:[1537],minmaxalt:[1537]},void 0,{apikey:[{watchAPIKeyHandler:0}],basemap:[{watchBasemapHandler:0}],webscene:[{watchWebSceneHandler:0}],viewpoint:[{watchViewPointHandler:0}],cameraPosition:[{watchCameraPositionHandler:0}],layers:[{watchLayersHandler:0}],search:[{watchSearchHandler:0}],symbol:[{watchSymbolHandler:0}],symboloffset:[{watchSymbolOffsetHandler:0}],popuptitle:[{watchPopupTitleHandler:0}],popupinfo:[{watchPopupInfoHandler:0}],ui:[{watchUIHandler:0}],minmaxalt:[{watchMinMaxAltHandler:0}]}]);function y(){"undefined"!=typeof customElements&&["esri-scene-view"].forEach((t=>{"esri-scene-view"===t&&(customElements.get(a(t))||customElements.define(a(t),u))}))}export{u as E,y as d}