查询要素图层 (SQL)
了解如何执行 SQL 查询以访问要素图层中的面要素。
要素图层包含存储在 GeoScene 中的大量要素。要访问要素的子集，可以执行 SQL 查询或空间查询，也可同时执行两者。查询结果返回的是要素的属性和几何。如果希望仅访问托管数据的子集，SQL 和空间查询非常有用。
在本教程中，我们将执行服务器端 SQL 查询以返回 LA County Parcel 要素图层中的要素子集。查询结果会在地图上显示，其中该要素图层包含的要素数超过了 240 万个。
步骤
创建新 Pen
添加模块
在
require语句中，添加FeatureLayer模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // Listen for changes select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.error); }); } 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}" }; // Assign styles and popup to features 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>
创建 SQL 选择器
GeoScene 要素图层支持标准 SQL 查询语句。该例子中将 LA County Parcel 要素图层的 SQL 查询列表以HTML下拉列表形式展示。
定义SQL 查询的
parcelType数组。将该数组中的第一个查询条件赋给whereClause变量。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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL 查询数组 const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // Listen for changes select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.error); }); } 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}" }; // Assign styles and popup to features 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>创建
select元素，并将每个 SQL 查询条件设置为option元素。将一些基本样式添加至元素。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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL 查询数组 const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // 添加 SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // Listen for changes select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.error); }); } 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}" }; // Assign styles and popup to features 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>将
select元素添加至view的top-right处。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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // 添加 SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // Listen for changes select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.error); }); } 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}" }; // Assign styles and popup to features 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>添加一个事件监听器以监听
select元素的更改。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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // 监听更改 select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.error); }); } 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}" }; // Assign styles and popup to features 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>验证是否已创建
select元素。
创建待查询的要素图层
使用 FeatureLayer 定义一个 LA County Parcel 要素图层。由于现在执行的是服务器端查询，因此无需将要素图层添加到地图中。
创建
parcelLayer并设置url属性为要访问的要素服务中的要素图层。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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // 监听更改 select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // 获取查询图层并设置 const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.error); }); } 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}" }; // Assign styles and popup to features 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>
执行查询
使用 queryFeatures 方法对要素图层执行 SQL 查询。调用该方法时，Query 将自动转换。
定义一个
queryFeatureLayer函数，参数为extent。定义一个parcelQuery对象，将其where属性设置为whereClause。将spatialProperty属性设置为仅返回与geometry相交的要素，这样可以查询出extent内满足条件的要素。设置其outFields属性，设置后查询结果仅返回要素的这些属性。最后，将returnGeometry设置为true，以便可以显示要素。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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // Listen for changes select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // 获取查询图层并设置查询 const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // 通过选择元素进 spatialRelationship: "intersects", // 要应用的关系操作 geometry: extent, // 限制至地图的可见范围内 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.error); }); } 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}" }; // Assign styles and popup to features 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. 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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // Listen for changes select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // 通过选择元素进行设置 spatialRelationship: "intersects", // 要应用的关系操作 geometry: extent, // 限制至地图的可见范围内 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.error); }); } 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}" }; // Assign styles and popup to features 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>选择不同的查询条件时，通过select的change事件 更新查询条件并执行
queryFeatureLayer函数。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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // 监听更改 select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.error); }); } 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}" }; // Assign styles and popup to features 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>在右上角，单击运行。从选择器中选择一个 SQL 查询。在左下角，单击控制台以查看要从每个查询返回的要素数。
显示要素
要显示从 SQL 查询返回的要素，可将其作为面图形添加至地图视图。另外还可定义弹出窗口，在单击要素时，显示属性。
将
results作为参数定义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. 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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // Listen for changes select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.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}" }; // Assign styles and popup to features 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. 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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // Listen for changes select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.error); }); } 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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // Listen for changes select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.error); }); } 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<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: 查询要素图层 (SQL)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }; .geoscene-ui-corner .geoscene-component.geoscene-widget--panel { width: 200px !important; }; </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/layers/FeatureLayer", ], function(geosceneConfig,Map, MapView, FeatureLayer) { 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 }); // SQL query array const parcelLayerSQL = ["选择SQL查询条件...", "UseType = 'Residential'", "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"]; let whereClause = parcelLayerSQL[0]; // Add SQL UI const select = document.createElement("select",""); select.setAttribute("class", "geoscene-widget geoscene-select"); select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em"); parcelLayerSQL.forEach(function(query){ let option = document.createElement("option"); option.innerHTML = query; option.value = query; select.appendChild(option); }); view.ui.add(select, "top-right"); // Listen for changes select.addEventListener('change', (event) => { whereClause = event.target.value; queryFeatureLayer(view.extent); }); // Get query layer and set up query const parcelLayer = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", }); function queryFeatureLayer(extent) { const parcelQuery = { where: whereClause, // Set by select element spatialRelationship: "intersects", // Relationship operation to apply geometry: extent, // Restricted to visible extent of the map 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.error); }); } 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}" }; // Assign styles and popup to features 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 中，运行代码以显示地图。
显示地图时，您应能够从选择器中选择 SQL 查询。结果会以面状图形添加到地图中。SQL 查询是应用在地图的可见范围内的查询。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：
解决方案
估计时间
15 分钟