创建自定义底图
这个示例演示了如何创建自定义底图并添加 BasemapToggle 小部件到视图中。basemap 是 baseLayer 和 引用图层的简单容器。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Custom Basemap - 4.5</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link href="https://js.arcgis.com/4.5/esri/css/main.css" rel="stylesheet" type="text/css">
<script src="https://js.arcgis.com/4.5"></script>
<script>
require([
"esri/config",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/Basemap",
"esri/widgets/BasemapToggle",
"esri/views/SceneView",
"dojo/domReady!"
], function(esriConfig, WebTileLayer, Map,
Basemap, BasemapToggle, SceneView
) {
// 处理 cors
esriConfig.request.corsEnabledServers.push("a.tile.stamen.com",
"b.tile.stamen.com", "c.tile.stamen.com", "d.tile.stamen.com");
// 使用第三方缓存服务创建一个图层
var mapBaseLayer = new WebTileLayer({
urlTemplate: "http://{subDomain}.tile.stamen.com/terrain/{level}/{col}/{row}.png",
subDomains: ["a", "b", "c", "d"],
copyright: "Map tiles by <a href=\"http://stamen.com/\">Stamen Design</a>, " +
"under <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a>. " +
"Data by <a href=\"http://openstreetmap.org/\">OpenStreetMap</a>, " +
"under <a href=\"http://creativecommons.org/licenses/by-sa/3.0\">CC BY SA</a>."
});
// 使用 WebTileLayer 创建一个 Basemap 实例。
// thumbnailUrl 将用于为 BasemapToggle 小部件 提供图片
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: "satellite",
ground: "world-elevation"
});
var initCamera = {
heading: 124.7,
tilt: 82.9,
position: {
latitude: 40.713906,
longitude: -111.848111,
z: 1990
}
};
var view = new SceneView({
container: "viewDiv",
map: map,
camera: initCamera
});
view.then(function() {
// 添加 BasemapToggle
var toggle = new BasemapToggle({
titleVisible: true,
view: view,
nextBasemap: stamen
});
view.ui.add(toggle, "top-right");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
程序运行效果：
沙箱地址：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=basemap-custom
（完）