需求:
1.输入查询条件,查询到结果,将结果渲染,并缩放到查询结果的范围
2.点击查询结果的要素,气泡窗口显示相应的信息
页面:
思路:
方法一:FeatureLayer+infowindow:
1.筛选Featurelayer(查询),并加载到页面(map.addlayer()方法)并渲染.
2.给Featurelayer注册点击事件,点击FeatureLayer获取graphic,并设置infowindow弹框.
方法二:query+InfoTemplate:
1.设置query查询条件.
2.执行QueryTask查询.
3.在查询结果的回调函数中添加Graphic对象并再实例化的时候传入参数InfoTemplate,注意,InfoTemplate是默认点击事件弹出气泡窗口
方法一实现:
1.1 按照前面的思路,定义map和featurelayer,
map = new Map("map",{
logo: false,
slider: false,
zoom: 0
});
var layer = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/TestServer/mytile2/MapServer/");
map.addLayer(layer);
// 要素图层
var myFeatureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/TestServer/mytile2/MapServer/1",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true,
id : "fLayer",
opacity: 0.7
});
1.2 点击button获取文本框的查询条件进行筛选FeatureLayer中的要素
on(dom.byId("selectBtn"),"click",function (e) {
map.removeLayer(myFeatureLayer);
var selectText = dom.byId("selectText").value;
var sql = "name like '%" + selectText + "%'";
myFeatureLayer.setDefinitionExpression(sql);
var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color("blue"), 1),new dojo.Color("blue"));
1.3 获取前面筛选拿到的FeatureLayer中的每一个要素的Extent,使用union获取最大范围,使用setExtent()方法缩放到视图范围
//设置缩放到查询
var selExtent = new Extent();
var query = new Query();
query.where='1=1';
query.returnGeometry = true;
//遍历每一个前面筛选出来的每一个Feature获取Extent来联合得到最大的范围,进行缩放
myFeatureLayer.queryFeatures(query, function (featureSet) {
var features = featureSet.features;
selExtent = features[0].geometry.getExtent();
for (var i = 0, len = features.length; i < len; i++) {
selExtent = selExtent.union(features[i].geometry.getExtent());
}
map.setExtent(selExtent);
});
// 设置查询到的要素的渲染
var render = new SimpleRenderer(selectionSymbol);
myFeatureLayer.setRenderer(render);
map.addLayer(myFeatureLayer);
1.4 设置infowindow:
//点击FeatureLayer设置infowindow()气泡弹框
myFeatureLayer.on("click",function (e) {
var graphicAttr = e.graphic.attributes;
var content = graphicAttr.name;
// 设置infowindow
map.infoWindow.setTitle("建筑");
map.infoWindow.setContent("name:"+content+"<br>");
map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
});
});
});
1.5. 全部代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FeatureTable - related records</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.34/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
<script src="https://js.arcgis.com/3.34/"></script>
<style>
html, body, #map
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map;
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"dojo/on",
"dojo/dom",
"esri/tasks/query",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/SimpleRenderer",
"esri/geometry/Extent"
], function (
Map,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,FeatureLayer,FeatureTable,on,dom,Query,SimpleFillSymbol,SimpleLineSymbol,SimpleRenderer,Extent
) {
map = new Map("map",{
logo: false,
slider: false,
zoom: 0
});
var layer = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/TestServer/mytile2/MapServer/");
map.addLayer(layer);
// 要素图层
var myFeatureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/TestServer/mytile2/MapServer/1",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true,
id : "fLayer",
opacity: 0.7
});
on(dom.byId("selectBtn"),"click",function (e) {
map.removeLayer(myFeatureLayer);
var selectText = dom.byId("selectText").value;
var sql = "name like '%" + selectText + "%'";
myFeatureLayer.setDefinitionExpression(sql);
var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new dojo.Color("blue"), 1),
new dojo.Color("blue"));
//设置缩放到查询
var selExtent = new Extent();
var query = new Query();
query.where='1=1';
query.returnGeometry = true;
//遍历每一个前面筛选出来的每一个Feature获取Extent来联合得到最大的范围,进行缩放
myFeatureLayer.queryFeatures(query, function (featureSet) {
var features = featureSet.features;
selExtent = features[0].geometry.getExtent();
for (var i = 0, len = features.length; i < len; i++) {
selExtent = selExtent.union(features[i].geometry.getExtent());
}
map.setExtent(selExtent);
});
// 设置查询到的要素的渲染
var render = new SimpleRenderer(selectionSymbol);
myFeatureLayer.setRenderer(render);
map.addLayer(myFeatureLayer);
//点击FeatureLayer设置infowindow()气泡弹框
myFeatureLayer.on("click",function (e) {
var graphicAttr = e.graphic.attributes;
var content = graphicAttr.name;
// 设置infowindow
map.infoWindow.setTitle("建筑");
map.infoWindow.setContent("name:"+content+"<br>");
map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
});
});
});
</script>
</head>
<body>
<div id="map">
<input type="text" id="selectText" />
<input type="button" id="selectBtn" value="查询" />
</div>
</body>
</html>
1.6 方法一总结:这种方法查询的核心就是myFeatureLayer.setDefinitionExpression(sql);这里设置的sql就能筛选出查询结果;气泡弹框就是在查询结果的FeatureLayer注册点击事件才实现气泡弹框的.
但是使用这种方法虽然实现了功能,但是在点击featureLayer的时候打印一个东西会发现,每次查询页面都会加载一次featurelayer,不知道为什么会这样,加载多了,查询多了,会不会对页面有影响?
方法二实现:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FeatureTable - related records</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.34/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
<script src="https://js.arcgis.com/3.34/"></script>
<style>
html, body, #map
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map;
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"esri/layers/GraphicsLayer",
"esri/Color",
"dojo/on",
"dojo/dom",
"esri/graphic",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/SimpleRenderer",
"esri/geometry/Extent","esri/InfoTemplate"
], function (
Map,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,FeatureLayer,FeatureTable,GraphicsLayer,Color,on,dom,Graphic,Query,QueryTask,SimpleFillSymbol,SimpleLineSymbol,SimpleRenderer,Extent,InfoTemplate
) {
map = new Map("map",{
logo: false,
slider: false,
zoom: 0
});
var layer = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/TestServer/mytile2/MapServer/");
map.addLayer(layer);
var testMapServer =new GraphicsLayer({id:"testMapServer"});
map.addLayer(testMapServer);
on(dom.byId("selectBtn"),"click",function (e) {
//定义鼠标浮上符号
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();
var selectText = dom.byId("selectText").value;
var sql = "name like '%" + selectText + "%'";
query.where=sql;
//这里你需要显示的图层
var queryTask =new QueryTask("http://localhost:6080/arcgis/rest/services/TestServer/mytile2/MapServer/1");
query.outSpatialReference =map.spatialReference;
query.returnGeometry =true;
query.outFields=["*"];
//console.log(map.spatialReference);
queryTask.execute(query,function(queryResult){
console.log(queryResult);
for(var i=0;i<queryResult.features.length;i++){
var graphic=queryResult.features[i];
var geometry = graphic.geometry;
var info =new InfoTemplate(
"建筑","<div><p>"+graphic.attributes.name+"</p></div>"
);
var geo =new Graphic(geometry,fillSymbol,null,info);
testMapServer.add(geo);
// map.graphics.add(geo);
console.log(graphic);
}
})
}
searchMapServer();
//鼠标浮上效果
testMapServer.on("mouse-over",function(evt){
// alert("11");
geo.setSymbol(fillSymbol);
});
//鼠标移除效果
testMapServer.on("mouse-out",function(){
geo.setSymbol(fillSymbol_1);
});
});
});
</script>
</head>
<body>
<div id="map">
<input type="text" id="selectText" />
<input type="button" id="selectBtn" value="查询" />
</div>
</body>
</html>
方法二总结:这个方法不是每次都在加载layer图层,而是在客户端添加的graphic,就不会存在上面查一次就会加载一次图层的的问题.