在前端开发中，ArcGIS API for JavaScript 是一种非常常见的地图库。虽然 API 本身具有很高的功能性和可定制性，但是 TypeScript 开发人员使用该库时可能会感到困难。本文将介绍如何使用 @types/arcgis-js-api npm 包使开发者能够轻松地使用 ArcGIS API for JavaScript 开发 TypeScript 应用程序。
安装
使用 npm 安装类型化的 ArcGIS API for JavaScript 是非常容易的。首先需要安装 arcgis-js-api 和 @types/arcgis-js-api npm 包，命令如下：
npm install arcgis-js-api @types/arcgis-js-api
基础用法
下面是如何在 TypeScript 中使用 @types/arcgis-js-api 包中的基本功能：
-- -------------------- ---- ------- ------ - -- ---- ---- ------- ------ ------- - ------------------------------ ----- --- - --- ---------- -------- --------- --- ----- ---- - --- --------- ---------- ---------- ---- ---- ------- ------ ------ ----- - ---展开代码
这里我们先引入了 esri 和 MapView，然后创建了一个地图对象和视图对象，并将其渲染到 mapView 容器中。
深入使用
图层
在 ArcGIS API 中，图层是 maps 的基本组成部分。如果需要添加图层，可以通过以下方法使用：
import MapImageLayer = require("esri/layers/MapImageLayer"); const layer = new MapImageLayer({ url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer", visible: true }); map.add(layer);
这里我们创建了一个 MapImageLayer 对象，该对象连接到一个图像服务器并将其对象添加到地图中。
工具
ArcGIS API 中提供了一些常见的工具，例如缩放工具、测量工具等。我们可以通过以下方式来使用它们：
import ScaleBar = require("esri/widgets/ScaleBar"); const scaleBar = new ScaleBar({ view: view, unit: "dual" }); view.ui.add(scaleBar, "bottom-left");
我们创建了一个 ScaleBar 对象，并将它添加到了视图的左下角。
组件
继续往上面的代码块添加下面的代码，可以设置并运行组件。
-- -------------------- ---- ------- ------ ------ - ----------------------- ------ --------- - --------------------------------- ------ --------- - ---------------------------------- ----- -------- - ----------------------------------- ----- ------ - --- -------- ----------- - --- -------- - --- ----- --------- - --- ----------- ---- ----------------------------------------------------------------------------------- --- ---------------------- ----- ---- - --- --------- ---------- ---------- ---- ------ --- ----- ------------- - --- --------------- ----- ----- ------------ ----------- --- -------------------------- ---------------- ----- --------- - --- ----------- ----- ---- --- ---------------------- -------------展开代码
我们这里选择了一个地图 ID 并创建了一个 WebMap 对象，并将其渲染到容器中。我们还创建了一个 tileLayer 对象，并将其添加到了 WebMap 对象中。然后，我们创建了一个 BasemapToggle 对象和一个 LayerList 对象，并将它们添加到视图中。
样式化
除了基本的功能之外，@types/arcgis-js-api 还允许用户对样式进行定制。下面演示如何自定义一个带有标题的最小化缩放工具：
-- -------------------- ---- ------- ------ ------ - ------------------------------- ------ -------- - --------------------------------- ----- -------- - --- ---------- ----- ----- ----- ------ --- ----- ------ - --- -------- ----- ----- -------- --------- ---------------- ----------------- -------------- ------------ ----- ---------- --- ------------------- ---------------展开代码
这里，我们使用了 Expand 对象来创建一个最小化缩放工具。我们还设置了 expandIconClass 和 expandTooltip 属性来定制该组件的样式。
结论
以上，@types/arcgis-js-api 在 TypeScript 中的使用教程就完毕了。本文覆盖了基本用法和一些深度功能，例如图层、工具、组件和样式化，将有助于开发者更深入地了解类型化的 ArcGIS API for JavaScript，并使用它来开发更高品质的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc166b5cbfe1ea0611dae
