官方示例：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=basemap-custom ## 一、以stamen為例  ``` require([ 'esri/config', 'esri/Map', 'esri/Basemap', 'esri/layers/WebTileLayer', 'esri/views/MapView', 'esri/layers/WMTSLayer', 'esri/Graphic' ], function(esriConfig, Map, Basemap, WebTileLayer, MapView, WMTSLayer, Graphic) { esriConfig.request.corsEnabledServers.push('https://map.xxx.com'); var mapBaseLayer = new WebTileLayer({ urlTemplate: "https://stamen-tiles-{subDomain}.a.ssl.fastly.net/terrain/{level}/{col}/{row}.png", subDomains: ["a", "b", "c", "d"], copyright: "stamen-tiles" }); var stamen = new Basemap({ baseLayers: [ mapBaseLayer ], title: "Terrain", id: "terrain", thumbnailUrl: "https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/409.png" }); var map = new Map({ basemap: stamen }); var mapView = new MapView({ map: map, center: [102.9331224074, 25.1049040686], zoom: 13, container: 'js_map' }); // wmts層 var wmtsLayer = new WMTSLayer({ url: 'https://map.xxx.com/geoserver/gwc/service/wmts', serviceMode: 'KVP', version: '1.1.1', activeLayer: { id: 'kmg:vector', } }); map.layers.add(wmtsLayer); // 點 var pointGraphic = new Graphic({ geometry: { type: "point", longitude: 102.91835013921454, latitude: 25.07329419928656 }, symbol: { type: "simple-marker", color: [226, 119, 40], outline: { color: [255, 255, 255], width: 2 } } }); mapView.graphics.add(pointGraphic); }); ``` ## 二、以一張背景圖片為底圖 示例圖片大小為：256*256  ``` require([ 'esri/config', 'esri/Map', 'esri/Basemap', 'esri/layers/WebTileLayer', 'esri/views/MapView', 'esri/layers/WMTSLayer', 'esri/Graphic' ], function(esriConfig, Map, Basemap, WebTileLayer, MapView, WMTSLayer, Graphic) { esriConfig.request.corsEnabledServers.push('https://map.xxx.com'); var map = new Map({ basemap: { baseLayers: [ new WebTileLayer({ urlTemplate: 'http://192.168.xxx.xxx:8080/test/arcgis_test/409.png' }) ] } }); var mapView = new MapView({ map: map, center: [102.9331224074, 25.1049040686], zoom: 13, container: 'js_map' }); // wmts層 var wmtsLayer = new WMTSLayer({ url: 'https://map.xxx.com/geoserver/gwc/service/wmts', serviceMode: 'KVP', version: '1.1.1', activeLayer: { id: 'kmg:vector', } }); map.layers.add(wmtsLayer); // 點 var pointGraphic = new Graphic({ geometry: { type: "point", longitude: 102.91835013921454, latitude: 25.07329419928656 }, symbol: { type: "simple-marker", color: [226, 119, 40], outline: { color: [255, 255, 255], width: 2 } } }); mapView.graphics.add(pointGraphic); }); ```