AnsweredAssumed Answered

SceneView Crashing Sometimes

Question asked by waringt on Feb 19, 2019
Latest reply on Apr 2, 2020 by jaydeep.mistry

Greetings, 

 

I've written a react application that requires a SceneView.  About every 20th refresh the application maxes out my memory and crashes. I can write the whole application with a MapView instead and everything is fine. I also get an error each time I load the SceneView:

 

[esri.core.Accessor] Accessor#set Assigning an instance of 'esri.views.ui.DefaultUI' which is not a subclass of 'esri.views.ui.3d.DefaultUI3D'

 

Does this error have anythign to do with the memory being maxed out every so often? 

 

The code I'm working with is : 

import React, { Component} from 'react'
import EsriLoaderReact from 'esri-loader-react'
import MapOverlayPanel from '../../molecules/MapOverlayPanel/MapOverlayPanel'

import './ESRIScene.css'
class ESRIScene extends Component {
  constructor(props){
    super(props)
    this.state = {
        SceneView: null
        , searchResultGL:null
    }
    this.loadMap = this.loadMap.bind(this);
  }
  loadMap = ({loadedModules: [WebScene, SceneView, Locate, GraphicsLayer, DefaultUI], containerNode}) => {
    const self = this
   

    let map = new WebScene({
        portalItem: { // autocasts as new PortalItem()
            id: "a4d990eaeea64f62809e74f0d83a4ee2"
        }
    })
    new SceneView({
      container: containerNode
      ,id:'sv'
      , map: map
      , ui: new DefaultUI()
      , camera: {
          position: {
            x:  -117.185087,
            y: 32.715736,
            z: 300,
            spatialReference: {
              wkid: 4326
            }
          },
          heading: 90,
          tilt: 77.5
      }
    })
    .when(function(view){
      self.setState({SceneView: view})
      view.ui.padding = { top: 96, left: 21, right: 21, bottom: 0 }
      if (window.matchMedia("(min-width: 770px)").matches) {
        view.ui.components=["zoom", "navigation-toggle", "compass"];
      }
      view.on('click', function(e){
        console.log('thi click has arrived: ' + JSON.stringify(e.mapPoint));
      })
      let searchResultGL = new GraphicsLayer()
      self.setState({searchResultGL:searchResultGL});
      view.map.add(searchResultGL)
    })
  }
 
  render() {

    const options = {
      url: 'https://js.arcgis.com/4.10/'
    };
   
    return (
      <div className="ESRIScene">
        <EsriLoaderReact
          options={options}
          modulesToLoad={['esri/WebScene', 'esri/views/SceneView', 'esri/widgets/Locate', 'esri/layers/GraphicsLayer', 'esri/views/ui/DefaultUI']}   
          onReady={this.loadMap}
        />
        <MapOverlayPanel
          ref ='mapOverlay'
          sceneView={this.state.SceneView}
          searchResultGL={this.state.searchResultGL}
          resultPinDragable={true}
        />
      </div>
    );
  }
}

export default ESRIScene;

Any words of wisdom will be greatly appreciated. 

 

Thanks, 


Tyler 

Outcomes