我试图在多个功能表添加到我的web应用程序。我看过下面的帖子,但他们使用的是JS 3。x,我用4。
//www.gobook3.com/t5/arcgis-api-for-javascript-questions/display-several-feature-tables/td-..。
基本上,我希望我可以添加一个选项卡,允许用户选择他们想要查看的功能表。这是代码,我有到目前为止的工作,但它只显示一个表…
JS
//创建特征表const featureTable = new featureTable({视图:视图,//需要功能突出工作层:featureLayer, multiSortEnabled: true, visibleElements:{//自动投射到visibleElements菜单项:{clearSelection: true, refreshData: true, togglecolumcolumns: true, selectedRecordsShowAllToggle: true, selectedRecordsShowSelectedToggle: true, zoomToSelection: true}},容器:document.getElementById("tableDiv")});//监听视图的click事件并访问关联的图形。视图。on("immediate-click", (event) => {view.hitTest(event).then((response) => {tableccandidate = response.results.find((result) => {return (result) => {graphic && result.graphic.layer && result.graphic.layer === featureLayer);});//将图形的ObjectId添加到highlightIds集合中。//检查featureTable。highlightIds集合//不包含已经高亮显示的特性。if (tableccandidate) {const objectId = tableccandidate .graphic. getobjectid ();if (featurettable .highlightIds.includes(objectId)){//如果feature //已经添加到highlightIds集合中,则从当前选择中删除feature . featurettable .highlightIds. Remove (objectId); } 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(); } } }); }); });
超文本标记语言
下面是一个在多个图层中使用多个FeatureTables的例子。
https://codepen.io/odoe/pen/YzaLVgJ?editors=0010
View.when (() => {const layers = map。Layers .filter((layer) =>{返回图层。类型=== "feature";}) .toArray ();设count = 0;for (const layer of layers) {// nav const title = document.createElement("calcite-tab-title");标题。innerText = layer.title;如果(count === 0) {title。Active = true;数+ +;} 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); } });
使用use DOMElement remove需要一些逻辑
https://developer.mozilla.org/en-US/docs/Web/API/Element/remove