I want to use VectorTileLayer to render vector tiles from an external service (not ArcGIS Server). I can set the "style" property to define the source of tiles and rendering styles - this works fine.
But I'm going to serve and render tiles with not default (not WebMercator) projection. As I understand, I need to set proper "tileInfo" for that, but I can't do that because it's a read-only property.
Is there any way to set this property from the JS without server? Or any other ways to handle tiles with a non-standard tiling scheme?
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>