Hi Alexander,
This is probably too late for you but posting this here in case it helps someone else. For a vector tile basemap, the easy way to handle this is by adding an array of LODS to the constraints in the MapView constructor. See the working code example below.
Also, in case you haven't seen this, it is a good place to find vector tile basemaps: Leaflet Provider Demo
Regards,
Rhys
<!DOCTYPE html>
<html>
<head>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.17/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.17/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/VectorTileLayer",
], function (Map, MapView, Basemap, VectorTileLayer) {
const map = new Map({
basemap: new Basemap({
baseLayers: [
new VectorTileLayer({
url:
"https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
}),
],
}),
});
const view = new MapView({
container: "viewDiv",
constraints: {
lods: [
{
level: 15,
resolution: 4.77731426794937,
scale: 18055.954822,
},
{
level: 16,
resolution: 2.388657133974685,
scale: 9027.977411,
},
{
level: 17,
resolution: 1.1943285668550503,
scale: 4513.988705,
}
]
},
map: map,
scale: 10000,
center: [-3.7038, 40.4168],
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>