arcgis js 底图切换_3.选择底图

最新推荐文章于 2023-12-03 22:28:27 发布

weixin_39966909

最新推荐文章于 2023-12-03 22:28:27 发布

阅读量375

点赞数

文章标签： arcgis js 底图切换

本文链接：https://blog.csdn.net/weixin_39966909/article/details/111682088

版权

概述

本节您将学到： 怎么创建一个可以交互选择和显示 ArcGIS Online上底图的应用。

应用可以使用和展示托管在ArcGIS Online和ArcGIS Enterprise栅格切片底图和矢量切片底图，同样可使用您通过ArcGIS Vector Tile Style Editor设计的自定义底图（注：当然也可以是自己发布的栅格底图和矢量底图）。使用BasemapToggle和BasemapGallery微件可以创建一个切换底图的应用。BasemapToggle允许您在两个底图之间切换，而BasemapGallery可让您在一个ArcGIS Online群组( ArcGIS Online group)中的多个底图进行切换。您的应用可以使用一组有Esri维护的底图，也可以使用由您自己定义的底图。关于如何设计自定义底图可以参考Style a vector basemap教程。

在本教程中，您将使用ArcGIS API for JavaScript提供的BasemapToggle和BasemapGallery微件为用户提供选择和展示托管在ArcGIS Online上底图的功能。

展示效果请点击：https://s.codepen.io/esri_devlabs/debug/WabNBv

撸代码步骤

创建一个简单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 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.11/esri/css/main.css">
  <script src="https://js.arcgis.com/4.11/"></script>

  <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: [-118.80543,34.02700],
        zoom: 13
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

切换底图

使用BasemapToggle微件可以很简单的实现两个底图之间的切换。本小节您将配置这个微件用来切换地形图底图（Topographic）和影像（Satellite）底图。 - 在require中加入和的模块引用并且更新function的参数。这两个模块在后续的步骤中用到。

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

在function的代码末尾，创建一个BasemapToggle微件，设置其view属性和nextBasemap为satellite。

var basemapToggle = new BasemapToggle({
   view: view,
   nextBasemap: "satellite"
 });

将创建的微件添加到view默认UI(DefaultUI)的右下角。

view.ui.add(basemapToggle, "bottom-right");

运行，试着切换底图。

从ArcGIS Online中选择底图

另外一种选择底图的方式是通过BasemapGallery微件。在本小节，您将使用BasemapGallery微件加载、选择和显示 ArcGIS Online上的底图。 - 在function中，将以上写的BasemapToggle代码注释掉。 - 在主function中创建BasemapGallery并配置其从ArcGIS Online中选择底图。设置view为当前view。设置source为 ArcGIS Online portal，设置其url为https://wwww.arcgis.com、设置useVectorBasemaps为true使其从矢量切片组中选择底图加载，如果您设置为false将从栅格切片组中选择底图加载。

var basemapGallery = new BasemapGallery({
      view: view,
      source: {
        portal: {
          url: "https://www.arcgis.com",
          useVectorBasemaps: true  // Load vector tile basemaps
        }
      }
    });

将创建的微件添加到view默认UI(DefaultUI)的右上角。
运行，试着切换不同底图。

到此您已经配置完这两个微件啦。

您的页面应该是这样:https://codepen.io/esri_devlabs/pen/WabNBv?editors=1000

再撸点

加载矢量切片底图

试着将BasemapToggle代码中的useVectorBasemaps属性设置为false使其从栅格切片组中选择底图加载。

var basemapGallery = new BasemapGallery({
      view: view,
      source: {
        portal: {
          url: "https://www.arcgis.com",
          //*** ADD ***//
          useVectorBasemaps: false  //加载栅格切片底图
        }
      }
    });

完整代码

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Select a basemap</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <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: [-118.80543,34.02700],
        zoom: 13
      });

      //-------使用BasemapToggle-----------
        // var basemapToggle = new BasemapToggle({
          // view: view,
          // secondMap: "satellite"
        //});
        // view.ui.add(basemapToggle,"bottom-right");
      //-------使用BasemapToggle-----------


      //-------使用BasemapGallery-----------
      var basemapGallery = new BasemapGallery({
        view: view,
        source: {
          portal: {
            url: "http://www.arcgis.com",
            useVectorBasemaps: true, // Load vector tile basemap group
          },
        }
      });
      view.ui.add(basemapGallery, "top-right"); // Add to the view
      //-------使用BasemapGallery-----------
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>