【WebGIS实例】（9）ArcGIS REST Service 点周边查询

背景

有这么一个需求，在地图上点击一个点，以该点为中心绘制半径为100米的圆，然后从arcgis rest 服务里查询与该圆相交或包含关系的矢量要素。简单来说就是点周边查询或者说是缓冲区查询。

我问了下ChatGPT，按理来说ArcGIS Service自身就可以进行缓冲区查询的，但是可能我那个业务系统用的版本比较老，查的时候一直提示参数错误，别无他法，只得曲线救国。

实现思路：

1. 获取点击位置的坐标，并以此为中心利用turf.js生成一个多边形圆（GeoJSON格式）
2. 将GeoJSON格式的多边形圆转换为EsriJSON格式
3. 直接进行ArcGIS REST Service的Query请求

实现

第一步：生成一个圆

npm install @turf/turf

import * as turf from '@turf/turf'

const point = [lng, lat] // 圆心点
const radius = 0.5; // 半径
const options = { steps: 50, units: 'kilometers' };
const circle = turf.circle(point, radius, options);

console.log('circle: ', circle); 
// 打印一下，我们得到了一个geojson格式的圆，见下图

第二步：圆的格式转换

为什么要做这一步？因为ArcGIS REST Service的查询中输入的矢量（好像）只支持esri-json格式。

npm install @terraformer/arcgis

import { geojsonToArcGIS } from "@terraformer/arcgis"

const esriCircle = geojsonToArcGIS(circle)

console.log('esriCircle: ', esriCircle);
// 打印一下，我们得到了一个esrijson格式的圆，见下图

第三步：查

import { arcgisToGeoJSON } from "@terraformer/arcgis"

const params = {
  returnGeometry: true,
  where: '1=1',
  outSR: 4326,
  outFields: '*',
  inSR: 4326,
  "geometry": JSON.stringify(esriCircle.geometry),
  "geometryType": "esriGeometryPolygon",
  spatialRel: 'esriSpatialRelIntersects',
  geometryPrecision: 6,
  "f": "json",
};
axios({
  method: 'get',
  url: url, // 示例：http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer/0/query
  params,
}).then(res => {
  const geojsonData = arcgisToGeoJSON(res.data) // 再把格式转换回geojson
  console.log('geojsonData: ', geojsonData);
})

---

其他

这是一个常见的通过ArcGIS发布的服务的Query界面：Query: China (ID: 0) (arcgisonline.cn)