arcgis js（八）地理查询

偏执的太偏执、 2022-09-07 01:23 226阅读 0赞

1、地理查询主要是查询该图层的每个图斑的属性，分为**基本查询**和**按距离查询**，基本查询指的是如果鼠标选择的点在图斑上或内才有效，按距离查询指的是在给定距离内如果查询到了图斑就把该图斑作为查询对象，**第一种适合用在面状图层中，第二种方式适合点和线状图层。**

2、请仔细阅读下面的代码，带有注释，需要慢慢消化。查询对象可以是服务图层，这里发布了一个**服务图层service layer**，全是面状图斑，所以用这两种查询方法都比较适合。

<html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <title>
            Basic Querying in FeatureLayer
        </title>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
        <script src="https://js.arcgis.com/4.20/"></script>
    
        <style>
            html,
            body,
            #viewDiv {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #optionsDiv {
                background-color: white;
                color: black;
                padding: 6px;
                max-width: 400px;
            }
        </style>
        <script>
            require([
                "esri/Map",
                "esri/Graphic",
                "esri/views/MapView",
                "esri/layers/FeatureLayer",
                "esri/layers/WebTileLayer",
                "esri/widgets/Legend",
                "esri/geometry/SpatialReference",
                "esri/geometry/Extent",
                "esri/layers/support/TileInfo",
                "esri/geometry/Point",
    
            ], (Map, Graphic, MapView, FeatureLayer, WebTileLayer, Legend, SpatialReference, Extent, TileInfo, Point) => {
                var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
                var token = ""; //天地图token，在官网申请
                var tileInfo = new TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "spatialReference": {
                        "wkid": 4490
                    },
                    "lods": [
                        { "level": "1", "scale": 295829355.45, "resolution": 0.703125 },
                        { "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },
                        { "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },
                        { "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },
                        { "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },
                        { "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },
                        { "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },
                        { "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },
                        { "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },
                        { "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },
                        { "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },
                        { "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },
                        { "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },
                        { "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },
                        { "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },
                        { "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },
                        { "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },
                        { "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },
                        { "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }
                    ]
                });
    
                //影像地图
                var tdtImageLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                });
    
                //影像注记
                var tdtAnnoImageLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                });
    
                const layer = new FeatureLayer({
                    url: "http://localhost:6080/arcgis/rest/services/hb/MapServer",
                    outFields: ["*"],//即 output fields，要输出的字段，*代表输出所有字段的查询属性，也可以自己指定
                    opacity: "1"//不透明度
                });
    
                const map = new Map({
                    basemap: {
                        baseLayers: [tdtImageLayer, tdtAnnoImageLayer]
                    },
                    layers: [layer],
                });
    
                const view = new MapView({
                    container: "viewDiv",
                    map: map,
                    ui: {
                        components: ["zoom", "compass"]
                    },
                    popup: {
                        autoOpenEnabled: false,
                        dockEnabled: true,
                        dockOptions: {
                            buttonEnabled: false,
                            breakpoint: false,
                            position: "bottom-right"
                        }
                    }
                });
    
                // 图例
                const legend = new Legend({
                    view: view,
                    layerInfos: [
                        {
                            layer: layer
                        }
                    ]
                });
    
                view.ui.add(legend, "bottom-left");
                view.ui.add("optionsDiv", "top-right");
    
                let distance = null;
                let units = null;
    
                const pointGraphic = new Graphic({
                    symbol: {
                        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                        color: [0, 0, 139],
                        outline: {
                            color: [255, 255, 255],
                            width: 1.5
                        }
                    }
                });
    
                // Create graphic for distance buffer
                const bufferGraphic = new Graphic({
                    symbol: {
                        type: "simple-fill", // autocasts as new SimpleFillSymbol()
                        color: [173, 216, 230, 0.2],
                        outline: {
                            // autocasts as new SimpleLineSymbol()
                            color: [255, 255, 255],
                            width: 1
                        }
                    }
                });
    
                // when query type changes, set appropriate values
                const queryOpts = document.getElementById("query-type");
    
                queryOpts.addEventListener("change", () => {
                    switch (queryOpts.value) {
                        // values set for distance query
                        case "distance":
                            distance = 0.5;
                            units = "miles";
                            break;
                        default:
                            // Default set to basic query
                            distance = null;
                            units = null;
                    }
                });
                layer.load().then(() => {
                    // 自动定位到图层所在位置
                    view.extent = layer.fullExtent;
                    layer.popupTemplate = layer.createPopupTemplate();
                });
    
                view.on("click", (event) => {
                    view.graphics.remove(pointGraphic);
                    if (view.graphics.includes(bufferGraphic)) {
                        view.graphics.remove(bufferGraphic);
                    }
                    queryFeatures(event);
    
                });
    
                function queryFeatures(screenPoint) {
                    const point = view.toMap(screenPoint);
                    layer
                        .queryFeatures({
                            geometry: point,
                            // distance and units will be null if basic query selected
                            distance: distance,
                            units: units,
                            spatialRelationship: "intersects",
                            returnGeometry: false,
                            returnQueryGeometry: true,
                            outFields: ["*"]
                        })
                        .then((featureSet) => {
                            // set graphic location to mouse pointer and add to mapview
                            pointGraphic.geometry = point;
                            view.graphics.add(pointGraphic);
                            // open popup of query result
                            view.popup.open({
                                location: point,
                                features: featureSet.features,
                                featureMenuOpen: true
                            });
                            if (featureSet.queryGeometry) {
                                bufferGraphic.geometry = featureSet.queryGeometry;
                                view.graphics.add(bufferGraphic);
                            }
                        });
                }
            });
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
        <div id="optionsDiv" class="esri-widget">
            <p>
                Select a query type and click a point on the map to view the results.
            </p>
            <select id="query-type" class="esri-widget">
                <option value="basic">Basic Query</option>
                <option value="distance">Query By Distance</option>
            </select>
        </div>
    </body>
    
    </html>

2、效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70]: /images/20220829/5529c9ee6cd64f0db1114bb297244000.png