ArcGIS API for JS根据邮编返回经纬度（esriRequest）

前言

ArcGIS Online (AGOL) 是一个面向GIS用户的云平台。而esriRequest API是ArcGIS API for JavaScript中的一个模块，用于与ArcGIS Online的REST API进行通信。它提供了一个简单的接口来发送HTTP请求和处理响应。

主要功能如下：

1. 发送请求: esriRequest可以用于发送GET、POST、PUT和DELETE等各种类型的请求。可以使用该API从ArcGIS Online的服务中获取地图、图层、要素数据等。
2. 处理响应: esriRequest可以处理返回的响应数据，比如获取地图图层、要素信息等。它还可以处理错误响应和超时，并提供错误信息以供处理。
3. 添加认证信息: esriRequest还支持在请求中添加认证信息，以实现对ArcGIS Online服务的访问控制。可以通过使用API密钥、令牌、用户名和密码等进行身份验证。

总之，esriRequest API使得在前端地图开发中与ArcGIS Online进行通信变得更加简单和灵活，可以方便地获取和处理地图相关的数据，并进行一系列地理空间分析。这意味着可以通过esriRequest API从ArcGIS Online获取地理数据，并使用JavaScript代码对其进行处理和分析。

一些常见的用途包括：

1. 获取地图服务：你可以使用esriRequest API发送HTTP请求来获取ArcGIS Online上的地图服务。这些地图服务可以提供底图、瓦片图层、影像图层等地理数据。
2. 查询要素数据：通过向地图服务发送查询请求，你可以使用esriRequest API检索地图中的要素数据，如点、线、多边形等。这使得你可以根据特定的条件筛选和获取地图中的数据。
3. 执行地理空间分析：esriRequest API还允许你使用ArcGIS Online提供的地理空间分析服务。你可以发送请求以计算空间关系、缓冲区、交集、距离等。

除了使用esriRequest API进行基本的数据获取和分析之外，你还可以结合ArcGIS API for JavaScript的其他模块和功能来创建交互式的地图应用程序。该API提供了丰富的功能，包括绘图工具、地理编码、路线规划等，可以让你构建出功能强大的地图。

邮编获取经纬度

接下来介绍根据邮编获取经纬度的方法

1、首先初始化地图，不会的小伙伴可以看上篇文章，这里就不多赘述了。

2、引入esriRequest

 //定义一个包含有JS API中js开发包和css样式文件的对象
 const option = {
   url: "https://js.arcgis.com/4.28/",
   css: "https://js.arcgis.com/4.28/esri/themes/light/main.css",
 };

 //通过loadModules来做衔接引入类
 loadModules(
   [
     "esri/Map", // 地图
     "esri/views/MapView", // 地图视图
     "esri/request",
   ],
    option
  ).then(([Map, MapView, esriRequest]) => {
    //实例化地图
    this.map = new Map({
    basemap: "streets", // 地图底图
    });
  }）

3、如何使用

和普通的接口请求一样，我们只需要将参数传入，在取用返回的值即可。

  var url =
"https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates"
  var params = 
    { 
      f: "json",
      SingleLine: this.zipCode, //邮编
    };
  esriRequest(url, {
    query: params,
    }).then((response) => {
      const candidates = response.data.candidates;
      if (candidates.length > 0) {
        const candidate = candidates[0];
        const location = candidate.location;
        this.latitude = location.y;
        this.longitude = location.x;
        console.log("经度：" + location.x, "纬度：" + location.y);
        } else {
          console.log("地址解析失败");
          }
    })

可以看到控制台打印出了经纬度。

 

完整代码 

<template>
  <div id="arcmap"></div>
</template>

<script>
import { loadModules } from "esri-loader";

export default {
  name: "HelloWorld",
  data() {
    return {
      map: null,
      view: null,
      longitude: -119.061355, //经度
      latitude: 34.35698, //纬度
      zipCode: "93060", // 邮政编码
    };
  },
  created() {
    this._createMapView();
  },
  methods: {
    _createMapView() {
      const _self = this; //定义一个_self防止后续操作中this丢失
      //定义一个包含有JS API中js开发包和css样式文件的对象
      const option = {
        url: "https://js.arcgis.com/4.28/",
        css: "https://js.arcgis.com/4.28/esri/themes/light/main.css",
      };

      //通过loadModules来做衔接引入类
      loadModules(
        [
          "esri/Map", // 地图
          "esri/views/MapView", // 地图视图
          "esri/request",
        ],
        option
      )
        .then(([Map, MapView, esriRequest]) => {
          //实例化地图
          this.map = new Map({
            basemap: "streets", // 地图底图
          });
          var url =
            "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates";

          var params = {
            f: "json",
            SingleLine: this.zipCode, //邮编
          };
          esriRequest(url, {
            query: params,
          }).then((response) => {
            const candidates = response.data.candidates;
            if (candidates.length > 0) {
              const candidate = candidates[0];
              const location = candidate.location;
              this.latitude = location.y;
              this.longitude = location.x;
              console.log("经度：" + location.x, "纬度：" + location.y);
            } else {
              console.log("地址解析失败");
            }
            this.view = new MapView({
              //实例化地图视图
              container: "arcmap",
              map: this.map,
              zoom: 9,
              center: [this.longitude, this.latitude],
            });
            // 去除左上角组件
            this.view.ui.components = [];
          });
        })
        .catch((err) => {
          _self.$message("地图创建失败，" + err);
        });
    },
  },
};
</script>

<style scoped>
#arcmap {
  height: 1000px;
  width: 100%;
}
</style>