一、首先我们要把地图map加载到我们的页面中,然后就是根据已知的信息内容实现在map上的定位操作。
二、实现点击已知的信息内容在地图上定位,这就是一般的DOM操作。(我们是把DOM操作和arcgis的操作分离的,需要的时候直接调用函数方法就可以了。)
三、我们现在只帖出来arcgis的js代码。
var map;
function initMap(){
require([
"esri/map",
"esri/layers/ArcGISDynmicMapServiceLayer",
"esri/layers/GraphicLayer",
"esri/InfoTemplate",
"esri/geometry/Point",
"esri/geometry/Extent",
"esri/symbol/SimpleMarkerSymbol",
"esri/symbol/SimpleLineSymbol",
"esri/symbol/SimpleFillSymbol",
"esri/tasks/QueryTask",
"esri/tasks/query"],
function(){
//定义一个map实体
map = new esri.map("mapDiv",{logo:false,slider:false});
//装载地图
map.addLayer(new esri.layers.ArcGISDynmicMapServiceLayer(mapServiceURL));
})
}
function clickBuildListRow(buildNo){
var query = new esri.tasks.Query();
//把需要查询的底图服务加载进来
var queryTask = new esri.tasks.QueryTask(mapServiceURL);
//需要返回Geometry
query.returnGeometry = true;
//需要返回的字段
query.outFields = ["*"];
//设置查询条件,buildNo是之前DOM操作时从信息内容里取出来的
query.where = "PFHOUSID ='"+buildNo+"'";
//进行查询
queryTask.execute(query,function(res){
var showExtent;
for(var i=0;i<res.features.length;i++){
var fea = res.features[i];
var point = fea.geometry.getExtent().getCenter();
//设置信息模板infoWindow
map.infoWindow.setTitle("详情信息");
map.infoWindow.setConten("<p>地址:"+fea.attributes.BUILD_SITE+"</p>");
//把信息模板显示在中心点上
map.infoWindow.show(point);
//查询结果样式
var symbol = new esri.symbol.SimpleFillSymbol(esri.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbolSimpleLineSymbol.STYLE_SOLID,new dojo.Color([255,0,0,0.8]),1),
new dojo.Color([125,125,125,0.35]));
var graphic = new esri.Graphic();
graphic.setGeometry(fea.geometry);
//设置查询到的graphic的显示样式
graphic.setSymbol(symbol);
//把查询结果添加到map.graphics中进行显示
map.graphics.add(graphic);
//获取查询到的所有geometry的Extent用来设置查询后的地图显示
if(i == 0){
showExtent = fea.geometry.getExtent();
}else{
showExtent = showExtent.union(fea.geometry.getExtent());
}
//设置地图的视图范围
map.setExtent(showExtent.expand(3));
}
})
}