Arcgis for js实现服务元素周围点击显示元素属性

实现效果

ArcGISDynamicMapServiceLayer加载的图层(可为其它Layer加载的图层),实现此图层加载的元素周围点击进行空间查询,小窗口显示此元素的属性信息

在这里插入图片描述

代码


var smdf_url; //layer图层的server服务地址
var map;//地图对象
$(function() {
	dojo.require("esri.map");
	dojo.require("esri.layers.ArcGISDynamicMapServiceLayer");
	dojo.require("esri.SpatialReference");
	dojo.require("esri.tasks.IdentifyTask");
	dojo.require("esri.tasks.IdentifyParameters");
	dojo.require("esri.geometry.ScreenPoint");
	dojo.require("esri.dijit.editing.AttachmentEditor");
	dojo.require("dojo.dom");
	/**
	 * 加载init()初始化
	 */
    dojo.addOnLoad(init);
});

/**
 * 初始化地图加载图层
 */
function init() {
	
	var spatialReference = new esri.SpatialReference({"wkid":4490});
	
    map = new esri.Map("mapDiv");
    map.spatialReference = spatialReference;
    m_graphicsLayer = new esri.layers.ArcGISDynamicMapServiceLayer(smdf_url,
	            {"spatialReference" : {"wkid" : 4490}});
	map.addLayer(m_graphicsLayer);
	initFunctionality();
}

/**
 * 空间查询属性设置
 */
function initFunctionality() {
	map.on("click", doIdentify);//创建地图点击事件
	identifyTask = new esri.tasks.IdentifyTask(smdf_url);//查询
	identifyParams = new esri.tasks.IdentifyParameters();//查询参数
	identifyParams.tolerance = 10;//容差范围
	identifyParams.returnGeometry = true;//是否返回图形
	identifyParams.layerIds = [ 0 ];//查询图层
	identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;//设置查询的图层
	//查询范围
	identifyParams.width = map.width;
	identifyParams.height = map.height;
}
/**
 * 执行空间查询
 */
function doIdentify(event) {
	identifyParams.geometry = event.mapPoint;
	identifyParams.mapExtent = map.extent;
	//attachmentEditor支持启用附件,我参考的是官方  ,其中dojo.dom.byId("content")的参数id可不存在
	var attachmentEditor = new esri.dijit.editing.AttachmentEditor({}, dojo.dom.byId("content"));
	identifyTask.execute(identifyParams,function(results) { //执行查询
		var feature;
		if (results.length > 0) {
			for (var i = 0; i < results.length; i++) {
				feature = results[i].feature;
				map.infoWindow.setTitle("我是弹出框");
				map.infoWindow //自定义显示内容
					.setContent("<span>河道里程(m):</span>"
						+ feature.attributes.chainage
						+ "<br>"
						+ "<span>堤顶高程(m):</span>"
						+ feature.attributes.dike_terr
						+ "<br>"
						+ "<span>水面高程(m):</span>"
						+ (feature.attributes.dike_terr - feature.attributes.water).toFixed(3)
						+ "<br>"
						+ "<span>水面距堤顶(m):</span>"
						+ feature.attributes.water);
				attachmentEditor.showAttachments(feature, dynamicMapServiceLayer);
				
				//我的项目加载的layer元素为线类型,返回的经纬度位置为多个,所以需要取其中一个或者取中间位置,我取的中间位置
				var ceilnum = Math.ceil(feature.geometry.paths[0].length/2)
				var x = feature.geometry.paths[0][ceilnum][0];
				var y = feature.geometry.paths[0][ceilnum][1];
				//创建窗口弹出位置,注意需要与底图相同的坐标系
				var screenPoint = new esri.geometry.ScreenPoint(x,y);
				screenPoint.spatialReference = map.spatialReference;
				//显示窗口
				map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(screenPoint));
			}
		}
	});
}

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值