はじめに

ArcGIS Online で提供するベースマップの設定方法

const map = new Map({
  basemap: "topo-vector"
});

カスタム ベースマップの設定方法

// Basemap クラスの作成
let SampleWorldCitiesBasemap = new Basemap({
    // ベースマップを構成するレイヤーの設定
    baseLayers: [
        // ベースマップに使用する MapImageLayer クラスの作成
        new MapImageLayer({
            url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer",
            title: "SampleWorldCities"
        })
    ],
    title: "SampleWorldCities",
    id: "SampleWorldCities"
});

// Map クラスの作成
const mapMain = new Map({
    // 作成した Basemap の適用
    basemap: SampleWorldCitiesBasemap,
});

ベースマップ レイヤーの表現

レイヤー ブレンディング 

const map = new Map({
  basemap: {
    baseLayers:[
      new VectorTileLayer({
        url: "url",
      }),
      new TileLayer({
        url: "url",
        // ブレンディングの設定
        blendMode: "multiply"
      })
    ]
  }
});

レイヤーのエフェクト

const map = new Map({
    basemap: {
        baseLayers: [
            new TileLayer({
                url: "url",
                // レイヤーの effect の設定
                effect: [{
                        scale: 36978595,
                        value: "drop-shadow(3px, 3px, 4px)"
                    },
                    {
                        scale: 18489297,
                        value: "drop-shadow(2px, 2px, 3px)"
                    },
                    {
                        scale: 4622324,
                        value: "drop-shadow(1px, 1px, 2px)"
                    }
                ];
            })
        ]
    }
});

空間参照の定義

参考情報