當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS API Sample_Query Attachments 查询附件
生活随笔
收集整理的這篇文章主要介紹了
JS API Sample_Query Attachments 查询附件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本程序實現了在鼠標點擊區域范圍內搜索800米范圍內的那些帶有附件的要素，并把附件圖片顯示出來。有個別地方我沒有看懂，加了一些注釋放在下面供參考和以后研究。
我沒有看懂的主要是在：含有Object.keys(attachmentsByFeatureId) 的代碼段，確切的說還不是特別懂?Object.keys（）的用法。
<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /><title>Query Attachments | Sample | ArcGIS API for JavaScript 4.19</title><style>html,body {height: 100%;width: 100%;margin: 0;padding: 0;}#attachmentsDiv {height: 100%;width: 30%;float: left;padding: 20px;overflow: auto;min-width: 240px;}#viewDiv {height: 100%;max-width: 70%;}.queryImg {width: 175px;padding-right: 5px;}</style><link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css" /><script src="https://js.arcgis.com/4.19/"></script><script>require(["esri/Map","esri/views/MapView","esri/layers/FeatureLayer"], function(Map, MapView, FeatureLayer) {// get layer from online portalconst layer = new FeatureLayer({portalItem: {id: "d532e04739cd45e4964291a2a8875ef6"},outFields: ["*"]});// setup the mapconst map = new Map({basemap: "dark-gray-vector",layers: [layer]});const view = new MapView({container: "viewDiv",map: map,center: [-118.41, 34.08],zoom: 13,popup: {autoOpenEnabled: false}});let highlight;//定義highlight，高亮view.on("click", function(event) {clearMap();//清理地圖queryFeatures(event);//查詢入口，從這里開始查詢});function queryFeatures(screenPoint) {//參數屏幕點，就是距離左上角的像素值const point = view.toMap(screenPoint);//該函數接收屏幕點為參數，轉換為地圖上的點。// Query the for the object ids within 800m from where the user clicked//查詢用戶點擊處的800米范圍內的對象layer.queryObjectIds({//該函數的返回是一個符合條件的要素的ObjectIDs數組geometry: point,spatialRelationship: "intersects",distance: 800,units: "meters",returnGeometry: false,outFields: ["*"]}).then(function(objectIds) {//根據返回的這些objectIds，繼續做處理if (!objectIds.length) {//如果這個數組為空，那么if（）就為真，就調用showMessage();showMessage();就是顯示了一段話：There are no tree image/jpeg attachments located in your query areashowMessage();return;}// Highlight the query-area on the map//高亮這個地圖上的查詢區域（query-area）view.whenLayerView(layer).then(function(layerView){if (highlight) {//如果highlight有值，那么就調用remove 意思是如果有高亮的區域，那么就刪除掉，為新的高亮做準備highlight.remove();}//下面這句是高亮給定的objectIds的那些要素，返回一個handler給highlight變量。highlight = layerView.highlight(objectIds);//為highlight賦值，layerView.highlight(objectIds)這個函數的作用：高亮給定的要素{Highlights the given feature(s)}，//接收的參數是objectIds的單個值或者是個數組， 返回：一個handler，這個handler可以繼續調用remvoe（）來移除高亮//{Returns a highlight handler with a remove() method that can be called to remove the highlight.}});// Query the for the attachments from the object ids found//從找到的要素的ids中繼續查詢attachments，附件return layer.queryAttachments({ attachmentTypes: ["image/jpeg"],objectIds: objectIds});}).then(function(attachmentsByFeatureId) {if (!attachmentsByFeatureId) {//如果這個id為空，那么就返回去了，return；return;}//Object.keys(obj)：返回值：一個表示給定對象的所有可枚舉屬性的字符串數組，就是對一個xxx對象調用Object.key(xxx),那么我們得到了一個字符串數組，是這個對象的可枚舉屬性if (Object.keys(attachmentsByFeatureId).length === 0){//如果屬性的長度為0，那說明啥也沒有查到啊const infoP = document.createElement("p");//創建一個p元素，infoP.innerHTML = "<b>There are no tree image/jpeg attachments located in your query area.</b>";//p里面是一段文本：你查詢的面積里面就沒有jpeg附件。document.getElementById("queryResults").appendChild(infoP);//在結果div中，吧infop給加上，就是上面的那段話。}// Display the attachments 顯示這個附件console.log("I am the Id you want:"+attachmentsByFeatureId);Object.keys(attachmentsByFeatureId).forEach(function(objectId) {const attachments = attachmentsByFeatureId[objectId];attachments.forEach(function (attachment) {const image = document.createElement("img");//創建img，image.src = attachment.url;image.className = "queryImg";//分配css class為queryImgdocument.getElementById("queryResults").appendChild(image);});});}).catch(function(error) {showMessage();})}function showMessage(){clearMap();const infoP = document.createElement("p");infoP.innerHTML = "<b>There are no tree image/jpeg attachments located in your query area. Please click within the feature layer to get results.</b>";document.getElementById("queryResults").appendChild(infoP);}// Clear attachments from divfunction clearMap(){if (highlight) {highlight.remove();}const att = document.getElementById("queryResults");while(att.firstChild){att.removeChild(att.firstChild);}}});//下面一段是一個queryAttachments函數的說明，來自于幫助文檔。作為幫助理解的補充材料//featurelayer.queryAttachments(attachmentQuery, options){Promise<Object>}該函數查詢與要素相關聯的附件，//返回的是一個promoise，When resolved, returns an object containing AttachmentInfos grouped by the source feature objectIds.// ，當解析后，返回一個含有 AttachmentInfos 的對象，根據源要素的objectIds進行分組。/* 不懂的就看下面的例子代碼，我也還沒有搞懂。featureLayer.when(function () {// queryObjectIds for all features within the layerfeatureLayer.queryObjectIds().then(function (objectIds) {// Define parameters for querying attachments,定義參數// query features where objectIds are less than 735,查詢那些id小于735的要素// and only query jpeg attachments for these features.只查詢jpeg的圖片let attachmentQuery = {objectIds: objectIds,definitionExpression: "OBJECTID < 735",attachmentTypes: ["image/jpeg"]};// Only pass in one objectId for attachmentQuery.objectIds： 對于attachmentQuery.objectIds只傳入一個objectId// if the layer's capabilities.operations.supportsQueryAttachments is false 如果能力.操作.支持附件查詢為假，那就是不支持唄//featureLayer.queryAttachments(attachmentQuery).then(function (attachments)這句是做了附件查詢，輸入的是一個query。featureLayer.queryAttachments(attachmentQuery).then(function (attachments) {// Print out all returned attachment infos to the console.打印所有返回的附件信息到控制臺。attachmentQuery.objectIds.forEach(function (objectId) {if (attachments[objectId]) {let attachment = attachments[objectId];console.group("attachment for", objectId);attachment.forEach(function (item) {console.log("attachment id", item.id);console.log("content type", item.contentType);console.log("name", item.name);console.log("size", item.size);console.log("url", item.url);console.groupEnd();});}});}).catch(function (error) {console.log("attachment query error", error);})}); });*/</script></head><body><div id="attachmentsDiv" class="esri-widget"><h2>Trees Returned from Query</h2><p>Click somewhere in the map to query for images of trees located on a block within 800m of your desired location.</p><div id="queryResults"></div></div><div id="viewDiv"></div></body> </html>?
總結
以上是生活随笔為你收集整理的JS API Sample_Query Attachments 查询附件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 密码技术工具箱概述
- 下一篇： TensorLy-神经网络张量库