ArcGIS学习Demo——选择底图（basemap）

最新推荐文章于 2024-11-11 09:56:45 发布

哈撒keyi

最新推荐文章于 2024-11-11 09:56:45 发布

阅读量3.1k

点赞数 1

分类专栏： ArcGIS 文章标签： ArcGIS javascript

原文链接：https://developers.arcgis.com/labs/javascript/select-a-basemap/

版权

ArcGIS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原文地址

选择底图

创建一个基础的ArcGIS页面
修改加载资源项
添加切换底图插件
- BasemapToggle
- BasemapGallery
完整代码
- BasemapToggle Demo
- BasemapGallery Demo

创建一个基础的ArcGIS页面

//2D
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.15/"></script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <script>
	    require([
	        "esri/Map",
	        "esri/views/MapView"
	      ], function(Map, MapView) {
		  //创建一个地图对象
	      var map = new Map({
	        basemap: "topo-vector"
	      });
		  //创建一个地图视图
	      var view = new MapView({
	        container: "viewDiv",
	        map: map,
	        center: [121.47, 31.23], // 经纬坐标（上海）
	        zoom: 13
	      });
	    });
    </script>
  </body>
</html>

上述代码分析见文章：ArcGIS for JavaScript构建一个起始demo

修改加载资源项

将基础demo中的require部分改为下述代码

 require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/BasemapToggle",
      "esri/widgets/BasemapGallery"
    ], function(Map, MapView, BasemapToggle, BasemapGallery) {

上述修改只做了一件事：在原有基础上添加了加载项

添加切换底图插件

BasemapToggle

BasemapToggle可以在页面上添加一个切换底图的功能配件，切换的basemap通过nextBasemap设置。
具体操作为：在基础demo的function 最后添加以下代码：

//创建一个并配置一个basemapToggle
 var basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "satellite"
      });
 //在视图上添加basemaotoggle 配件
 view.ui.add(basemapToggle, "bottom-right");

BasemapGallery

BasemapGallery可以在页面上添加一个切换底图功能的目录配件，它与BasemapToggle的区别就是：BasemapToggle只可以在两张底图之间切换，而BasemapGallery提供一组底图供选择切换。
具体操作为：在基础demo的function最后添加以下代码

//创建并配置一个basemapGallery
var basemapGallery = new BasemapGallery({
        view: view,
        source: {
          portal: {
            url: "https://www.arcgis.com",
            useVectorBasemaps: true  // Load vector tile basemaps
          }
        }
      });
//在视图上添加basemapGallery配件
 view.ui.add(basemapGallery, "top-right");

完整代码

BasemapToggle Demo

//2D
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.15/"></script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <script>
	    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/BasemapToggle",
      "esri/widgets/BasemapGallery"
    ], function(Map, MapView, BasemapToggle, BasemapGallery) {
		  //创建一个地图对象
	      var map = new Map({
	        basemap: "topo-vector"
	      });
		  //创建一个地图视图
	      var view = new MapView({
	        container: "viewDiv",
	        map: map,
	        center: [121.47, 31.23], // 经纬坐标（上海）
	        zoom: 13
	      });
        //创建一个并配置一个basemapToggle
        var basemapToggle = new BasemapToggle({
              view: view,
              nextBasemap: "satellite"
            });
        //在视图上添加basemaotoggle 配件
        view.ui.add(basemapToggle, "bottom-right");
      	});
    </script>
  </body>
</html>

运行结果

BasemapGallery Demo

//2D
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.15/"></script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <script>
	    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/BasemapToggle",
      "esri/widgets/BasemapGallery"
    ], function(Map, MapView, BasemapToggle, BasemapGallery) {
		  //创建一个地图对象
	      var map = new Map({
	        basemap: "topo-vector"
	      });
		  //创建一个地图视图
	      var view = new MapView({
	        container: "viewDiv",
	        map: map,
	        center: [121.47, 31.23], // 经纬坐标（上海）
	        zoom: 13
	      });

        //创建并配置一个basemapGallery
        var basemapGallery = new BasemapGallery({
                view: view,
                source: {
                  portal: {
                    url: "https://www.arcgis.com",
                    useVectorBasemaps: true  // Load vector tile basemaps
                  }
                }
              });
        //在视图上添加basemapGallery配件
        view.ui.add(basemapGallery, "top-right");
    </script>
  </body>
</html>