添加底图＆切换底图

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

添加底图＆切换底图——参考ArcGIS API相关推荐

初学ArcGIS API for JavaScript
初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的 ...
arcgis js 底图切换_ArcGIS API for JavaScript切换底图
由于小编也是刚接触GIS,也常被网上的各种资源所混淆,关于地图的基本创建就有很多方法.其实无关就是3x和4x版本的不同.3x版本大多是3.33,4x版本为4.16最新版本.以后小编也将采用最新版本. ...
ArcGIS API for JavaScript - 将图片设为map的底图
1,问题引出我们在开发web应用时,需要一些地图作为我们的底图.ArcGIS API给我们提供了样式众多的basemap,我们还可以使用ArcgisOnline提供的一些地图服务以及自己发布的一些地 ...
arcgis js（五）切换底图
1.经过四节的学习终于能够显示天地图了arcgis js(四)加载天地图_郝大大的博客-CSDN博客,以后的开发也就能基于天地图的底图了,这节学习天地图矢量底图和影像底图的自由切换,主要介绍两种方法. ...
05 地图添加底图切换控件
本文讲述如何在地图上添加地图切换控件.通过底图切换控件,我们可以实现当前地图和的地图之间的一个切换,效果如下: 如上所示,通过右上角的底图切换控件可以实现两地图之间的切换显示,具体操作如下: 添加底图 ...
maptalks常见操作——图层置顶置底、添加清空图层、添加标注、切换底图、添加缩放工具、事件监听（点击面出弹框）、右键菜单、绘制mark、锁定视角
maptalks常见操作--图层置顶置底.添加清空图层.添加标注.切换底图.添加缩放工具.事件监听(点击面出弹框).右键菜单.绘制mark.锁定视角 1.图层置顶置底 layer.show().br ...
Cesium的学习之路（二）：底图切换
目录前言: 一.加载天地图等WMTS图层二.创建viewer,初始化三.实现切换功能前言: (这一期来的比较晚,最近在分心研究jenkins 结合 gitlab自动化部署.有人可能会疑问了,这 ...
ArcGIS API for JS 4.x + Vue 【1】—— 显示地图和添加点线面
系列文章目录 [1] ArcGIS API for JS 4.x + Vue 之显示地图和添加点线面文章目录系列文章目录前言一.显示地图安装依赖 1. 添加模块 2. 引入CSS样式 3. ...
mapbox 天地图底图切换组件
地图却换组件效果: <template><div id="layerswitch"><div id="right-panel"& ...

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

添加底图＆切换底图

【? You have to know： ?】

添加底图＆切换底图——参考ArcGIS API相关推荐

最新文章

热门文章