controler_geolocate.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8. <title data-i18n="resources.title_geolocateControl"></title>
  9. <style type="text/css">
  10. .editPane {
  11. position: absolute;
  12. right: 50px;
  13. top: 50px;
  14. text-align: center;
  15. background: #FFF;
  16. z-index: 1000;
  17. }
  18. </style>
  19. </head>
  20. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  21. <div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
  22. <div class='panel-heading'>
  23. <h5 class='panel-title text-center' data-i18n="resources.title_geolocateControl"></h5>
  24. </div>
  25. <div class='panel-body' id='params'>
  26. <p></p>
  27. <div align='center' class='button-group'>
  28. <input type='button' id='btn' class='btn btn-primary' data-i18n="[value]resources.text_input_value_location" onclick="geoLocation()"/>
  29. </div>
  30. </div>
  31. </div>
  32. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  33. <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  34. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  35. <script type="text/javascript">
  36. var map, layer, positionLayer,geolocate,
  37. host = window.isLocal ? window.server : "https://iserver.supermap.io";
  38. url = host + "/iserver/services/map-china400/rest/maps/China";
  39. map = new SuperMap.Map("map", {
  40. controls: [
  41. new SuperMap.Control.ScaleLine(),
  42. new SuperMap.Control.Zoom(),
  43. new SuperMap.Control.Navigation({
  44. dragPanOptions: {
  45. enableKinetic: true
  46. }
  47. })],
  48. projection: "EPSG:3857"
  49. });
  50. //添加geo定位控件
  51. geolocate = new SuperMap.Control.Geolocate({
  52. bind: false,
  53. geolocationOptions: {
  54. enableHighAccuracy: false,
  55. maximumAge: 0
  56. },
  57. eventListeners: {
  58. "locationupdated": getGeolocationCompleted,
  59. "locationfailed": getGeolocationFailed
  60. }
  61. });
  62. //激活控件
  63. map.addControl(geolocate);
  64. //初始化图层
  65. positionLayer = new SuperMap.Layer.Markers("Markers");
  66. layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {
  67. transparent: true,
  68. cacheEnabled: true,
  69. redirect: true
  70. }, {maxResolution: "auto"});
  71. layer.events.on({"layerInitialized": addLayer});
  72. function addLayer() {
  73. var center = new SuperMap.LonLat(11733502.481499, 4614406.969325);
  74. map.addLayers([layer, positionLayer]);
  75. map.setCenter(center, 4);
  76. }
  77. function geoLocation() {
  78. if (!geolocate.active) {
  79. geolocate.activate();
  80. }
  81. geolocate.getCurrentLocation();
  82. }
  83. //更新定位
  84. function getGeolocationCompleted(event) {
  85. var lonLat = new SuperMap.LonLat(event.point.x, event.point.y);
  86. positionLayer.clearMarkers()
  87. size = new SuperMap.Size(44, 33),
  88. offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
  89. icon = new SuperMap.Icon("./images/marker.png", size, offset);
  90. positionLayer.addMarker(new SuperMap.Marker(lonLat, icon));
  91. map.setCenter(lonLat);
  92. }
  93. function getGeolocationFailed(event) {
  94. widgets.alert.showAlert(resources.msg_geoLocate,false,350);
  95. }
  96. </script>
  97. </body>
  98. </html>