搜索
搜索

无法使用传单在地图上绘制形状

debugcn 发表于 Dev
11
乌萨马·哈米德（Usama Hameed）

我正在使用javascript库传单来处理地图，我现在做了位置搜索部分，希望用户可以在地图上绘制圆，线和多边形，但是可能无法正常工作。搜索的工具栏可见，但形状的工具栏不可见。有人可以指出我的代码中的错误吗，谢谢。这是我的代码：

<!DOCTYPE html>
<html>

<head>
  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet"></script>

  <!-- Esri Leaflet Geocoder -->
  <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css">
  <script src="https://unpkg.com/esri-leaflet-geocoder"></script>
  <script src="node_modules/leaflet-toolbar/dist/leaflet.toolbar.js"></script>

  <link rel="stylesheet" href="node_modules/leaflet-toolbar/dist/leaflet.toolbar.css" />
  <link rel="stylesheet" href="node_modules/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.css" />
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!----    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
    <script src="../node_modules/leaflet-toolbar/dist/leaflet.toolbar-src.js"></script>
    <script src="../node_modules/leaflet-draw/dist/leaflet.draw-src.js"></script>--!-->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
  <style>
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="map"> </div>
  <script>
    var center = [-33.8650, 151.2094];

    var map = L.map('map').setView([0, 0], 6);
    drawnItems = new L.FeatureGroup().addTo(map);

    L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=eL1sdTPWF7XeyxpLvpGq', {

      attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'

    }).addTo(map);

    var searchContrl = L.esri.Geocoding.geosearch().addTo(map);

    //adding layergroup to search control

    var results = L.layerGroup.addTo(map);

    searchContrl.on('results', function(data) {
      results.clearLayers();
      for (var i = data.results.length - 1; i >= 0; i--) {
        results.addLayer(L.marker(data.results[i].latlong));
      }
    });

    var editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);

    var MyCustomMarker = L.Icon.extend({
      options: {
        shadowUrl: null,
        iconAnchor: new L.Point(12, 12),
        iconSize: new L.Point(24, 24),
        iconUrl: 'link/to/image.png'
      }
    });

    var options = {
      position: 'topright',
      draw: {
        polyline: {
          shapeOptions: {
            color: '#f357a1',
            weight: 10
          }
        },
        polygon: {
          allowIntersection: false, // Restricts shapes to simple polygons
          drawError: {
            color: '#e1e100', // Color the shape will turn when intersects
            message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
          },
          shapeOptions: {
            color: '#bada55'
          }
        },
        circle: false, // Turns off this drawing tool
        rectangle: {
          shapeOptions: {
            clickable: false
          }
        },
        marker: {
          icon: new MyCustomMarker()
        }
      },
      edit: {
        featureGroup: editableLayers, //REQUIRED!!
        remove: false
      }
    };

    var drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);

    map.on(L.Draw.Event.CREATED, function(e) {
      var type = e.layerType,
        layer = e.layer;

      if (type === 'marker') {
        layer.bindPopup('A popup!');
      }

      editableLayers.addLayer(layer);
    });
  </script>
</body>

</html>

莫什·费

使用是错误的

var results = L.layerGroup.addTo(map);

应该

var results = new L.LayerGroup().addTo(map);

（就像您在搜索容器中所做的一样） 

<!DOCTYPE html>
<html>

<head>
  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet"></script>

  <!-- Esri Leaflet Geocoder -->
  <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css">
  <script src="https://unpkg.com/esri-leaflet-geocoder"></script>
  <script src="node_modules/leaflet-toolbar/dist/leaflet.toolbar.js"></script>

  <link rel="stylesheet" href="node_modules/leaflet-toolbar/dist/leaflet.toolbar.css" />
  <link rel="stylesheet" href="node_modules/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.css" />
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!----    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
    <script src="../node_modules/leaflet-toolbar/dist/leaflet.toolbar-src.js"></script>
    <script src="../node_modules/leaflet-draw/dist/leaflet.draw-src.js"></script>--!-->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
  <style>
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="map"> </div>
  <script>
    var center = [-33.8650, 151.2094];

    var map = L.map('map').setView([0, 0], 6);
    drawnItems = new L.FeatureGroup().addTo(map);

    L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=eL1sdTPWF7XeyxpLvpGq', {

      attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'

    }).addTo(map);

    var searchContrl = L.esri.Geocoding.geosearch().addTo(map);

    //adding layergroup to search control
    console.log(L.LayerGroup);
    var results = new L.LayerGroup().addTo(map);

    searchContrl.on('results', function(data) {
      results.clearLayers();
      for (var i = data.results.length - 1; i >= 0; i--) {
        results.addLayer(L.marker(data.results[i].latlong));
      }
    });

    var editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);

    var MyCustomMarker = L.Icon.extend({
      options: {
        shadowUrl: null,
        iconAnchor: new L.Point(12, 12),
        iconSize: new L.Point(24, 24),
        iconUrl: 'link/to/image.png'
      }
    });

    var options = {
      position: 'topright',
      draw: {
        polyline: {
          shapeOptions: {
            color: '#f357a1',
            weight: 10
          }
        },
        polygon: {
          allowIntersection: false, // Restricts shapes to simple polygons
          drawError: {
            color: '#e1e100', // Color the shape will turn when intersects
            message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
          },
          shapeOptions: {
            color: '#bada55'
          }
        },
        circle: false, // Turns off this drawing tool
        rectangle: {
          shapeOptions: {
            clickable: false
          }
        },
        marker: {
          icon: new MyCustomMarker()
        }
      },
      edit: {
        featureGroup: editableLayers, //REQUIRED!!
        remove: false
      }
    };

    var drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);

    map.on(L.Draw.Event.CREATED, function(e) {
      var type = e.layerType,
        layer = e.layer;

      if (type === 'marker') {
        layer.bindPopup('A popup!');
      }

      editableLayers.addLayer(layer);
    });
  </script>
