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 查询附件相关推荐

HTML + CSS + JS 利用邮编查询 API 实现邮编查询工具
引言邮政编码是地址信息的重要组成部分,可以帮助快递公司.物流公司等对地址进行快速.准确的识别和派送.因此,邮编查询工具应用在许多业务场景中都有广泛的应用,例如:电商平台.物流公司.金融机构等.通过使 ...
html高德地图调用,插件的使用-入门-教程-地图 JS API | 高德地图API
JS API 提供了众多的插件功能,这些功能不会主动随着 JSAPI 主体资源下发,需要引入之后才能使用这些插件的功能.这些功能包括:服务类,如:POI搜索 PlaceSearch.输入提示 Auto ...
微信小程序连接百度地图API实现天气查询
微信小程序连接百度地图API实现天气查询一.获取百度地图开放平台天气查询API 二.添加百度天气查询域名三.微信小程序代码一.获取百度地图开放平台天气查询API 进入百度地图开放平台.(没有账号 ...
【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文地址为: [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址 ...
Web3.js API 中文文档
Web3.js API 中文文档 http://web3.tryblockchain.org/Web3.js-api-refrence.html web3对象提供了所有方法. 示例: //初始化过程 ...
ajax跨域练习-第三方api全国天气查询
最近学习了ajax跨域,看到教程视频通过调用第三方的api来进行查询数据,于是我也自己尝试下调用当做一个小练习.过程还是不难的,第三方api的教程也很清晰明了,很容易就能调用了. demo截图: 不要 ...
鸿蒙星空的太白星 | WebView给元服务调用JS API指明方向
漆黑深夜夜凉如水,繁星盛开于无垠苍穹.清风徐来,一片薄云,夜空顿然失色,有些阴霾.天空中最亮的星,太白星,在薄云中依然闪耀,如同海上迷雾中的灯塔,为迷失方向的船只指明方向. 元服务是华为提供的一种面向 ...
玩转百度即用API(2)——身份证查询
2019独角兽企业重金招聘Python工程师标准>>> 第二个即用API,身份证查询示例代码: #-*- coding: utf-8 -*- #version:0.1 #note: ...
Node.js API参考文档（目录）
Node.js v11.5.0 API参考文档 Node.js®是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时. 关于文档用法和示例断言测试稳定性:2 - 稳 ...
高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...

JS API Sample_Query Attachments 查询附件

JS API Sample_Query Attachments 查询附件相关推荐

最新文章

热门文章