添加底图&切换底图
- 参考教程:ArcGIS API for Javascript
- 本示例参考:①Add 2D Map ②Select BaseMap
- 编辑软件:Hbuilder
【? Code First ?】
Part 1:HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Lux's Map</title>
<link rel="stylesheet" href="css/css01.css" />
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<link rel="stylesheet" href="css/css_menu.css" />
<script src="https://js.arcgis.com/4.10/"></script>
<script src="js/js01.js"></script>
</head>
<body>
<!--******************************************************侧栏切换菜单*****************************************************************-->
<ul>
<li>
<a class="entypo-star" href="demo01.html"></a> <span>ChangeBaseMap</span>
</li>
<li>
<a class="entypo-newspaper" href="demo02.html"></a> <span>AddLayers</span>
</li>
<li>
<a class="entypo-link" href="demo03.html"></a> <span>LinkMap</span>
</li>
<li>
<a class="entypo-menu" href="demo04.html"></a> <span>LayerSwipe</span>
</li>
</ul>
<!--******************************************************地图显示DIV*****************************************************************-->
<div id="viewDiv01"></div>
<div id="viewDiv02"></div>
<div id="viewDiv03"></div>
<div id="viewDiv04"></div>
<div id="viewDiv05"></div>
<!--******************************************************地图切换DIV*****************************************************************-->
<div id="popdiv_write">
<div id="write_output">
<div id="basemap01" class="basemap" ><img src="img/gray.png"/></div>
<div id="basemap02" class="basemap" ><img src="img/hybrid.jpg"/></div>
<div id="basemap03" class="basemap" ><img src="img/national_geographic.jpg"/></div>
<div id="basemap04" class="basemap" ><img src="img/osm.jpg"/></div>
<div id="basemap05" class="basemap" ><img src="img/streets.png"/></div>
</div>
</div>
</body>
</html>
Part 2:CSS
html, body, #viewDiv01 {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#popdiv_write{
position: absolute;
top: 10px;
right: 10px;
width: 140px;
height: 93%;
padding: 5px;
background-size: 100%;
background-color: #C0C0C0;
opacity: 0.8;
z-index: 9;
border: 3px dashed #000000;
border-radius:5px ;
}
.basemap{
margin: 10px;
z-index: 20;
}
Part 3:Javascript
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
//**********************************************功能1:切换地图的底图**********************************************************
var map01 = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv01",
map: map01,
center: [-118.71511,34.09042],
zoom: 11
});
document.getElementById("basemap01").addEventListener("click",function(){
map01.basemap= "gray";
});
document.getElementById("basemap02").addEventListener("click",function(){
map01.basemap= "hybrid";
});
document.getElementById("basemap03").addEventListener("click",function(){
map01.basemap= "national-geographic";
});
document.getElementById("basemap04").addEventListener("click",function(){
map01.basemap= "osm";
});
document.getElementById("basemap05").addEventListener("click",function(){
map01.basemap= "streets";
});
//**********************************************功能:显示地图的比例尺,鼠标等坐标点等**********************************************************
//*** 添加DIV用于显示坐标等信息 ***//
var coordsWidget = document.createElement("div");
coordsWidget.id = "coordsWidget";
coordsWidget.className = "esri-widget esri-component";
coordsWidget.style.padding = "7px 15px 5px";
view.ui.add(coordsWidget, "bottom-left");
//***显示经纬度、比例尺大小和尺度***//
function showCoordinates(pt) {
var coords = "Lat/Lon " + pt.latitude.toFixed(3) + " " + pt.longitude.toFixed(3) +
" | Scale 1:" + Math.round(view.scale * 1) / 1 +
" | Zoom " + view.zoom;
coordsWidget.innerHTML = coords;
}
//*** 添加事件显示中心的坐标(在视图停止移动之后) ***//
view.watch(["stationary"], function() {
showCoordinates(view.center);
});
//*** 添加显示鼠标的坐标点***//
view.on(["pointer-down","pointer-move"], function(evt) {
showCoordinates(view.toMap({ x: evt.x, y: evt.y }));
});
});
Part 4:Menu(CSS)
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
@-webkit-keyframes flip {
0%{-webkit-transform:rotateY(0deg);
opacity:1;}
100%{-webkit-transform:rotateY(95deg);
opacity:0;}
}
@-moz-keyframes flip {
0%{-webkit-transform:rotateY(0deg);
opacity:1;}
100%{-webkit-transform:rotateY(95deg);
opacity:0;}
}
@-o-keyframes flip {
0%{-webkit-transform:rotateY(0deg);
opacity:1;}
100%{-webkit-transform:rotateY(95deg);
opacity:0;}
}
@keyframes flip {
0%{-webkit-transform:rotateY(0deg);
opacity:1;}
100%{-webkit-transform:rotateY(95deg);
opacity:0;}
}
body {
background:url(forestblur.jpg) no-repeat;
background-size:cover 100%;
}
h2 {
color: #555;
text-align: center;
}
ul {
position:absolute;
top: 45px;
left: 15px;
margin:50px auto;
padding:0;
z-index: 9;
width:200px;
height:220px;
list-style:none;
-webkit-perspective:1000;
-moz-perspective:1000;
-o-perspective:1000;
perspective:1000;
}
li {
margin:2px 0;
padding:0;
}
li a {
display:block;
height:18px;
width:20px;
background:rgba(155,155,155,0.5);
color:#fff;
padding:8px 6px;
text-decoration:none;
text-align:center;
}
li span {
width:154px;
float:left;
text-align:center;
background:rgba(155,155,155,0.5);
color:#fff;
margin:-34px 34px;
padding:8px 6px;
transform-origin:0%;
opacity:0;
-webkit-transform:rotateY(95deg);
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s;
transition:.5s;
-webkit-animation: flip 2s;
-moz-animation: flip 2s;
-o-animation: flip 2s;
animation: flip 2s;
}
span[class='menu']{-webkit-animation:none;}
li:nth-child(2) span {
-webkit-animation-delay:.5s;
-moz-animation-delay:.5s;
-o-animation-delay:.5s;
animation-delay:.5s;}
li:nth-child(3) span {
-webkit-animation-delay:.4s;
-moz-animation-delay:.4s;
-o-animation-delay:.4s;
animation-delay:.4s;}
li:nth-child(4) span {
-webkit-animation-delay:.3s;
-moz-animation-delay:.3s;
-o-animation-delay:.3s;
animation-delay:.3s;}
li:nth-child(5) span {
-webkit-animation-delay:.2s;
-moz-animation-delay:.2s;
-o-animation-delay:.2s;
animation-delay:.2s;}
li:nth-child(6) span {
-webkit-animation-delay:.1s;
-moz-animation-delay:.1s;
-o-animation-delay:.1s;
animation-delay:.1s;}
li a:hover ~ span {
opacity:1;
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s;
transition:.5s;
}
【? You have to know: ?】
-
这个是功能的全部代码,我的项目界面是这样嘚:
····其中Demo01是该示例代码,对应css01;界面中有设置一个功能切换菜单Menu(对应样式为CSS_Menu);img为切换底图时界面上显示的图片引用; -
功能实现界面如下:
代码下载地址:链接:WebGIS_Demo_X4 提取码:uy3p -
实例中主要思路:点击图片,响应对应click事件——切换底图样式到“gray”
-
Select BaseMap 该官网上示例代码中,切换使用的是已经写好的切换的类似插件的模块,直接添加引用便可加入到界面.