Skip to content

Commit 75c4610

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
优化编辑示例
1 parent 2f62eee commit 75c4610

File tree

3 files changed

+350
-192
lines changed

3 files changed

+350
-192
lines changed

‎examples/mapboxgl/drawAndEditFeatures.html‎

Lines changed: 72 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta charset="UTF-8" />
88
<title data-i18n="resources.title_editFeatures"></title>
99
<script type="text/javascript" include="draw" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
10-
<script src="https://unpkg.com/mapbox-gl-draw-snap-mode"></script>
10+
<script src="../../dist/mapboxgl/mapbox-gl-draw-snap-mode.js"></script>
1111
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js" integrity="sha512-EC3CQ+2OkM+ZKsM1dbFAB6OGEPKRxi6EDRnZW9ys8LghQRAq6cXPUgXCCujmDrXdodGXX9bqaaCRtwj4h4wgSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
1212
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.css" integrity="sha512-za6IYQz7tR0pzniM/EAkgjV1gf1kWMlVJHBHavKIvsNoUMKWU99ZHzvL6lIobjiE2yKDAKMDSSmcMAxoiWgoWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1313
<style>
@@ -355,12 +355,12 @@ <h5>待删除要素:</h5>
355355
'circle-radius': 8
356356
},
357357
line: {
358-
'line-color': '#61b79e',
358+
'line-color': '#3388ff',
359359
'line-width': 4
360360
},
361361
fill: {
362-
'fill-color': '#b5b5b5',
363-
'fill-opacity': 0.5
362+
'fill-color': '#3388ff',
363+
'fill-opacity': 0.3
364364
}
365365
}
366366
map.addLayer({
@@ -385,7 +385,6 @@ <h5>待删除要素:</h5>
385385
return res.json();
386386
})
387387
.then((res) => {
388-
console.log('domain', res);
389388
domainRules = {};
390389
res && Array.isArray(res) && res.forEach((domain) => {
391390
domainRules[domain.fieldName.toUpperCase()] = domain;
@@ -402,10 +401,8 @@ <h5>待删除要素:</h5>
402401
if (rule && rule.type === 'RANGE') {
403402
let value = +e.target.value;
404403
if (value < rule.rangeInfos[0].min || value > rule.rangeInfos[0].max) {
405-
// 提升错误
406404
e.target.style.borderColor = 'red';
407405
var parent = e.target.parentNode;
408-
//
409406
let error = document.createElement('span');
410407
error.style.color = 'red';
411408
error.className = 'error-tips';
@@ -462,19 +459,25 @@ <h5>待删除要素:</h5>
462459

463460
function init(dataUrl, datasourceName) {
464461
let styles = mapboxGlDrawSnapMode.SnapModeDrawStyles;
465-
// styles.forEach((style) => {
466-
// if (['gl-draw-line-static', 'gl-draw-line-inactive', 'gl-draw-line-active'].includes(style.id)) {
467-
// style.paint['line-color'] = '#61b79e';
468-
// style.paint['line-width'] = 3;
469-
// }
470-
// if (['gl-draw-point-static', 'gl-draw-point-inactive', 'gl-draw-point-active'].includes(style.id)) {
471-
// style.paint['circle-color'] = '#e55561';
472-
// style.paint['circle-radius'] = 8;
473-
// }
474-
// if (['gl-draw-polygon-fill-static', 'gl-draw-polygon-fill-inactive', 'gl-draw-polygon-fill-active'].includes(style.id)) {
475-
// style.paint['fill-color'] = '#5a5a5a';
476-
// }
477-
// });
462+
styles.forEach((style) => {
463+
if (['gl-draw-line-static', 'gl-draw-line-inactive', 'gl-draw-line-active'].includes(style.id)) {
464+
style.paint['line-color'] = '#3388ff';
465+
style.paint['line-width'] = 3;
466+
}
467+
if (['gl-draw-point-static', 'gl-draw-point-inactive', 'gl-draw-point-active'].includes(style.id)) {
468+
style.paint['circle-color'] = '#e55561';
469+
style.paint['circle-radius'] = 8;
470+
}
471+
if (['gl-draw-polygon-stroke-inactive', 'gl-draw-polygon-stroke-static', 'gl-draw-polygon-stroke-active'].includes(style.id)) {
472+
style.paint['line-color'] = '#3388ff';
473+
style.paint['line-opacity'] = 0.3;
474+
}
475+
if (['gl-draw-polygon-fill-static', 'gl-draw-polygon-fill-inactive', 'gl-draw-polygon-fill-active'].includes(style.id)) {
476+
style.paint['fill-color'] = '#3388ff';
477+
style.paint['fill-outline-color'] = '#3388ff';
478+
style.paint['fill-opacity'] = 0.3;
479+
}
480+
});
478481
draw = new MapboxDraw({
479482
modes: {
480483
...MapboxDraw.modes,
@@ -726,6 +729,7 @@ <h5>待删除要素:</h5>
726729
document.querySelector('.cancel-edit').addEventListener('click', function() {
727730
if (curEditOriginFeatures.length) {
728731
curEditOriginFeatures.forEach((feature) => {
732+
map.setFilter(feature.properties.datasetName, null);
729733
draw.delete(feature.id);
730734
});
731735
curEditOriginFeatures = [];
@@ -813,7 +817,20 @@ <h5>待删除要素:</h5>
813817
} else {
814818
isUpdate = true;
815819
}
820+
if (type === 'edit') {
821+
const allFeature = draw.getAll();
822+
const datas = map.getSource(currentDataset)._data;
823+
datas.features.forEach((feature) => {
824+
allFeature.features.forEach((editFeature) => {
825+
if (feature.id === editFeature.id) {
826+
feature = editFeature;
827+
};
828+
});
829+
});
830+
};
831+
816832
commit(isUpdate);
833+
817834
// 切换到编辑
818835
switchPanel('edit', true);
819836
}
@@ -837,7 +854,6 @@ <h5>待删除要素:</h5>
837854

838855
await featureService.getFeaturesBySQL(getFeatureParams).then(function (serviceResult) {
839856
var geojsonFeatures = serviceResult.result.features;
840-
// 删除的时候需要
841857
geojsonFeatures.features.forEach((feature) => {
842858
feature.properties.datasetName = datasetName;
843859
});
@@ -892,17 +908,34 @@ <h5>待删除要素:</h5>
892908
map.on('click', function (e) {
893909
let res = map.queryRenderedFeatures(e.point);
894910
if (status === 'EDIT') {
895-
if (res[0]) {
911+
if (res[0] && !['mapbox-gl-draw-cold', 'mapbox-gl-draw-hot'].includes(res[0].source)) {
896912
let { type, geometry, id, properties } = res[0];
897913
let editFeature = {
898914
type,
899915
geometry,
900916
id,
901917
properties
902918
};
919+
let source = map.getSource(properties.datasetName);
920+
let layer = map.getLayer(properties.datasetName);
921+
let allIds = source._data.features.map((feature) => {
922+
return feature.id;
923+
});
924+
allIds = allIds.filter((id) => {
925+
if (id !== +properties.SMID && !curEditOriginFeatures.find((feature) => {
926+
return feature.id === id;
927+
})) {
928+
return true;
929+
}
930+
return false;
931+
});
932+
allIds = allIds.map((id) => {
933+
return id + '';
934+
});
903935
draw.add(editFeature);
904-
draw.changeMode('direct_select', { featureId: id });
905-
936+
const filters = ['match', ['get', 'SMID'], allIds, true, false];
937+
map.setFilter(properties.datasetName, filters);
938+
draw.changeMode(geometry.type === 'Point' ? 'simple_select' : 'direct_select', { featureId: id });
906939
document.querySelector('.edit-tips').style.display = 'none';
907940
currentFeature.dataset = editFeature.properties.datasetName;
908941
document.querySelector('.edit-dataset').innerText = currentFeature.dataset;
@@ -941,6 +974,21 @@ <h5>待删除要素:</h5>
941974
renderEditAttribute('edit', currentFeature.data.properties);
942975
}
943976
});
977+
map.on('draw.update', function (e) {
978+
let feature = e.features[0];
979+
if (status === 'EDIT') {
980+
document.querySelector('.edit-tips').style.display = 'none';
981+
currentFeature.dataset = feature.properties.datasetName;
982+
currentFeature.data = feature;
983+
document.querySelector('.edit-feature-info').style.display = 'block';
984+
document.querySelector('.edit-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
985+
renderEditAttribute('edit', currentFeature.data.properties);
986+
}
987+
});
988+
map.on('draw.selectionchange', function() {
989+
updateChanged = true;
990+
document.querySelector('.editSave').disabled = false;
991+
});
944992
}
945993

946994
function startDraw(type, source) {

0 commit comments

Comments
 (0)