利用ArcGIS API for JavaScript 4.x实现空间查询总结

实现空间查询的整体思路：

---

 

1.实例化图形图层，用于放绘制的图形

//实例化一个图形图层
const layer = new GraphicsLayer();

 2.创建全国矢量图层并加载到MapView中

//创建全国矢量图层（feature）
var countrylayer = new FeatureLayer({
    url: "https://xxxxxx.arcgis.cn/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7%9F%A2%E9%87%8F1/FeatureServer",
    visible: true,
    outFields: ["*"],
});

//创建地图对象
const map = new Map({
    basemap: 'osm',
    layers: [countrylayer, layer]
});
//渲染二维地图
const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 6,
    center: [108, 33]
});

3.添加sketch小部件

（要给小部件添加监听事件，并获取geometry，根据geometry进行空间查询） 

//向视图中添加绘图小部件
view.ui.add(sketch, "top-right");
//给视图小部件添加监听事件，监听它完成的时候
sketch.on("create",
function(event) {
    if (event.state === "complete") {
        //console.log(event);
        //使用graphic.geometry 去查询相交特征
        //console.log(event.graphic.geometry);
        //使用geometry（QueryTask）
        queryTask(event.graphic.geometry);
    }
});

4.定义空间查询方法（将小部件得到的geometry作为参数传入）

//空间查询（QueryTask）
function queryTask(geometry) {
    // console.log(geometry);
    var china = "https://xxxxx.arcgis.cn/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7%9F%A2%E9%87%8F1/FeatureServer/0";
    var qTask = new QueryTask({
        url: china //全国矢量
    });
    var query = new Query({
        returnGeometry: true,
        outFields: ["*"],
        //结果要素包含的属性字段  
    });
    query.geometry = geometry;
    //console.log(query.geometry);
    //空间参考信息
    query.outSpatialReference = map.spatialReference;
    //查询的标准，此处代表和geometry相交的图形都要返回
    query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
    //执行空间查询
    qTask.execute(query).then(showQueryResult);
}

5.定义展示查询结果方法

//执行查询
function showQueryResult(queryResult) {
    //console.log(queryResult)
    //创建线符号					
    var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([0, 255, 0, 0.5]));
    //创建面符号
    var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new Color([0, 255, 0]));
    if (queryResult.features.length == 0) {
        dom.byId("divShowResult").innerHTML = "查询结果为空！";
        return;
    };
    var htmls = "";
    if (queryResult.features.length >= 1) {
        htmls = htmls + ""; //创建一个表，使用了转义字符
        htmls = htmls + ""; //创建数据行
        for  (var i = 0; i < queryResult.features.length; i++) {
            //得到graphic	
            var graphic = queryResult.features[i];
            //给图形赋予符号	
            //graphic.setSymbol(fill);  //api3.×
            graphic.symbol = fill; //api 4.x				
            //添加到地图从而实现高亮效果						
            view.graphics.add(graphic); //api 4.x
            //map.graphics.add(graphic); //api3.×
            //获得名称信息，此处应和shp的属性表对应						
            var ptName = graphic.attributes["nl_name_1"];
            ptName += graphic.attributes["nl_name_2"];
            htmls = htmls + "";
            htmls = htmls + "";
        }
        htmls = htmls + "
名称
"  + ptName + "
";
        dom.byId("divShowResult").innerHTML = htmls;
    }
}

---

源码如下：

最终成果如下 

 

 注意：

ArcGIS API For JavaScript提供的两个工具类都可以用于空间查询

IdentifyTask：利用该工具类可以对多个图层进行查询，主要利用IdentifyParameters对象来规定空间查询的参数。
QueryTask:该工具只能对一个图层进行查询，但是利用该类进行查询的时候课指定属性过滤，所以可以同时进行几何和属性查询。该工具主要利用Query类来设定查询参数。

具体使用那个类，根据底图类型决定