|
6 | 6 | <link rel="stylesheet" href="../css/bootstrap.min.css"> |
7 | 7 | <link rel="stylesheet" href="../../dist/SuperMapiClient9.css"> |
8 | 8 | <script type="text/javascript" src="../../dist/SuperMapiClient9.js"></script> |
| 9 | + |
| 10 | + <style> |
| 11 | + .ol-popup { |
| 12 | + position: absolute; |
| 13 | + background-color: white; |
| 14 | + -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); |
| 15 | + filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); |
| 16 | + padding: 15px; |
| 17 | + border-radius: 10px; |
| 18 | + border: 1px solid #cccccc; |
| 19 | + bottom: 12px; |
| 20 | + left: -50px; |
| 21 | + min-width: 280px; |
| 22 | + } |
| 23 | + |
| 24 | + .ol-popup:after, .ol-popup:before { |
| 25 | + top: 100%; |
| 26 | + border: solid transparent; |
| 27 | + content: " "; |
| 28 | + height: 0; |
| 29 | + width: 0; |
| 30 | + position: absolute; |
| 31 | + pointer-events: none; |
| 32 | + } |
| 33 | + |
| 34 | + .ol-popup:after { |
| 35 | + border-top-color: white; |
| 36 | + border-width: 10px; |
| 37 | + left: 48px; |
| 38 | + margin-left: -10px; |
| 39 | + } |
| 40 | + |
| 41 | + .ol-popup:before { |
| 42 | + border-top-color: #cccccc; |
| 43 | + border-width: 11px; |
| 44 | + left: 48px; |
| 45 | + margin-left: -11px; |
| 46 | + } |
| 47 | + |
| 48 | + </style> |
| 49 | + |
| 50 | + <div id="popup" class="ol-popup"> |
| 51 | + <div id="popup-content"></div> |
| 52 | + </div> |
| 53 | + |
9 | 54 | <script type="text/javascript"> |
10 | | - var map, infowin, |
11 | | - url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World"; |
| 55 | + var container = document.getElementById('popup'); |
| 56 | + var content = document.getElementById('popup-content'); |
| 57 | + var overlay = new ol.Overlay(({ |
| 58 | + element: container, |
| 59 | + autoPan: true, |
| 60 | + autoPanAnimation: { |
| 61 | + duration: 250 |
| 62 | + } |
| 63 | + })); |
| 64 | + var map, |
| 65 | + url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World"; |
12 | 66 | function init() { |
13 | 67 | map = new ol.Map({ |
14 | 68 | target: 'map', |
15 | 69 | view: new ol.View({ |
16 | 70 | center: [0, 0], |
17 | 71 | zoom: 2, |
18 | 72 | projection: 'EPSG:4326' |
19 | | - }) |
| 73 | + }), |
| 74 | + overlays: [overlay], |
20 | 75 | }); |
21 | 76 | map.addLayer(new ol.supermap.TiledMapLayer(url, {"pro": "4326"})); |
22 | 77 | } |
23 | 78 |
|
24 | 79 | function mapService() { |
25 | | -// closeInfoWin(); |
| 80 | + closeInfoWin(); |
26 | 81 | var mapService = new ol.supermap.MapService(url, { |
27 | 82 | "projection": "4326" |
28 | 83 | }); |
29 | 84 | mapService.on("complete", function (serviceResult) { |
30 | | - if (!infowin) { |
31 | | - console.log(serviceResult); |
32 | | - } |
| 85 | + var innerHTML = "(map信息太多,只打印一部分)" + "<br><br>"; |
| 86 | + innerHTML += "地图名:" + JSON.stringify(serviceResult.element.result.name, null, 2) + "<br>"; |
| 87 | + innerHTML += "中心点:" + JSON.stringify(serviceResult.element.result.center, null, 2) + "<br>"; |
| 88 | + innerHTML += "Bounds:" + JSON.stringify(serviceResult.element.result.bounds, null, 2) + "<br>"; |
| 89 | + content.innerHTML = innerHTML; |
33 | 90 | }); |
34 | 91 | mapService.getMapStatus(); |
| 92 | + overlay.setPosition([0, 0]); |
| 93 | + } |
| 94 | + |
| 95 | + function closeInfoWin() { |
| 96 | + if (overlay) { |
| 97 | + overlay.setPosition(undefined); |
| 98 | + } |
35 | 99 | } |
36 | | - // function closeInfoWin() { |
37 | | - // if (infowin) { |
38 | | - // infowin.removeFrom(map); |
39 | | - // } |
40 | | - // } |
41 | 100 |
|
42 | 101 | </script> |
43 | 102 | </head> |
|
0 commit comments