Community

How to set tileInfo property in VectorTileLayer in JS API v4.14?

632
1
02-05-2020 10:23 AM
AlexanderParshin
by
New Contributor II
‎02-05-2020 10:23 AM

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? 

Tags (2)
0 Kudos
1 Reply
Rhys-Donoghue
by
New Contributor III
‎10-13-2020 01:05 AM

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos