Skip to content

Commit 70fdb10

Browse files
wuzhuorui5wuzhuorui5
committed
fix leaflet的turf测量示例 reviewBy zhurc
1 parent 4586a0d commit 70fdb10

File tree

1 file changed

+52
-45
lines changed

1 file changed

+52
-45
lines changed

‎examples/leaflet/turf_measurement.html

Lines changed: 52 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
turfLayer, resultLayer, urlWorld,
1616
totalLat = 0, totalLng = 0, averageLat, averageLng, distance, geo, coordinate,
1717
choose, marker1, marker2, marker3, editableLayers, drawControl,
18-
bearing, baseLayer, result, box,
18+
bearing, baseLayer, result, val,
1919
radius, steps, point;
2020

21-
var map = L.map('map', {
21+
var map = L.map('map', {
2222
preferCanvas: true,
2323
crs: L.CRS.EPSG4326,
2424
center: {lon: 116.383572, lat: 39.914714},
@@ -93,7 +93,6 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
9393
return me._div;
9494
};
9595
infoView.addTo(map);
96-
9796
hidePanel();
9897
reset();
9998
}
@@ -113,6 +112,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
113112
});
114113

115114
$('#menuSelect').change(function () {
115+
widgets.alert.clearAlert();
116116

117117
//初始化图层
118118
removeLayer();
@@ -122,13 +122,11 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
122122

123123
url = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
124124
baseLayer = L.supermap.tiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);
125-
126125
//第一个隐藏右侧菜单
127126
if ($("#menuSelect").get(0).selectedIndex === 0) {
128127
setDefaultCenter(39.91, 116.383572, 11);
129128
hidePanel();
130129
clearControl();
131-
$('#msg_container').hide();
132130

133131
} else {
134132
choose = $('#menuSelect').children('option:selected').val();
@@ -141,17 +139,28 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
141139
setCenter();
142140
setAlongIcon();
143141
clearControl();
144-
$('#msg_container').hide();
145142
$('.input-group:eq(0)').show();
146143
$('.input-group:eq(1)').show();
147144
$('.input-group:eq(2)').hide();
148145
$('.input-group:eq(3)').show();
149146
$('.input-group:eq(1)>span').text('请输入距起点距离');
150-
$('.input-group:eq(1)>input').attr('placeholder', '全长1174.8米约合0.729英里');
147+
$('.input-group:eq(1)>input').attr('placeholder', '全长1.175千米约合0.73英里');
148+
149+
$('.input-group:eq(1)>input').focusout(function () {
150+
val = $('.input-group:eq(1)>input').val();
151+
if ((unit === 'kilometers' && val > 1.1753172567467551) || (unit === 'miles' && val > 0.7303085417726581) || (unit === 'degrees' && val > 0.010566564943528475) || (unit === 'radians' && val > 0.00018442134893248942)) {
152+
widgets.alert.showAlert('超出全程距离范围,请重新填写', false, 260);
153+
$('.input-group:eq(1)>input').val('');
154+
}
155+
else {
156+
widgets.alert.clearAlert();
157+
}
158+
});
159+
151160
$('#calc').val('点击生成对应的点');
152161
}
153162
else if (choose === 'area') {
154-
widgets.alert.showAlert('选择左侧控件,画出自定义图层,再点右侧按钮进行面积计算',1,260);
163+
widgets.alert.showAlert('选择左侧控件,按下鼠标左键,画出自定义图层,再点右侧按钮进行面积计算', true, 260);
155164
$('.panel-heading>h5').text('面积测量');
156165
clearControl();
157166
setDefaultCenter(39.90455699411283, 116.407283, 11);
@@ -173,7 +182,6 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
173182
$('.input-group:eq(1)').hide();
174183
$('.input-group:eq(2)').hide();
175184
$('.input-group:eq(3)').show();
176-
$('#msg_container').hide();
177185
$('#calc').val('点击生成bounds');
178186
}
179187
else if (choose === 'destination') {
@@ -184,20 +192,18 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
184192
$('.input-group:eq(2)').show();
185193
$('.input-group:eq(3)').show();
186194
$('.input-group:eq(1)>span').text('请输入距起点距离');
187-
$('.input-group:eq(1)>input').attr('placeholder', '请输入距起点距离');
195+
$('.input-group:eq(1)>input').unbind('focusout').attr('placeholder', '请输入距起点距离');
188196
$('.input-group:eq(2)>span').text('请输入方位');
189197
$('.input-group:eq(2)>input').attr('placeholder', '请输入[-180,180]范围内的值');
190198
setDestinationIcon();
191199
clearControl();
192-
$('#msg_container').hide();
193200
$('#calc').val('点击显示目标点');
194201
}
195202
else if (choose === 'distance') {
196203
$('.panel-heading>h5').text('京津两点之间的距离');
197204
setDefaultCenter(39.80771500024742, 116.72499999899998, 8);
198205
clearControl();
199206
setDistanceIcon();
200-
$('#msg_container').hide();
201207
$('.input-group:eq(0)').show();
202208
$('.input-group:eq(1)').hide();
203209
$('.input-group:eq(2)').hide();
@@ -207,12 +213,12 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
207213
else if (choose === 'midpoint') {
208214
$('.panel-heading>h5').text('获取京津之间的中点');
209215
setDefaultCenter(39.90455699411283, 116.407283, 7);
216+
clearControl();
210217
setMidpointIcon();
211218
$('.input-group:eq(0)').hide();
212219
$('.input-group:eq(1)').hide();
213220
$('.input-group:eq(2)').hide();
214221
$('.input-group:eq(3)').show();
215-
$('#msg_container').hide();
216222
$('#calc').val('获取京津之间的中点');
217223
}
218224
else if (choose === 'greatCircle') {
@@ -225,17 +231,15 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
225231
$('.input-group:eq(1)').hide();
226232
$('.input-group:eq(2)').hide();
227233
$('.input-group:eq(3)').show();
228-
$('#msg_container').hide();
229234
$('#calc').val('计算大圆航线');
230235
}
231236
else if (choose === 'square') {
237+
widgets.alert.showAlert('选择左侧控件,按下鼠标左键,画出自定义矩形，再点右侧按钮计算最小外切正方形', true, 260);
232238
$('.panel-heading>h5').text('最小外切正方形');
233239
setDefaultCenter(39.70914100034369, 116.11697300062501, 14);
234240
clearControl();
235241
drawController(false, false, false, false, true);
236242
drawing();
237-
238-
$('#msg_container').hide();
239243
$('.input-group:eq(0)').hide();
240244
$('.input-group:eq(1)').hide();
241245
$('.input-group:eq(2)').hide();
@@ -247,7 +251,6 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
247251
setDefaultCenter(39.93393099410061, 116.38035099999959, 12);
248252
clearControl();
249253
setCenterIcon();
250-
$('#msg_container').hide();
251254
$('.input-group:eq(0)').hide();
252255
$('.input-group:eq(1)').hide();
253256
$('.input-group:eq(2)').hide();
@@ -261,7 +264,6 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
261264
setDefaultCenter(40.676116230453765, 116.55439124389999, 12);
262265
clearControl();
263266
whiteRiver();
264-
$('#msg_container').hide();
265267
$('.input-group:eq(0)').hide();
266268
$('.input-group:eq(1)').hide();
267269
$('.input-group:eq(2)').hide();
@@ -270,45 +272,44 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
270272
}
271273
else if (choose === 'buffer') {
272274
$('.panel-heading>h5').text('buffer缓冲区');
273-
widgets.alert.showAlert('请先点击左侧控件标记一个点',true);
275+
widgets.alert.showAlert('请先点击左侧控件标记一个点', true);
274276
clearControl();
275277
setDefaultCenter(40, 116.83, 9);
276278
drawController(false, false, false, false, false, false, true);
277279
drawing();
278-
$('#msg_container').hide();
280+
279281
$('.input-group:eq(0)').show();//单位
280282
$('.input-group:eq(1)').show();//步长
281283
$('.input-group:eq(2)').show();//半径
282284
$('.input-group:eq(3)').show();
283285
$('.input-group:eq(1)>span').text('请输入步长');//步长
284-
$('.input-group:eq(1)>input').attr('placeholder', '步长');
286+
$('.input-group:eq(1)>input').unbind('focusout').attr('placeholder', '步长');
285287
$('.input-group:eq(2)>span').text('请输入半径');//半径
286288
$('.input-group:eq(2)>input').attr('placeholder', '半径');
287289
$('#calc').val('生成标记点缓冲区');
288290
}
289291
else if (choose === 'circle') {
290292
$('.panel-heading>h5').text('圆多边形');
291-
widgets.alert.showAlert('请先点击左侧控件标记一个点',true);
293+
widgets.alert.showAlert('请先点击左侧控件标记一个点', true);
292294
clearControl();
293295
setDefaultCenter(40, 116.83, 9);
294296
drawController(false, false, false, false, false, false, true);
295297
drawing();
296298
$('.title').show();
297299
$('.title>span').text('circle');
298300
$('.area').hide();
299-
$('#msg_container').hide();
300301
$('.input-group:eq(0)').show();//单位
301302
$('.input-group:eq(1)').show();//步长
302303
$('.input-group:eq(2)').show();//半径
303304
$('.input-group:eq(3)').show();
304305
$('.input-group:eq(1)>span').text('请输入步长');//步长
305-
$('.input-group:eq(1)>input').attr('placeholder', '步长');
306+
$('.input-group:eq(1)>input').unbind('focusout').attr('placeholder', '步长');
306307
$('.input-group:eq(2)>span').text('请输入半径');//半径
307308
$('.input-group:eq(2)>input').attr('placeholder', '半径');
308309
$('#calc').val('生成圆多边形');
309310
}
310311
else {
311-
widgets.alert.showAlert('方法不存在',false);
312+
widgets.alert.showAlert('方法不存在', false);
312313
}
313314
showPanel();
314315
}
@@ -328,6 +329,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
328329
//半径
329330
radius = bearing;
330331
//角度
332+
331333
angle = distance;
332334

333335
meths = {
@@ -345,7 +347,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
345347
"circle": circle,
346348
};
347349
if (!meths[choose]) {
348-
widgets.alert.showAlert('选择非法，请重新选择',false);
350+
widgets.alert.showAlert('选择非法，请重新选择', false);
349351
}
350352
meths[choose]();
351353
});
@@ -367,10 +369,6 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
367369
circlemarker: circlemarker,
368370
marker: marker,
369371
remove: {},
370-
},
371-
edit: {
372-
featureGroup: editableLayers,
373-
remove: true
374372
}
375373
};
376374
drawControl = new L.Control.Draw(options);
@@ -499,6 +497,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
499497
});
500498
}
501499

