ArcGIS Maps SDK for JavaScript系列之四：添加自定义底图

Basemap类介绍

Basemap类是ArcGIS Maps SDK for JavaScript中用于表示地图底图的核心类之一。底图是地图应用程序中用于显示地理数据的背景图层。它提供了基础地理信息，如道路、河流、地貌和地名等。Basemap类提供了一种将地图图层组织成可供用户选择的底图选项的方式。

Basemap类的常用属性

1. id：底图的唯一标识符，用于识别底图对象。
2. title：底图的标题。
3. thumbnailUrl：底图的缩略图URL。
4. baseLayers：包含底图的图层数组。可以通过add()和remove()方法来添加或移除底图的图层。
5. referenceLayers：包含底图的参考图层数组。参考图层是不可见的图层，用于提供地图上的参考信息。
6. loadError：一个布尔值，表示底图是否加载失败。
7. loaded：一个布尔值，表示底图是否已加载。
8. loadStatus：一个字符串，表示加载操作的状态。状态值包括四类：not-loaded(未加载)、loading(加载中)、loaded(已加载)、failed(加载失败)
9. spatialReference：底图的空间参考
   10.portalItem ：portalItem实例，底图关联的ArcGIS Online或Portal for ArcGIS项目的对象。该属性提供了与底图相关的更多信息，如标题、描述、缩略图、标签等。

Basemap类的常用方法

1. cancelLoad()方法：用于取消正在进行中的load()操作。当你在加载底图时需要取消加载操作时，可以使用cancelLoad()方法。如果load()方法正在进行中，调用cancelLoad()方法将取消加载操作。
2. clone()方法：用于创建一个对象的深度克隆。当调用clone()方法时，它会创建一个原始对象的精确副本，包括所有的属性和相关资源。通过在对象上调用clone()方法，我们可以创建一个具有相同配置的对象副本。当我们想要创建一个Basemap实例的副本，同时保留原始对象以供进一步使用或修改时，这会非常有用。
3. destroy()方法：用于销毁Basemap对象以及与之相关的资源，包括它的图层和portalItem（如果有）。调用destroy()方法后，Basemap对象将不再可用，并且释放其所占用的内存和其他系统资源。这个方法在我们不再需要使用Basemap对象时非常有用，它可以帮助我们释放内存并清理相关资源，从而提高应用程序的性能和效率。
4. fromId()方法：用于根据一个已知的基础地图ID创建一个新的Basemap实例。基础地图ID可以是预定义的常见基础地图，如街道地图、卫星影像地图或地形图，也可以是自定义的基础地图。通过调用fromId()方法并提供基础地图ID作为参数，可以很方便地创建一个特定的基础地图实例，而无需手动配置其属性和资源。这对于快速获取特定类型的基础地图非常有用。
5. load()方法：异步加载底图。返回一个Promise对象，可以使用then()方法来处理加载完成后的回调。
6. when()方法：返回一个Promise对象。when()方法允许我们在实例创建后执行操作或处理进一步的操作。它接受一个回调函数作为参数，当实例可用时将执行该函数。可以使用when()来链接额外的操作或执行依赖于实例创建的特定任务。

使用Basemap添加自定义底图

引用Basemap

前面一节我们在vue3中使用ArcGIS API实现了三维地球的加载，这一节我们在此基础上来添加自定义底图，要使用Basemap，我们需要先引入，使用下面的语句引入Basemap
import Basemap from "@arcgis/core/Basemap.js";

引用切片图层

这里我们调用一个在线的地图服务地址http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer，这个地图服务提供的是一个切片服务，因此，我们需要引入切片服务
import TileLayer from "@arcgis/core/layers/TileLayer.js";

创建一个新的Basemap对象

在代码中使用new关键字创建一个Basemap对象，

let basemap = new Basemap({
    baseLayers: [
      new TileLayer({
        url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
        title: "Basemap"
      })
    ],
    title: "basemap",
    id: "basemap"
  });
1
2
3
4
5
6
7
8
9
10

上面的代码中，我们使用new方法创建了一个TileLayer对象，该对象表示一个Web切片图层。给TileLayer中的url属性设置我们发布的地图服务的URL字符串，作为底图的图层数据源。
然后，将这个TileLayer对象放入baseLayers数组中，并将该数组作为参数传递给Basemap。这样，我们就创建了一个包含一个图层的底图对象。同时，为这个底图对象设置了标题和ID，标题和ID都设置为"basemap"。

将自定义图层应用到地图视图中

使用new方法创建Map对象，并将其中的basemap属性设置为上面创建的basemap对象

 const map = new Map({
    basemap: basemap
  });
1
2
3

引入并创建Camera对象

如果使用二维地图，这里不需要引入Camera对象，因为这里我们是使用的三维地图，所以需要引入并创建Camera对象
引入Camera
import Camera from "@arcgis/core/Camera.js";
创建Camera对象，并设置初始值

var camera = new Camera({
    position: { // 相机位置
      x: -123.12,
      y: 40.57,
      z: 2000 // 高度
    },
    tilt: 60, // 相机俯仰角
    heading: 0 // 相机偏航角
  });
1
2
3
4
5
6
7
8
9

引入并创建SceneView对象

SceneView对象是ArcGIS API为我们提供的三维视图场景，使用之前，我们需要先引入
import SceneView from "@arcgis/core/views/SceneView.js";
创建SceneView对象

view = new SceneView({
    center: [-118.80500, 34.02700],
    zoom: 4,
    container: "viewDiv",
    map: map,
    camera: camera // 设置相机
  });
  view.ui.components = [];
}
1
2
3
4
5
6
7
8
9

至此，我们已经实现了自定义底图，并创建了三维场景，
运行程序，刷新浏览器，查看效果

好了，今天就先到这里吧，喜欢的小伙伴点赞关注加收藏哦！