onlineWebMap.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  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_onlineWebMap"></title>
  9. <script type="text/javascript" src="../js/include-web.js"></script>
  10. <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
  11. </head>
  12. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
  13. <div id="map" style="width: 100%;height:100%"></div>
  14. <div
  15. id="popup"
  16. class="ol-popup"
  17. style="background-color: white;padding: 15px;border-radius: 10px;border: 1px solid #cccccc;"
  18. >
  19. <div id="popup-content"></div>
  20. </div>
  21. <script type="text/javascript">
  22. new ol.supermap.WebMap(128, {
  23. successCallback: function(map) {
  24. var popup = new ol.Overlay({
  25. element: document.getElementById('popup')
  26. });
  27. map.addOverlay(popup);
  28. map.on('click', function(evt) {
  29. var feature = map.forEachFeatureAtPixel(
  30. evt.pixel,
  31. function(feature) {
  32. return feature;
  33. },
  34. { hitTolerance: 10 }
  35. );
  36. if (feature) {
  37. var attributes = feature.getProperties().attributes;
  38. var title = attributes.dataViz_title;
  39. var description = attributes.dataViz_description;
  40. if (title && description) {
  41. popup.setPosition(evt.coordinate);
  42. document.getElementById('popup-content').innerHTML =
  43. feature.getProperties().attributes.dataViz_title +
  44. ': ' +
  45. feature.getProperties().attributes.dataViz_description;
  46. }
  47. } else {
  48. popup.setPosition();
  49. }
  50. });
  51. }
  52. });
  53. </script>
  54. </body>
  55. </html>