🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
官方示例:https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=basemap-custom ## 一、以stamen为例 ![](https://box.kancloud.cn/90c0852572554f59e5c6e17eb2237bd9_593x475.jpg) ``` 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 ![](https://box.kancloud.cn/5c8da6a7a9fa2a2a639fcf97290d56a8_449x379.jpg) ``` 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); }); ```