That layer did not support querying by distance. Here is your code fixed.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X - UA - Compatible" content="IE =edge">
<meta charset=" utf-8">
<meta name=" viewport " content=" initial-scale=1, maximum-scale=1, user-scalable=no ">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel=" stylesheet " href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.14/"></script>
<script>
var view;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/layers/MapImageLayer",
"esri/Graphic",
"esri/geometry/geometryEngine"
], function (Map, MapView, GraphicsLayer, MapImageLayer, Graphic, geometryEngine) {
var map = new Map({
basemap: "topo-vector"
});
view = new MapView({
container: "viewDiv",
map: map,
center: [11.961214, 55.329578],
zoom: 19
});
var currentPoseGraphicsLayer = new GraphicsLayer();
var posPoint = {
type: "point",
longitude: view.center.x,
latitude: view.center.y
};
var posMarkerSymbol = {
type: "simple-marker",
color: "green",
outline: {
color: "#efefef",
width: "1.5px"
}
};
var posPointGraphic = new Graphic({
geometry: posPoint,
symbol: posMarkerSymbol
});
var allKmMarkGraphicsLayer = new GraphicsLayer();
var infoMapLayer = new MapImageLayer({
url: "http://agis1.cloudapp.net/arcgis/rest/services/BaneGISX_OpenData/Info/MapServer",
});
var allKmMarkSublayer;
function displayClosestKmMarks(result) {
allKmMarkGraphicsLayer.removeAll();
result.features.forEach(function (feature) {
var g = new Graphic({
geometry: feature.geometry,
attributes: feature.attributes,
symbol: {
type: "simple-marker",
color: [0, 255, 255],
size: "20px"
}
});
allKmMarkGraphicsLayer.add(g);
});
}
function queryFeatureLayer(point, distance, spatialRelationship, sqlExpression) {
var ptBuff = geometryEngine.buffer(point, distance, "feet");
var query = {
geometry: ptBuff,
distance: distance,
spatialRelationship: spatialRelationship,
outFields: ["*"],
returnGeometry: true,
where: sqlExpression,
outSpatialReference: view.spatialReference
};
allKmMarkSublayer.queryFeatures(query).then(function (result) {
displayClosestKmMarks(result);
});
}
view.watch("center", function (newValue) {
map.remove(currentPoseGraphicsLayer);
currentPoseGraphicsLayer = new GraphicsLayer();
map.add(currentPoseGraphicsLayer);
posPoint.longitude = newValue.longitude;
posPoint.latitude = newValue.latitude;
posPointGraphic = new Graphic({
geometry: posPoint,
symbol: posMarkerSymbol
});
currentPoseGraphicsLayer.add(posPointGraphic);
var subLayerId = 5;
allKmMarkSublayer = infoMapLayer.allSublayers.find(function (sublayer) {
return sublayer.id === subLayerId;
});
queryFeatureLayer(view.center, 500, "intersects")
});
map.addMany([currentPoseGraphicsLayer, allKmMarkGraphicsLayer]);
map.add(infoMapLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>