500+
502501
//设置destination方法的Icon.
503502
function setDestinationIcon() {
504503
marker3 = L.marker([39.90455699411283, 116.407283]);
@@ -556,7 +555,8 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
556555
//清空当前图层
557556
function removeLayer() {
558557
map.eachLayer(function (layer) {
559-
if (baseLayer !== layer) {
558+
559+
if (layer !== baseLayer) {
560560
layer.removeFrom(map);
561561
}
562562
});
@@ -599,15 +599,15 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
599599
if (reg.test(num)) {
600600
return 1;
601601
} else {
602-
widgets.alert.showAlert('非法输入,请重新输入', 0,260)
602+
widgets.alert.showAlert('非法输入,请重新输入', false, 260)
603603
}
604604
}
605605

606606
//判断是否在[-180,180]范围内
607607
function isInRange(val) {
608608
// return val >= -180 && val <= 180;
609609
if (val < -180 || val > 180) {
610-
widgets.alert.showAlert('请输入[-180,180]范围内的值', 0,260);
610+
widgets.alert.showAlert('请输入[-180,180]范围内的值', false, 260);
611611
}
612612
else {
613613
return 1;
@@ -626,12 +626,10 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
626626
//turf along方法
627627
function along() {
628628
if (unit != 'null' && unit != undefined) {
629-
widgets.alert.clearAlert();
630629
if (checkIsNum(distance) && coordinate) {
631630
turfLayer.process("Helper.lineString", {
632631
"coordinates": coordinate,
633632
}, function (line) {
634-
635633
resultLayer.process("Measurement.along", {
636634
"line": line,
637635
"distance": distance,
@@ -641,7 +639,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
641639
}
642640
}
643641
else {
644-
widgets.alert.showAlert('请选择单位', 0,260);
642+
widgets.alert.showAlert('请选择单位', false, 260);
645643
}
646644
}
647645

@@ -655,13 +653,13 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
655653
"geojson": polygon
656654
}, function (e) {
657655
result = e + '平方米';
658-
widgets.alert.showAlert(result,1);
656+
widgets.alert.showAlert(result, true);
659657
$(" input[ id='area' ] ").val(result);
660658
});
661659
});
662660
}
663661
else {
664-
widgets.alert.showAlert('请画出图层', 0,260);
662+
widgets.alert.showAlert('请画出图层', false, 260);
665663
}
666664
}
667665

@@ -698,7 +696,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
698696
}
699697
}
700698
else {
701-
widgets.alert.showAlert('请选择单位', 0,260)
699+
widgets.alert.showAlert('请选择单位', false, 260)
702700
}
703701
}
704702

