arcgis for js官方demo之FeatureTable - related records

it2025-07-29 12

提示：代码为arcgis api for js官方实例代码，涉及到的内容有FeatureLayer、FeatureTable、Popup

文章目录

前言一、官方示例代码二、分析总结

前言

在学习了arcgis api for js3.x的一些入门博客教程之后，感觉对arcgis api for js的内容还不够熟练以及深入，但是又找不到好的提高方式，此时硬着头皮选择不易读懂的官方demo来学习，目的是学习而已，里面的东西并不是理解透彻了，所以希望在阅读的读者能有自己的理解并加以讨论，也是我学习和提高方式。

一、官方示例代码

里面有一些我自己写的注释

代码如下：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>FeatureTable - related records</title>      <link rel="stylesheet" href="https://js.arcgis.com/3.34/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css"> <script src="https://js.arcgis.com/3.34/"></script> <style> html, body, #map{ width:100%; height:100%; margin:0; padding:0; } </style> <script> require([ "esri/layers/FeatureLayer", "esri/dijit/FeatureTable", "esri/tasks/query", "esri/geometry/Extent", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", "esri/map", "esri/dijit/Popup", "esri/dijit/PopupTemplate", "dojo/dom-construct", "dojo/dom", "dojo/number", "dojo/parser", "dojo/ready", "dojo/on", "dojo/_base/lang", "dijit/registry", "dijit/form/Button", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/form/TextBox" ], function ( FeatureLayer, FeatureTable, Query, Extent, SimpleFillSymbol, SimpleLineSymbol, Color, Map, Popup, PopupTemplate, domConstruct, dom, dojoNum, parser, ready, on,lang, registry, Button, ContentPane, BorderContainer, TextBox ) { parser.parse(); //相当于页面一加载就要触发的事件 ready(function(){ var popupOptions = { marginLeft: "200",//弹窗最大化的外边距 marginTop: "20" }; // create a popup to replace the map's info window //创建了一个popup（弹窗）来代替了infowindow var popup = new Popup(popupOptions, domConstruct.create("div")); var map = new Map("map",{ basemap: "topo", infoWindow: popup,//弹窗 extent: new Extent({//初始化范围（注意这里的xy不是经纬度，center里面的才是经纬度） xmax: -13178092.546668783, xmin: -13180901.607458338, ymax: 4038066.907666304, ymin: 4036294.524072895, "spatialReference":{"wkid":102100,"latestWkid":3857}//空间参考是webmercartro }) }); //地图加载后调用loadTable函数 map.on("load", loadTable); function loadTable(){ // create a popup template for Bevery Hills // Trees by block layer //创建一个弹窗模板PopupTemplate /* PopupTemplate类扩展了esri/InfoTemplate，并为定义布局提供了支持，它可以包含以下组件：标题、说明、媒体（图表和图像）、显示附件、这些组件的布局与中的弹窗体验相同 */ var popupTemplate = new PopupTemplate({ "title": "Beverly Hills Trees By Block",//弹窗的标题 "fieldInfos": [{//字段信息 "fieldName": "Point_Count", "label": "Count of Points", "format": { "places": 0, "digitSeparator": true } }, { "fieldName": "relationships/0/Point_Count_COMMON", "label": "Sum of species tree count", "format": { "places": 0, "digitSeparator": true }, "statisticType": "sum" }, { "fieldName": "relationships/0/COMMON", "label": "Common Name" }, { "fieldName": "BLOCKCE10", "label": "Block" }], //描述，绑定了数据 "description": "There are {Point_Count} trees within census block {BLOCKCE10}", "showAttachments": false,//不显示附件 "mediaInfos": [{//媒体信息 "title": "Count By Type", "type": "columnchart",//柱状图 "caption": "", "value": { "theme": "GreySkies", "fields": ["relationships/0/Point_Count_COMMON"], "normalizeField": null, "tooltipField": "relationships/0/COMMON"//工具提示字段 } }] }); var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",{ mode: FeatureLayer.MODE_ONDEMAND, infoTemplate: popupTemplate, outFields: ["*"], //set the definition expression //只要这些TRACTCE10 = '700902'的数据 definitionExpression: "TRACTCE10 = '700902'", visible: true, id: "fLayer" }); // apply the selection symbol for the layer //设置选中要素的高亮样式 var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0, 0.35]), 1), new Color([255, 0, 0, 0.35])); myFeatureLayer.setSelectionSymbol(selectionSymbol); // listen to featurelayer click event to handle selection // from layer to the table. // when user clicks on a feature on the map, the corresponding // record will be selected in the table. //监听事件，当图层中要素被选中，对应的表中也要是选择状态 myFeatureLayer.on("click", function(evt) { var idProperty = myFeatureLayer.objectIdField; var feature, featureId, query; if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) { feature = evt.graphic;//获取到当前点击的要素 featureId = feature.attributes[idProperty];//获取到当前点击的要素的Join_ID（主键）的值 console.log(idProperty,featureId); query = new Query(); query.returnGeometry = false; query.objectIds = [featureId];//要查询的图层/表中要素的对象id，用逗号分隔的列表 // query.where = idProperty + "=" + "'" + featureId + "'"; query.where = "1=1"; console.log(query.where, query.objectIds); myFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW); } }); map.addLayer(myFeatureLayer); // create new FeatureTable and set its properties //创建一个featureTable并设置属性 var myFeatureTable = new FeatureTable({ featureLayer : myFeatureLayer, map : map, syncSelection: true, showRelatedRecords: true, showAttachments: true, fieldInfos: [ { name: 'AnalysisArea', alias: 'Area SQ/KM', editable: false, format: { template: "${value}", places: 3 // 数据保留3为小数 // digitSeparator: true // default is true } } ], // outfields outFields: ["TRACTCE10", "BLOCKCE10", "GEOID", "NAME", "MTFCC", "ALAND", "AnalysisArea", "Point_Count", "Join_ID"], }, 'myTableNode'); myFeatureTable.startup(); // listen to row-click event // to hide visible popups //事件监听 myFeatureTable.on("row-select", function(evt){ if (map.infoWindow.isShowing){ map.infoWindow.hide(); } }); // listen to show-attachments event //监听显示附件事件 myFeatureTable.on("show-attachments", function(evt){ console.log("show-attachments event - ", evt); }); // listen to show-related-records event //监听显示记录事件 myFeatureTable.on("show-related-records", function(evt){ console.log("show-related-records event - ", evt); }); } }); }); </script> </head> <body class="claro esri"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:60%"> <div id="map"></div> </div> <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:40%"> <div id="myTableNode"></div> </div> </div> </body> </html>

二、分析

Popup的使用步骤：

创建一个Popup对象，两个参数 options：可以设置弹窗的一些样式如最大化后的外边距marginLeft srcNodeRef：HTML元素的引用或者id var popup = new Popup(popupOptions, domConstruct.create("div")); 在map中使用： var map = new Map("map", { basemap: "topo", infoWindow: popup,//弹窗 extent: new Extent({//初始化范围（注意这里的xy不是经纬度，center里面的才是经纬度） xmax: -13178092.546668783, xmin: -13180901.607458338, ymax: 4038066.907666304, ymin: 4036294.524072895, "spatialReference":{"wkid":102100,"latestWkid":3857}//空间参考是webmercartro }) });

PopupTemplate的使用： 1. 创建PopupTemplate对象，在创建时可以设置一些属性，具体的属性功能没能理解完整。 2. 在FeatureLayer创建的时候使用。

总结

Popup和PopupTemplate结合使用，一个是创建弹窗，一个是创建弹窗的模板，在使用的时候需要用高版本的api，我在使用低版本的时候出现了一些问题，比如设置的小数位为3并未起到作用，样式也有问题。对于没能完善的日后完善。（知识盲区）

最新回复(0)