2016-12-07 62 views
0

我試圖使用從這裏http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw無法dispaly使用單張畫插件

畫插件在地圖上的多邊形,並用它如下圖所示

<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 

回答

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

+0

源可以ü請指向一些例子,我可以得到的座標繪製的多邊形和其他操作 –

+0

繪製插件正在創建這裏記錄的圖層:http://leafletjs.com/reference.html。所以當Draw.Event.CREATED被調用時,你可以從圖層中獲取所有的值。例如,如果您繪製一個矩形,它將是http://leafletjs.com/reference.html#rectangle – YaFred