查询要素图层 (空间查询)
展示通过空间查询获取要素图层中的要素数据。
要素图层包含存储在 GeoScene 中的大量要素。要访问要素的子集，可以执行 SQL 查询或空间查询，也可同时执行两者。查询结果返回的是要素属性、几何或每个记录的属性和几何。当希望仅访问托管数据的子集时，SQL 和空间查询非常有用。
在本教程中，我们将使用 Sketch 微件绘制要素，然后对要素图层执行空间查询。查询图层为 LA County Parcels 要素图层，包含 ±240 万个要素。空间查询使用草绘要素返回所有相交的宗地。
步骤
创建新 Pen
添加模块
在
require语句中，添加Sketch、GraphicsLayer和FeatureLayer模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Add line. Add line. Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // Add sketch widget const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); // Add sketch events to listen for and execute query sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // Reference query layer const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // Relationship operation to apply geometry: geometry, // The sketch feature geometry outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // Set symbol and popup results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
创建草绘微件
使用 Sketch 和 GraphicsLayer 类创建图形。图形将添加至地图中的图形图层中。事件处理程序将监听来自草绘微件的更改并相应地更新查询。
创建
graphicsLayerSketch并将其添加到map中。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //经度、纬度 zoom: 13 }); // 添加草绘微件 const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); // Add sketch events to listen for and execute query sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // Reference query layer const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // Relationship operation to apply geometry: geometry, // The sketch feature geometry outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // Set symbol and popup results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>创建
sketch微件并将layer属性设置为graphicsLayerSketch。将微件添加至view的右上角。Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // 添加草绘微件 const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // 自动选择 }); view.ui.add(sketch, "top-right"); // Add sketch events to listen for and execute query sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // Reference query layer const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // Relationship operation to apply geometry: geometry, // The sketch feature geometry outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // Set symbol and popup results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>创建一个事件侦听器，其将在每次绘制图形时更新。这将运行一个新查询。
Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // Add sketch widget const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); //添加草绘事件以监听并执行查询 sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // Reference query layer const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // Relationship operation to apply geometry: geometry, // The sketch feature geometry outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // Set symbol and popup results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>您应在视图右上角看到草绘微件。单击微件中的一个选项以在地图上绘制。
创建待查询的要素图层
使用 FeatureLayer 定义一个 LA County Parcels 要素图层以执行查询。由于您正在执行服务器端查询，因此不需要将要素图层添加到地图中。
创建
parcelLayer并设置url属性以访问要素服务中的要素图层。要素图层 url 要指定到服务的索引号。要确定索引号，请访问 LA County Parcels 要素服务。在此示例中，索引为
0。Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // Add sketch widget const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); // 添加草绘事件以监听并执行查询 sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // 引用查询图层 const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // Relationship operation to apply geometry: geometry, // The sketch feature geometry outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // Set symbol and popup results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
执行查询
定义 parcelQuery 并使用 FeatureLayer queryFeatures 方法执行查询。
定义一个
queryFeaturelayer函数，参数为geometry。定义一个parcelQuery对象。将spatialRelationship设置为intersects并使用草绘微件中的geometry。outFields属性设置为字段列表以限制返回的属性。最后，将returnGeometry设置为true以便显示要素几何。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // Add sketch widget const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); // Add sketch events to listen for and execute query sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // 引用查询图层 const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // 要应用的关系操作 geometry: geometry, // 草绘要素几何 outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // 要返回的属性 returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // Set symbol and popup results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>在
parcelLayer上使用parcelQuery作为参数调用queryFeatures方法。要查看返回的要素数，请将结果长度写入控制台。这将在下一步中更新。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // Add sketch widget const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); // Add sketch events to listen for and execute query sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // Reference query layer const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // 要应用的关系操作 geometry: geometry, // 草绘要素几何 outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // 要返回的属性 returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // Set symbol and popup results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>每次在地图上草绘图形时，change事件处理程序会更新调用
queryFeatureLayer函数。它将监听对图形所做的任何重整形或移动更改。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // Add sketch widget const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); // 添加草绘事件以监听并执行查询 sketch.on("update", (event) => { // 创建 if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // 当用户单击图形或草绘新图形时，将清除该图形 } // 更改 if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // Reference query layer const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // Relationship operation to apply geometry: geometry, // The sketch feature geometry outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // Set symbol and popup results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>使用微件以草绘图形。在左下角，单击控制台以查看查询返回的要素数。
显示要素
要显示查询所返回的宗地要素，可将其作为面图形添加至视图。添加图形之前，可定义符号和弹出窗口，以便在单击要素时，显示属性。
创建
displayResults函数。定义symbol和popupTemplate变量以样式化并显示面图形的弹出窗口。引用的属性与之前查询中所指定的outFields相匹配。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // Add sketch widget const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); // Add sketch events to listen for and execute query sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // Reference query layer const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // 要应用的关系操作 geometry: geometry, // 草绘要素几何 outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // 要返回的属性 returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // 显示要素 (图形) function displayResults(results) { // 创建蓝色面 const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // Set symbol and popup results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>将
symbol和popupTemplate赋给查询所返回的每个要素 。Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // Add sketch widget const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); // Add sketch events to listen for and execute query sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // Reference query layer const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // Relationship operation to apply geometry: geometry, // The sketch feature geometry outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // 设置符号和弹出窗口 results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>清除现有图形和弹出窗口，然后将新要素作为图形添加至
view。Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // Add sketch widget const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); // Add sketch events to listen for and execute query sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // Reference query layer const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // Relationship operation to apply geometry: geometry, // The sketch feature geometry outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // 设置符号和弹出窗口 results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // 清除显示 view.popup.close(); view.graphics.removeAll(); // 将要素添加至图形图层 view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>更新
queryFeaturelayer函数以调用displayResults函数。移除console.log。Remove line Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查询要素图层 (空间)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Sketch", "geoscene/layers/GraphicsLayer", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.03000], //Longitude, latitude zoom: 13 }); // Add sketch widget const graphicsLayerSketch = new GraphicsLayer(); map.add(graphicsLayerSketch); const sketch = new Sketch({ layer: graphicsLayerSketch, view: view, creationMode: "update" // Auto-select }); view.ui.add(sketch, "top-right"); // Add sketch events to listen for and execute query sketch.on("update", (event) => { // Create if (event.state === "start") { queryFeaturelayer(event.graphics[0].geometry); } if (event.state === "complete"){ graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one } // Change if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) { queryFeaturelayer(event.graphics[0].geometry); } }); // Reference query layer const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeaturelayer(geometry) { const parcelQuery = { spatialRelationship: "intersects", // Relationship operation to apply geometry: geometry, // The sketch feature geometry outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return returnGeometry: true }; parcelLayer.queryFeatures(parcelQuery) .then((results) => { console.log("Feature count: " + results.features.length) displayResults(results); }).catch((error) => { console.log(error); }); } // Show features (graphics) function displayResults(results) { // Create a blue polygon const symbol = { type: "simple-fill", color: [ 20, 130, 200, 0.5 ], outline: { color: "white", width: .5 }, }; const popupTemplate = { title: "Parcel {APN}", content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}" }; // Set symbol and popup results.features.map((feature) => { feature.symbol = symbol; feature.popupTemplate = popupTemplate; return feature; }); // Clear display view.popup.close(); view.graphics.removeAll(); // Add features to graphics layer view.graphics.addMany(results.features); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
运行应用程序
在 CodePen 中，运行代码以显示地图。
当您使用微件在地图上草绘要素时，将在要素图层上运行空间查询，并返回与草绘要素相交的所有宗地。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：
估计时间
10 分钟