Skip to content

Commit

Permalink
优化编辑示例交互
Browse files Browse the repository at this point in the history
  • Loading branch information
@xilanhuaweidapao
xilanhuaweidapao committed Jan 18, 2024
1 parent d3e5dad commit fac0f89
Show file tree
Hide file tree
Showing 3 changed files with 210 additions and 41 deletions.
85 changes: 72 additions & 13 deletions examples/mapboxgl/drawAndEditFeatures.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,18 @@
display: none;
}

.delete-modal {
position: absolute;
top: -70px;
right: 0px;
width: 260px;
background: #fff;
border-radius: 10px;
padding: 10px;
display: none;
border: 1px solid #a39a9a;
}

.select-element {
width: 100%;
height: 26px;
Expand Down Expand Up @@ -178,6 +190,23 @@
.button-group, .info-panel, .edit-tips {
box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.3);
}
.add-tips {
display: none;
color: red;
margin-right: 16px;
}
.message {
width: 300px;
height: 50px;
position: absolute;
top: 15px;
font-size: 16px;
left: 50%;
padding-top: 15px;
display: none;
margin-left: -150px;
background: #fff;
}
</style>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
Expand All @@ -194,9 +223,13 @@ <h5>Y</h5>
<div class="video-modal">
<button class="video-modal-close">Close</button>
<video controls width="720">
<source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
<source src="" type="video/mp4">
</video>
</div>
<div class="message">
<span class="glyphicon glyphicon-exclamation-sign" style="color: #ec5812;"></span>
<span>有未完成的更改，请先保存或取消更改</span>
</div>
<div class="edit-panel">
<div class="button-group">
<button
Expand Down Expand Up @@ -241,6 +274,7 @@ <h6><span class="line-element"></span>属性信息</h6>
<div class="add-attribute-info">
</div>
<div class="info-bottom">
<p class="add-tips">请先保存或取消更改</p>
<button class="btn btn-default btn-group-xs cancel-add">取消</button>
<button class="btn btn-primary btn-group-xs addSave">保存</button>
</div>
Expand All @@ -255,6 +289,7 @@ <h6>属性信息</h6>
<div class="edit-attribute-info">
</div>
<div class="info-bottom">
<p class="add-tips">请先保存或取消更改</p>
<button class="btn btn-default btn-group-xs cancel-edit">取消</button>
<button disabled class="btn btn-primary btn-group-xs editSave">保存</button>
</div>
Expand All @@ -269,6 +304,13 @@ <h5>待删除要素:</h5>
</div>
</div>
<div class="info-bottom">
<div class="delete-modal">
<p>删除后要素将无法恢复，是否确认删除？</p>
<div class="btns">
<button class="final-delete-cancel btn btn-default btn-group-xs">取消</button>
<button class="final-delete btn btn-danger btn-group-xs">删除</button>
</div>
</div>
<button class="btn btn-default btn-group-xs cancel-delete">取消</button>
<button class="btn btn-danger btn-group-xs delete">删除</button>
</div>
Expand Down Expand Up @@ -316,7 +358,7 @@ <h5>待删除要素:</h5>
}
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');

var isChanged = false;
map = new mapboxgl.Map({
container: 'map',
style: {
Expand Down Expand Up @@ -512,6 +554,7 @@ <h5>待删除要素:</h5>
feature.id = datasetInfoList[currentDataset].id;
currentFeature.data = feature;
document.querySelector('.add-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
isChanged = true;
}
});
var datasetService = new mapboxgl.supermap.DatasetService(dataUrl)
Expand Down Expand Up @@ -702,6 +745,11 @@ <h5>待删除要素:</h5>
// 切换状态
document.querySelector('.button-group').addEventListener('click', function(e) {
var className = e.target.className;
if (isChanged) {
document.querySelector('.message').style.display = 'block';
document.querySelector('.add-tips').style.display = 'inline-block';
return;
}
switchPanel(className);
});

Expand Down Expand Up @@ -729,6 +777,9 @@ <h5>待删除要素:</h5>
if (currentShowPanel) {
document.querySelector('.' + currentShowPanel).style.display = 'none';
}
document.querySelector('.message').style.display = 'none';
document.querySelector('.add-tips').style.display = 'none';
isChanged = false;
}
});

Expand All @@ -742,6 +793,9 @@ <h5>待删除要素:</h5>
if (currentShowPanel) {
document.querySelector('.' + currentShowPanel).style.display = 'none';
}
document.querySelector('.message').style.display = 'none';
document.querySelector('.add-tips').style.display = 'none';
isChanged = false;
}
});

