components_Search.html 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="UTF-8">
  8. <title>POI</title>
  9. <script type="text/javascript" src="../js/include-web.js"></script>
  10. <script type="text/javascript" include="iclient-leaflet-css" src="../../dist/leaflet/include-leaflet.js"></script>
  11. <style>
  12. /*修改leaflet默认弹框样式*/
  13. .leaflet-popup,
  14. .leaflet-popup-content-wrapper {
  15. padding: 0;
  16. }
  17. .leaflet-popup-content {
  18. margin: 0;
  19. }
  20. </style>
  21. </head>
  22. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  23. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  24. <script>
  25. var map = L.map('map', {
  26. center: [25, 40],
  27. zoom: 3,
  28. });
  29. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  30. var url = host + '/iserver/services/map-china400/rest/maps/China';
  31. var sqlurl = host + "/iserver/services/map-world/rest/maps/World";
  32. L.supermap.tiledMapLayer(url).addTo(map);
  33. //添加组件:
  34. var poiSearch = L.supermap.components.search({
  35. isGeoCoding: !window.isLocal,
  36. perPageDataNum: 8 // 每页显示数据个数
  37. //设置结果图层样式:
  38. /*style: function (feature, latLng) {
  39. if (latLng /!*&& feature instanceof L.latLng || feature.geometry.type.toLowerCase() === "point"*!/) {
  40. return L.circleMarker(latLng, {
  41. fillColor: 'red',
  42. weight: 1,
  43. opacity: 1,
  44. color: 'red',
  45. fillOpacity: 0.6
  46. });
  47. }
  48. }*/
  49. });
  50. poiSearch.addTo(map);
  51. //添加示例图层:
  52. query();
  53. function query() {
  54. //查询数据构建示例图层:
  55. var polygon = L.polygon([[90, 180], [90, -180], [-90, -180], [-90, 180], [90, 180]]);
  56. var param = new SuperMap.QueryByBoundsParameters({
  57. queryParams: { name: "Capitals@World.1" },
  58. bounds: polygon.getBounds()
  59. });
  60. L.supermap
  61. .queryService(sqlurl)
  62. .queryByBounds(param, function (serviceResult) {
  63. var result = serviceResult.result;
  64. var resultLayer = L.geoJSON(result.recordsets[0].features, {
  65. pointToLayer: function (geoJsonPoint, latlng) {
  66. return L.circleMarker(latlng, {
  67. fillColor: 'blue',
  68. weight: 1,
  69. opacity: 1,
  70. color: 'blue',
  71. fillOpacity: 0.6
  72. });
  73. },
  74. }).addTo(map);
  75. poiSearch.addSearchLayer([L.supermap.components.geoJSONLayerWithName("首都", resultLayer)]);
  76. });
  77. }
  78. </script>
  79. </body>
  80. </html>