底图切换BasemapToggle
使用arcgis api提供的小部件实现底图切换 使用步骤：1.创建小部件 2.启用小部件
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basemap Toggle
</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/>
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
#basemapToggle {
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}
.BasemapToggle .basemapTitle {
color: red;
}
</style>
</head>
<body>
<div id="map" class="map">
<div id="basemapToggle"></div>
</div>
<div class="test">test
</div>
<script>
var map;
require(["esri/map","esri/dijit/BasemapToggle", "dojo/on", "dojo/query",
"dojo/domReady!"], function (Map, BasemapToggle,on, query) {
map = new Map("map",{
center: [104.07, 30.65],
zoom: 12,
basemap: "topo"
});
var toggle = new BasemapToggle({
map: map,
basemap: "satellite",
title: "sss",
visible: true,
}, "basemapToggle");
toggle.startup();
on(map, "click", function (e) {
console.log(e.mapPoint.getLatitude());
console.log(e.mapPoint.getLongitude());
});
});
</script>
</body>
</html>
遗留的问题
如何修改图片下面的文字内容如何修改成自己的地图
更新遗留的问题：
如果想要修改底图可以使用"esri/basemaps"来自己定义一个basemap继承在esriBasemaps下面作为它的属性。例如（这我直接使用了esri的地图服务和图片，修改了一个标题，在使用BasemapToggle的时候就可以添加我们自己的底图了）
esriBasemaps
.mybasemap
= {
baseMapLayers
: [{url
: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"}
],
thumbnailUrl
: "https://js.arcgis.com/3.15/esri/images/basemap/satellite.jpg",
title
: "我的影像图标题"
};
定义了自己的底图之后，将上面的全部代码中的创建BasemapToggle小部件的代码中的basemap改成我们自己的就行了，如下：
var toggle
= new BasemapToggle({
map
: map
,
basemap
: "mybasemap",
visible
: true,
}, "basemapToggle");
这里又遗留一个问题：参数中的basemaps的使用暂未成功。
