上本地數據的效果圖
上代碼：有個很簡單的方法，只需要把自己的ID加進去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Measurement in 3D - 4.15</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://esriwh.giscloud.com/arcgis_js_api/library/4.15/esri/themes/light/main.css" />
<script src="https://esriwh.giscloud.com/arcgis_js_api/library/4.15/init.js"></script>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/widgets/DirectLineMeasurement3D",
"esri/widgets/AreaMeasurement3D"
], function (
WebScene,
SceneView,
DirectLineMeasurement3D,
AreaMeasurement3D
) {
var activeWidget = null;
// 加載本地webscene
var webscene = new WebScene({
portalItem: {
id: "ca8ec44c45564d6d9fa7a1209cc66b7e"
}
});
// 創建三維場景視圖 scene view
var view = new SceneView({
container: "viewDiv",
map: webscene
});
// 爲測量微件添加 toolbar
view.ui.add("topbar", "top-right");
//測量距離
document
.getElementById("distanceButton")
.addEventListener("click", function () {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("distance");
} else {
setActiveButton(null);
}
});
//測量面積
document
.getElementById("areaButton")
.addEventListener("click", function () {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("area");
} else {
setActiveButton(null);
}
});
function setActiveWidget(type) {
switch (type) {
case "distance":
activeWidget = new DirectLineMeasurement3D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement3D({
view: view
});
// 新測量按鈕
activeWidget.viewModel.newMeasurement();
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();
var elements = document.getElementsByClassName("active");
for (var 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="測長度"></button>
<button class="action-button esri-icon-measure-area" id="areaButton" type="button"
title="測面積"></button>
</div>
</body>
</html>