others_projection.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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_projection"></title>
  9. <style type="text/css">
  10. #mousePositionDiv {
  11. position: absolute;
  12. z-index: 99;
  13. left: 50%;
  14. top: 5%;
  15. transform: translate(-50%, -50%);
  16. max-width: 50%;
  17. text-align: center;
  18. font-family: Arial;
  19. font-size: smaller;
  20. }
  21. </style>
  22. </head>
  23. <body style="margin: 0;overflow: hidden;background: #fff;">
  24. <div id='mousePositionDiv' class='smCustomControlMousePosition'></div>
  25. <div id="map" style="position: relative;height: 100%;"></div>
  26. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  27. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  28. <script src='../data/changchundata.js'></script>
  29. <script type="text/javascript">
  30. var map, layer, control,
  31. host = window.isLocal ? window.server : "https://iserver.supermap.io",
  32. url = host + "/iserver/services/map-china400/rest/maps/China";
  33. map = new SuperMap.Map("map", {
  34. controls: [
  35. new SuperMap.Control.LayerSwitcher(),
  36. new SuperMap.Control.ScaleLine(),
  37. new SuperMap.Control.Zoom(),
  38. new SuperMap.Control.Navigation({
  39. dragPanOptions: {
  40. enableKinetic: true
  41. }
  42. })], projection: "EPSG:3857"
  43. });
  44. control = new SuperMap.Control.MousePosition();
  45. map.events.on({"mousemove": getMousePositionPx});
  46. layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {
  47. transparent: true, cacheEnabled: true
  48. }, {maxResolution: "auto"});
  49. layer.events.on({"layerInitialized": addLayer});
  50. function addLayer() {
  51. map.addLayer(layer);
  52. map.setCenter(new SuperMap.LonLat(9733502.481499, 4614406.969325), 4);
  53. }
  54. function getMousePositionPx(evt) {
  55. //获取鼠标坐标位置
  56. var lonLat = map.getLonLatFromPixel(evt.xy);
  57. if (!lonLat) {
  58. return;
  59. }
  60. //坐标转换
  61. lonLat.transform("EPSG:3857", "EPSG:4326");
  62. var newHtml = resources.text_clientProjection + "<br>" + resources.text_mapProjection + "EPSG:3857 <br>" + resources.text_mousePosition + "EPSG:4326 <br>" + resources.text_mouseCoord +
  63. lonLat.lon.toFixed(5) + " " +
  64. lonLat.lat.toFixed(5);
  65. document.getElementById("mousePositionDiv").innerHTML = newHtml;
  66. }
  67. </script>
  68. </body>
  69. </html>