arcgis js（八）地理查询

最新推荐文章于 2024-07-29 14:27:10 发布

之乎者也哦

最新推荐文章于 2024-07-29 14:27:10 发布

阅读量766

点赞数 1

分类专栏： Web GIS 开发文章标签： GIS

本文链接：https://blog.csdn.net/HB_Programmer/article/details/119844246

版权

Web GIS 开发专栏收录该内容

12 篇文章 18 订阅

订阅专栏

本文展示了如何使用天地图服务创建WebTileLayer，并结合ArcGIS FeatureLayer进行基本查询和按距离查询。代码示例中，查询对象为一个面状图层，支持点击图斑获取属性信息，并提供了基本查询和距离查询两种方式，适用于点、线和面状图层。用户可以选择查询类型，然后在地图上点击以查看查询结果。

摘要由CSDN通过智能技术生成

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、效果