David,
Here is a sample that works with GraphicsLayers (which FeatureLayer extends from).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Sketch temporary geometries - 4.9</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: verdana;
}
#topbar {
background: #fff;
position: absolute;
top: 15px;
right: 15px;
padding: 10px;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #D3D3D3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
</style>
<script>
require([
"esri/views/MapView",
"esri/Map",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer"
], function (
MapView, Map,
SketchViewModel, Graphic, GraphicsLayer, FeatureLayer
) {
let editGraphic;
const graphicsLayer = new GraphicsLayer({
id: "tempGraphics"
});
const graphicsLayer2 = new GraphicsLayer({
id: "tempGraphics2"
});
const map = new Map({
basemap: "gray",
layers: [graphicsLayer, graphicsLayer2]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 11,
center: [-85.8077, 33.7702]
});
const pointSymbol = {
type: "simple-marker",
style: "square",
color: "#8A2BE2",
size: "16px",
outline: {
color: [255, 255, 255],
width: 3
}
};
const polylineSymbol = {
type: "simple-line",
color: "#8A2BE2",
width: "4",
style: "dash"
};
const polygonSymbol = {
type: "simple-fill",
color: "rgba(138,43,226, 0.8)",
style: "solid",
outline: {
color: "white",
width: 1
}
};
view.when(function () {
var featureLayer = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",
outFields: ["*"]
});
featureLayer.load().then(function(evt){
const queryParams = featureLayer.createQuery();
queryParams.where = "STATE_FIPS = '01' AND CNTY_FIPS ='015'";
queryParams.outSpatialReference = view.spatialReference;
queryParams.returnGeometry = true;
featureLayer.queryFeatures(queryParams).then(function(results){
var gras = results.features.map(function(gra){
gra.symbol = {
type: "simple-marker",
style: "circle",
color: "blue",
size: "8px",
outline: {
color: [ 255, 255, 0 ],
width: 0.5
}};
return gra;
})
graphicsLayer2.addMany(gras);
});
});
const sketchViewModel = new SketchViewModel({
view,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
sketchViewModel.on("create-complete", addGraphic);
function addGraphic(event) {
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol
});
graphicsLayer.add(graphic);
var poly = graphic.geometry;
graphicsLayer2.graphics.forEach(function(gra, i){
var doesContain = poly.contains(gra.geometry);
if(doesContain){
gra.symbol = {
type: "simple-marker",
style: "circle",
color: "yellow",
size: "8px",
outline: {
color: [ 255, 255, 0 ],
width: 0.5
}
};
}
});
}
var drawPolygonButton = document.getElementById("polygonButton");
drawPolygonButton.onclick = function () {
sketchViewModel.create("polygon");
setActiveButton(this);
};
var drawRectangleButton = document.getElementById(
"rectangleButton");
drawRectangleButton.onclick = function () {
sketchViewModel.create("rectangle");
setActiveButton(this);
};
var drawCircleButton = document.getElementById("circleButton");
drawCircleButton.onclick = function () {
sketchViewModel.create("circle");
setActiveButton(this);
};
document.getElementById("resetBtn").onclick = function () {
sketchViewModel.reset();
graphicsLayer.removeAll();
setActiveButton();
graphicsLayer2.graphics.forEach(function(gra, i){
gra.symbol = {
type: "simple-marker",
style: "circle",
color: "blue",
size: "8px",
outline: {
color: [ 255, 255, 0 ],
width: 0.5
}};
});
};
function setActiveButton(selectedButton) {
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
});
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="topbar">
<button class="action-button esri-icon-polygon" id="polygonButton" type="button"
title="Draw polygon"></button>
<button class="action-button esri-icon-checkbox-unchecked" id="rectangleButton"
type="button" title="Draw rectangle"></button>
<button class="action-button esri-icon-radio-unchecked" id="circleButton"
type="button" title="Draw circle"></button>
<button class="action-button esri-icon-trash" id="resetBtn" type="button"
title="Clear graphics"></button>
</div>
</div>
</body>
</html>