drawAndModify.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  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_drawFeatures"></title>
  9. <script type="text/javascript" src="../js/include-web.js"></script>
  10. </head>
  11. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  12. <div id="map" style="width: 100%;height:100%"></div>
  13. <script type="text/javascript" include="leaflet.draw" src="../../dist/leaflet/include-leaflet.js"></script>
  14. <script type="text/javascript">
  15. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  16. var map, url = host + "/iserver/services/map-china400/rest/maps/China";
  17. map = L.map('map', {
  18. center: [33, 114],
  19. zoom: 4
  20. });
  21. L.supermap.tiledMapLayer(url).addTo(map);
  22. var editableLayers = new L.FeatureGroup();
  23. map.addLayer(editableLayers);
  24. var options = {
  25. position: 'topleft',
  26. draw: {
  27. polyline: {},
  28. polygon: {},
  29. circle: {},
  30. rectangle: {},
  31. marker: {},
  32. remove: {}
  33. },
  34. edit: {
  35. featureGroup: editableLayers,
  36. remove: true
  37. }
  38. };
  39. var drawControl = new L.Control.Draw(options);
  40. map.addControl(drawControl);
  41. handleMapEvent(drawControl._container, map);
  42. map.on(L.Draw.Event.CREATED, function (e) {
  43. var type = e.layerType,
  44. layer = e.layer;
  45. if (type === 'marker') {
  46. layer.bindPopup('A popup!');
  47. }
  48. editableLayers.addLayer(layer);
  49. });
  50. function handleMapEvent(div, map) {
  51. if (!div || !map) {
  52. return;
  53. }
  54. div.addEventListener('mouseover', function () {
  55. map.scrollWheelZoom.disable();
  56. map.doubleClickZoom.disable();
  57. });
  58. div.addEventListener('mouseout', function () {
  59. map.scrollWheelZoom.enable();
  60. map.doubleClickZoom.enable();
  61. });
  62. }
  63. </script>
  64. </body>
  65. </html>