关于GIS的开发,往往都是关系到几何的,这次讲解一下关于GIS的有关几何的一个小功能,那就是在GIS地理信息地图上进行画一个矩形进行查询这个地图上矩形在现实世界中的真实面积。
首先我们得先在地图上画出来一个矩形,下面是实现画矩形的代码,画好矩形之后进行查询矩形范围之内需要查询的数据信息:
//矩形
drawRectangle = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Box);
drawRectangle.events.on({ “featureadded”: drawRectangleCompleted });
矩形
function drawRectangleCompleted(obj) {
var feature = obj.feature;
feature.style = style;
vectorLayer.addFeatures(feature);
var queryBounds = feature.geometry.bounds;
var queryParam, queryByBoundsParams, queryService;
queryParam = new SuperMap.REST.FilterParameter({ name: "P15医疗服务_point_1@Mxbgl" });//FilterParameter设置查询条件,name是必设的参数,(图层名称格式:数据集名称@数据源别名)
queryByBoundsParams = new SuperMap.REST.QueryByBoundsParameters({ queryParams: [queryParam], bounds: queryBounds });//queryParams查询过滤条件参数数组。bounds查询范围
queryService = new SuperMap.REST.QueryByBoundsService(url, {
eventListeners: {
"processCompleted": processCompleted1,
"processFailed": processFailed
}
});
queryService.processAsync(queryByBoundsParams);//向服务端传递参数,然后服务端返回对象
}
查询好之后,把查询到的数据在展示层上显示出来,代码如下:
function processCompleted1(queryEventArgs) {
var i, j, result = queryEventArgs.result;
if (result && result.recordsets) {
for (i = 0, recordsets = result.recordsets, len = recordsets.length; i < len; i++) {
if (recordsets[i].features) {
for (j = 0; j < recordsets[i].features.length; j++) {
var feature = recordsets[i].features[j];
var point = feature.geometry;
if (point.CLASS_NAME == SuperMap.Geometry.Point.prototype.CLASS_NAME) {
var size = new SuperMap.Size(33, 33),
offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
icon = new SuperMap.Icon("/theme/images/cluster3.png", size, offset);
marker = new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon);
// markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon));
marker.name = feature.attributes.NAME;
marker.laction = feature.attributes.ADDRESS;
marker.GISID = feature.attributes.SmID;
marker.Dianhua = feature.attributes.TELEPHONE;
} else {
feature.style = style;
vectorLayer.addFeatures(feature);
}
markerLayer.addMarker(marker);
marker.events.on({
"click": openInfoWin,//触发click事件会调用弹窗方法
"touchstart": openInfoWin,
});
}
}
}
}
}
到了这一步,这个功能就基本上完成了。
如果你需要点击显示这些标志的相对信息的话,可以加上以下代码:
function openInfoWin(event) {
closeInfoWin();
var XCoordinate = event.object.lonlat.lon;
var YCoordinate = event.object.lonlat.lat;
var name = event.object.name;
var laction = event.object.laction;
var Dianhua = event.object.Dianhua;
var contentHTML = "
var size = new SuperMap.Size(21, 25),
offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
icon = new SuperMap.Icon("/theme/images/cluster3.png", size, offset);
//初始化FramedCloud类
framedCloud = new SuperMap.Popup.FramedCloud(
"popwin",
new SuperMap.LonLat(XCoordinate, YCoordinate),
null,
contentHTML,
icon,
true,
null,
true
);
infowinonMessage = framedCloud;
map.addPopup(framedCloud);
map.panTo(new SuperMap.LonLat(XCoordinate, YCoordinate));
}