背景
有这么一个需求,在地图上点击一个点,以该点为中心绘制半径为100米的圆,然后从arcgis rest 服务里查询与该圆相交或包含关系的矢量要素。简单来说就是点周边查询或者说是缓冲区查询。
我问了下ChatGPT,按理来说ArcGIS Service自身就可以进行缓冲区查询的,但是可能我那个业务系统用的版本比较老,查的时候一直提示参数错误,别无他法,只得曲线救国。
实现思路:
- 获取点击位置的坐标,并以此为中心利用turf.js生成一个多边形圆(GeoJSON格式)
- 将GeoJSON格式的多边形圆转换为EsriJSON格式
- 直接进行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)