我试图添加在多个功能表到我的web应用程序。我已经看到了下面的帖子,但他们使用的是JS 3。我用的是4.x。
//www.gobook3.com/t5/arcgis-api-for-javascript-questions/display-several-feature-tables/td-..。
基本上,我希望我可以添加一个选项卡,允许用户选择他们想要查看的功能表。这是我迄今为止工作的代码,但它只显示一个表…
JS
//创建特征表const featureTable = new featureTable ({view: view, //需要功能突出到工作层:featureLayer, multiSortEnabled: true, visibleElements:{//自动cast到visibleElements menuItems: {clearSelection: true, refreshData: true, toggleColumns: true, selectedRecordsShowAllToggle: true, selectedRecordsShowSelectedToggle: true, zoomToSelection: true}}, container: document.getElementById("tableDiv")});//监听视图的click事件并访问相关的图形。视图。on("immediate-click", (event) => {view.hitTest(event).then((response) => {tablecanddate = response.results.find((result) => {return (result .result) => {graphic && result.graphic.layer && result.graphic.layer === featureLayer);});//添加图形的ObjectId到highlightid集合中。//检查featureTable。highlightIds集合//不包括已经高亮显示的特性。if (tablecandid) {const objectId = tablecandid .graphic. getobectid ();if (featutable .highlightIds.includes(objectId)){//如果feature //已经添加到highlightIds集合中,则从当前选择中删除feature; } else { // Add this feature to the featureTable highlightIds collection featureTable.highlightIds.add(objectId); } } }); }); // Watch the featureTable's highlightIds.length property, // and get the count of highlighted features within // the table. featureTable.watch("highlightIds.length", (ids) => { highlightIdsCount = ids; // Iterate through the filters within the table. // If the active filter is "Show selection", // changes made to highlightIds (adding/removing) // are reflected. featureTable.viewModel.activeFilters.forEach((filter) => { if (filter.type === "selection") { selectionIdCount = filter.objectIds.length; // the filtered selection's id count // Check that the filter selection count is equal to the // highlightIds collection count. If not, update filter selection. if (selectionIdCount !== highlightIdsCount) { featureTable.filterBySelection(); } } }); }); });
超文本标记语言
下面是一个为多个层使用多个featutable的例子。
https://codepen.io/odoe/pen/YzaLVgJ?editors=0010
View.when (() => {const layers = map。Layers .filter((layer) =>{返回层。Type === "feature";}) .toArray ();让count = 0;for (const layer of layers) {// nav const title = document.createElement("calcite-tab-title");标题。innerText = layer.title;如果(count === 0) {title。主动=真;数+ +;} tableNav.appendChild(标题); // content const container = document.createElement("div"); container.classList.add("table"); const table = new FeatureTable({ view, layer, container }); const tab = document.createElement("calcite-tab"); tab.appendChild(container); tabDiv.appendChild(tab); } });