SuperMap画圆的周边查询
··························································
开发工具：Visual Studio 2015
关键技术：SuperMap iDesktop 9D、C#MVC
作者：邵亮华
撰写时间：2019-01-19
··························································
在我的GIS项目有个周边查询的功能，就是给个中心点，再给个半径出现一个圆的区域，然后在这个圆的区域的区域范围内显示你想要在地图查询的内容，如图：
引用SuperMap插件
<script src="~/SuperMap/libs/SuperMap.Include.js"></script>
首先要声明图层控件接收图层
//创建一个有标签的图层（气球的图标）
markerLayer = new SuperMap.Layer.Markers("Markers", { displayInLayerSwitcher: false });
//声明一个矢量图层 Vector 控件，用来呈现画面要素（点、线、面）
lineLayer = new SuperMap.Layer.Vector("lineLayer", { displayInLayerSwitcher: false }); //displayInLayerSwitcher设置该图层在图层控制器是否隐藏再给个画点的事件，确认中心点的坐标：
//定坐标
drawPoint = new SuperMap.Control.DrawFeature(lineLayer, SuperMap.Handler.Point);
//画点事件
drawPoint.events.on({ "featureadded": DrawCenterPoint });
//选择中心点击事件
function DrawPoint() {
ClearLine();
map.addControl(drawPoint);////map上添加控件
drawPoint.activate();////激活控件，触发绘画中心点事件
$("#Coordinate").val('');
}
//绘画中心点事件
function DrawCenterPoint(drawGeometryArgs) {
//获得图层几何对象
roundVector = drawGeometryArgs.feature;//先声明获取该图层的参数值，递给全局变量
console.log(roundVector);
drawPoint.deactivate();
var point = drawGeometryArgs.feature.geometry;
centerPoint = [point.x, point.y];
size = new SuperMap.Size(30, 30),
offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
icon = new SuperMap.Icon("/SuperMap/images/maker_L_Blue.png", size, offset);
markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon));
$("#Coordinate").val(centerPoint);
$("#banjin").val('500');
}
var roundVector; //全局变量
//周边查询点击事件
function SelectAnalyze() {
clearFeatures();
var ArryId = [], i = 0, LayerName;
//获取中心点
var Coordinate = $("#Coordinate").val();
//获取半径
var raduis = $("#banjin").val() / 100000;
//获取选择的复选框的长度
var check = $("input[name='selectAnalyze']:checked");
I = check.length;
if (Coordinate == "") {
alert("请选择查询中心点!", { icon: 0, time: 3000, area: ['250px'] });
} else if (raduis == 0) {
alert("请输入查询的半径!", { icon: 0, time: 3000, area: ['250px'] });
}
else if (check.length == 0) {
alert("请选择查询目标!", { icon: 0, time: 3000, area: ['250px'] });
}
$("input[name='selectAnalyze']:checked").each(function () {
//记录下它的this
ArryId.push(this);
});
var x = $("#Coordinate").val().split(",")[0];
//中心点y坐标
var y = $("#Coordinate").val().split(",")[1];
var centerPoint1 = new SuperMap.Geometry.Point(x, y);
//画圆圈，只要给中心点和半径就能画圆
var polygon = SuperMap.Geometry.Polygon.createRegularPolygon(centerPoint1, raduis, 360, 360);
//给圆添加该范围内数据和样式
roundVector = new SuperMap.Feature.Vector(polygon);
roundVector.style = {
strokeColor: "#DE5145",
fillColor: "#EA7454",
strokeWidth: 2,
fillOpacity: 0.3,
strokeOpacity: 0.5
};
//让图层控件接收显示
lineLayer.addFeatures(roundVector);
for (var i = 0; i < ArryId.length; i++) {
LayerName = ScreeningConditions(ArryId[i].id);
这是第二种画圆的方法比较长，就不一一解析，这是引用SuperMap iserver的画圆案例
//var circleP1 = createCircle(centerPoint1, raduis, 256, 360, 360);
//给roundVector样式范围
//roundVector = new SuperMap.Feature.Vector(circleP1);
//roundVector.style = style;
//roundVector.style = {
// strokeColor: "#CAFF70",
// fillColor: "#C6E2FF",
// strokeWidth: 2,
// fillOpacity: 0.5
//};
// lineLayer.addFeatures(roundVector); //将roundVector添加到图层显示
//画圆事件
//function createCircle(origin, radius, sides, r, angel) {
// var rR = r * Math.PI / (180 * sides);
// var rotatedAngle, x, y;
// var points = [];
// for (var i = 0; i < sides; ++i) {
// rotatedAngle = rR * i;
// x = origin.x + (radius * Math.cos(rotatedAngle));
// y = origin.y + (radius * Math.sin(rotatedAngle));
// points.push(new SuperMap.Geometry.Point(x, y));
// }
// rotatedAngle = r * Math.PI / 180;
// x = origin.x + (radius * Math.cos(rotatedAngle));
// y = origin.y + (radius * Math.sin(rotatedAngle));
// points.push(new SuperMap.Geometry.Point(x, y));
// var ring = new SuperMap.Geometry.LinearRing(points);
// ring.rotate(parseFloat(angel), origin);
// var geo = new SuperMap.Geometry.Collection([ring]);
// geo.origin = origin;
// geo.radius = radius;
// geo.r = r;
// geo.angel = angel;
// geo.sides = sides;
// geo.polygonType = "Curve";
// return geo;
//}
///触发想要查询数据的事件
queryByDistance(LayerName);
}
}
//SQL服务查询
function queryByDistance(LayerName) {
var LayerName = LayerName;
//由于roundVector的feature建立在polygonLayer上，将 feature的样式附加到声明的新建面矢量图层
var queryBounds = roundVector.geometry.bounds;//获取roundVector样式图层范围内的参数----
// console.log(queryBounds);
// if (LayerName)
var queryParam, queryByBoundsParams, queryService;
queryParam = new SuperMap.REST.FilterParameter({ name: LayerName });//FilterParameter设置查询条件，name是必设的参数，（图层名称格式：数据集名称@数据源别名）
queryByBoundsParams = new SuperMap.REST.QueryByBoundsParameters({ queryParams: [queryParam], bounds: queryBounds });//queryParams查询过滤条件参数数组。bounds查询范围
queryService = new SuperMap.REST.QueryByBoundsService(url, {
eventListeners: {
"processCompleted": QueryPerimeter,
"processFailed": processFailed
}
});
queryService.processAsync(queryByBoundsParams);//向服务端传递参数，然后服务端返回对象
}