Skip to content

Commit 0f52482

+ icon +
176+
"<a href='#" + id + "' id='" + id + "'>" + icon +
177177
"<span class='thirdMenuTitle'>" + title + "</span>" +
178178
"</a>");
179179
if (collapse) {

‎examples/leaflet/turf_measurement.html‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
<script type="text/javascript" include="turf,leaflet.draw" src="../../dist/include-leaflet.js"></script>
1010
<script type="text/javascript" include="bootstrap,bootstrap-select,widgets.alert" src="../js/include-web.js"></script>
1111
<script type="text/javascript">
12-
var unit;
1312
var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090",
1413
url = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
1514
turfLayer, resultLayer, urlWorld,
@@ -34,6 +33,8 @@
3433

3534
bindEvents();
3635

36+
$('#menuSelect').change();
37+
3738
function initEditView() {
3839
var infoView = L.control({position: 'topright'});
3940
infoView.onAdd = function () {
@@ -44,10 +45,9 @@
4445
<div class='panel-heading'>
4546
<h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
4647
</div>
47-
<div class='panel panel-body chooseItems'>
48+
<div class='panel panel-body chooseItems' style="margin-bottom:0px;padding-bottom: 0px">
4849
<select class='form-control' id='menuSelect' >
49-
<option value= null selected='selected'>请选择方法</option>
50-
<option value='along'>along</option>
50+
<option value='along' selected='selected'>along</option>
5151
<option value='area'>area</option>
5252
<option value='bbox'>bbox</option>
5353
<option value='center'>center</option>
@@ -60,26 +60,26 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
6060
<option value='buffer'>buffer</option>
6161
<option value='circle'>circle</option>
6262
</select>
63-
</div>
64-
<div class='panel-body' id='params'>
63+
</div>
64+
<hr/>
65+
<div class='panel-body' id='params' style="padding-top: 0px">
6566
<div class='input-group'>
66-
<span class='input-group-addon'>请选择距离的单位</span>
67+
<span class='input-group-addon'>距离单位</span>
6768
<select class='form-control' id='unitSelect' name='unitSelect'>
68-
<option value= null >请选择</option>
69-
<option value='kilometers'>kilometers</option>
69+
<option value='kilometers' selected = "selected">kilometers</option>
7070
<option value='miles'>miles</option>
7171
<option value='degrees'>degrees</option>
7272
<option value='radians'>radians</option>
7373
</select>
7474
</div>
7575
<p></p>
7676
<div class='input-group'>
77-
<span class='input-group-addon'>请输入距起点距离</span>
78-
<input id='distance' type='text' class='form-control' placeholder="距离" />
77+
<span class='input-group-addon'>距起点距离</span>
78+
<input id='distance' type='text' class='form-control' placeholder="距离" val="0.5"/>
7979
</div>
8080
<p></p>
8181
<div class='input-group'>
82-
<span class='input-group-addon'>请输入方位</span>
82+
<span class='input-group-addon'>方位</span>
8383
<input id='bearing' type='text' class='form-control' placeholder="-180度到180度之间"/>
8484
</div>
8585
<p></p>
@@ -99,10 +99,10 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
9999

100100
//初始化事件
101101
function bindEvents() {
102-
//获取单位
103-
$('#unitSelect').change(function () {
104-
unit = $('#unitSelect').children('option:selected').val();
105-
});
102+
// //获取单位
103+
// $('#unitSelect').change(function () {
104+
// unit = $('#unitSelect').children('option:selected').val();
105+
// });
106106
//控件栏取消地图事件
107107
$("#editPane").mouseover(function (e) {
108108
map.dragging.disable();
@@ -123,12 +123,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
123123
url = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
124124
baseLayer = L.supermap.tiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);
125125
//第一个隐藏右侧菜单
126-
if ($("#menuSelect").get(0).selectedIndex === 0) {
127-
setDefaultCenter(39.91, 116.383572, 11);
128-
hidePanel();
129-
clearControl();
130126

131-
} else {
132127
choose = $('#menuSelect').children('option:selected').val();
133128
reset();
134129

@@ -143,11 +138,12 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
143138
$('.input-group:eq(1)').show();
144139
$('.input-group:eq(2)').hide();
145140
$('.input-group:eq(3)').show();
146-
$('.input-group:eq(1)>span').text('请输入距起点距离');
147-
$('.input-group:eq(1)>input').attr('placeholder', '全长1.175千米约合0.73英里');
141+
$('.input-group:eq(1)>span').text('距起点距离');
142+
$('.input-group:eq(1)>input').val("0.5");
148143

149144
$('.input-group:eq(1)>input').focusout(function () {
150145
val = $('.input-group:eq(1)>input').val();
146+
var unit = $('#unitSelect').children('option:selected').val();
151147
if ((unit === 'kilometers' && val > 1.1753172567467551) || (unit === 'miles' && val > 0.7303085417726581) || (unit === 'degrees' && val > 0.010566564943528475) || (unit === 'radians' && val > 0.00018442134893248942)) {
152148
widgets.alert.showAlert('超出全程距离范围,请重新填写', false, 260);
153149
$('.input-group:eq(1)>input').val('');
@@ -160,7 +156,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
160156
$('#calc').val('点击生成对应的点');
161157
}
162158
else if (choose === 'area') {
163-
widgets.alert.showAlert('选择左侧控件,按下鼠标左键,画出自定义图层,再点右侧按钮进行面积计算', true, 260);
159+
widgets.alert.showAlert('使用左侧绘图控件绘制面,点击右侧按钮进行计算', true, 500);
164160
$('.panel-heading>h5').text('面积测量');
165161
clearControl();
166162
setDefaultCenter(39.90455699411283, 116.407283, 11);
@@ -191,9 +187,9 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
191187
$('.input-group:eq(1)').show();
192188
$('.input-group:eq(2)').show();
193189
$('.input-group:eq(3)').show();
194-
$('.input-group:eq(1)>span').text('请输入距起点距离');
195-
$('.input-group:eq(1)>input').unbind('focusout').attr('placeholder', '请输入距起点距离');
196-
$('.input-group:eq(2)>span').text('请输入方位');
190+
$('.input-group:eq(1)>span').text('距起点距离');
191+
$('.input-group:eq(1)>input').unbind('focusout').val("0.5");
192+
$('.input-group:eq(2)>span').text('方位');
197193
$('.input-group:eq(2)>input').attr('placeholder', '请输入[-180,180]范围内的值');
198194
setDestinationIcon();
199195
clearControl();
@@ -234,7 +230,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
234230
$('#calc').val('计算大圆航线');
235231
}
236232
else if (choose === 'square') {
237-
widgets.alert.showAlert('选择左侧控件,按下鼠标左键,画出自定义矩形，再点右侧按钮计算最小外切正方形', true, 260);
233+
widgets.alert.showAlert('使用左侧绘制控件绘制矩形，点击右侧按钮计算最小外切正方形', true, 500);
238234
$('.panel-heading>h5').text('最小外切正方形');
239235
setDefaultCenter(39.70914100034369, 116.11697300062501, 14);
240236
clearControl();
@@ -272,7 +268,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
272268
}
273269
else if (choose === 'buffer') {
274270
$('.panel-heading>h5').text('buffer缓冲区');
275-
widgets.alert.showAlert('请先点击左侧控件标记一个点', true);
271+
widgets.alert.showAlert('使用左侧控件标记一个点', true);
276272
clearControl();
277273
setDefaultCenter(40, 116.83, 9);
278274
drawController(false, false, false, false, false, false, true);
@@ -282,10 +278,10 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
282278
$('.input-group:eq(1)').show();//步长
283279
$('.input-group:eq(2)').show();//半径
284280
$('.input-group:eq(3)').show();
285-
$('.input-group:eq(1)>span').text('请输入步长');//步长
286-
$('.input-group:eq(1)>input').unbind('focusout').attr('placeholder', '步长');
287-
$('.input-group:eq(2)>span').text('请输入半径');//半径
288-
$('.input-group:eq(2)>input').attr('placeholder', '半径');
281+
$('.input-group:eq(1)>span').text('步长');//步长
282+
$('.input-group:eq(1)>input').unbind('focusout').val("1");
283+
$('.input-group:eq(2)>span').text('半径');//半径
284+
$('.input-group:eq(2)>input').val("10");
289285
$('#calc').val('生成标记点缓冲区');
290286
}
291287
else if (choose === 'circle') {
@@ -302,17 +298,16 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
302298
$('.input-group:eq(1)').show();//步长
303299
$('.input-group:eq(2)').show();//半径
304300
$('.input-group:eq(3)').show();
305-
$('.input-group:eq(1)>span').text('请输入步长');//步长
306-
$('.input-group:eq(1)>input').unbind('focusout').attr('placeholder', '步长');
307-
$('.input-group:eq(2)>span').text('请输入半径');//半径
308-
$('.input-group:eq(2)>input').attr('placeholder', '半径');
301+
$('.input-group:eq(1)>span').text('步长');//步长
302+
$('.input-group:eq(1)>input').unbind('focusout').val("10");
303+
$('.input-group:eq(2)>span').text('半径');//半径
304+
$('.input-group:eq(2)>input').val("10");
309305
$('#calc').val('生成圆多边形');
310306
}
311307
else {
312308
widgets.alert.showAlert('方法不存在', false);
313309
}
314310
showPanel();
315-
}
316311
});
317312

318313

@@ -538,7 +533,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
538533
function reset() {
539534
$('.chooseItems').show();
540535
hidePanel();
541-
$('.panel-heading>h5').text('turf测量');
536+
$('.panel-heading>h5').text('测量');
542537
$('#unitSelect option:first').prop("selected", 'selected');
543538
$('#distance').val('');
544539
$('#bearing').val('');
@@ -625,6 +620,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
625620

626621
//turf along方法
627622
function along() {
623+
var unit = $('#unitSelect').children('option:selected').val();
628624
if (unit != 'null' && unit != undefined) {
629625
if (checkIsNum(distance) && coordinate) {
630626
turfLayer.process("Helper.lineString", {
@@ -682,6 +678,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
682678

683679
//turf destination方法
684680
function destination() {
681+
var unit = $('#unitSelect').children('option:selected').val();
685682
if (unit != 'null' && unit != undefined) {
686683
widgets.alert.clearAlert();
687684
if (checkIsNum(distance) && isInRange(bearing)) {
@@ -714,6 +711,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
714711
"角度": "degrees",
715712
"弧度": "radians",
716713
};
714+
var unit = $('#unitSelect').children('option:selected').val();
717715
if (unit != 'null' && unit != undefined) {
718716
resultLayer.process("Measurement.distance", {
719717
"from": turfLayer.toGeoJSON().features[0].geometry.coordinates[0],
@@ -814,6 +812,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
814812
//turf buffer
815813
//先draw一个点 再在此点上进行缓冲区分析,默认单位killo
816814
function buffer() {
815+
var unit = $('#unitSelect').children('option:selected').val();
817816
if (unit != 'null') {
818817
widgets.alert.clearAlert();
819818
greatThanZero(steps);
@@ -842,6 +841,7 @@ <h5 class='panel-title text-center'>京深路卧龙岗隧道路段</h5>
842841
//先draw一个点 再在此点上画圆多边形
843842
//有默认单位kilometer
844843
function circle() {
844+
var unit = $('#unitSelect').children('option:selected').val();
845845
widgets.alert.clearAlert();
846846
greatThanZero(steps);
847847
if (coordinate && checkIsNum(distance) && checkIsNum(radius) && steps > 0) {

0 commit comments

Comments
 (0)