變更RESET按鈕位置

index.php

@@ -215,6 +215,15 @@ if (!isset($_SESSION['loggedin'])) {
 		.pdfobject-container {
 			height: 730px;
 		}
+
+		#topbar {
+			background: #fff;
+			padding: 10px;
+		}
+
+		#datatable-ajax_length {
+			width: 100%;
+		}
 	</style>
 
 	<script>
@@ -305,6 +314,7 @@ if (!isset($_SESSION['loggedin'])) {
 			geometryEngine,
 			Expand, GeoJsonLayer, PopupTemplate, Renderer, projection) => {
 			esriConfig.apiKey = token;
+			let activeWidget = null;
 			const webscene = new WebScene({
 				portalItem: {
 					id: "dea6580d8d4547df9915a822fe7f2b9d"
@@ -382,7 +392,7 @@ if (!isset($_SESSION['loggedin'])) {
 			);
 
 			//新增量測工具
-			var activeMeasureWidget = new DirectLineMeasurement3D({
+			/*var activeMeasureWidget = new DirectLineMeasurement3D({
 				view: view
 			});
 
@@ -404,7 +414,7 @@ if (!isset($_SESSION['loggedin'])) {
 				group: "top-left"
 			});
 
-			view.ui.add([pMeasureExpand, pMeasureExpand2], "top-left");
+			view.ui.add([pMeasureExpand, pMeasureExpand2], "top-left");*/
 
 
 			/*
@@ -423,6 +433,87 @@ if (!isset($_SESSION['loggedin'])) {
 				pMeasureExpand,
 				"top-left"
 			);*/
+			view.ui.add("topbar", "bottom-right");
+
+			document
+				.getElementById("distanceButton")
+				.addEventListener("click", (event) => {
+					setActiveWidget(null);
+					if (!event.target.classList.contains("active")) {
+						setActiveWidget("distance");
+					} else {
+						setActiveButton(null);
+					}
+				});
+
+			document
+				.getElementById("areaButton")
+				.addEventListener("click", (event) => {
+					setActiveWidget(null);
+					if (!event.target.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.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, "bottom-left");
+						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, "bottom-left");
+						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");
+				}
+			}
+
+
 			view.ui.add(
 				new Fullscreen({
 					view: view,
@@ -584,6 +675,7 @@ if (!isset($_SESSION['loggedin'])) {
 								<div id="folderPath" style="float: left;"></div>
 								<button id="reset" type="button" class="mb-xs mr-xs btn btn-default" style="float: right;"><i class="fa fa-reply"></i> 上一層</button>
 								<table style="width:99%;" class="table table-bordered table-striped" id="datatable-ajax">
+
 									<thead>
 										<tr>
 											<th id="SN">項次</th>
@@ -643,6 +735,11 @@ if (!isset($_SESSION['loggedin'])) {
 								<div id="arcgisTab" class="tab-pane active">
 									<div id="arcgis" class="panel-body" style="height: 730px;">
 										<div class="mapok" style="height:100%">
+											<div id="topbar" class="esri-component esri-widget">
+												<button id="distanceButton" class="action-button esri-icon-measure-line" type="button" title="Measure distance between two points"></button>
+												<button id="areaButton" class="action-button esri-icon-measure-area" type="button" title="Measure area"></button>
+												<button id="clear" class="action-button esri-icon-trash" title="Clear Measurements"></button>
+											</div>
 											<div id="viewDiv"></div>
 											<div id="measureExpendDiv"></div>
 											<div id="measureExpendDiv2"></div>

script/js/jstreeAJAX.js

@@ -14,17 +14,17 @@ $(document).ready(function () {
     var start = true;
     var folderPath = "";
     var fileNums = [];
-    var pdfPath = '';
-    PDFObject.embed("./assets/null.pdf" + path, "#pdfFile");
+    PDFObject.embed("./assets/null.pdf", "#pdfFile");
+
+    var table = $('#datatable-ajax').DataTable({
 
-    $('#datatable-ajax').dataTable({
         bProcessing: true,
         responsive: true,
         "pagingType": "full_numbers",
         "bLengthChange": true,
         "lengthMenu": [
             [7, 10, 25, -1],
-            ["最小", 10, 25, "全部"]
+            [7, 10, 25, "全部"]
         ],
         "searching": false,
         "pageLength": 7,
@@ -98,9 +98,9 @@ $(document).ready(function () {
 
             }
             start = false;
-        }
+        },
     });
-
+    $("#datatable-ajax_length").append($("#reset"))
     $.ajax({
             url: "./script/php/getTree.php",
             contentType: "application/json",
@@ -115,7 +115,7 @@ $(document).ready(function () {
             console.log(error);
         });
 
-    var table = $('#datatable-ajax').DataTable();
+    //var table = $('#datatable-ajax').DataTable();
     displayDetail(false);