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

目录

  • Basemap类介绍
    • Basemap类的常用属性
    • Basemap类的常用方法
  • 使用Basemap添加自定义底图
    • 引用Basemap
    • 引用切片图层
    • 创建一个新的Basemap对象
    • 将自定义图层应用到地图视图中
    • 引入并创建Camera对象
    • 引入并创建SceneView对象

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"
  });

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

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

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

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

引入并创建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 // 相机偏航角
  });

引入并创建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 = [];
}

至此,我们已经实现了自定义底图,并创建了三维场景,
运行程序,刷新浏览器,查看效果
ArcGIS Maps SDK for JavaScript系列之四:添加自定义底图_第1张图片
好了,今天就先到这里吧,喜欢的小伙伴点赞关注加收藏哦!

你可能感兴趣的:(ArcGIS,arcgis,javascript,前端,vue,3d)