Skip to content

Commit 51689d2

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
优化编辑示例交互
1 parent 0a0b53c commit 51689d2

File tree

3 files changed

+210
-41
lines changed

3 files changed

+210
-41
lines changed

‎examples/mapboxgl/drawAndEditFeatures.html‎

Lines changed: 72 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,18 @@
9191
display: none;
9292
}
9393

94+
.delete-modal {
95+
position: absolute;
96+
top: -70px;
97+
right: 0px;
98+
width: 260px;
99+
background: #fff;
100+
border-radius: 10px;
101+
padding: 10px;
102+
display: none;
103+
border: 1px solid #a39a9a;
104+
}
105+
94106
.select-element {
95107
width: 100%;
96108
height: 26px;
@@ -178,6 +190,23 @@
178190
.button-group, .info-panel, .edit-tips {
179191
box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.3);
180192
}
193+
.add-tips {
194+
display: none;
195+
color: red;
196+
margin-right: 16px;
197+
}
198+
.message {
199+
width: 300px;
200+
height: 50px;
201+
position: absolute;
202+
top: 15px;
203+
font-size: 16px;
204+
left: 50%;
205+
padding-top: 15px;
206+
display: none;
207+
margin-left: -150px;
208+
background: #fff;
209+
}
181210
</style>
182211
</head>
183212
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
@@ -194,9 +223,13 @@ <h5>Y</h5>
194223
<div class="video-modal">
195224
<button class="video-modal-close">Close</button>
196225
<video controls width="720">
197-
<source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
226+
<source src="" type="video/mp4">
198227
</video>
199228
</div>
229+
<div class="message">
230+
<span class="glyphicon glyphicon-exclamation-sign" style="color: #ec5812;"></span>
231+
<span>有未完成的更改，请先保存或取消更改</span>
232+
</div>
200233
<div class="edit-panel">
201234
<div class="button-group">
202235
<button
@@ -241,6 +274,7 @@ <h6><span class="line-element"></span>属性信息</h6>
241274
<div class="add-attribute-info">
242275
</div>
243276
<div class="info-bottom">
277+
<p class="add-tips">请先保存或取消更改</p>
244278
<button class="btn btn-default btn-group-xs cancel-add">取消</button>
245279
<button class="btn btn-primary btn-group-xs addSave">保存</button>
246280
</div>
@@ -255,6 +289,7 @@ <h6>属性信息</h6>
255289
<div class="edit-attribute-info">
256290
</div>
257291
<div class="info-bottom">
292+
<p class="add-tips">请先保存或取消更改</p>
258293
<button class="btn btn-default btn-group-xs cancel-edit">取消</button>
259294
<button disabled class="btn btn-primary btn-group-xs editSave">保存</button>
260295
</div>
@@ -269,6 +304,13 @@ <h5>待删除要素:</h5>
269304
</div>
270305
</div>
271306
<div class="info-bottom">
307+
<div class="delete-modal">
308+
<p>删除后要素将无法恢复，是否确认删除？</p>
309+
<div class="btns">
310+
<button class="final-delete-cancel btn btn-default btn-group-xs">取消</button>
311+
<button class="final-delete btn btn-danger btn-group-xs">删除</button>
312+
</div>
313+
</div>
272314
<button class="btn btn-default btn-group-xs cancel-delete">取消</button>
273315
<button class="btn btn-danger btn-group-xs delete">删除</button>
274316
</div>
@@ -316,7 +358,7 @@ <h5>待删除要素:</h5>
316358
}
317359
var container = document.getElementById('popup');
318360
var content = document.getElementById('popup-content');
319-
361+
var isChanged = false;
320362
map = new mapboxgl.Map({
321363
container: 'map',
322364
style: {
@@ -512,6 +554,7 @@ <h5>待删除要素:</h5>
512554
feature.id = datasetInfoList[currentDataset].id;
513555
currentFeature.data = feature;
514556
document.querySelector('.add-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
557+
isChanged = true;
515558
}
516559
});
517560
var datasetService = new mapboxgl.supermap.DatasetService(dataUrl)
@@ -702,6 +745,11 @@ <h5>待删除要素:</h5>
702745
// 切换状态
703746
document.querySelector('.button-group').addEventListener('click', function(e) {
704747
var className = e.target.className;
748+
if (isChanged) {
749+
document.querySelector('.message').style.display = 'block';
750+
document.querySelector('.add-tips').style.display = 'inline-block';
751+
return;
752+
}
705753
switchPanel(className);
706754
});
707755

@@ -729,6 +777,9 @@ <h5>待删除要素:</h5>
729777
if (currentShowPanel) {
730778
document.querySelector('.' + currentShowPanel).style.display = 'none';
731779
}
780+
document.querySelector('.message').style.display = 'none';
781+
document.querySelector('.add-tips').style.display = 'none';
782+
isChanged = false;
732783
}
733784
});
734785

