Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
#1 Mon 19 September 2022 10:47
- LABASTIE Marie-Amélie
- Juste Inscrit !
- Date d'inscription: 14 Mar 2019
- Messages: 3
API JS ArcGIS Calculer une surface net
Calculer une surface nette*
Bonjour,
Je cherche à compléter un widget calculant la distance et la surface avec API JS et ArcGIS Experience Builder en y ajoutant un outil permettant d'obtenir la surface/volume net(te) c'est-à-dire qui calculera le bâti 3D d'une couche moins la surface dessinée résultant du calcule de la surface. Enfaite j'aimerai avoir le même résultat que le calcul du volume de remblais/déblais présent dans Ortho Maker (image jointe).
Avez-vous des pistes svp ?
Je vous mets mon code :
Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Outil Mesurer : Vue 3D</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#topbar {
background: #fff;
padding: 10px;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #d3d3d3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/widgets/DirectLineMeasurement3D",
"esri/widgets/AreaMeasurement3D",
"esri/config",
"esri/geometry/geometryEngine",
"esri/core/promiseUtils"
], (WebScene, SceneView, DirectLineMeasurement3D, AreaMeasurement3D, esriConfig, promiseUtils, geometryEngine) => {
let activeWidget = null;
// load a webscene
esriConfig.portalUrl ="https://arcgis.societedugrandparis.fr/portal/";
const scene = new WebScene({
portalItem: { // autocasts as new PortalItem()
id: "86f994f15d6e405d8697f30359892512" // ID of the WebScene on the on-premise portal
}
});
// create the scene view
const view = new SceneView({
container: "viewDiv",
map: scene
});
// Find a layer with title "US Counties"
const foundLayer = scene.allLayers.find(function(layer) {
return layer.title === "L14";
});
// add the toolbar for the measurement widgets
view.ui.add("topbar", "top-right");
document.getElementById("distanceButton").addEventListener("click", (event) => {
setActiveWidget(null);
if (!event.target.classList.contains("active")) {
setActiveWidget("distance");
} else {
setActiveButton(null);
}
});
var distanceResultat = document.getElementById("areaButton").addEventListener("click", (event) => {
setActiveWidget(null);
if (!event.target.classList.contains("active")) {
setActiveWidget("area");
} else {
setActiveButton(null);
}
});
const diff = geometryEngine.difference(foundLayer, distanceResultat);
document.getElementById("espacedispoButton").addEventListener("click", (event) => {
setActiveWidget(null);
if (!event.target.classList.contains("active")) {
setActiveWidget("espacedispo");
} else {
setActiveButton(null);
}
});
function setActiveWidget(type) {
switch (type) {
case "distance":
activeWidget = new DirectLineMeasurement3D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.start().catch((error) => {
if (promiseUtils.isAbortError(error)) {
return; // don't display abort errors
}
throw error; // throw other errors since they are of interest
});
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement3D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.start().catch((error) => {
if (promiseUtils.isAbortError(error)) {
return; // don't display abort errors
}
throw error; // throw other errors since they are of interest
});
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("areaButton"));
break;
case null:
if (activeWidget) {
view.ui.remove(activeWidget);
activeWidget.destroy();
activeWidget = null;
}
break;
}
}
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
const elements = document.getElementsByClassName("active");
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="topbar">
<button
class="action-button esri-icon-measure-line"
id="distanceButton"
type="button"
title="Measure distance between two points"
></button>
<button class="action-button esri-icon-measure-area" id="areaButton" type="button" title="Measure area"></button>
<button
class="action-button esri-icon-espacedispo"
id="espacedispoButton"
type="button"
title="Measure space avaible"
></button>
</div>
</body>
</html>Dernière modification par LABASTIE Marie-Amélie (Mon 19 September 2022 10:50)
Hors ligne
#2 Mon 19 September 2022 10:52
- LABASTIE Marie-Amélie
- Juste Inscrit !
- Date d'inscription: 14 Mar 2019
- Messages: 3
Re: API JS ArcGIS Calculer une surface net
Voici le code qui fonctionne sans mes tests
Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Outil Mesurer : Vue 3D</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#topbar {
background: #fff;
padding: 10px;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #d3d3d3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/widgets/DirectLineMeasurement3D",
"esri/widgets/AreaMeasurement3D",
"esri/config",
"esri/geometry/geometryEngine",
"esri/core/promiseUtils"
], (WebScene, SceneView, DirectLineMeasurement3D, AreaMeasurement3D, esriConfig, promiseUtils, geometryEngine) => {
let activeWidget = null;
// load a webscene
esriConfig.portalUrl ="https://arcgis.societedugrandparis.fr/portal/";
const scene = new WebScene({
portalItem: { // autocasts as new PortalItem()
id: "86f994f15d6e405d8697f30359892512" // ID of the WebScene on the on-premise portal
}
});
// create the scene view
const view = new SceneView({
container: "viewDiv",
map: scene
});
// add the toolbar for the measurement widgets
view.ui.add("topbar", "top-right");
document.getElementById("distanceButton").addEventListener("click", (event) => {
setActiveWidget(null);
if (!event.target.classList.contains("active")) {
setActiveWidget("distance");
} else {
setActiveButton(null);
}
});
var distanceResultat = document.getElementById("areaButton").addEventListener("click", (event) => {
setActiveWidget(null);
if (!event.target.classList.contains("active")) {
setActiveWidget("area");
} else {
setActiveButton(null);
}
});
document.getElementById("espacedispoButton").addEventListener("click", (event) => {
setActiveWidget(null);
if (!event.target.classList.contains("active")) {
setActiveWidget("espacedispo");
} else {
setActiveButton(null);
}
});
function setActiveWidget(type) {
switch (type) {
case "distance":
activeWidget = new DirectLineMeasurement3D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.start().catch((error) => {
if (promiseUtils.isAbortError(error)) {
return; // don't display abort errors
}
throw error; // throw other errors since they are of interest
});
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement3D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.start().catch((error) => {
if (promiseUtils.isAbortError(error)) {
return; // don't display abort errors
}
throw error; // throw other errors since they are of interest
});
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("areaButton"));
break;
case null:
if (activeWidget) {
view.ui.remove(activeWidget);
activeWidget.destroy();
activeWidget = null;
}
break;
}
}
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
const elements = document.getElementsByClassName("active");
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="topbar">
<button
class="action-button esri-icon-measure-line"
id="distanceButton"
type="button"
title="Measure distance between two points"
></button>
<button class="action-button esri-icon-measure-area" id="areaButton" type="button" title="Measure area"></button>
<button
class="action-button esri-icon-espacedispo"
id="espacedispoButton"
type="button"
title="Measure space avaible"
></button>
</div>
</body>
</html>Hors ligne
