Skip to content

Commit 5f22383

Browse files
tangqinGisertangqinGiser
committed
fix 地物编辑和分布式示例。review by caoxink.
1 parent 3202a65 commit 5f22383

11 files changed

+640
-271
lines changed

‎examples/leaflet/02_editFeatures.html‎

Lines changed: 158 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,36 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>地物编辑</title>
6-
<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
6+
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
7+
<script type="text/javascript" src="../../dist/include-leaflet.js"></script>
8+
<style>
9+
.leaflet-tooltip, .leaflet-tooltip:before {
10+
color: white;
11+
border: none;
12+
background: rgba(0, 0, 0, 0.5);
13+
}
14+
15+
.tooltip-inner {
16+
width: 80px;
17+
background-color: transparent;
18+
color: #515151;
19+
}
20+
21+
</style>
722
</head>
823
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
924
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
10-
<script type="text/javascript" src="../../dist/include-leaflet.js"></script>
1125
<script type="text/javascript">
1226
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
13-
var map, marker, featureGroup, id, resultLayer, featureService,
27+
var map, marker, featureGroup, resultLayer, featureService, alertDiv,
1428
baseUrl = host + "/iserver/services/map-world/rest/maps/World",
1529
url = host + "/iserver/services/data-world/rest/data";
1630
map = L.map('map', {
1731
preferCanvas: true,
1832
crs: L.CRS.EPSG4326,
19-
center: {lon: 110, lat: 30},
33+
center: {lon: 0, lat: 0},
2034
maxZoom: 18,
21-
zoom: 3
35+
zoom: 2
2236
});
2337
L.supermap.tiledMapLayer(baseUrl).addTo(map);
2438
featureGroup = L.featureGroup().addTo(map);
@@ -27,69 +41,33 @@
2741
initEditView();
2842

