javascript - 如何在 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);
}
我尝试关注以下一些链接,
一个。使用图形选择多个功能
却无法通过,
解决方案
我已经很久没有使用 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>
推荐阅读
- python - Scrapy跟随以前的链接
- javascript - 将正则表达式添加到 Vue.js 数据对象
- swift - DidUpdateLocation 不存储位置,userLoc 始终为零
- angular - Angular 5,TypeScript 可观察到的问题
- wordpress - 如何在我的 wordpress 博客主页上显示子文件夹中的帖子
- python - Bluez 示例-广告间隔 linux
- javascript - 如何在 dash.js 中制作具有特定比特率的视频
- java - Java 8 嵌套 for 循环和条件
- visual-studio - DataSource 属性导致单元测试被跳过
- reactjs - React 在重定向之前使用 ajax 时抛出错误