</body>

</html>

顺便说一句，我用了var，因为你的语法，但const并let要好得多。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

标记未使用Mapbox和传单在地图上绘制？

来自分类Dev

Instagram传单在地图上显示照片

来自分类Dev

无法在传单地图上绘制从 geoJson 获得的点

来自分类Dev

在传单地图上绘制几个标记

来自分类Dev

在传单地图上绘制几个标记

来自分类Dev

如何通过从数据库中提取所有坐标来使用传单在地图上放置标记？

来自分类Dev

使用R在传单地图上显示SpatialPolygonsDataFrame

来自分类Dev

如何在传单地图上打印/显示/绘制MultiPolygon GeoJSON

来自分类Dev

无法获得地图上绘制矩形的边界

来自分类Dev

.bindpopup函数无法在地图上显示大量点（传单）

来自分类Dev

捕捉Google Map事件，忽略地图上绘制的任何形状

来自分类Dev

使用MKPolyline在地图上绘制用户路线

来自分类Dev

使用R在GADM地图上绘制城市

来自分类Dev

使用LeafletJS在地图上绘制边界

来自分类Dev

使用MKPolyline在地图上绘制用户路线

来自分类Dev

使用 python 在地图上绘制箭袋图

来自分类Dev

传单-从地图上删除标签

来自分类Dev

尝试使用传单绘制删除/编辑形状时出错-ESRI

来自分类Dev

尝试使用传单绘制删除/编辑形状时出错-ESRI

来自分类Dev

闪亮：如何在同一张传单地图上绘制多个参数？

来自分类Dev

有什么方法可以在传单地图上徒手绘制？

来自分类Dev

在地图上绘制的条

来自分类Dev

在地图上绘制

来自分类Dev

在地图上绘制的条

来自分类Dev

GeoDjango，使用PointField在传单上错误绘制了Google地图的坐标

来自分类Dev

如何使用Shiny中的传单在地图中将scrollWheelZoom设置为false？

来自分类Dev

无法在Google地图上绘制多边形

来自分类Dev

使用turfjs和传单在GeoJson图层中绘制A0到Z .... var

来自分类Dev

iOS Long Press无法在地图上使用

Related 相关文章

  1. 1

    标记未使用Mapbox和传单在地图上绘制？

  2. 2

    Instagram传单在地图上显示照片

  3. 3

    无法在传单地图上绘制从 geoJson 获得的点

  4. 4

    在传单地图上绘制几个标记

  5. 5

    在传单地图上绘制几个标记

  6. 6

    如何通过从数据库中提取所有坐标来使用传单在地图上放置标记？

  7. 7

    使用R在传单地图上显示SpatialPolygonsDataFrame

  8. 8

    如何在传单地图上打印/显示/绘制MultiPolygon GeoJSON

  9. 9

    无法获得地图上绘制矩形的边界

  10. 10

    .bindpopup函数无法在地图上显示大量点（传单）

  11. 11

    捕捉Google Map事件，忽略地图上绘制的任何形状

  12. 12

    使用MKPolyline在地图上绘制用户路线

  13. 13

    使用R在GADM地图上绘制城市

  14. 14

    使用LeafletJS在地图上绘制边界

  15. 15

    使用MKPolyline在地图上绘制用户路线

  16. 16

    使用 python 在地图上绘制箭袋图

  17. 17

    传单-从地图上删除标签

  18. 18

    尝试使用传单绘制删除/编辑形状时出错-ESRI

  19. 19

    尝试使用传单绘制删除/编辑形状时出错-ESRI

  20. 20

    闪亮：如何在同一张传单地图上绘制多个参数？

  21. 21

    有什么方法可以在传单地图上徒手绘制？

  22. 22

    在地图上绘制的条

  23. 23

    在地图上绘制

  24. 24

    在地图上绘制的条

  25. 25

    GeoDjango，使用PointField在传单上错误绘制了Google地图的坐标

  26. 26

    如何使用Shiny中的传单在地图中将scrollWheelZoom设置为false？

  27. 27

    无法在Google地图上绘制多边形

  28. 28

    使用turfjs和传单在GeoJson图层中绘制A0到Z .... var

  29. 29

    iOS Long Press无法在地图上使用

热门标签

归档