地图卷帘实现——参考ArcGIS API

添加点、线、面图层

  • 参考教程:ArcGIS API for Javascript
  • 本示例参考:Add Layers To 2D Map
  • 编辑软件: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="css/css04.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/js04.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 onmousemove="SwipeMap()">

			<div id="viewDiv01"></div>
			<div id="viewDiv02"></div>

		</div>

	</body>

</html>

Part 2:CSS

#viewDiv02 {
	 position: absolute;
      padding: 0;
      margin: 0;
      top: 0px;
      right: 0px;
      height: 100%;
      width: 100%;
    }

Part 3:Javascript

require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {
//**********************************************功能:swip map**********************************************************
      var map01 = new Map({
        basemap: "streets"
      });
      
      var view = new MapView({
        container: "viewDiv01",
        map: map01,
        center: [-118.71511,34.09042],
        zoom: 11
      });
      
      var map02 = new Map({
        basemap: "gray"
      });
      
      var view = new MapView({
        container: "viewDiv02",
        map: map02,
        center: [-118.71511,34.09042],
        zoom: 11
      });
      
  });
  
function SwipeMap()
{
    console.log(event.clientX);
    //鼠标屏幕x坐标等于上层地图宽度
    document.getElementById("viewDiv02").style.clip="rect(0px,"+event.clientX +"px,768px,0px)";

}
    

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: ?】
  • 这个是功能的全部代码,我的项目界面是这样嘚,本模块功能对应Demo03、js03、css03文件:
    文件目录
    代码下载地址:链接:WebGIS_Demo_X4 提取码:uy3p

····其中Demo04是该示例代码,对应css04,对应js04;界面中有设置一个功能切换菜单Menu(对应样式为CSS_Menu);img为第一个功能切换底图时界面上显示的图片引用;

  • 功能实现界面如下:
    在这里插入图片描述

  • 功能实现思路:
    两幅地图卷帘,则在对应的地图显示窗口(两个div)中,两幅地图位置完全重合即可实现,同时设置上面的地图的div窗口的宽度与鼠标的屏幕坐标的x值一致即可;
    核心代码

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值