javascript - 在传单中重新绘制一个矩形

Question

如果我有一张 map 并画一个像这样的矩形:map.setView([14.378300, 24.904200], 5);

var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 17,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
tileLayer.addTo(map);


var rectangle = L.rectangle([  [21.616579,  29.487305], [7.798079, 20.522461]]);
map.addLayer(rectangle);

但在另一个按钮上单击我想以另一种形式重新定义(重新绘制)矩形参数。像这样:

$( ".select" ).click(function() {
rectangle =  new L.rectangle([  [17.853290, 34.980469], [10.876465, 14.853516]]);
map.addLayer(rectangle);
});

这可能吗？请有人帮助我:(

MY JSFIDDLE is here

编辑:

当我定义两个矩形时，我尝试这样做，并为第二个矩形定义了两个 on 事件，但我收到此错误 Uncaught TypeError:fragment2.on is not a function你能帮我吗？

var rectangle, rectangle2;
rectangle =L.rectangle([  [21.616579,  29.487305], [7.798079, 20.522461]]);
map.addLayer(rectangle);

rectangle.editing.enable();

// Every time we move the selected area, refresh data about the selected area.
rectangle.on('edit', function() { 
    onRectangleChange(this);
});
rectangle2.on('edit', function() { 
    onRectangleChange(this);
});

$( ".select" ).click(function() {
    rectangle.editing.disable();    
    map.removeLayer(rectangle);
    rectangle2 =  new L.rectangle([  [17.853290, 34.980469], [10.876465, 14.853516]]);
    map.addLayer(rectangle2);
    rectangle2.editing.enable();
});

Answer 1

您的代码正在运行，只需插入 jquery https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

并在旋转之前删除图层map.removeLayer(rectangle);

$( ".select" ).click(function() {
map.removeLayer(rectangle);
rectangle =  new L.rectangle([  [17.853290, 34.980469], [10.876465, 14.853516]]);
map.addLayer(rectangle);
});

http://jsfiddle.net/y1nb7sow/2/