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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy