iClient for Leaflet 空间查询，圆形空间查询

忘是亡心i 2023-02-25 07:12 12阅读 0赞

代码片段如下：

function query(_center, _radius) {
        var point_new = L.CRS.EPSG3857.project(_center);
        var dx = point_new.x, dy = point_new.y;
        var radius = _radius;
        //点集
        var parts = [];
        //计算圆的边缘所有点
        for (var i = 0; i < 360; i++) {
            var radians = (i + 1) * Math.PI / 180;
            var circlePoint = [Math.cos(radians) * radius + dx, Math.sin(radians) * radius + dy];
            parts[i] = L.CRS.EPSG3857.unproject(L.point(circlePoint));
        }
        var polygon = L.polygon(parts, { color: 'red' });
        polygon.addTo(_this.map);
        var geometry = L.Util.transform(polygon, L.CRS.EPSG4326, L.CRS.EPSG3857);
        var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
            datasetNames: ["数据源名称:数据集名称"],
            geometry: geometry,
            spatialQueryMode: "INTERSECT"
        });
        var url = '数据服务地址', resultLayer;
        L.supermap
            .featureService(url)
            .getFeaturesByGeometry(geometryParam, function (serviceResult) {
                var iconSize = [48 * _this.rem, 48 * _this.rem], iconAnchor = [24 * _this.rem, 24 * _this.rem]
                var icon_0= L.icon({ iconUrl: "icon_0.png", iconSize, iconAnchor })
                    , icon_1= L.icon({ iconUrl: "icon_1.png", iconSize, iconAnchor })
                    , icon_2= L.icon({ iconUrl: "icon_2.png", iconSize, iconAnchor });
                resultLayer = L.geoJSON(serviceResult.result.features, {
                    pointToLayer: function (feature, latlng) {
                        var _latlng = [feature.properties.T_LATITUDE, feature.properties.T_LONGITUDE];
                        var _type = Number(feature.properties.T_TYPE == null ? -1 : feature.properties.T_TYPE);
                        switch (_type) {
                            case 0: return L.marker(_latlng, { icon: icon_0});
                            case 1: return L.marker(_latlng, { icon: icon_1});
                            case 2: return L.marker(_latlng, { icon: icon_2});
                            default: return L.marker(_latlng);
                        }
                    }
                }).addTo(_this.map);
    
            });

需求说明：  
先要在地图上绘制一个正圆，得到圆形内所有的点要素。  
问题描述：  
       正常来说通过不管是通过[leaflet][]、[iClient for Leaflet][]、[leaflet draw][] 中哪一个来绘制这个圆，得到的结果始终只有一个中心点（圆心）坐标位置。这里我地图服务用的是iServer，查询使用超图的L.supermap.featureService(url).getFeaturesByGeometry(params, callback, resultFormat)方法进行空间查询，然而超图的空间查询只支持以下几种几何查询。显然是没有可以直接用的圆形几何对象。

![20200710201929717.png][]

问题解决：

看起来并没有那么糟糕，这里还有一个中心点可以用。那么想想看圆形也是多边形，刚好这里有一个L.Polygon的几何对象，它只要一组点集就可以构成一个圆形多边形。那么我们可以通过这个点和半径来构成无数个点，将这些个点集组装起来，那么就得到了一个圆形多边形了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkyOTEz_size_16_color_FFFFFF_t_70][]

[leaflet]: https://leafletjs.com/
[iClient for Leaflet]: https://iclient.supermap.io/web/apis/leaflet.html
[leaflet draw]: https://github.com/Leaflet/Leaflet.draw
[20200710201929717.png]: /images/20230209/37260c279e664b38bbf4dad04bd37940.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkyOTEz_size_16_color_FFFFFF_t_70]: /images/20230209/92c1060cbd93476c88c31c48868df6cf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 iClient for Leaflet 空间查询，圆形空间查询

代码片段如下： function query(_center, _radius) { var point_new = L.CRS.EPSG3857.p

忘是亡心i/ 2023年02月25日 07:12/ 0 赞/ 13 阅读

相关矢量数据空间查询

文章目录开篇案例一案例说明代码演示方法总结案例二案例说明代码演示

旧城等待，/ 2023年02月17日 13:27/ 0 赞/ 5 阅读

相关 SuperMap iClient for Leaflet入门学习

Leaflet是一个开源的地图Javascript库； SuperMap iClient for Leaflet 在线示例； https://iclient.superm

淡淡的烟草味﹌/ 2022年12月29日 01:52/ 0 赞/ 157 阅读

相关 mysql空间查询

先建一个空间数据表 CREATE TABLE \`points\` ( \`name\` varchar(20) NOT NULL DEFAULT '', \

左手的ㄟ右手/ 2022年08月19日 02:09/ 0 赞/ 380 阅读

相关 oracle数据库表查询，空间查询

SELECT Total.name "Tablespace Name", Free_space, (total_space-Free_space) Used_s

女爷i/ 2022年08月18日 00:51/ 0 赞/ 291 阅读

相关 oracle表空间查询

\--修改表空间为自动增长修改语句 alter database datafile '文件路径' autoextend on; alter database dataf

谁借莪１个温暖的怀抱￠/ 2022年07月30日 13:48/ 0 赞/ 213 阅读

相关 ArcGIS API For JavaScript——空间查询（QueryTask）

-------------------- ArcGIS API For JavaScript提供了两个工具类用于查询任务 1. `IdentifyTask`：利用该工具类

忘是亡心i/ 2022年06月15日 06:41/ 0 赞/ 298 阅读

相关 mysql空间查询

今天要做一个根据经纬度获取位置信息的功能（百度地图也提供了相应接口，由于请求频率限制，没有使用），于是用到了mysql的空间查询： 1.创建表： CREATE

桃扇骨/ 2022年06月01日 12:22/ 0 赞/ 172 阅读

相关 mongoose 空间查询

　　工作中我用了Koa2做了后台，选用了mongo数据库。因为要用到空间查询显示当前地图视图的空间查询结果，经过一番搜索，总算解决了。　　mongoose支持的空间[查询方

以你之姓@/ 2022年05月26日 06:08/ 0 赞/ 232 阅读

相关 SuperMap iClient For JavaScript查询搜索

在GIS项目中进行查询搜索定位 1. 功能实现功能是在一定范围内定位到你所查询的地址。如下图，是查询搜索功能的实现界面。 ![在这里

灰太狼/ 2022年03月26日 11:20/ 0 赞/ 192 阅读