ArcGIS API For Javascript 4.15 绘制地图：查询某个地点和在一定范围内根据条件查询

拼搏现实的明天。 2022-12-26 15:27 110阅读 0赞

## 1、HTML 页面 ##

## index.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>空间数据查询</title>
        <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/4.15/esri/css/main.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="http://127.0.0.1/arcgis_js_api/4.15/init.js"></script>
        <script src="js/index.js"></script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
        <div class="toolbar">
            <input id="cityName" type="text">
            <button id="doQuery">查询</button>
        </div>
    </body>
    </html>

## 2、样式设置 ##

## index.css html, body { 
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    
    #viewDiv { 
        width: 100%;
        height: 100%;
    }
    
    .toolbar { 
        position: absolute;
        top: 20px;
        right: 20px;
    }

## 3、Javascript API 实现地图绘制 ##

## index.js
    
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/tasks/QueryTask",
        "esri/tasks/support/Query",
        "esri/geometry/geometryEngine",
        "esri/Graphic"
    ], function(Map, MapView, MapImageLayer, QueryTask, Query, geometryEngine, Graphic) { 
    
        var layer = new MapImageLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services/SampleWorldCities/MapServer"
        });
    
        var map = new Map({ 
            layers: [layer]
        });
    
        var view = new MapView({ 
            container: "viewDiv",
            map: map,
            ui: { 
                components: ["zoom", "compass"]
            }
        });
    
        var pointSymbol = { 
            type: "simple-marker",
            style: "circle",
            color: "red",
            size: 12
        };
    
        // 要查询的图层
        var citiesUrl = "http://127.0.0.1:6080/arcgis/rest/services/SampleWorldCities/MapServer/0";
        var queryTask = new QueryTask({ 
            url: citiesUrl
        });
    
        var btnQuery = document.getElementById("doQuery");
        btnQuery.addEventListener("click", function() { 
            var cityName = document.getElementById("cityName").value;
            // 查询条件
            var query = new Query({ 
                outFields: ["*"],
                returnGeometry: true,
                // where: `CITY_NAME = '${cityName}'`,
                // where: `POP > ${cityName}`
                text: cityName
            });
            // 执行属性查询
            queryTask.execute(query).then(function(result) { 
                view.graphics.removeAll();
                if (result.features.length > 0) { 
                    // var feature = result.features[0];
                    // feature.symbol = pointSymbol;
                    // view.graphics.add(feature);
                    // view.goTo(feature);
    
                    // var features = result.features.map(function(feature) { 
                    // feature.symbol = pointSymbol;
                    // return feature;
                    // });
    
                    var features = [];
                    result.features.forEach(feature => { 
                        feature.symbol = pointSymbol;
                        features.push(feature);
                    })
                    view.graphics.addMany(features);
                    view.goTo(features);
                }
            });
        });
    
        view.on("click", function(event) { 
            var clickPoint = event.mapPoint;
            var bufferGeometry = geometryEngine.geodesicBuffer(clickPoint, 500, "kilometers");
            var fillSymbol = { 
                type: "simple-fill",
                color: "transparent",
                style: "solid",
                outline: { 
                    width: 2,
                    color: "red"
                }
            };
            var graphic = new Graphic({ 
                geometry: bufferGeometry,
                symbol: fillSymbol
            });
            view.graphics.removeAll();
            view.graphics.add(graphic);
    
            var query = new Query({ 
                outFields: ["*"],
                returnGeometry: true,
                geometry: bufferGeometry,
                where: 'POP > 2000000'
            });
    
            queryTask.execute(query).then(function(result) { 
                //view.graphics.removeAll();
                if (result.features.length > 0) { 
                    var features = result.features.map(function(feature) { 
                        feature.symbol = pointSymbol;
                        return feature;
                    });
                    view.graphics.addMany(features);
                    view.goTo(features);
                }
            });
        });
    });

## 4、实现效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/cb35c9718dec4271b6600b0b230308ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201206134622241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU=,size_16,color_FFFFFF,t_70#pic_center