• ArcGIS API for JavaScript实现要素服务query接口的功能

    需求：

    使用ArcGIS API for JavaScript实现要素服务query接口的功能，以get请求和post请求两种方式进行实现。

    动态地图服务也可以参考类似的思路进行查询

    效果图：

     要素服务地址：

    https://ncportal.geoscene.cn/server/rest/services/Hosted/station1/FeatureServer/0

    查询区域：

    使用geometry（polygon）作为查询的范围，如下图：rings的值

    {
      "displayFieldName" : "",
      "fieldAliases" : {
        "FID" : "FID",
        "Id" : "Id"
      },
      "geometryType" : "esriGeometryPolygon",
      "spatialReference" : {
        "wkid" : 4326,
        "latestWkid" : 4326
      },
      "fields" : [
        {
          "name" : "FID",
          "type" : "esriFieldTypeOID",
          "alias" : "FID"
        },
        {
          "name" : "Id",
          "type" : "esriFieldTypeInteger",
          "alias" : "Id"
        }
      ],
      "features" : [
        {
          "attributes" : {
            "FID" : 0,
            "Id" : 0
          },
          "geometry" : {
            "rings" : [
              [
                [
                  107.11666700000018,
                  29.166667000000132
                ],
                [
                  114.50000000000011,
                  29.60000000000008
                ],
                [
                  114.35000000000014,
                  25.400000000000148
                ],
                [
                  107.18333300000006,
                  24.966667000000143
                ],
                [
                  107.11666700000018,
                  29.166667000000132
                ]
              ]
            ]
          }
        }
      ]
    }

    1、要素服务rest界面实现

    可以以get请求来进行查询，也可以post请求进行查询，查询出有158条要素记录符号要求

      

     2、get请求实现

    1. <html>
    2.  
    3. <head>
    4.     <meta charset="utf-8" />
    5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    6.     <title>
    7.         查询要素数据
    8.     title>
    9.  
    10.     <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    11.     <script src="https://js.arcgis.com/4.23/">script>
    12.  
    13.     <style>
    14.         html,
    15.         body,
    16.         #viewDiv {
    17.             padding: 0;
    18.             margin: 0;
    19.             height: 100%;
    20.             width: 100%;
    21.         }
    22.     style>
    23.  
    24.     <script>
    25.         require(["esri/Map", "esri/views/MapView",
    26.             "esri/rest/query",
    27.             "esri/layers/TileLayer",
    28.             "esri/rest/support/Query",
    29.             "esri/Graphic",], (
    30.                 Map,
    31.                 MapView,
    32.                 query,
    33.                 TileLayer,
    34.                 Query,
    35.                 Graphic
    36.             ) => {
    37.  
    38.                 // url to the layer of interest to query
    39.                 let queryUrl = "https://ncportal.geoscene.cn/server/rest/services/Hosted/station1/FeatureServer/0";
    40.  
    41.                 //设置查询参数
    42.                 let queryObject = new Query();
    43.                 queryObject.where = "1=1";
    44.                 queryObject.outSpatialReference = { wkid: 4326 };
    45.                 queryObject.outFields = '*';
    46.                 queryObject.spatialRel = 'esriSpatialRelIntersects';
    47.                 queryObject.geometryType = 'esriGeometryPolygon';
    48.                 queryObject.inSR = 4326;
    49.                 queryObject.outSR = 4326;
    50.                 queryObject.returnGeometry = true;
    51.  
    52.                 queryObject.geometry = {
    53.                     type: "polygon",
    54.                     rings: [
    55.                         [
    56.                             [
    57.                                 107.11666700000018,
    58.                                 29.166667000000132
    59.                             ],
    60.                             [
    61.                                 114.50000000000011,
    62.                                 29.60000000000008
    63.                             ],
    64.                             [
    65.                                 114.35000000000014,
    66.                                 25.400000000000148
    67.                             ],
    68.                             [
    69.                                 107.18333300000006,
    70.                                 24.966667000000143
    71.                             ],
    72.                             [
    73.                                 107.11666700000018,
    74.                                 29.166667000000132
    75.                             ]
    76.                         ]
    77.                     ]
    78.                 };
    79.  
    80.  
    81.                 const layer = new TileLayer({
    82.                     url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
    83.                     format: "jpgpng" // server exports in either jpg or png format
    84.                 });
    85.  
    86.                 /**************************
    87.                  * Add image layer to map
    88.                  *************************/
    89.  
    90.                 const map = new Map({
    91.                     basemap: {
    92.                         baseLayers: [layer],
    93.                     }
    94.                 });
    95.  
    96.                 const view = new MapView({
    97.                     container: "viewDiv",
    98.                     map: map,
    99.                     center: [110.884, 27.285],
    100.                     zoom: 4
    101.                 });
    102.  
    103.  
    104.  
    105.                 query.executeQueryPBF(queryUrl, queryObject).then(function (results) {
    106.                     // results.graphics contains the graphics returned from query
    107.                     console.log(results)
    108.                    
    109.                     results.features.forEach(function (item) {
    110.                         //实例化Graphic
    111.                         var feature = new Graphic({
    112.                             geometry: item.geometry,
    113.                             attributes: item.attributes,
    114.                             symbol: {
    115.                                 type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
    116.                                 style: "square",
    117.                                 color: "blue",
    118.                                 size: "8px",  // pixels
    119.                                 outline: {  // autocasts as new SimpleLineSymbol()
    120.                                     color: [255, 255, 0],
    121.                                     width: 3  // points
    122.                                 }
    123.                             },
    124.                             popupTemplate: {
    125.                                 title: "{name}",
    126.                                 content: "具体信息:{type} {stationid}"
    127.                             }
    128.                         });
    129.                         view.graphics.add(feature);
    130.                     });
    131.                     view.goTo({
    132.                         target: view.graphics
    133.                     });
    134.                 })
    135.  
    136.             });
    137.     script>
    138. head>
    139.  
    140. <body>
    141.     <div id="viewDiv">div>
    142. body>
    143.  
    144. html>

    3、post请求实现

    1. <html>
    2.  
    3. <head>
    4.     <meta charset="utf-8" />
    5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    6.     <title>
    7.         Intro to ImageryLayer | Sample | ArcGIS API for JavaScript 4.23
    8.     title>
    9.     <script src="https://code.jquery.com/jquery-3.0.0.min.js">script>
    10.  
    11.     <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    12.     <script src="https://js.arcgis.com/4.23/">script>
    13.  
    14.     <style>
    15.         html,
    16.         body,
    17.         #viewDiv {
    18.             padding: 0;
    19.             margin: 0;
    20.             height: 100%;
    21.             width: 100%;
    22.         }
    23.     style>
    24.  
    25.     <script>
    26.         require(["esri/Map", "esri/views/MapView",
    27.  
    28.             "esri/layers/TileLayer",
    29.  
    30.             "esri/Graphic",], (
    31.                 Map,
    32.                 MapView,
    34.                 TileLayer,
    36.                 Graphic
    37.             ) => {
    38.                 const layer = new TileLayer({
    39.                     url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
    40.                     format: "jpgpng" // server exports in either jpg or png format
    41.                 });
    42.  
    43.                 /**************************
    44.                  * Add image layer to map
    45.                  *************************/
    46.  
    47.                 const map = new Map({
    48.                     basemap: {
    49.                         baseLayers: [layer],
    50.                     }
    51.  
    52.                     // basemap:"streets-vector"
    53.                 });
    54.  
    55.                 const view = new MapView({
    56.                     container: "viewDiv",
    57.                     map: map,
    58.                     center: [110.884, 27.285],
    59.                     zoom: 4
    60.                 });
    61.  
    62.  
    63.  
    64.                 let url = 'https://ncportal.geoscene.cn/server/rest/services/Hosted/station1/FeatureServer/0/query'
    65.  
    66.                 let data = {};
    67.                 data.where = "1=1";
    68.                 data.geometry = "{'rings': [[[107.11666700000018,29.166667000000132],[114.50000000000011,29.60000000000008],[114.35000000000014,25.400000000000148],[107.18333300000006,24.966667000000143],[107.11666700000018,29.166667000000132]]]}";
    69.                 data.geometryType = "esriGeometryPolygon";
    70.                 data.spatialRel = "esriSpatialRelIntersects";
    71.                 data.units = "esriSRUnit_Meter";
    72.                 data.returnGeometry = true;
    73.                 data.f = "pjson";
    74.                 data.outFields = "*";
    75.                 console.log(data);
    76.                 $(document).ready(function () {
    77.                     $.ajax({
    78.                         type: 'post',
    79.                         url: url,
    80.                         async: false,
    81.                         dataType: 'jsonp',
    82.                         contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    83.                         data: data,
    84.                         success: function (resData) {
    85.                             //alert("请求数据成功");                                                  
    86.                             resData.features.forEach(function (item) {
    87.  
    88.                                 let point = {
    89.                                     type: "point",  // autocasts as new Point()
    90.                                     longitude: item.geometry.x,
    91.                                     latitude: item.geometry.y
    92.                                 };
    93.  
    94.                                 //实例化Graphic
    95.                                 var feature = new Graphic({
    96.                                     geometry: point,
    97.                                     attributes: item.attributes,
    98.                                     symbol: {
    99.                                         type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
    100.                                         style: "square",
    101.                                         color: "blue",
    102.                                         size: "8px",  // pixels
    103.                                         outline: {  // autocasts as new SimpleLineSymbol()
    104.                                             color: [255, 255, 0],
    105.                                             width: 3  // points
    106.                                         }
    107.                                     },
    108.                                     popupTemplate: {
    109.                                         title: "{name}",
    110.                                         content: "具体信息:{type} {stationid}"
    111.                                     }
    112.                                 });
    113.  
    114.                                 view.graphics.add(feature);
    115.  
    116.                             });
    117.                             view.goTo({
    118.                                 target: view.graphics
    119.                             });
    120.  
    121.                         },
    122.                         error: function (jqXHR, textStatus, errorThrown) {
    123.                             console.log("连接数据的时候出现了：" + textStatus);
    124.                         }
    125.  
    126.                     })
    127.                 })
    128.             });
    129.     script>
    130. head>
    131.  
    132. <body>
    133.     <div id="viewDiv">div>
    134. body>
    135.  
    136. html>

    参考资料：

    ArcGIS Server 动态地图服务Query 请求问题小结_孙同学的一个笔记本的博客-CSDN博客_arcgis query

  • 相关阅读:
    nginx代理后如何获取用户真实访问的ip，以及访问耗时接口是nginx报504问题处理
    Delphi 编程实现拖动排序并输出到文档
    shiro会话管理
    WorkPlus一站式解决方案，助力企业构建统一门户系统
    二分查找：74搜索二维矩阵
    selenium自动化测试神器
    鲲鹏devkit开发套件——编译调试工具介绍
    到github上去学别人怎么写代码
    ESP8266-Arduino编程实例-ADXL345三轴加速计驱动
    HarmonyOS 鸿蒙DevEco:导入无法运行提示Sync failed
  • 原文地址：https://blog.csdn.net/gislaozhang/article/details/126447786