Arcgis js api 如何允许用户在ArcGIS的Javascript中使用两个过滤器
有两个过滤器，允许用户选择主要命令或等级。然而，有人能给我指出正确的方向，让他们真正倾听彼此的声音吗。例如，如果用户pics是一个30ABCT，并希望按E4级过滤它。我需要用什么方法来做Arcgis js api 如何允许用户在ArcGIS的Javascript中使用两个过滤器,arcgis-js-api,Arcgis Js Api,有两个过滤器，允许用户选择主要命令或等级。然而，有人能给我指出正确的方向，让他们真正倾听彼此的声音吗。例如，如果用户pics是一个30ABCT，并希望按E4级过滤它。我需要用什么方法来做 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content=&q
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
MOS Status - Test
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.18/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.18/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#grade-filter{
height: 315px;
width: 150%;
visibility: hidden;
}
.grade-item {
width: 100%;
padding: 12px;
text-align: center;
vertical-align: baseline;
cursor: pointer;
height: 40px;
}
.grade-item:focus {
background-color: dimgrey;
}
.grade-item:hover {
background-color: dimgrey;
}
#major-command-filter{
height: 315px;
width: 150%;
visibility: hidden;
}
.majorCommand-item {
width: 100%;
padding: 12px;
text-align: center;
vertical-align: baseline;
cursor: pointer;
height: 40px;
}
.majorCommand-item:focus {
background-color: dimgrey;
}
.majorCommand-item:hover {
background-color: dimgrey;
}
.esri-editor .esri-item-list__scroller {
max-height: 350px;
}
#info {
padding: 14px;
border-radius: 5px;
width: 25%;
}
</style>
<script>
require([
"esri/Map",
"esri/layers/FeatureLayer",
"esri/form/FormTemplate",
"esri/widgets/Editor",
"esri/views/MapView",
"esri/widgets/Expand",
"esri/popup/content/TextContent",
], function (
Map,
FeatureLayer,
FormTemplate,
Editor,
MapView,
Expand,
TextContent,
) {
const editThisAction = {
title: "Edit feature",
id: "edit-this",
className: "esri-icon-edit",
};
let editor, features, majorCommandView, gradeView;
// Create a popTemplate
const template = {
title: "MOS Vacancy: {mos}",
content:
"<ul><li>Grade: <b>{grade}</b></li>" +
"<li>Unit: <b>{unit}</b></li>" +
"<li>Major Command: <b>{macom}</b></li>" +
"<li>City: <b>{city}</b></li><ul>",
actions: [editThisAction],
};
// Create a map from the referenced webmap item id
const featureLayer = new FeatureLayer({
url:
"https://ncguardview.nc.gov/server/rest/services/Hosted/test/FeatureServer/0",
outFields: ["*"],
displayField: "mos",
popupTemplate: template,
formTemplate: {
title: "NCNG MOS Vacancy",
description: "Provide information for MOS Vacancy",
elements: [
{
// Autocasts to new GroupElement
type: "group",
label: "Military Occupation Specaility",
//description: "Field inspector information",
elements: [
{
// Autocasts to new FieldElement
type: "field",
fieldName: "mos",
label: "MOS",
},
{
type: "field",
fieldName: "series",
label: "MOS Branch",
},
{
type: "field",
fieldName: "jobtitle",
label: "MOS Job Title",
},
{
type: "field",
fieldName: "grade",
label: "MOS Grade",
},
],
}, // end of first group element
{
type: "group",
label: "Unit",
elements: [
{
type: "field",
fieldName: "unit",
label: "Unit",
},
{
type: "field",
fieldName: "battalion",
label: "Battalion",
},
{
type: "field",
fieldName: "macom",
label: "Major Command",
},
],
}, // End of Second Group
{
type: "group",
label: "Location",
elements: [
{
type: "field",
fieldName: "address",
label: "Unit Address",
},
{
type: "field",
fieldName: "city",
label: "Unit City",
},
{
type: "field",
fieldName: "county",
label: "Unit County",
},
],
}, // End of Second Group,
{
type: "group",
label: "Status",
elements:[{
type: "field",
fieldName: "vacancy",
label: "Vacancy Status",
}]
}
],
},
});
// Create the Map
const map = new Map({
basemap: "streets-night-vector",
layers: [featureLayer]
});
//map.add(featureLayer);
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 6,
center: [-79, 35],
});
///////////////////////////////////////////////////////////////////
/* Grade Filter */
// Doesn't really filter out Grade. The filter still inlcudes
// whatever grades are at that location
const gradeNode = document.querySelectorAll(`.grade-item`);
const gradeElement = document.getElementById("grade-filter");
gradeElement.addEventListener('click', filterByGrade); // handle user choice
// Handle selection for user filter
function filterByGrade(event) {
const selectedGrade = event.target.getAttribute("data-grade");
gradeView.filter = {
where: "grade = '"+ selectedGrade +"'",
};
};
view.whenLayerView(featureLayer).then(function (layerView) {
gradeView = layerView;
// set up UI items
gradeElement.style.visibility = 'visible';
const gradeExpand = new Expand({
view: view,
content: gradeElement,
expandIconClass: "esri-icon-filter",
group: "top-left",
});
// clear filters
gradeExpand.watch("expanded", function(){
if(!gradeExpand.expanded) {
gradeView.filter = null;
};
});
view.ui.add(gradeExpand, 'top-left');
});
///////////////////////////////////////////////////////////////////
const majComNode = document.querySelectorAll(`.majorCommand-item`);
const majComElement = document.getElementById("major-command-filter");
// click event handler for seasons choices
majComElement.addEventListener("click", filterByCommand);
// User clicked on Major Commands 30th, 449th, 13th, and etc..
// set an attribute filter on major command layer view
function filterByCommand(event) {
const selectedCommand = event.target.getAttribute("data-command");
majorCommandView.filter = {
where: "macom = '" + selectedCommand + "'",
};
}
view.whenLayerView(featureLayer).then(function (layerView) {
majorCommandView = layerView;
// set up UI items
majComElement.style.visibility = "visible";
const majCommandExpand = new Expand({
view: view,
content: majComElement,
expandIconClass: "esri-icon-filter",
group: "top-left",
});
// clear the filters
majCommandExpand.watch( "expanded", function() {
if(!majCommandExpand.expanded) {
majorCommandView.filter = null;
}
});
view.ui.add(majCommandExpand, 'top-left')
//////////////////////////////////////////
/* Stop with Filter and Begin with Editor */
/////////////////////////////////////////////////////
view.when(function () {
view.popup.autoOpenEnabled = true; //disable popups
// Create the Editor
let editor = new Editor({
view: view,
container: document.createElement("div"),
layerInfos: [
{
layer: featureLayer,
deleteEnabled: true,
addEnabled: true,
},
],
});
// Add widget to top-right of the view
//view.ui.add(editor, "bottom-right");
// Execute each time the "Edit Feature" action is called
function editThis() {
// If the EditorViewModel's activeWorkflow is null, make the popup not visible
if (!editor.viewModel.activeWorkFlow) {
view.popup.visible =false;
editor.startUpdateWorkflowAtFeatureEdit(
view.popup.selectedFeature
);
view.ui.add(editor, "bottom-right");
view.popup.spinnerEnabled = true;
}
// We need to set a timeout to ensure the editor widget is fully rendered. We
// then grab it from the DOM stack
setTimeout(function () {
// Use the editor's back button as a way to cancel out of editing
let arrComp = editor.domNode.getElementsByClassName(
"esri-editor__back-button esri-interactive"
);
if (arrComp.length === 1) {
// Add a tooltip for the back button
arrComp[0].setAttribute(
"title",
"Cancel edits, return to popup"
);
// Add a listerner to listen for when the editor's back button is clicked
arrComp[0].addEventListener("click", function (evt) {
console.log(evt);
// Prevent the default behavior for the back button and instead remove the editor and reopen the popup
evt.preventDefault();
//view.ui.remove(editor);
view.popup.open({
features: features,
});
});
}
}, 150);
}
// Event handler that fires each time an action is clicked
view.popup.on("trigger-action", function (event) {
if (event.action.id === "edit-this") {
editThis();
}
});
// Watch when the popup is visible
view.popup.watch("visible", function (event) {
// Check the Editor's viewModel state, if it is currently open and editing existing features, disable popups
if (editor.viewModel.state === "editing-existing-feature") {
view.popup.close();
} else {
// Grab the features of the popup
features = view.popup.features;
}
});
featureLayer.on("apply-edits", function () {
// Once edits are applied to the layer, remove the Editor from the UI
//view.ui.remove(editor);
// Iterate through the features
features.forEach(function (feature) {
// Reset the template for the feature if it was edited
feature.popupTemplate = template;
});
// Open the popup again and reset its content after updates were made on the feature
if (features) {
view.popup.open({
features: features,
});
}
// Cancel the workflow so that once edits are applied, a new popup can be displayed
editor.viewModel.cancelWorkflow();
});
});
});
view.ui.add("info", {
position: "bottom-left",
index: 1,
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="major-command-filter" class="esri-widget">
<div class="majorCommand-item visible-command" data-command="30 ABCT">30 ABCT</div>
<div class="majorCommand-item visible-command" data-command="130 MEB">130 MEB</div>
<div class="majorCommand-item visible-command" data-command="113 SB">113 SB</div>
<div class="majorCommand-item visible-command" data-command="60 TC">60 TC</div>
<div class="majorCommand-item visible-command" data-command="449 TAB">449 TAB</div>
<div class="majorCommand-item visible-command" data-command="139 REG">139 REG</div>
<div class="majorCommand-item visible-command" data-command="JFHQ">JFHQ</div>
<div class="majorCommand-item visible-command" data-command="TEST">TEST</div>
</dvi>
<div id="grade-filter" class="esri-widget">
<div class="grade-item visible-grade" data-grade="E1">E1</div>
<div class="grade-item visible-grade" data-grade="E2">E2</div>
<div class="grade-item visible-grade" data-grade="E3">E3</div>
<div class="grade-item visible-grade" data-grade="E4">E4</div>
<div class="grade-item visible-grade" data-grade="E5">E5</div>
<div class="grade-item visible-grade" data-grade="E6">E6</div>
<div class="grade-item visible-grade" data-grade="E7">E7</div>
<div class="grade-item visible-grade" data-grade="E8">E8</div>
</dvi>
<div id="info" class="esri-widget">
<h3>Select a feature to display its popup</h3>
<h4>
Edit the feature by clicking on the "Edit feature" action within the
popup.
</h4>
</div>
</body>
</html>
MOS状态-测试
html，
身体，
#视窗{
填充：0；
保证金：0；
身高：100%；
宽度：100%；
}
#分级过滤器{
高度：315px；
宽度：150%；
可见性：隐藏；
}
.职系项目{
宽度：100%；
填充：12px；
文本对齐：居中；
垂直对齐：基线；
光标：指针；
高度：40px；
}
.成绩项目：重点{
背景色：浅灰色；
}
。职系项目：悬停{
背景色：浅灰色；
}
#主命令过滤器{
高度：315px；
宽度：150%；
可见性：隐藏；
}
.majorCommand项目{
宽度：100%；
填充：12px；
文本对齐：居中；
垂直对齐：基线；
光标：指针；
高度：40px；
}
.majorCommand项目：焦点{
背景色：浅灰色；
}
.majorCommand项目：悬停{
背景色：浅灰色；
}
.esri编辑器.esri-item-list\u滚动条{
最大高度：350px；
}
#信息{
填充：14px；
边界半径：5px；
宽度：25%；
}
要求([
“esri/Map”，
“esri/图层/功能图层”，
“esri/form/FormTemplate”，
“esri/widgets/Editor”，
“esri/views/MapView”，
“esri/widgets/Expand”，
“esri/popup/content/TextContent”，
]，功能(
地图，
特征层，
FormTemplate，
编辑
地图视图，
扩大
文本内容，
) {
const editThisAction={
标题：“编辑功能”，
id:“编辑此”，
类名：“esri图标编辑”，
};
let editor、features、majorCommandView、gradeView；
//创建一个popTemplate
常量模板={
标题：“MOS空缺：{MOS}”，
内容：
“- 等级：{Grade}
”+
“- 单位：{Unit}
”+
“- 主要命令：{macom}
”+
“- 城市：{City}
”，
操作：[编辑此操作]，
};
//从引用的webmap项目id创建地图
const featureLayer=新featureLayer({
网址：
"https://ncguardview.nc.gov/server/rest/services/Hosted/test/FeatureServer/0",
外场：[“*”]，
显示字段：“mos”，
popupTemplate:模板，
表单模板：{
标题：“NCNG MOS空缺”，
说明：“提供MOS空缺信息”，
要素：[
{
//自动广播到新的GroupElement
类型：“组”，
标签：“军事占领特殊性”，
//说明：“现场检查员信息”，
要素：[
{
//自动广播到新的FieldElement
键入：“字段”，
字段名：“mos”，
标签：“MOS”，
},
{
键入：“字段”，
字段名：“系列”，
标签：“MOS分支机构”，
},
{
键入：“字段”，
字段名：“职务头衔”，
标签：“MOS职务名称”，
},
{
键入：“字段”，
字段名：“等级”，
标签：“MOS等级”，
},
],
}，//第一组元素的结尾
{
类型：“组”，
标签：“单位”，
要素：[
{
键入：“字段”，
字段名：“单位”，
标签：“单位”，
},
{
键入：“字段”，
战地名称：“营”，
标签：“营”，
},
{
键入：“字段”，
字段名：“macom”，
标签：“主要命令”，
},
],
}，//第二组结束
{
类型：“组”，
标签：“位置”，
要素：[
{
键入：“字段”，
字段名：“地址”，
标签：“单位地址”，
},
{
键入：“字段”，
字段名：“城市”，
标签：“单位城市”，
},
{
键入：“字段”，
字段名：“县”，
标签：“单位县”，
},
],
}，//第二组的末尾，
{
类型：“组”，
标签：“状态”，
要素：[{
键入：“字段”，
字段名：“空缺”，
标签：“空缺状态”，
}]
}
],
},
});
//创建地图
常量映射=新映射({
基本地图：“街道夜向量”，
图层：[功能图层]
});
//添加（featureLayer）；
const view=新地图视图({
容器：“viewDiv”，
地图：地图，
缩放：6，
中间：[-79,35]，
});
///////////////////////////////////////////////////////////////////
/*分级过滤器*/