无法使用Leaflet绘图插件在地图上显示多边形

时间:2016-12-07 07:43:39

标签: leaflet display polygons leaflet.draw

我正在尝试使用此处http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw

的绘图插件

并尝试在本地使用它,如下所示

<html>
<head>

    <title>A Leaflet map!</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
    <style>
        #map{ height: 100% }
    </style>
</head>
<body>

<div id="map"></div>

<script>

    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

   var  drawControl = new L.Control.Draw({
        draw : {
            position : 'topleft',
            polygon : true,
            polyline : false,
            rectangle : true,
            circle : false

        },
        edit : false
    });

    map.addControl(drawControl);

</script>
</body>
</html>

我正在获取绘图控件和贴图,但绘图完成后未显示多边形绘图不确定如何操作

请帮助我们在地图上绘制多边形,如本演示所示

http://leaflet.github.io/Leaflet.draw/docs/examples/full.html

1 个答案:

答案 0 :(得分:0)

您必须创建要素组并在创建图层时添加图层...

   var drawnItems = L.featureGroup().addTo(map);

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

        drawnItems.addLayer(layer);
    });

查看http://leaflet.github.io/Leaflet.draw/docs/examples/full.html

的来源