添加底图＆切换底图——参考ArcGIS API

最新推荐文章于 2024-04-22 14:56:12 发布

刘彩虹

最新推荐文章于 2024-04-22 14:56:12 发布

阅读量6.1k

点赞数 4

分类专栏： 2016-2021 学习随记文章标签： HTML WebGIS开发入门添加地图＆切换底图 ArcGIS API For JavaScript

本文链接：https://blog.csdn.net/qq_41553157/article/details/90449710

版权

2016-2021 学习随记专栏收录该内容

32 篇文章 8 订阅

订阅专栏

添加底图＆切换底图

参考教程：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 该官网上示例代码中，切换使用的是已经写好的切换的类似插件的模块，直接添加引用便可加入到界面.