map_coordinate_transformation.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="utf-8">
  8. <title data-i18n="resources.title_coordinateTransformation"></title>
  9. <style type="text/css">
  10. #mousePositionDiv {
  11. position: absolute;
  12. z-index: 9999999;
  13. top: 50px;
  14. font-family: Arial;
  15. font-size: smaller;
  16. text-align: left;
  17. width: 360px;
  18. }
  19. </style>
  20. </head>
  21. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  22. <div id='mousePositionDiv' class='smCustomControlMousePosition'></div>
  23. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  24. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  25. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  26. <script type="text/javascript">
  27. var map, layer,
  28. host = window.isLocal ? window.server : "https://iserver.supermap.io";
  29. url = host + "/iserver/services/map-world/rest/maps/World";
  30. //初始化地图
  31. map = new SuperMap.Map("map", {
  32. controls: [
  33. new SuperMap.Control.Zoom(),
  34. new SuperMap.Control.Navigation()]
  35. });
  36. //初始化图层
  37. layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null, {maxResolution: "auto"});
  38. //监听图层信息加载完成事件
  39. layer.events.on({"layerInitialized": addLayer});
  40. map.events.on({"mousemove": getMousePositionPx});
  41. setposition();
  42. addHandler(window, "resize", setposition);
  43. //异步加载图层
  44. function addLayer() {
  45. map.addLayer(layer);
  46. //显示地图范围
  47. map.setCenter(new SuperMap.LonLat(0, 0), 1);
  48. }
  49. function getMousePositionPx(e) {
  50. var lonlat = map.getLonLatFromPixel(new SuperMap.Pixel(e.xy.x, e.xy.y));
  51. var newHtml = resources.text_coordinateTransformation + "<br>" + resources.text_mousePixelCoordinate + "x=" + Math.floor(e.clientX) + "," + "y=" + Math.floor(e.clientY) +
  52. "<br>" + resources.text_positionCoordinate + "lon=" + lonlat.lon.toFixed(5) + "," + "lat=" +
  53. lonlat.lat.toFixed(5);
  54. document.getElementById("mousePositionDiv").innerHTML = newHtml;
  55. }
  56. function addHandler(element, type, handler) {
  57. if (element.addEventListener) {
  58. element.addEventListener(type, handler, false);
  59. } else if (element.attachEvent) {
  60. element.attachEvent("on" + type, handler);
  61. } else {
  62. element["on" + type] = handler;
  63. }
  64. }
  65. function setposition() {
  66. var width = map.getSize().w;
  67. document.getElementById("mousePositionDiv").style.left = width / 2 - 160 + "px";
  68. }
  69. </script>
  70. </body>
  71. </html>