1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title data-i18n="resources.title_coordinateTransformation"></title>
- <style type="text/css">
- #mousePositionDiv {
- position: absolute;
- z-index: 9999999;
- top: 50px;
- font-family: Arial;
- font-size: smaller;
- text-align: left;
- width: 360px;
- }
- </style>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
- <div id='mousePositionDiv' class='smCustomControlMousePosition'></div>
- <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
- <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
- <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
- <script type="text/javascript">
- var map, layer,
- host = window.isLocal ? window.server : "https://iserver.supermap.io";
- url = host + "/iserver/services/map-world/rest/maps/World";
- //初始化地图
- map = new SuperMap.Map("map", {
- controls: [
- new SuperMap.Control.Zoom(),
- new SuperMap.Control.Navigation()]
- });
- //初始化图层
- layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null, {maxResolution: "auto"});
- //监听图层信息加载完成事件
- layer.events.on({"layerInitialized": addLayer});
- map.events.on({"mousemove": getMousePositionPx});
- setposition();
- addHandler(window, "resize", setposition);
- //异步加载图层
- function addLayer() {
- map.addLayer(layer);
- //显示地图范围
- map.setCenter(new SuperMap.LonLat(0, 0), 1);
- }
- function getMousePositionPx(e) {
- var lonlat = map.getLonLatFromPixel(new SuperMap.Pixel(e.xy.x, e.xy.y));
- var newHtml = resources.text_coordinateTransformation + "<br>" + resources.text_mousePixelCoordinate + "x=" + Math.floor(e.clientX) + "," + "y=" + Math.floor(e.clientY) +
- "<br>" + resources.text_positionCoordinate + "lon=" + lonlat.lon.toFixed(5) + "," + "lat=" +
- lonlat.lat.toFixed(5);
- document.getElementById("mousePositionDiv").innerHTML = newHtml;
- }
- function addHandler(element, type, handler) {
- if (element.addEventListener) {
- element.addEventListener(type, handler, false);
- } else if (element.attachEvent) {
- element.attachEvent("on" + type, handler);
- } else {
- element["on" + type] = handler;
- }
- }
- function setposition() {
- var width = map.getSize().w;
- document.getElementById("mousePositionDiv").style.left = width / 2 - 160 + "px";
- }
- </script>
- </body>
- </html>
|