基于arcgis js 图层自定义高亮显示

先来看下要实现的效果图:

基于arcgis js 图层自定义高亮显示_第1张图片

 

效果就是:鼠标浮上图层高亮显示,鼠标点击高亮显示同时有 infoWindow显示 ,下面直接上代码:

 

				var testMapServer =new GraphicsLayer({id:"testMapServer"});
			  map.addLayer(testMapServer);


			  //定义鼠标浮上符号
				var fillSymbol=new SimpleFillSymbol().setColor(new Color([173,220,220,0.35]));
				fillSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,255,255]),3));
				
				//定义点击显示的符号
				 var fillSymbol_1=new SimpleFillSymbol().setColor(new Color([255,255,0,0]));
				 fillSymbol_1.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([255,250,153,0.5]), 2));

				//查询图层信息的方法
				 function searchMapServer() {
				  var query=new Query();
					query.geometry =map.extent;
					query.where="1=1";
					//这里你需要显示的图层
					var queryTask =new         QueryTask("http://ip:port/arcgis/rest/services/%E6%97%A0%E4%B8%BA%E7%8E%AF%E5%9F%8E%E6%B2%B3/MapServer/0");
					query.outSpatialReference =map.spatialReference;
					query.returnGeometry =true;
					query.outFields=["*"];
					//console.log(map.spatialReference);
					queryTask.execute(query,function(queryResult){
						for(var i=0;i

河流长度:9682m

平均流量:850立方米/秒

" ); geo =new Graphic(geometry,fillSymbol_1,null,info); testMapServer.add(geo); } }) } searchMapServer(); //鼠标浮上效果 testMapServer.on("mouse-over",function(evt){ geo.setSymbol(fillSymbol); }) //鼠标移除效果 testMapServer.on("mouse-out",function(){ geo.setSymbol(fillSymbol_1); })

 

 

 

 

 

 

 

你可能感兴趣的:(ArcGIS,js)