搜索並放大到某個位置
[英]Search and Zoom in to a location
問題描述
我正在圖形層上繪制一些文本圖形，現在我需要在 map 上提供一個選項來搜索特定文本並導航到該位置並放大。
有人可以指導我使用這種方法嗎？
這是示例代碼，如果我搜索 560001，則 map 應該放大到該位置。
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.22/"></script> <script> require([ "esri/WebMap", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/symbols/TextSymbol" ], function (WebMap, MapView, Graphic, GraphicsLayer, TextSymbol) { const webmap = new WebMap({ portalItem: { id: "36f72c8a71b542399ca09e10c5aa55f4" } }); const view = new MapView({ container: "viewDiv", map: webmap, center: [-37.731338217717074, 175.22263172713014], zoom: 10 }); this.objectTypeList = [ { Location: '560001', latitude: -37.731338217717074, longitude: 175.22263172713014 }, { Location: '560002', latitude: -37.487705856583744, longitude: 175.09324140306873 }, { Location: '560003', latitude: -37.505917118655056, longitude: 175.12036900524583 }, { Location: '560005', latitude: -37.67287982024181, longitude: 175.23882277753953 }, { Location: '560005', latitude: -37.67310492511848, longitude: 175.23890380457217 } ]; var graphicsLayer = new GraphicsLayer(); webmap.layers.add(graphicsLayer); this.objectTypeList.forEach(item => { var point = { type: "point", longitude: item.longitude, latitude: item.latitude }; var textSymbol = new TextSymbol({ color: "#BB0000", haloColor: "black", haloSize: "1px", text: `${item.Location}`, font: { size: 12, family: "Josefin Slab", weight: "bold" } }); var pointGraphic = new Graphic({ geometry: point, symbol: textSymbol }); graphicsLayer.add(pointGraphic); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
1 個解決方案
解決方案1
0 2022-03-11 12:30:04
您只需要使用符號文本屬性在GraphicLayer的圖形中找到選定的（以某種方式）位置。
現在，您正在使用地理（經度、緯度）來創建幾何圖形，但您的 map 在另一個空間參考系統中。 為了縮放到幾何圖形，您必須投影它們。
看看我給你舉的例子，我用一個簡單的 select 來選擇圖形，我使用客戶端投影方法，另一種選擇是服務器端投影。
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.22/"></script> <script> require([ "esri/WebMap", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/symbols/TextSymbol", "esri/geometry/SpatialReference", "esri/geometry/projection" ], function (WebMap, MapView, Graphic, GraphicsLayer, TextSymbol, SpatialReference, projection) { const webmap = new WebMap({ portalItem: { id: "36f72c8a71b542399ca09e10c5aa55f4" } }); const view = new MapView({ container: "viewDiv", map: webmap, center: [-37.731338217717074, 175.22263172713014], zoom: 10 }); this.objectTypeList = [ { Location: '560001', latitude: -37.731338217717074, longitude: 175.22263172713014 }, { Location: '560002', latitude: -37.487705856583744, longitude: 175.09324140306873 }, { Location: '560003', latitude: -37.505917118655056, longitude: 175.12036900524583 }, { Location: '560004', latitude: -37.67287982024181, longitude: 175.23882277753953 }, { Location: '560005', latitude: -37.67310492511848, longitude: 175.23890380457217 } ]; var graphicsLayer = new GraphicsLayer(); webmap.layers.add(graphicsLayer); this.objectTypeList.forEach(item => { var point = { type: "point", longitude: item.longitude, latitude: item.latitude }; var textSymbol = new TextSymbol({ color: "#BB0000", haloColor: "black", haloSize: "1px", text: `${item.Location}`, font: { size: 12, family: "Josefin Slab", weight: "bold" } }); var pointGraphic = new Graphic({ geometry: point, symbol: textSymbol }); graphicsLayer.add(pointGraphic); }); projection.load().then(function() { const outSR = new SpatialReference({wkid: 2193}); const dic = {}; graphicsLayer.graphics.forEach(g => dic[g.symbol.text] = projection.project(g.geometry, outSR)); view.when(function(){ const locationZoomButton = document.getElementById("locationZoomButton"); locationZoomButton.addEventListener("click", function(){ const locationSelect = document.getElementById("locationSelect"); const locationText = locationSelect.value; if (dic.hasOwnProperty(locationText)) { view.goTo(dic[locationText]); } }); }); }); }); </script> </head> <body> <div> <select id="locationSelect"> <option value="560001">560001</option> <option value="560002">560002</option> <option value="560003">560003</option> <option value="560004">560004</option> <option value="560005">560005</option> </select> <button id="locationZoomButton"> Zoom </button> </div> <div id="viewDiv"></div> </body> </html>
esri javascript縮放至放置
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.