arcgis api for js之自定义范围查询

最新推荐文章于 2025-05-19 11:59:09 发布

一名写前端的GISer

最新推荐文章于 2025-05-19 11:59:09 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： arcgis api for js

本文链接：https://blog.youkuaiyun.com/wangchaohpu/article/details/83338415

arcgis api for js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用ArcGIS API实现自定义地图范围的功能。通过绘制工具，用户可以自定义地图上的多边形范围，并基于此范围进行空间查询，展示与自定义范围相交的地图要素。涉及的技术包括HTML、JavaScript、ArcGIS API、jQuery等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义范围</title>
    <!--arcgis api-->
    <link data-id="esri_css" rel="stylesheet" type="text/css"
          href="http://localhost/arcgis_js_api_v321/library/3.21/3.21/esri/css/esri.css">
    <link data-id="tundra_css" rel="stylesheet" type="text/css"
          href="http://localhost/arcgis_js_api_v321/library/3.21/3.21/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://localhost/arcgis_js_api_v321/library/3.21/3.21/init.js"></script>
    <!--jquery-->
    <script type="text/javascript" src="libs/jquery/jquery.js"></script>
    <style>
        body,html{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div style="float: right">
        <button id="def">自定义范围</button>
    </div>
    <div id="myMap" style="width: 100%;height: 100%;">
        //放地图
    </div>

    <script>
        var myMap;
        var graphicLayer;
        require([
            "esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/toolbars/draw",
            "esri/layers/GraphicsLayer",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/graphic",
            "esri/Color",
            "esri/tasks/query",
            "esri/tasks/QueryTask",
        ],function (Map,ArcGISDynamicMapServiceLayer,Draw,GraphicsLayer,SimpleLineSymbol,
                    SimpleFillSymbol,Graphic,Color, Query,QueryTask,) {

            window.onload = function () {
                init();
            }
            function init(){
                myMap = new Map("myMap");
                var dlayer = new ArcGISDynamicMapServiceLayer("http://localhost/OneMapServer/rest/services/Raster/MapServer");
                var traLayer = new ArcGISDynamicMapServiceLayer("http://localhost/arcgis/rest/services/SQJC/TraDataset2017JN/MapServer");
                myMap.addLayer(dlayer);//添加地图
                myMap.addLayer(traLayer);//添加地图
                graphicLayer = new GraphicsLayer();
                myMap.addLayer(graphicLayer);
                $("#def").click(function () {
                    drawExtent();
                });

            }
            function drawExtent() {
                graphicLayer.clear();
                var toolbar = new Draw(myMap);//创建绘图工具对象
                toolbar.activate(Draw.POLYGON);//激活绘图工具
                toolbar.on("draw-complete",function (geographicGeometry) {
                    toolbar.deactivate();//关闭绘图工具
                    graphicLayer.clear();
                    var geometry = geographicGeometry.geometry;
                    switch (geometry.type) {
                        case "polygon":
                            var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([0, 255, 0, 0.5]));
                            break;
                    }
                    graphicLayer.add(new Graphic(geometry, symbol));

                    var query = new Query();
                    query.geometry = geometry;
                    query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                    query.outSpatialReference = myMap.spatialReference;
                    query.returnGeometry = true;
                    query.outFields=["*"];

                    var queryTask = new QueryTask("http://localhost/arcgis/rest/services/SQJC/TraDataset2017JN/MapServer/12");
                    queryTask.execute(query,function (result) {
                        console.log(result);
                    },function (error) {
                        console.log(error);
                    })
                })

            }

        })
        
    </script>

</body>
</html>