@@ -742,6 +793,9 @@ <h5>待删除要素:</h5>
742793
if (currentShowPanel) {
743794
document.querySelector('.' + currentShowPanel).style.display = 'none';
744795
}
796+
document.querySelector('.message').style.display = 'none';
797+
document.querySelector('.add-tips').style.display = 'none';
798+
isChanged = false;
745799
}
746800
});
747801

@@ -799,15 +853,30 @@ <h5>待删除要素:</h5>
799853
var saveBtn = document.querySelector('.addSave');
800854
var editBtn = document.querySelector('.editSave');
801855
saveBtn.addEventListener('click', function () {
856+
document.querySelector('.message').style.display = 'none';
857+
document.querySelector('.add-tips').style.display = 'none';
858+
isChanged = false;
802859
save('add');
803860
});
804861
editBtn.addEventListener('click', function () {
862+
document.querySelector('.message').style.display = 'none';
863+
document.querySelector('.add-tips').style.display = 'none';
864+
isChanged = false;
805865
save('edit');
806866
});
807867
var deleteBtn = document.querySelector('.delete');
808868
deleteBtn.addEventListener('click', function () {
869+
document.querySelector('.delete-modal').style.display = 'block';
870+
});
871+
var deleteModalBtn = document.querySelector('.final-delete');
872+
deleteModalBtn.addEventListener('click', function () {
873+
document.querySelector('.delete-modal').style.display = 'none';
809874
deleteFeature();
810875
});
876+
var deleteBtnCancel = document.querySelector('.final-delete-cancel');
877+
deleteBtnCancel.addEventListener('click', function () {
878+
document.querySelector('.delete-modal').style.display = 'none';
879+
});
811880
function save(type) {
812881
var properties = {};
813882
var attributeElement = document.querySelector('.' + type + '-attribute-info');
@@ -915,6 +984,7 @@ <h5>待删除要素:</h5>
915984
map.on('click', function (e) {
916985
var res = map.queryRenderedFeatures(e.point);
917986
if (status === 'EDIT') {
987+
isChanged = true;
918988
if (res[0] && !['mapbox-gl-draw-cold', 'mapbox-gl-draw-hot'].indexOf(res[0].source) > -1) {
919989
var type = res[0].type;
920990
var geometry = res[0].geometry;
@@ -984,17 +1054,6 @@ <h5>待删除要素:</h5>
9841054
renderEditAttribute('edit', currentFeature.data.properties);
9851055
}
9861056
});
987-
map.on('draw.update', function (e) {
988-
var feature = e.features[0];
989-
if (status === 'EDIT') {
990-
document.querySelector('.edit-tips').style.display = 'none';
991-
currentFeature.dataset = feature.properties.datasetName;
992-
currentFeature.data = feature;
993-
document.querySelector('.edit-feature-info').style.display = 'block';
994-
document.querySelector('.edit-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
995-
renderEditAttribute('edit', currentFeature.data.properties);
996-
}
997-
});
9981057
map.on('draw.selectionchange', function() {
9991058
updateChanged = true;
10001059
document.querySelector('.editSave').disabled = false;

‎examples/maplibregl/drawAndEditFeatures.html‎

Lines changed: 73 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,18 @@
9191
display: none;
9292
}
9393

94+
.delete-modal {
95+
position: absolute;
96+
top: -70px;
97+
right: 0px;
98+
width: 260px;
99+
background: #fff;
100+
border-radius: 10px;
101+
padding: 10px;
102+
display: none;
103+
border: 1px solid #a39a9a;
104+
}
105+
94106
.select-element {
95107
width: 100%;
96108
height: 26px;
@@ -178,6 +190,24 @@
178190
.button-group, .info-panel, .edit-tips {
179191
box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.3);
180192
}
193+
194+
.add-tips {
195+
display: none;
196+
color: red;
197+
margin-right: 16px;
198+
}
199+
.message {
200+
width: 300px;
201+
height: 50px;
202+
position: absolute;
203+
top: 15px;
204+
font-size: 16px;
205+
left: 50%;
206+
padding-top: 15px;
207+
display: none;
208+
margin-left: -150px;
209+
background: #fff;
210+
}
181211
</style>
182212
</head>
183213
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
@@ -194,9 +224,13 @@ <h5>Y</h5>
194224
<div class="video-modal">
195225
<button class="video-modal-close">Close</button>
196226
<video controls width="720">
197-
<source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
227+
<source src="" type="video/mp4">
198228
</video>
199229
</div>
230+
<div class="message">
231+
<span class="glyphicon glyphicon-exclamation-sign" style="color: #ec5812;"></span>
232+
<span>有未完成的更改，请先保存或取消更改</span>
233+
</div>
200234
<div class="edit-panel">
201235
<div class="button-group">
202236
<button
@@ -241,6 +275,7 @@ <h6><span class="line-element"></span>属性信息</h6>
241275
<div class="add-attribute-info">
242276
</div>
243277
<div class="info-bottom">
278+
<p class="add-tips">请先保存或取消更改</p>
244279
<button class="btn btn-default btn-group-xs cancel-add">取消</button>
245280
<button class="btn btn-primary btn-group-xs addSave">保存</button>
246281
</div>
@@ -255,6 +290,7 @@ <h6>属性信息</h6>
255290
<div class="edit-attribute-info">
256291
</div>
257292
<div class="info-bottom">
293+
<p class="add-tips">请先保存或取消更改</p>
258294
<button class="btn btn-default btn-group-xs cancel-edit">取消</button>
259295
<button disabled class="btn btn-primary btn-group-xs editSave">保存</button>
260296
</div>
@@ -269,6 +305,13 @@ <h5>待删除要素:</h5>
269305
</div>
270306
</div>
271307
<div class="info-bottom">
308+
<div class="delete-modal">
309+
<p>删除后要素将无法恢复，是否确认删除？</p>
310+
<div class="btns">
311+
<button class="final-delete-cancel btn btn-default btn-group-xs">取消</button>
312+
<button class="final-delete btn btn-danger btn-group-xs">删除</button>
313+
</div>
314+
</div>
272315
<button class="btn btn-default btn-group-xs cancel-delete">取消</button>
273316
<button class="btn btn-danger btn-group-xs delete">删除</button>
274317
</div>
@@ -316,7 +359,7 @@ <h5>待删除要素:</h5>
316359
}
317360
var container = document.getElementById('popup');
318361
var content = document.getElementById('popup-content');
319-
362+
var isChanged = false;
320363
map = new maplibregl.Map({
321364
container: 'map',
322365
style: {
@@ -512,6 +555,7 @@ <h5>待删除要素:</h5>
512555
feature.id = datasetInfoList[currentDataset].id;
513556
currentFeature.data = feature;
514557
document.querySelector('.add-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
558+
isChanged = true;
515559
}
516560
});
517561
var datasetService = new maplibregl.supermap.DatasetService(dataUrl)
@@ -702,6 +746,11 @@ <h5>待删除要素:</h5>
702746
// 切换状态
703747
document.querySelector('.button-group').addEventListener('click', function(e) {
704748
var className = e.target.className;
749+
if (isChanged) {
750+
document.querySelector('.message').style.display = 'block';
751+
document.querySelector('.add-tips').style.display = 'inline-block';
752+
return;
753+
}
705754
switchPanel(className);
706755
});
707756

@@ -729,6 +778,9 @@ <h5>待删除要素:</h5>
729778
if (currentShowPanel) {
730779
document.querySelector('.' + currentShowPanel).style.display = 'none';
731780
}
781+
document.querySelector('.message').style.display = 'none';
782+
document.querySelector('.add-tips').style.display = 'none';
783+
isChanged = false;
732784
}
733785
});
734786

@@ -742,6 +794,9 @@ <h5>待删除要素:</h5>
742794
if (currentShowPanel) {
743795
document.querySelector('.' + currentShowPanel).style.display = 'none';
744796
}
797+
document.querySelector('.message').style.display = 'none';
798+
document.querySelector('.add-tips').style.display = 'none';
799+
isChanged = false;
745800
}
746801
});
747802