Expand Down Expand Up @@ -799,15 +853,30 @@ <h5>待删除要素:</h5>
var saveBtn = document.querySelector('.addSave');
var editBtn = document.querySelector('.editSave');
saveBtn.addEventListener('click', function () {
document.querySelector('.message').style.display = 'none';
document.querySelector('.add-tips').style.display = 'none';
isChanged = false;
save('add');
});
editBtn.addEventListener('click', function () {
document.querySelector('.message').style.display = 'none';
document.querySelector('.add-tips').style.display = 'none';
isChanged = false;
save('edit');
});
var deleteBtn = document.querySelector('.delete');
deleteBtn.addEventListener('click', function () {
document.querySelector('.delete-modal').style.display = 'block';
});
var deleteModalBtn = document.querySelector('.final-delete');
deleteModalBtn.addEventListener('click', function () {
document.querySelector('.delete-modal').style.display = 'none';
deleteFeature();
});
var deleteBtnCancel = document.querySelector('.final-delete-cancel');
deleteBtnCancel.addEventListener('click', function () {
document.querySelector('.delete-modal').style.display = 'none';
});
function save(type) {
var properties = {};
var attributeElement = document.querySelector('.' + type + '-attribute-info');
Expand Down Expand Up @@ -915,6 +984,7 @@ <h5>待删除要素:</h5>
map.on('click', function (e) {
var res = map.queryRenderedFeatures(e.point);
if (status === 'EDIT') {
isChanged = true;
if (res[0] && !['mapbox-gl-draw-cold', 'mapbox-gl-draw-hot'].indexOf(res[0].source) > -1) {
var type = res[0].type;
var geometry = res[0].geometry;
Expand Down Expand Up @@ -984,17 +1054,6 @@ <h5>待删除要素:</h5>
renderEditAttribute('edit', currentFeature.data.properties);
}
});
map.on('draw.update', function (e) {
var feature = e.features[0];
if (status === 'EDIT') {
document.querySelector('.edit-tips').style.display = 'none';
currentFeature.dataset = feature.properties.datasetName;
currentFeature.data = feature;
document.querySelector('.edit-feature-info').style.display = 'block';
document.querySelector('.edit-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
renderEditAttribute('edit', currentFeature.data.properties);
}
});
map.on('draw.selectionchange', function() {
updateChanged = true;
document.querySelector('.editSave').disabled = false;
Expand Down
86 changes: 73 additions & 13 deletions examples/maplibregl/drawAndEditFeatures.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,18 @@
display: none;
}

.delete-modal {
position: absolute;
top: -70px;
right: 0px;
width: 260px;
background: #fff;
border-radius: 10px;
padding: 10px;
display: none;
border: 1px solid #a39a9a;
}

.select-element {
width: 100%;
height: 26px;
Expand Down Expand Up @@ -178,6 +190,24 @@
.button-group, .info-panel, .edit-tips {
box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.3);
}

.add-tips {
display: none;
color: red;
margin-right: 16px;
}
.message {
width: 300px;
height: 50px;
position: absolute;
top: 15px;
font-size: 16px;
left: 50%;
padding-top: 15px;
display: none;
margin-left: -150px;
background: #fff;
}
</style>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
Expand All @@ -194,9 +224,13 @@ <h5>Y</h5>
<div class="video-modal">
<button class="video-modal-close">Close</button>
<video controls width="720">
<source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
<source src="" type="video/mp4">
</video>
</div>
<div class="message">
<span class="glyphicon glyphicon-exclamation-sign" style="color: #ec5812;"></span>
<span>有未完成的更改，请先保存或取消更改</span>
</div>
<div class="edit-panel">
<div class="button-group">
<button
Expand Down Expand Up @@ -241,6 +275,7 @@ <h6><span class="line-element"></span>属性信息</h6>
<div class="add-attribute-info">
</div>
<div class="info-bottom">
<p class="add-tips">请先保存或取消更改</p>
<button class="btn btn-default btn-group-xs cancel-add">取消</button>
<button class="btn btn-primary btn-group-xs addSave">保存</button>
</div>
Expand All @@ -255,6 +290,7 @@ <h6>属性信息</h6>
<div class="edit-attribute-info">
</div>
<div class="info-bottom">
<p class="add-tips">请先保存或取消更改</p>
<button class="btn btn-default btn-group-xs cancel-edit">取消</button>
<button disabled class="btn btn-primary btn-group-xs editSave">保存</button>
</div>
Expand All @@ -269,6 +305,13 @@ <h5>待删除要素:</h5>
</div>
</div>
<div class="info-bottom">
<div class="delete-modal">
<p>删除后要素将无法恢复，是否确认删除？</p>
<div class="btns">
<button class="final-delete-cancel btn btn-default btn-group-xs">取消</button>
<button class="final-delete btn btn-danger btn-group-xs">删除</button>
</div>
</div>
<button class="btn btn-default btn-group-xs cancel-delete">取消</button>
<button class="btn btn-danger btn-group-xs delete">删除</button>
</div>
Expand Down Expand Up @@ -316,7 +359,7 @@ <h5>待删除要素:</h5>
}
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');

var isChanged = false;
map = new maplibregl.Map({
container: 'map',
style: {
Expand Down Expand Up @@ -512,6 +555,7 @@ <h5>待删除要素:</h5>
feature.id = datasetInfoList[currentDataset].id;
currentFeature.data = feature;
document.querySelector('.add-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
isChanged = true;
}
});
var datasetService = new maplibregl.supermap.DatasetService(dataUrl)
Expand Down Expand Up @@ -702,6 +746,11 @@ <h5>待删除要素:</h5>
// 切换状态
document.querySelector('.button-group').addEventListener('click', function(e) {
var className = e.target.className;
if (isChanged) {
document.querySelector('.message').style.display = 'block';
document.querySelector('.add-tips').style.display = 'inline-block';
return;
}
switchPanel(className);
});

Expand Down Expand Up @@ -729,6 +778,9 @@ <h5>待删除要素:</h5>
if (currentShowPanel) {
document.querySelector('.' + currentShowPanel).style.display = 'none';
}
document.querySelector('.message').style.display = 'none';
document.querySelector('.add-tips').style.display = 'none';
isChanged = false;
}
});

Expand All @@ -742,6 +794,9 @@ <h5>待删除要素:</h5>
if (currentShowPanel) {
document.querySelector('.' + currentShowPanel).style.display = 'none';
}
document.querySelector('.message').style.display = 'none';
document.querySelector('.add-tips').style.display = 'none';
isChanged = false;
}
});