2943
function initFeature() {
30-
var polygon = L.polygon([[10, 100], [10, 124], [40, 124], [40, 100], [10, 100]]);
44+
var polygon = L.polygon([[20, 118], [20, 120], [50, 120], [50, -120], [20, 118]]);
3145
var getFeatureParams = new SuperMap.GetFeaturesByGeometryParameters({
3246
toIndex: -1,
3347
datasetNames: ["World:Capitals"],
3448
geometry: polygon
3549
});
3650

3751
featureService.getFeaturesByGeometry(getFeatureParams, function (serviceResult) {
38-
resultLayer = L.geoJSON(serviceResult.result.features, {
39-
onEachFeature: function (feature, layer) {
40-
layer.bindPopup("首都：" + feature.properties.CAPITAL);
41-
}
42-
}).addTo(map);
43-
});
44-
}
45-
46-
function addMarker() {
47-
if (!featureGroup.hasLayer(marker)) {
48-
var xmax = 120, xmin = 100, ymax = 50, ymin = 20;
49-
marker = L.circleMarker([
50-
Math.floor(Math.random() * (ymax - ymin + 1) + ymin),
51-
Math.floor(Math.random() * (xmax - xmin + 1) + xmin)
52-
], {color: "red"});
53-
featureGroup.addLayer(marker);
54-
featureGroup.addTo(map);
55-
map.setView(marker.getLatLng());
56-
} else {
57-
alert("请先清除结果");
58-
}
59-
}
60-
61-
function commit() {
62-
var me = this;
63-
if (featureGroup.hasLayer(marker)) {
64-
marker = marker.toGeoJSON();
65-
marker.properties = {POP: 1, CAPITAL: 'test'};
66-
var addFeatureParams = new SuperMap.EditFeaturesParameters({
67-
dataSourceName: "World",
68-
dataSetName: "Capitals",
69-
features: marker,
70-
editType: "add",
71-
returnContent: true
52+
resultLayer = L.geoJSON(serviceResult.result.features).addTo(map);
53+
resultLayer.on("mousemove", function (e) {
54+
e.layer.bindPopup("首都：" + e.layer.feature.properties.CAPITAL).openPopup();
7255
});
73-
featureService.editFeatures(addFeatureParams, function (serviceResult) {
74-
if (serviceResult.result.succeed) {
75-
id = serviceResult.result[0];
76-
featureGroup.removeFrom(map);
77-
me.initFeature();
78-
}
56+
resultLayer.on("mouseout", function (e) {
57+
e.layer.closePopup();
7958
});
80-
} else {
81-
alert("请先添加地物");
82-
}
59+
});
8360
}
8461

8562
function initEditView() {
8663
var infoView = L.control({position: 'topright'});
8764
infoView.onAdd = function () {
8865
var me = this;
89-
me._div = L.DomUtil.create('div', 'panel panel-primary infoPane');
66+
me._div = L.DomUtil.create('div', 'panel panel-primary');
9067
me._div.innerHTML = "<div class='panel-heading'>" +
9168
"<h5 class='panel-title text-center'>编辑</h5></div><div class='panel-body content'>" +
9269
"<input type='button' class='btn btn-default' value='添加地物' onclick='addMarker()'/>&nbsp;" +
70+
"<input type='button' class='btn btn-default' value='撤销添加' onclick='revocationMarker()'/>&nbsp;" +
9371
"<input type='button' class='btn btn-default' value='提交添加' onclick='commit()'/>&nbsp;" +
9472
"<input type='button' class='btn btn-default' value='清除结果' onclick='clearLayer()'/></div>";
9573

@@ -115,27 +93,143 @@
11593
});
11694
}
11795

118-
function clearLayer() {
119-
var me = this;
120-
if (id && featureService) {
121-
var deleteParams = new SuperMap.EditFeaturesParameters({
96+
//添加鼠标滑动事件
97+
var tooltip = L.tooltip({
98+
direction: 'right'
99+
});
100+
var pointerMoveHandler = function (evt) {
101+
tooltip.setContent("选择并删除要素。");
102+
tooltip.setLatLng(evt.latlng);
103+
tooltip.addTo(map);
104+
};
105+
106+
107+
function addMarker() {
108+
closeAlert();
109+
closeClearListener();
110+
var xmax = 120, xmin = 100, ymax = 50, ymin = 20,
111+
point = [];
112+
if (!featureGroup.hasLayer(marker)) {
113+
114+
point = [
115+
Math.floor(Math.random() * (ymax - ymin + 1) + ymin),
116+
Math.floor(Math.random() * (xmax - xmin + 1) + xmin)
117+
];
118+
marker = L.circleMarker(point, {color: "red"});
119+
featureGroup.addLayer(marker);
120+
featureGroup.addTo(map);
121+
map.flyTo(point, 5);
122+
} else {
123+
featureGroup.clearLayers();
124+
point = [
125+
Math.floor(Math.random() * (ymax - ymin + 1) + ymin),
126+
Math.floor(Math.random() * (xmax - xmin + 1) + xmin)
127+
];
128+
marker = L.circleMarker(point, {color: "red"});
129+
featureGroup.addLayer(marker);
130+
featureGroup.addTo(map);
131+
map.flyTo(point, 5);
132+
}
133+
}
134+
135+
function revocationMarker() {
136+
closeClearListener();
137+
if (featureGroup.hasLayer(marker)) {
138+
featureGroup.clearLayers();
139+
marker = null;
140+
} else {
141+
showAlert("没有可撤回的要素。");
142+
}
143+
}
144+
145+
function commit() {
146+
closeAlert();
147+
closeClearListener();
148+
if (featureGroup.hasLayer(marker)) {
149+
marker = marker.toGeoJSON();
150+
marker.properties = {POP: 1, CAPITAL: 'test'};
151+
var addFeatureParams = new SuperMap.EditFeaturesParameters({
122152
dataSourceName: "World",
123153
dataSetName: "Capitals",
124-
IDs: [id],
125-
editType: "delete"
154+
features: marker,
155+
editType: "add",
156+
returnContent: true
126157
});
127-
featureService.editFeatures(deleteParams, function (serviceResult) {
158+
featureService.editFeatures(addFeatureParams, function (serviceResult) {
128159
if (serviceResult.result.succeed) {
129-
resultLayer.removeFrom(map);
130-
me.initFeature();
131-
} else {
132-
alert("删除失败")
160+
featureGroup.clearLayers();
161+
marker = null;
162+
map.removeLayer(resultLayer);
163+
resultLayer = null;
164+
initFeature();
165+
showAlert("提交成功");
133166
}
134167
});
168+
} else {
169+
showAlert("请先添加地物");
135170
}
136-
if (featureGroup && featureGroup.hasLayer(marker)) {
137-
featureGroup.removeLayer(marker);
138-
marker = null;
171+
}
172+
173+
function clearLayer() {
174+
map.on('mousemove', pointerMoveHandler);
175+
resultLayer.on("click", layerClickListener);
176+
closeAlert();
177+
}
178+
179+
function layerClickListener(e) {
180+
var deleteParams = new SuperMap.EditFeaturesParameters({
181+
dataSourceName: "World",
182+
dataSetName: "Capitals",
183+
IDs: [e.layer.feature.properties.ID],
184+
editType: "delete"
185+
});
186+
featureService.editFeatures(deleteParams, function (serviceResult) {
187+
if (serviceResult.result.succeed) {
188+
map.removeLayer(resultLayer);
189+
resultLayer = null;
190+
initFeature();
191+
showAlert("删除成功");
192+
closeClearListener();
193+
} else {
194+
showAlert("删除失败");
195+
}
196+
});
197+
}
198+
199+
function closeClearListener() {
200+
if (map.hasLayer(tooltip)) {
201+
tooltip.removeFrom(map);
202+
}
203+
if (resultLayer) {
204+
resultLayer.off("click", layerClickListener);
205+
}
206+
map.off('mousemove', pointerMoveHandler);
207+
}
208+
209+
//显示提示框
210+
function showAlert(msg) {
211+
var className = "alert-success";
212+
if (alertDiv) {
213+
$(alertDiv).remove();
214+
}
215+
if (!$('#msg_container')[0]) {
216+
alertDiv = $("<div class='alert alert-dismissible' id='msg_container' role='alert' " +
217+
"style='z-index:800;position: absolute;top: 20px;left: 40%;width:250px;display: none'>" +
218+
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
219+
"<strong><p id='msg' style='word-wrap: break-word'></p></strong></div>");
220+
$('body').append(alertDiv)
221+
}
222+
$('.close').on('click', function () {
223+
$(alertDiv).remove();
224+
});
225+
$('#msg_container').addClass(className);
226+
$('#msg_container').slideDown(300);
227+
$('#msg').html(msg);
228+
}
229+
230+
function closeAlert() {
231+
if (alertDiv) {
232+
$(alertDiv).remove();
139233
}
140234
}
141235
</script>

‎examples/leaflet/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -648,7 +648,7 @@ var exampleConfig = {
648648
thumbnail: "l_turf_transformation.png",
649649
fileName: "turf_transformation"
650650
},{
651-
name: "插值、格网、分等",
651+
name: "插值、格网、分级",
652652
thumbnail: "l_turf_analysis.png",
653653
fileName: "turf_analysis"
654654
},{

0 commit comments

Comments
 (0)