map_3tianditu.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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_3tianditu"></title>
  9. </head>
  10. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  11. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  12. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  13. <script type="text/javascript" exclude="iclient-classic" include="tianditu" src="../../dist/classic/include-classic.js"></script>
  14. <script type="text/javascript">
  15. var map, tiandituLayer, marker, markers, tianMarkerLayer;
  16. map = new SuperMap.Map("map", {
  17. controls: [
  18. new SuperMap.Control.Navigation(),
  19. new SuperMap.Control.Zoom(),
  20. new SuperMap.Control.LayerSwitcher()
  21. ], allOverlays: true
  22. });
  23. tiandituLayer = new SuperMap.Layer.WMTS({
  24. name: "vec",
  25. url: "https://t0.tianditu.gov.cn/vec_c/wmts?tk=1d109683f4d84198e37a38c442d68311",
  26. layer: "vec",
  27. style: "default",
  28. matrixSet: "c",
  29. format: "tiles",
  30. opacity: 1,
  31. requestEncoding: "KVP"
  32. });
  33. tianMarkerLayer = new SuperMap.Layer.WMTS({
  34. name: "vec",
  35. url: "https://t0.tianditu.gov.cn/cva_c/wmts?tk=1d109683f4d84198e37a38c442d68311",
  36. layer: "cva",
  37. style: "default",
  38. matrixSet: "c",
  39. format: "tiles",
  40. opacity: 1,
  41. requestEncoding: "KVP"
  42. });
  43. tianMarkerLayer.layerType = "cva";
  44. tianMarkerLayer.isLabel = true;
  45. map.addControl(new SuperMap.Control.MousePosition());
  46. markers = new SuperMap.Layer.Markers("Markers");
  47. map.addLayers([tiandituLayer, markers, tianMarkerLayer]);
  48. map.setCenter(new SuperMap.LonLat(23, 37), 3);
  49. addMarker();
  50. var infowin = null;
  51. //定义mouseClickHandler函数,触发click事件会调用此函数
  52. function mouseClickHandler(event) {
  53. closeInfoWin();
  54. //初始化popup类
  55. popup = new SuperMap.Popup(
  56. "chicken",
  57. marker.getLonLat(),
  58. new SuperMap.Size(220, 140),
  59. '<img src="images/xila.jpg">',
  60. true,
  61. null
  62. );
  63. infowin = popup;
  64. //添加弹窗到map图层
  65. map.addPopup(popup);
  66. }
  67. function closeInfoWin() {
  68. if (infowin) {
  69. try {
  70. infowin.hide();
  71. infowin.destroy();
  72. }
  73. catch (e) {
  74. }
  75. }
  76. }
  77. function addMarker() {
  78. size = new SuperMap.Size(50, 50);
  79. offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
  80. icon = new SuperMap.Icon('../img/markerbig_select.png', size, offset);
  81. //初始化标记覆盖物类
  82. marker = new SuperMap.Marker(new SuperMap.LonLat(23.6530190, 37.9439259), icon);
  83. //添加覆盖物到标记图层
  84. markers.addMarker(marker);
  85. //注册 click 事件,触发 mouseClickHandler()方法
  86. marker.events.on({
  87. "click": mouseClickHandler,
  88. "touchstart": mouseClickHandler //假如要在移动端的浏览器也实现点击弹框,则在注册touch类事件
  89. });
  90. }
  91. </script>
  92. </body>
  93. </html>