本文介紹了(已關閉)Leaflet.js:如何僅在我選擇的特定對象上編輯幾何圖形?的處理方法,對大家解決問題具有一定的參考價值,需要的朋友們下面隨著小編來一起學習吧!
問題描述
我很興奮,和Leaflet.JS在gis地圖上玩得很開心。我是新手。我也非常感謝@Grzegorz T.的兄弟,感謝他們的好意,并幫助我介紹Leaflet.JS。
現在,我計劃僅在我選擇的特定對象上編輯幾何圖形。我已經在想如何流動和結果,但過程?(哈哈哈..)。我也已經知道Leaflet.js上的DrawItems函數,但我將使用。
在我開始之前讓我先描述一下簡單的流程…
A.我剛剛使用了jsfiddle1@Grzegorz T.
B.我添加了DrawItems
...
{ 'DrawLayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
...
//Add Draw Control//
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems,
poly: {
allowIntersection: false
}
},
draw: {
polygon: {
allowIntersection: false,
showArea: true
}
}
}));
//Draw Objects//
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
drawnItems.addLayer(layer);
});
//Get Leaflet Object ID
drawnItems.on('click', function(event) {
console.log("from drawnItems: " + event.layer._leaflet_id);
});
//Get Geometry from Layer & ID
//Edit Only This Objects
//Save This Editing Back to Original Layer & ID
我在這部分看到的問題是:
1.我不知道如何將我選擇的原始幾何圖形從Layer復制到DrawLayer。
2.僅隱藏原始層上的此幾何圖形(Id),直到編輯結束或取消。(可能將不透明度更改為不可見)
3.完成編輯并保存時,如何保存回原始層并將結果顯示到地圖。
我希望誰是鐵桿,誰已經在Leaflet.JS上找到了簡單的方法,JS可以幫助我完成這項骯臟的工作…
更新3/3/2022
我找到了如何重新設置我選擇的對象(幾何體)的樣式,這是以下內容的封面:
2.僅隱藏原始層上的此幾何圖形(Id),直到編輯結束或取消。(可能將不透明度更改為不可見)
代碼如下:-
onEachFeature: function (feature, layer) {
//restyle the geom when display
layer.setStyle({
fillColor: "white",
weight: 2,
color: "#eb4034",
fillOpacity: 0.7,
});
layer.on("mouseover", function (e) {
// style
this.setStyle({
fillColor: "#eb4034",
weight: 2,
color: "#eb4034",
fillOpacity: 0.7,
});
});
layer.on("mouseout", function () {
// style
this.setStyle({
fillColor: "#3388ff",
weight: 2,
color: "#3388ff",
fillOpacity: 0.1,
});
});
layer.on("click", function () {
this.setStyle({
fillColor: "transparent",
weight: 0,
color: "transparent",
fillOpacity: 0,
});
});
},
2022年4月3日更新
有人可以幫助我如何使用編輯模式以編程方式將幾何圖形傳遞給圖形項嗎?假設我有如下所示的幾何圖形:-
……
{&Q;類型:&Q;要素&Q;,";geometry";:{";type";:";Polygon";,&Q;坐標&Q;:[[16.3716,54.4414],[16.3946,54.4477],[16.4315,54.487],[16.4797,54.5164],[16.4968,54.5231],[16.5299,54.5407],[16.6145,54.5598],[16.6887,54.5696],[16.6991,54.5692],[16.7126,54.5542],[16.7392,54.5384],[16.7481,54.5276],[16.7392,54.5177],[16.7566,54.4946],[16.764,54.4861],[16.7933,54.4874],[16.8275,54.4648],[16.8211,54.4563],……
.
,&Q;屬性:{&Q;ID&Q;:4,";nazwa";:";zachodniopomorskie";},&Q;ID&Q;:3}
如何以編程方式將此多邊形(幾何圖形)傳遞到dranItems層?
請幫助我,并提前感謝您閱讀此消息。
推薦答案
掙扎了幾天后,我終于找到了完成任務的解決方案。它不是很漂亮,但至少我填得還可以,我需要的都在那里。
我使用
layer.on("click", function(e) {
從原始層獲取幾何體和id。我通過使用
傳遞給dranItems的原始幾何圖形
geojsonLayer = L.geoJson(oriGeom);
geojsonLayer.getLayers()[0].addTo(drawnItems);
在圖紙層上拉回以進行編輯。當我將原始幾何體上的樣式調整為不可見時。可編輯的幾何體只能在用戶認為這是他/她現在正在編輯的原始幾何體的舞臺上看到。
onEachFeature: function (feature, layer) {
//restyle the geom when display
layer.setStyle({
fillColor: "white",
weight: 2,
color: "#eb4034",
fillOpacity: 0.7,
});
layer.on("mouseover", function (e) {
// style
this.setStyle({
fillColor: "#eb4034",
weight: 2,
color: "#eb4034",
fillOpacity: 0.7,
});
});
layer.on("mouseout", function () {
// style
this.setStyle({
fillColor: "#3388ff",
weight: 2,
color: "#3388ff",
fillOpacity: 0.1,
});
});
layer.on("click", function () {
this.setStyle({
fillColor: "transparent",
weight: 0,
color: "transparent",
fillOpacity: 0,
});
完成編輯后,我使用Python類按搜索ID保存回原始層,并僅將原始坐標替換為新坐標(EditGeom)。:)
然后我用這個技巧刪除了dranItems層中的所有對象
document.querySelector(".leaflet-draw-edit-remove").click(); //fake click Delete
document.querySelector("ul li:last-child a").click(); //fake click Save All
僅此而已。
這篇關于(已關閉)Leaflet.js:如何僅在我選擇的特定對象上編輯幾何圖形?的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,