当我在地图上悬停/点击任何状态时,我找到了一种显示高亮状态的方法。以下是完整的代码。
<!DOCTYPE html> <html> <head> <title>Hosted Feature layer</title> <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> </head> <body> <!-- Main content --> <section class="content pp-dashboard"> <!-- Small boxes (Stat box) --> <div class="row"> <div class="col-lg-12"> <div id="viewDiv" style="height: 800px;"></div> <div id="searching"> <input type="text" name="name" id="searchInput"> <input type="submit" name="Search" id="searchBtn"> </div> </div> </div> <!-- /.row --> </section> <script src="https://js.arcgis.com/4.8/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Legend", "esri/layers/GraphicsLayer", "esri/Graphic", "dojo/on", "dojo/dom", "dojo/domReady!" ], function( Map, MapView, FeatureLayer, Legend, GraphicsLayer, Graphic, on, dom ) { let highlight; let tempGraphicsLayer = new GraphicsLayer(); var filteredGeometries; var searchInput = dom.byId("searchInput"); var povLayer = new FeatureLayer({ url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_States_Generalized/FeatureServer/0", outFields: ["*"] }); var map = new Map({ basemap: "dark-gray", layers: [povLayer] }); var view = new MapView({ container: "viewDiv", map: map, center: [-99.244309, 40.004476], zoom: 5 }); view.on("pointer-move", eventHandler); view.on("pointer-down", eventHandler); view.on("click", eventHandler); function eventHandler(event) { // the hitTest() checks to see if any graphics in the view // intersect the given screen x, y coordinates view.hitTest(event) .then((res) => { console.log("length",res.results); if (res.results.length < 1) { return } view.graphics.removeAll(); // create a new selected graphic let selectedGraphic = new Graphic({ geometry: res.results[0].graphic.geometry, attributes: res.results[0].graphic.attributes, symbol: { type: "simple-fill", // style: "polygon", color: "orange", // size: "12px", // pixels outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 0], width: 2 // points } } }); // add the selected graphic to the view // this graphic corresponds to the row that was clicked view.graphics.add(selectedGraphic); }); } var legend = new Legend({ view: view, layerInfos: [{ layer: povLayer, title: "Poverty in the southeast U.S." }] }); view.ui.add(legend, "top-right"); }); </script> </body> </html>
我想这对任何人都有帮助。