天天看点

ArcGis for JS 利用QueryTask查询实现对地图的定位功能

  一、首先我们要把地图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));
        }
    })
}
           

继续阅读