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,仅供个人查阅使用,侵删

相关推荐
fdc201715 小时前
Avalonia:使用附加属性实现命令与事件的绑定
javascript·windows·microsoft
掘金安东尼16 小时前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
前端小巷子16 小时前
JS 打造动态表格
前端·javascript·面试
Icoolkj1 天前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
^Rocky1 天前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵1 天前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
笑鸿的学习笔记1 天前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
萌萌哒草头将军1 天前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
gnip1 天前
http缓存
前端·javascript
JohnYan1 天前
工作笔记 - 微信消息发送和处理
javascript·后端·微信