新增電子地圖 及 縮放大小

index.php

@@ -290,7 +290,7 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 			}).done(function(data) {
 				token = data;
 				//data = JSON.parse(data);
-				
+
 			}).error(function(e) {
 				console.log(e);
 			});
@@ -334,7 +334,8 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 			"esri/layers/GeoJSONLayer",
 			"esri/PopupTemplate",
 			"esri/renderers/Renderer",
-			"esri/geometry/projection"
+			"esri/geometry/projection",
+			"esri/layers/WMTSLayer"
 		], (esriConfig, Map, WebScene, SceneView, urlUtils, OAuthInfo, esriId,
 			Legend,
 			Home,
@@ -362,19 +363,9 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 			LocatorSearchSource,
 			UniqueValueRenderer,
 			geometryEngine,
-			Expand, GeoJsonLayer, PopupTemplate, Renderer, projection) => {
+			Expand, GeoJsonLayer, PopupTemplate, Renderer, projection, WMTSLayer) => {
 			esriConfig.apiKey = token;
 			let activeWidget = null;
-			// esriConfig.request.corsEnabledServers.push("https://maps.nlsc.gov.tw:443");
-			// esriConfig.request.trustedServers.push("https://maps.nlsc.gov.tw:443");
-			// esriConfig.request.corsEnabledServers.push("https://maps.nlsc.gov.tw/S_Maps/wmts/1.0.0/");
-			// esriConfig.request.trustedServers.push("https://maps.nlsc.gov.tw/S_Maps/wmts/1.0.0/");
-			/*esriConfig.request.corsEnabledServers.push("http://127.0.0.1:8800");
-			esriConfig.request.trustedServers.push("http://127.0.0.1:8800");
-			urlUtils.addProxyRule({
-				urlPrefix: 'maps.nlsc.gov.tw',
-				proxyUrl: '',
-			});*/
 			const webscene = new WebScene({
 				portalItem: {
 					id: "6b4e83dd94c4410db4bece82262b2573"
@@ -394,8 +385,44 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 				elevationInfo: "on-the-ground",
 				visible: true
 			});
+			featureLayer.listMode = "hide";
 			webscene.add(featureLayer);
 
+			const wmts1 = new WMTSLayer({
+				url: "https://wmts.nlsc.gov.tw/wmts",
+				activeLayer: {
+					id: "EMAP96"
+				},
+				visible: false
+			});
+			const wmts2 = new WMTSLayer({
+				url: "https://wmts.nlsc.gov.tw/wmts",
+				activeLayer: {
+					id: "PHOTO2"
+				},
+				visible: false
+			});
+			const wmts3 = new WMTSLayer({
+				url: "https://wmts.nlsc.gov.tw/wmts",
+				activeLayer: {
+					id: "EMAP2"
+				},
+				visible: true
+
+			});
+
+
+
+			const mapGroupLayer = new GroupLayer({
+				title: "電子地圖",
+				visible: true,
+				visibilityMode: "exclusive",
+				layers: [wmts1, wmts2, wmts3],
+				opacity: 0.75
+			});
+
+			webscene.add(mapGroupLayer);
+
 			const view = new SceneView({
 				container: "viewDiv",
 				map: webscene,
@@ -416,27 +443,33 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 
 			view.ui.empty("top-left");
 			//view.ui.empty("manual");
-			view.ui.add(
-				new Expand({
-					view: view,
-					content: new BasemapGallery({
-						view: view
-					}),
-					autoCollapse: true,
-					group: "top-left"
-				}),
-				"top-left"
-			);
+			// view.ui.add(
+			// 	new Expand({
+			// 		view: view,
+			// 		content: new BasemapGallery({
+			// 			view: view
+			// 		}),
+			// 		autoCollapse: true,
+			// 		group: "top-left"
+			// 	}),
+			// 	"top-left"
+			// );
+
+
 
 			var layerList = new LayerList({
-				view: view
+				view: view,
+				listItemCreatedFunction: defineActions
 			});
+
 			view.ui.add(
 				new Expand({
 					view: view,
 					content: layerList,
 					autoCollapse: true,
-					group: "top-left"
+					group: "top-left",
+					expandIconClass: "esri-icon-basemap",
+					expandTooltip: "選擇底圖"
 				}),
 				"top-left"
 			);
@@ -538,6 +571,42 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 				}
 			}
 
+			function defineActions(event) {
+				// The event object contains an item property.
+				// is is a ListItem referencing the associated layer
+				// and other properties. You can control the visibility of the
+				// item, its title, and actions using this object.
+
+				const item = event.item;
+
+				// Adds a slider for updating a group layer's opacity
+				if (item.title === "電子地圖") {
+					const slider = new Slider({
+						min: 0,
+						max: 1,
+						precision: 2,
+						values: [1],
+						visibleElements: {
+							labels: true,
+							rangeLabels: true
+						}
+					});
+
+					item.panel = {
+						content: slider,
+						className: "esri-icon-sliders-horizontal",
+						title: "修改地圖透明度"
+					}
+
+					slider.on("thumb-drag", (event) => {
+						const {
+							value
+						} = event;
+						item.layer.opacity = value;
+					})
+				}
+			}
+
 			function setActiveButton(selectedButton) {
 				// focus the view to activate keyboard shortcuts for sketching
 				view.focus();
@@ -588,13 +657,31 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 
 			function zoomToLayer(layer) {
 				return layer.queryExtent().then((response) => {
+					console.log(response.extent.height);
+					console.log(response.extent.width);
+					var zoom = (response.extent.height > response.extent.width ? response.extent.height : response.extent.width) / 474;
+					console.log(view.zoom);
+
 					view.goTo({
 						target: response.extent,
 						tilt: 0,
 						heading: 0,
-					}).catch((error) => {
+						//zoom: zoom
+					}/*, {
+						speedFactor: 6,
+						easing: "linear"
+					}*/).catch((error) => {
 						console.log("error");
 						console.error(error);
+					}).then(() => {
+						console.log(view.zoom);
+						view.goTo({
+							center: view.center,
+							zoom: view.zoom - 1
+						}, {
+							speedFactor: 30,
+							easing: "linear"
+						});
 					});
 				});
 			}
@@ -605,6 +692,7 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 					featureLayer.definitionExpression = "計畫編號 = '" + project_id + "'";
 					console.log(featureLayer)
 					zoomToLayer(featureLayer);
+
 				}
 				/*else{
 									type = data.node.text;
@@ -614,6 +702,26 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 								}*/
 			});
 			view.when(function() {
+				layerList.on("trigger-action", (event) => {
+
+					// Capture the action id.
+					const id = event.action.id;
+					if (id === "increase-opacity") {
+						// if the increase-opacity action is triggered, then
+						// increase the opacity of the GroupLayer by 0.25
+
+						if (mapGroupLayer.opacity < 1) {
+							mapGroupLayer.opacity += 0.25;
+						}
+					} else if (id === "decrease-opacity") {
+						// if the decrease-opacity action is triggered, then
+						// decrease the opacity of the GroupLayer by 0.25
+
+						if (mapGroupLayer.opacity > 0) {
+							mapGroupLayer.opacity -= 0.25;
+						}
+					}
+				});
 
 			});