@@ -799,15 +854,30 @@ <h5>待删除要素:</h5>
799854
var saveBtn = document.querySelector('.addSave');
800855
var editBtn = document.querySelector('.editSave');
801856
saveBtn.addEventListener('click', function () {
857+
document.querySelector('.message').style.display = 'none';
858+
document.querySelector('.add-tips').style.display = 'none';
859+
isChanged = false;
802860
save('add');
803861
});
804862
editBtn.addEventListener('click', function () {
863+
document.querySelector('.message').style.display = 'none';
864+
document.querySelector('.add-tips').style.display = 'none';
865+
isChanged = false;
805866
save('edit');
806867
});
807868
var deleteBtn = document.querySelector('.delete');
808869
deleteBtn.addEventListener('click', function () {
870+
document.querySelector('.delete-modal').style.display = 'block';
871+
});
872+
var deleteModalBtn = document.querySelector('.final-delete');
873+
deleteModalBtn.addEventListener('click', function () {
874+
document.querySelector('.delete-modal').style.display = 'none';
809875
deleteFeature();
810876
});
877+
var deleteBtnCancel = document.querySelector('.final-delete-cancel');
878+
deleteBtnCancel.addEventListener('click', function () {
879+
document.querySelector('.delete-modal').style.display = 'none';
880+
});
811881
function save(type) {
812882
var properties = {};
813883
var attributeElement = document.querySelector('.' + type + '-attribute-info');
@@ -915,6 +985,7 @@ <h5>待删除要素:</h5>
915985
map.on('click', function (e) {
916986
var res = map.queryRenderedFeatures(e.point);
917987
if (status === 'EDIT') {
988+
isChanged = true;
918989
if (res[0] && !['mapbox-gl-draw-cold', 'mapbox-gl-draw-hot'].indexOf(res[0].source) > -1) {
919990
var type = res[0].type;
920991
var geometry = res[0].geometry;
@@ -984,17 +1055,6 @@ <h5>待删除要素:</h5>
9841055
renderEditAttribute('edit', currentFeature.data.properties);
9851056
}
9861057
});
987-
map.on('draw.update', function (e) {
988-
var feature = e.features[0];
989-
if (status === 'EDIT') {
990-
document.querySelector('.edit-tips').style.display = 'none';
991-
currentFeature.dataset = feature.properties.datasetName;
992-
currentFeature.data = feature;
993-
document.querySelector('.edit-feature-info').style.display = 'block';
994-
document.querySelector('.edit-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
995-
renderEditAttribute('edit', currentFeature.data.properties);
996-
}
997-
});
9981058
map.on('draw.selectionchange', function() {
9991059
updateChanged = true;
10001060
document.querySelector('.editSave').disabled = false;

0 commit comments

Comments
 (0)