Expand Down Expand Up @@ -799,15 +854,30 @@ <h5>待删除要素:</h5>
var saveBtn = document.querySelector('.addSave');
var editBtn = document.querySelector('.editSave');
saveBtn.addEventListener('click', function () {
document.querySelector('.message').style.display = 'none';
document.querySelector('.add-tips').style.display = 'none';
isChanged = false;
save('add');
});
editBtn.addEventListener('click', function () {
document.querySelector('.message').style.display = 'none';
document.querySelector('.add-tips').style.display = 'none';
isChanged = false;
save('edit');
});
var deleteBtn = document.querySelector('.delete');
deleteBtn.addEventListener('click', function () {
document.querySelector('.delete-modal').style.display = 'block';
});
var deleteModalBtn = document.querySelector('.final-delete');
deleteModalBtn.addEventListener('click', function () {
document.querySelector('.delete-modal').style.display = 'none';
deleteFeature();
});
var deleteBtnCancel = document.querySelector('.final-delete-cancel');
deleteBtnCancel.addEventListener('click', function () {
document.querySelector('.delete-modal').style.display = 'none';
});
function save(type) {
var properties = {};
var attributeElement = document.querySelector('.' + type + '-attribute-info');
Expand Down Expand Up @@ -915,6 +985,7 @@ <h5>待删除要素:</h5>
map.on('click', function (e) {
var res = map.queryRenderedFeatures(e.point);
if (status === 'EDIT') {
isChanged = true;
if (res[0] && !['mapbox-gl-draw-cold', 'mapbox-gl-draw-hot'].indexOf(res[0].source) > -1) {
var type = res[0].type;
var geometry = res[0].geometry;
Expand Down Expand Up @@ -984,17 +1055,6 @@ <h5>待删除要素:</h5>
renderEditAttribute('edit', currentFeature.data.properties);
}
});
map.on('draw.update', function (e) {
var feature = e.features[0];
if (status === 'EDIT') {
document.querySelector('.edit-tips').style.display = 'none';
currentFeature.dataset = feature.properties.datasetName;
currentFeature.data = feature;
document.querySelector('.edit-feature-info').style.display = 'block';
document.querySelector('.edit-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
renderEditAttribute('edit', currentFeature.data.properties);
}
});
map.on('draw.selectionchange', function() {
updateChanged = true;
document.querySelector('.editSave').disabled = false;
Expand Down
Loading

0 comments on commit fac0f89

Please sign in to comment.