先来看下要实现的效果图:
效果就是:鼠标浮上图层高亮显示,鼠标点击高亮显示同时有 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<queryResult.features.length;i++){
graphic=queryResult.features[i];
geometry =graphic.geometry;
//var fileSymbol =new
info =new InfoTemplate(
"西河","<div><p>河流长度:9682m</p><p>平均流量:850立方米/秒</p></div>"
);
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);
})