Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
dev:viewer:sdk:examples_js:addviewwithoptions [2020/03/30 13:40] nathalie created |
dev:viewer:sdk:examples_js:addviewwithoptions [2023/10/04 12:42] pieter |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Example | + | ====== Example: Using addView |
+ | |||
+ | This example demonstrates adding one individual view. | ||
The preset longitude/ | The preset longitude/ | ||
Line 5: | Line 7: | ||
< | < | ||
- | <head> | + | <script> |
- | <script src=" | + | let exampleUrl |
- | </head> | + | </ |
+ | |||
+ | <link rel=" | ||
+ | integrity=" | ||
+ | crossorigin=" | ||
- | <span style="display: flex; flex-direction: | + | <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js" |
- | <span id=" | + | |
- | </span> | + | |
- | <span style=" | + | |
- | <label for=" | + | |
- | <input id=" | + | |
- | <label for=" | + | |
- | <input id=" | + | |
- | <label for=" | + | |
- | <select id=" | + | |
- | <option value=" | + | |
- | <option value=" | + | |
- | </select> | + | |
- | <label for="clear"> | + | |
- | < | + | |
- | <label for=" | + | |
- | <input id=" | + | |
- | <label for=" | + | |
- | <input id="tilt" type=" | + | |
- | < | + | |
- | <input id=" | + | |
- | <label for=" | + | |
- | <input id=" | + | |
- | <label for=" | + | |
- | <input id=" | + | |
- | </ | + | |
- | </span> | + | |
- | | + | <span id=" |
+ | <br /> | ||
+ | <br /> | ||
+ | < | ||
+ | <span id="showsource"></ | ||
- | /** | + | < |
- | * Example: | + | |
- | | + | |
- | | + | |
- | var viewer; | + | let toggleShowSource = () => { |
+ | let element = document.getElementById(" | ||
+ | element.style.display = element.style.display == ' | ||
+ | } | ||
- | var AMap = orbitgt.mapping3d.sdk.viewer.AMap; | + | fetch(exampleUrl) |
- | | + | |
- | | + | .then(text |
- | var Coordinate | + | |
- | function handleFocus(event) | + | try { |
- | let lon = parseFloat(document.getElementById("lon").value); | + | // add example in iframe |
- | let lat = parseFloat(document.getElementById(" | + | |
- | let position | + | frame.style.border |
- | let renderMode = document.getElementById(" | + | frame.style.overflow = ' |
- | let clear = document.getElementById(" | + | |
- | let pan = parseFloat(document.getElementById(" | + | |
- | let tilt = parseFloat(document.getElementById(" | + | frame.srcdoc |
- | let fovValue | + | document.getElementById(" |
- | let fovDrive = document.getElementById(" | + | |
- | let fov = fovDrive ? " | + | |
- | if (isNaN(fov)) fov = undefined; | + | |
- | let options = new AMap(); | + | |
- | options.set(Constants.STARTUP_PAN, | + | |
- | options.set(Constants.STARTUP_TILT, | + | |
- | options.set(" | + | |
- | viewer.addViewWithOptions(position, | + | // add ' |
- | (result)=>console.log("View added: | + | let pre = document.createElement(" |
- | (error)=>console.error("View add failed: | + | pre.classList.add(" |
- | | + | |
- | } | + | pre.textContent |
+ | document.getElementById("showsource").style.display = ' | ||
+ | | ||
+ | document.getElementById("showsource").appendChild(pre); | ||
- | | + | |
- | * Called when something changes to the viewer state. | + | hljs.highlightBlock(pre); |
- | */ | + | |
- | function handleAppStateChanged(state) { | + | |
- | // Save state somewhere... | + | |
- | window.localStorage.setItem(" | + | |
- | } | + | |
- | /** | + | } catch (error) { console.error(error); } |
- | * Called when the viewer component is ready for interaction. | + | |
- | */ | + | |
- | function handleReady() { | + | |
- | viewer.onAppStateChanged.add(handleAppStateChanged); | + | |
- | document.getElementById(" | + | |
- | | + | |
- | | + | |
- | * Called when the page is full loaded. | + | |
- | */ | + | |
- | function handleDOMReady() { | + | |
- | var options = new AMap(); | + | |
- | options.set(Constants.STARTUP_APP_STATE, | + | |
- | // Create viewer | + | |
- | var appElement = document.getElementById(" | + | |
- | viewer = new SDKViewer(" | + | |
- | viewer.setSize(1000, | + | |
- | viewer.isReady.then(handleReady); | + | |
- | } | + | |
- | | + | </script> |
- | document.addEventListener(" | + | |
- | </ | ||
</ | </ |
Last modified:: 2023/10/04 12:42