SuperMap iClient for Leaflet 几何查询（圆形）

本文链接：https://blog.youkuaiyun.com/qq_46005336/article/details/127002201

【问题描述】：在使用iClient for Leaflet的过程中，有时会遇到需要通过圆形来进行几何查询的场景，此时就可以使用超图（SuperMap）提供的Geometry 查询参数类来实现。但是通过查询相关的API文档，geometry仅支持L.polygon，并且使用Leaflet生成的圆也仅仅是一个点对象，无法直接实现。

【解决方案】

（1）利用点生成缓冲区的方式来生成面对象，再进行几何查询。

这边以iClient for Leaflet官网示例【几何对象缓冲区分析】为例：https://iclient.supermap.io/examples/leaflet/editor.html#04_bufferAnalystService_geometry

//对生成的点进行缓冲区分析
geoBufferAnalystParams = new L.supermap.GeometryBufferAnalystParameters({
       sourceGeometry: roadLine,
       bufferSetting: new L.supermap.BufferSetting({
       endType: L.supermap.BufferEndType.ROUND,
       leftDistance: new L.supermap.BufferDistance({value: 300}),
       rightDistance: new L.supermap.BufferDistance({value: 300}),
       semicircleLineSegment: 50
            })
        });
bufferAnalystService.bufferAnalysis(geoBufferAnalystParams, function (serviceResult) {
       resultLayer = L.geoJSON(serviceResult.result.resultGeometry).addTo(map);

（2）将circle转化为polygon

①利用 leaflet-geoman.js 提供的方法L.PM.Utils.circleToPolygon()

这边以iClient for Leaflet官网示例【几何查询】为例：

https://iclient.supermap.io/examples/leaflet/editor.html#01_mapQueryByGeometry

<!--引入脚本及css文件-->
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />

//几何查询
function query() {
        var circle = L.circle([0,20], {color: 'red',radius:2000000});
        var polygon = L.PM.Utils.circleToPolygon(circle, 600);
        polygon.addTo(map);
        var param = new L.supermap.QueryByGeometryParameters({
            queryParams: {name: "Capitals@World.1"},
            geometry: polygon
        });
        new L.supermap
            .QueryService(url)
            .queryByGeometry(param, function (serviceResult) {
                var result = serviceResult.result;
                resultLayer = L.geoJSON(result.recordsets[0].features).addTo(map);
            });
    }