map.html 986 B

1234567891011121314151617181920212223242526272829303132
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
  4. <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
  5. <style>
  6. #map {
  7. width: 100%;
  8. height: 100%;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <div id="map"></div>
  14. <script>
  15. var map = L.map("map").setView([38.45, 70.6], 6);
  16. var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  17. attribution:
  18. '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  19. }).addTo(map);
  20. //load wms form geoserver
  21. const mywms = L.tileLayer.wms("http://192.168.60.2:8080/geoserver/sanya_workspace/wms", {
  22. layers: 'sanya:TB_GHDK_SITUATION',
  23. format: 'image/png',
  24. transparent: true,
  25. version: '1.1.0',
  26. attribution: "country layer"
  27. });
  28. mywms.addTo(map);
  29. </script>
  30. </body>
  31. </html>