@NickIrwin
In 4.13 the draw action had a native property. I am not sure when it was removed but now in 4.23 there is no native property returned in the DrawAction. I mentioned this above to vlagebmap back on 06-25-2021.
This is what it would look like in 4.23 (vanilla JS)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Select by Point</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/views/draw/Draw",
"esri/Map",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/geometry/Multipoint",
"esri/views/MapView"
], function (Draw, Map, Graphic, GraphicsLayer, FeatureLayer, Point, Multipoint, MapView) {
const pntGraphics = new GraphicsLayer();
let viewClickEvtHandler = null, viewMouseMoveEvtHandler = null;
var renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [255, 255, 255, 0.5],
style: "none",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 2
}
}
};
const statesLyr = new FeatureLayer({
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2',
renderer: renderer,
outFields: ['*']
});
const cityFeatureLayer = new FeatureLayer({
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0',
outFields: ['*'],
});
let drawPnt, graphic, ctrlKey = false, moveCtrlKey = false, highlight, statesLyrView;
const map = new Map({
basemap: 'streets-vector',
layers: [pntGraphics, statesLyr, cityFeatureLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-98.43750059604514, 38.1986442207947],
scale: 25000000,
ui: {
components: ['zoom', 'compass'],
}
});
statesLyr.when(function(){
view.whenLayerView(statesLyr).then(function(layerView) {
statesLyrView = layerView;
});
})
const draw = new Draw({
view: view
});
var sym = {
type: "simple-marker",
style: "circle",
color: [0, 255, 255, 0.6],
size: "8px",
outline: {
color: [0, 255, 255, 1],
width: 1
}
};
view.ui.add("point-button", "top-left");
document.getElementById("point-button").onclick = drawPoint;
function drawPoint() {
if(viewMouseMoveEvtHandler){
viewMouseMoveEvtHandler.remove()
viewMouseMoveEvtHandler = null
}
if(viewClickEvtHandler){
viewClickEvtHandler.remove()
viewClickEvtHandler = null
}
const action = draw.create("point");
viewMouseMoveEvtHandler = view.on('pointer-move', (evt) => {
if (evt.native.ctrlKey) {
moveCtrlKey = true;
}else{
moveCtrlKey = false;
}
})
viewClickEvtHandler = view.on('pointer-down', (evt)=>{
if (evt.native.ctrlKey) {
ctrlKey = true;
}else{
ctrlKey = false;
}
})
if (highlight) {
highlight.remove();
}
// Give a visual feedback to users as they move the pointer over the view
action.on("cursor-update", function (evt) {
view.graphics.removeAll();
drawPnt = new Point({
x: evt.coordinates[0],
y: evt.coordinates[1],
spatialReference: view.spatialReference
});
graphic = new Graphic({
geometry: drawPnt,
symbol: sym
});
view.graphics.add(graphic);
if(ctrlKey && !moveCtrlKey){
draw.reset();
view.graphics.removeAll();
selectStates();
}
});
action.on("draw-complete", function (evt) {
drawPnt = new Point({
x: evt.coordinates[0],
y: evt.coordinates[1],
spatialReference: view.spatialReference
});
graphic = new Graphic({
geometry: drawPnt,
symbol: sym
});
pntGraphics.add(graphic);
if (ctrlKey) {
drawPoint();
} else {
view.graphics.removeAll();
selectStates();
}
});
view.focus();
};
function selectStates(){
ctrlKey = false
moveCtrlKey = false
if(viewMouseMoveEvtHandler){
viewMouseMoveEvtHandler.remove()
viewMouseMoveEvtHandler = null
}
if(viewClickEvtHandler){
viewClickEvtHandler.remove()
viewClickEvtHandler = null
}
let mp = new Multipoint({
spatialReference: view.spatialReference
});
let pntArray = pntGraphics.graphics.map(function(gra){
mp.addPoint(gra.geometry);
});
const query = {
geometry: mp,
outFields: ["*"],
outSpatialReference: view.spatialReference,
returnGeometry: true
};
statesLyr.queryFeatures(query)
.then(function(results){
const graphics = results.features;
// remove existing highlighted features
if (highlight) {
highlight.remove();
}
// highlight query results
highlight = statesLyrView.highlight(graphics);
pntGraphics.removeAll();
}).catch(function(err){
console.error(err);
})
}
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="Select Countries">
<span class="esri-icon-map-pin"></span>
</div>
</div>
</body>
</html>
