POST
|
Hi again Robert. Please open JSFIDDLE.NET (With Internet Explorer) and put this code and run. you will see Switch button is disappearing after first toggling to 3d, then back to 2d. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Switch view from 2D to 3D - 4.6</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #infoDiv { position: absolute; top: 15px; left: 60px; } </style> <!-- <link rel="stylesheet" href="css/jquery-ui.css"> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery-ui.js"></script> --> <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> <script src="https://js.arcgis.com/4.6/"></script> <script> require([ "esri/views/2d/draw/Draw", "esri/Map", "esri/views/MapView", "esri/views/SceneView", "esri/Graphic", "esri/geometry/Polygon", "esri/geometry/geometryEngine", "dojo/domReady!" ], function(Draw, Map, MapView, SceneView, Graphic, Polygon, geometryEngine) { var switchButton = document.getElementById("switch-btn"); var appConfig = { mapView: null, sceneView: null, activeView: null, container: "viewDiv" // use same container for views }; var map = new Map({ basemap: "streets", ground: "world-elevation", }); var initialViewParams = { map: map, zoom: 4, center: [15, 65], container: appConfig.container }; // create 3D view and and set active appConfig.sceneView = createView(initialViewParams, "3d"); appConfig.activeView = appConfig.sceneView; // create 2D view, won't initialize until container is set initialViewParams.container = null; appConfig.mapView = createView(initialViewParams, "2d"); // switch the view between 2D and 3D each time the button is clicked switchButton.addEventListener("click", function() { switchView(); }); activateWidgets(); // Switches the view from 2D to 3D and vice versa function switchView() { var is3D = appConfig.activeView.type === "3d"; // remove the reference to the container for the previous view appConfig.activeView.container = null; if (is3D) { // if the input view is a SceneView, set the viewpoint on the // mapView instance. Set the container on the mapView and flag // it as the active view appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone(); appConfig.mapView.container = appConfig.container; appConfig.activeView = appConfig.mapView; switchButton.value = "3D"; } else { appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone(); appConfig.sceneView.container = appConfig.container; appConfig.activeView = appConfig.sceneView; switchButton.value = "2D"; } activateWidgets(); } // convenience function for creating a 2D or 3D view function createView(params, type) { var view; var is2D = type === "2d"; if (is2D) { view = new MapView(params); return view; } else { view = new SceneView(params); } return view; } function activateWidgets() { //alert("activating switch button"); appConfig.activeView.then(function(){ appConfig.activeView.ui.add(switchButton, "top-left"); appConfig.activeView.ui.remove("attribution"); }); } }); </script> </head> <body> <input class="esri-component esri-widget-button esri-widget esri-interactive" type="button" id="switch-btn" value="2D"> <div id="viewDiv"></div> </body> </html>
... View more
02-28-2018
01:00 AM
|
0
|
0
|
482
|
POST
|
Thanks for code Robert but i'm still getting error message when switch between 2d and 3D. appConfig.activeView.ui.add(switchButton, "top-left"); Error : TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
... View more
02-27-2018
09:51 PM
|
0
|
0
|
482
|
POST
|
Chrome But Internet Explorer has same error. Both of latest versions
... View more
02-27-2018
11:14 AM
|
0
|
4
|
482
|
POST
|
Hi Robert. Same issue here. This is my sample code. Alerting before activating switch button widget. Please check. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Switch view from 2D to 3D - 4.6</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #infoDiv { position: absolute; top: 15px; left: 60px; } </style> <link rel="stylesheet" href="css/jquery-ui.css"> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery-ui.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> <script src="https://js.arcgis.com/4.6/"></script> <script> require([ "esri/views/2d/draw/Draw", "esri/Map", "esri/views/MapView", "esri/views/SceneView", "esri/Graphic", "esri/geometry/Polygon", "esri/geometry/geometryEngine", "dojo/domReady!" ], function(Draw, Map, MapView, SceneView, Graphic, Polygon, geometryEngine) { var switchButton = document.getElementById("switch-btn"); var appConfig = { mapView: null, sceneView: null, activeView: null, container: "viewDiv" // use same container for views }; var map = new Map({ basemap: "streets", ground: "world-elevation", }); var initialViewParams = { map: map, zoom: 4, center: [15, 65], container: appConfig.container }; // create 3D view and and set active appConfig.sceneView = createView(initialViewParams, "3d"); appConfig.activeView = appConfig.sceneView; // create 2D view, won't initialize until container is set initialViewParams.container = null; appConfig.mapView = createView(initialViewParams, "2d"); // switch the view between 2D and 3D each time the button is clicked switchButton.addEventListener("click", function() { switchView(); }); activateWidgets(); // Switches the view from 2D to 3D and vice versa function switchView() { var is3D = appConfig.activeView.type === "3d"; // remove the reference to the container for the previous view appConfig.activeView.container = null; if (is3D) { // if the input view is a SceneView, set the viewpoint on the // mapView instance. Set the container on the mapView and flag // it as the active view appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone(); appConfig.mapView.container = appConfig.container; appConfig.activeView = appConfig.mapView; switchButton.value = "3D"; } else { appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone(); appConfig.sceneView.container = appConfig.container; appConfig.activeView = appConfig.sceneView; switchButton.value = "2D"; } activateWidgets(); } // convenience function for creating a 2D or 3D view function createView(params, type) { var view; var is2D = type === "2d"; if (is2D) { view = new MapView(params); return view; } else { view = new SceneView(params); } return view; } function activateWidgets(){ alert("activating switch button"); appConfig.activeView.ui.add("switch-btn", "top-left"); appConfig.activeView.ui.remove("attribution"); } }); </script> </head> <body> <input class="esri-component esri-widget-button esri-widget esri-interactive" type="button" id="switch-btn" value="2D"> <div id="viewDiv"></div> </body> </html>
... View more
02-27-2018
10:47 AM
|
0
|
6
|
482
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:25 AM
|