/examples/mapboxgl/01_mapQueryBySQL.html

https://github.com/SuperMap/iClient-JavaScript · HTML · 83 lines · 76 code · 4 blank · 3 comment · 0 complexity · b1658f418194dd89c04b3b76c3ebb254 MD5 · raw file 

    

  1. <!--********************************************************************
    2. 

  2. * Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
    3. 

  3. *********************************************************************-->
    4. 

  4. <!DOCTYPE html>
    5. 

  5. <html>
    6. 

  6. <head>
    7. 

  7.     <meta charset="UTF-8">
    8. 

  8.     <title data-i18n="resources.title_mapQueryBySQL"></title>
    9. 

  9.     <script type="text/javascript" src="../js/include-web.js"></script>
    10. 

  10. </head>
    11. 

  11. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    12. 

  12. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    13. 

  13. <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    14. 

  14. <script type="text/javascript">
    15. 

  15.     var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    16. 

  16.     var url = host + "/iserver/services/map-world/rest/maps/World";
    17. 

  17.     var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
    18. 

  18.        "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
    19. 

  19.        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
    20. 

  20.     var map = new mapboxgl.Map({
    21. 

  21.         container: 'map',
    22. 

  22.         style: {
    23. 

  23.             "version": 8,
    24. 

  24.             "sources": {
    25. 

  25.                 "raster-tiles": {
    26. 

  26.                     "attribution": attribution,
    27. 

  27.                     "type": "raster",
    28. 

  28.                     "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
    29. 

  29.                     "tileSize": 256,
    30. 

  30.                 },
    31. 

  31.             },
    32. 

  32.             "layers": [{
    33. 

  33.                 "id": "simple-tiles",
    34. 

  34.                 "type": "raster",
    35. 

  35.                 "source": "raster-tiles",
    36. 

  36.                 "minzoom": 0,
    37. 

  37.                 "maxzoom": 22
    38. 

  38.             }],
    39. 

  39.         },
    40. 

  40.         center: [0, 0],
    41. 

  41.         maxZoom: 18,
    42. 

  42.         zoom: 2
    43. 

  43.     });
    44. 

  44.     map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
    45. 

  45.     map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    46. 

  46. 

  47.     map.on('load', function () {
    48. 

  48.         query();
    49. 

  49.     });
    50. 

  50. 

  51.     function query() {
    52. 

  52.         var param = new SuperMap.QueryBySQLParameters({
    53. 

  53.             queryParams: {
    54. 

  54.                 name: "Capitals@World.1",
    55. 

  55.                 attributeFilter: "SMID < 10"
    56. 

  56.             }
    57. 

  57.         });
    58. 

  58. 

  59.         queryService = new mapboxgl.supermap.QueryService(url).queryBySQL(param, function (serviceResult) {
    60. 

  60.             var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
    61. 

  61.             var features = recordsets && recordsets[0] && recordsets[0].features;
    62. 

  62.             map.addLayer({
    63. 

  63.                 "id": "points",
    64. 

  64.                 "type": "circle",
    65. 

  65.                 "paint": {
    66. 

  66.                     "circle-radius": 6,
    67. 

  67.                     "circle-color": "#007cbf",
    68. 

  68.                     "circle-opacity":0.1,
    69. 

  69.                     "circle-stroke-width":2,
    70. 

  70.                     "circle-stroke-color":"#007cbf",
    71. 

  71.                     "circle-stroke-opacity":0.5
    72. 

  72.                 },
    73. 

  73.                 "source": {
    74. 

  74.                     "type": "geojson",
    75. 

  75.                     "data": features
    76. 

  76.                 }
    77. 

  77.             });
    78. 

  78.         });
    79. 

  79.     }
    80. 

  80. 

  81. </script>
    82. 

  82. </body>
    83. 

  83. </html>
    84.