ArcGIS API for JavaScript 4.x 教程(二)切换基础地图图层

了解如何更改地图中的基础地图图层。

基础地图图层:

基础地图层是用于访问和显示来自基础地图层服务的数据的层。它为地图或场景提供视觉和地理上下文,通常包含具有管理边界和地名的全局数据。

基本地图图层服务提供了许多基本地图图层样式,例如地形、街道和图像,您可以在地图中使用这些样式。

在本教程中,您将使用Basemap Toggle和BasemapGallery小部件来选择和显示不同的Basemap图层。

笔记

有关更多信息,请访问映射API和定位服务指南中的Basemap层。

步骤

创建新笔

若要开始,请完成"显示地图"教程或使用此笔。

设置API键

要访问ArcGIS服务,您需要一个API密钥。

转到您的仪表板以获取API密钥。

在CodePen中,将apiKey设置为您的密钥,这样它就可以用于访问basemap层和位置服务。

js 复制代码
esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
  basemap: "arcgis-topographic" // Basemap layer service
});

添加模块

在require语句中,添加Basemap Toggle和BasemapGallery模块。

js 复制代码
    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/widgets/BasemapToggle",
      "esri/widgets/BasemapGallery"

    ], function(esriConfig, Map, MapView, BasemapToggle, BasemapGallery) {

在基础地图之间切换

在两个基本地图之间进行选择的一个简单方法是使用基本地图切换小部件。使用小部件在arcgis地形图和arcgis图像基础图之间切换。

创建"Basemap Toggle"并设置视图。将nextBasemap属性设置为arcgis图像。

js 复制代码
      const basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "arcgis-imagery"
     });

将小部件添加到视图的右下角。

js 复制代码
view.ui.add(basemapToggle,"bottom-right");

在基础地图之间切换。

从图库中选择基础地图

您也可以使用BasemapGallery小部件来选择不同的基础地图。

创建一个BasemapGallery,并在源属性中设置查询以搜索"开发人员的世界Basemaps"basemap组。

js 复制代码
      const basemapGallery = new BasemapGallery({
        view: view,
        source: {
          query: {
            title: '"World Basemaps for Developers" AND owner:esri'
          }
        }
      });

将小部件添加到视图的右上角。

javascript 复制代码
      view.ui.add(basemapGallery, "top-right"); // Add to the view

完整代码

html 复制代码
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Change the basemap layer</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/widgets/BasemapToggle",
      "esri/widgets/BasemapGallery"

    ], function(esriConfig, Map, MapView, BasemapToggle, BasemapGallery) {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic"
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13
      });

      const basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "arcgis-imagery"
     });

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

      const basemapGallery = new BasemapGallery({
        view: view,
        source: {
          query: {
            title: '"World Basemaps for Developers" AND owner:esri'
          }
        }
      });

      view.ui.add(basemapGallery, "top-right"); // Add to the view

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

运行应用程序

在CodePen中,运行代码以显示地图。

您的应用程序中应该有两个小部件,它们提供了不同的方式来选择基本地图。

注明:翻译自esri,仅供个人查阅使用,侵删

相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1236 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉8 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
*TQK*10 小时前
✨1.HTML、CSS 和 JavaScript 是什么?
前端·javascript·css·html
优联前端10 小时前
DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方DeepSeek接入)
javascript·pycharm·ai编程·前端开发·优联前端·deepseek
萧大侠jdeps10 小时前
el-select 添加icon
前端·javascript·vue.js