如何解决如何在 ArcGIS JS API 3.x 中通过鼠标单击事件选择多个要素
我正在尝试使用“按住‘ctrl’按钮和鼠标单击事件”在要素图层中选择多个要素。我使用的是 ArcGIS JS API 3.x。
我使用 FeatureCollection 创建了美国州边界 FeatureLayer，并且能够在地图上显示图层。用户想要通过按住“ctrl”或“alt”键的同时单击鼠标来选择多个状态。
var featureLayer = new esri.layers.FeatureLayer(featureCollection,{
id: stateLayer,opacity: 0.30,visible: true,infoTemplate: infoTemplate
});
g_esri.map.addLayer(featureLayer);
featureLayer.on("click",onBoundaryClick);
function onBoundaryClick(evt) {
var g = evt.graphic;
g_esri.map.infoWindow.setContent(g.getContent());
g_esri.map.infoWindow.show(evt.screenPoint,g_esri.map.getInfoWindowAnchor(evt.screenPoint));
formatInfotemplate(false,g);
}
我试着点击下面的一些链接，
一个。 selecting-multiple-features-with-graphics
B. select-multiple-features-by-mouse-clicks
但是打不通，
解决方法
我很久没有使用 3.xx API 了。无论如何，也许我为您制作的这个示例可以帮助您。这个想法基本上是侦听要素图层上的单击事件以捕获选定的图形，然后添加到选定的集合中。添加时只需检查是否按下了想要的键。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Labeling features client-side</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<style>
html,body,#map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.35/"></script>
<script>
var map;
require([
"esri/map","esri/geometry/Extent","esri/layers/FeatureLayer","esri/layers/GraphicsLayer","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol","esri/renderers/SimpleRenderer","esri/Color","dojo/domReady!"
],function(Map,Extent,FeatureLayer,GraphicsLayer,SimpleLineSymbol,SimpleFillSymbol,SimpleRenderer,Color)
{
const bbox = new Extent({"xmin": -1940058,"ymin": -814715,"xmax": 1683105,"ymax": 1446096,"spatialReference": {"wkid": 102003}});
const map = new Map("map",{
extent: bbox
});
const statesUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
const states = new FeatureLayer(statesUrl,{
id: "states",outFields: ["*"]
});
map.addLayer(states);
const color = new Color("#00ffff");
const line = new SimpleLineSymbol("solid",color,1.5);
const symbol = new SimpleFillSymbol("solid",line,null);
const renderer = new SimpleRenderer(symbol);
const selected = new GraphicsLayer();
selected.setRenderer(renderer);
map.addLayer(selected);
let ctrl = false;
let shift = false;
map.on("key-down",function (evt) {
if (evt.key === "Control") {
ctrl = true;
} else if (evt.key === "Shift") {
shift = true;
}
});
map.on("key-up",function (evt) {
if (evt.key === "Control") {
ctrl = false;
} else if (evt.key === "Shift") {
shift = false;
}
});
states.on("click",function (evt) {
if (!ctrl && !shift) {
selected.clear();
}
selected.add(evt.graphic.clone());
console.log(`Selected: ${selected.graphics.length}`);
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
