arcgis api for javascript学习-使用FeatureLayer结合FeatureTable实现查询并能根据查询结果将视图缩放至结果的范围
作者：互联网
本文主要实现的功能是:
输入查询的条件(这里是模糊查询)
点击查询得到查询结果,并在属性中显示属性(FeatureTable)
主要的思路:
1. 定义FeatureLayer和FeatureTable,FeatureTable中有个属性zoomToSelection:true可以设置是否根据表和地图联动.(点击表中属性缩放至所选择的要素)点击图中的查询到的结果,表中属性被选中.
2. 点击按钮获取文本框中的查询条件,并将查询条件通过myFeatureLayer.setDefinitionExpression(sql)来筛选得到FeatureLayer的结果.
3. 通过FeatureLayer的点击事件实现点击地图对应表内容被选中.
4. 遍历筛选得到的FeatureLayer并获得最大的范围(union()方法),再通过Map.setExtent(方法缩放到视图.
5. 通过render渲染查询的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",
"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: 5
});
var layer = new ArcGISDynamicMapServiceLayer("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
});
// 要素表格
var myFeatureTable = new FeatureTable({
featureLayer: myFeatureLayer,
map: map,
editable: true,
syncSelection: true,
showRelatedRecords: true,
showAttachments: true,
// zoomToSelection: true,
// outfields 显示要素属性
outFields: ["name","Shape_Leng"]
},"myTable");
myFeatureTable.startup();
on(dom.byId("selectBtn"),"click",function (e) {
// myFeatureTable.startup();
//移除之前的查询结果
map.removeLayer(myFeatureLayer);
var selectText = dom.byId("selectText").value;
var sql = "name like '%" + selectText + "%'"; // 注意sql语句格式,错了就查询不到
// console.log(sql);
myFeatureLayer.setDefinitionExpression(sql);
var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new dojo.Color("blue"), 1),
new dojo.Color("blue"));
myFeatureLayer.setSelectionSymbol(selectionSymbol); // 设置要素图层被选中标志
// 监听要素图层点击事件,并传送相应的参数给表格
// 当地图中要素被点击选中时,与之相关的属性记录也会在要素表格中被选中
myFeatureLayer.on("click",function (evt) {
var idProperty = myFeatureLayer.objectIdField;
// console.log(idProperty);
var feature, featureId, query;
if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]){
feature = evt.graphic; //获取要素
//点击地图上的要素高亮显示
feature.setSymbol(selectionSymbol);
map.graphics.add(feature);
featureId = feature.attributes[idProperty]; //获取要素id
//实例化查询
query = new Query();
query.returnGeometry = true;
query.objectIds = [featureId];
query.where = "1=1";
myFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
}
});
var selExtent = new Extent();
var query = new Query();
query.where='1=1';
query.returnGeometry = true;
query.outFields = ['name'];
myFeatureLayer.queryFeatures(query, function (featureSet) {
var features = featureSet.features;
selExtent = features[0].geometry.getExtent();
console.log("selExtent start-->",selExtent);
for (var i = 0, len = features.length; i < len; i++) {
console.log(i,features[i].geometry.getExtent());
selExtent = selExtent.union(features[i].geometry.getExtent());
}
map.setExtent(selExtent);
});
// map.setExtent(selExtent);//为啥这个地方不能访问selExtent
//查询结果进行渲染
var render = new SimpleRenderer(selectionSymbol);
myFeatureLayer.setRenderer(render);
map.addLayer(myFeatureLayer);
myFeatureTable.refresh();
});
});
</script>
</head>
<body>
<div id="map">
<input type="text" id="selectText" />
<input type="button" id="selectBtn" value="查询" />
</div>
<div id="selectRe" style="z-index: 9999; background-color: pink; width: 500px; height: 200px; position: absolute; bottom: 0;left: 0;">
<div id="myTable"></div>
</div>
</body>
</html>
标签：map,缩放,FeatureLayer,视图,查询,new,var,query,myFeatureLayer 来源： https://blog.csdn.net/Zzzpiu/article/details/110138565