代码片段如下:
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)方法进行空间查询,然而超图的空间查询只支持以下几种几何查询。显然是没有可以直接用的圆形几何对象。
问题解决:
看起来并没有那么糟糕,这里还有一个中心点可以用。那么想想看圆形也是多边形,刚好这里有一个L.Polygon的几何对象,它只要一组点集就可以构成一个圆形多边形。那么我们可以通过这个点和半径来构成无数个点,将这些个点集组装起来,那么就得到了一个圆形多边形了。