@@ -710,8 +708,13 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
710708
"degrees": "角度",
711709
"radians": "弧度",
712710
};
711+
var inUnits = {
712+
"千米": "kilometers",
713+
"英里": "miles",
714+
"角度": "degrees",
715+
"弧度": "radians",
716+
};
713717
if (unit != 'null' && unit != undefined) {
714-
widgets.alert.clearAlert();
715718
resultLayer.process("Measurement.distance", {
716719
"from": turfLayer.toGeoJSON().features[0].geometry.coordinates[0],
717720
"to": turfLayer.toGeoJSON().features[0].geometry.coordinates[1],
@@ -721,11 +724,12 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
721724
});
722725
unit = disUnits[unit];
723726
result = resultNum + unit;
724-
widgets.alert.showAlert(result,1,260);
727+
widgets.alert.showAlert(result, true, 260);
725728
$(" input[ id='area' ] ").val(result);
729+
unit = inUnits[unit];
726730
}
727731
else {
728-
widgets.alert.showAlert('请选择单位', 0,260)
732+
widgets.alert.showAlert('请选择单位', false, 260)
729733
}
730734

731735
}
@@ -759,6 +763,9 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
759763

760764
//turf square
761765
function square() {
766+
if (!coordinate) {
767+
return;
768+
}
762769
turfLayer.process("Helper.polygon", {
763770
"coordinates": coordinate,
764771
}, function (e) {
@@ -822,11 +829,11 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
822829
});
823830
});
824831
} else {
825-
widgets.alert.showAlert('填入数据不完善或错误', 0,260);
832+
widgets.alert.showAlert('填入数据不完善或错误', false, 260);
826833
}
827834
}
828835
else {
829-
widgets.alert.showAlert('请选择单位', 0,260);
836+
widgets.alert.showAlert('请选择单位', false, 260);
830837
}
831838

832839
}
@@ -851,7 +858,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
851858
});
852859
}
853860
else {
854-
widgets.alert.showAlert('填入数据不完善或错误', 0,260);
861+
widgets.alert.showAlert('填入数据不完善或错误', false, 260);
855862
}
856863
}
857864

0 commit comments

Comments
 (0)