首页 发现 帮助
注册 登录
fuyuhang
/
Project_yhfu
镜像自地址 http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git
关注 1
点赞 0
派生 0
文件 工单管理 0 Wiki
目录树: a74ae6bc0a
分支列表 标签列表
Project_yhfu
/
public
/
supermap
/
examples
/
leaflet
/
turf_measurement.html

turf_measurement.html 32 KB
文件历史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882 
  1. <!--********************************************************************
    2. 

  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
    3. 

  3. *********************************************************************-->
    4. 

  4. <!DOCTYPE html>
    5. 

  5. <html>
    6. 

  6. <head>
    7. 

  7.     <meta charset="UTF-8">
    8. 

  8.     <title data-i18n="resources.title_turfMeasurement"></title>
    9. 

  9.     <script type="text/javascript" include="bootstrap,bootstrap-select,widgets.alert"
    10. 

  10.             src="../js/include-web.js"></script>
    11. 

  11. </head>
    12. 

  12. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    13. 

  13. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    14. 

  14. <script type="text/javascript" include="turf,leaflet.draw" src="../../dist/leaflet/include-leaflet.js"></script>
    15. 

  15. 

  16. <script type="text/javascript">
    17. 

  17.     var host = window.isLocal ? window.server : "https://iserver.supermap.io",
    18. 

  18.         url = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
    19. 

  19.         turfLayer, resultLayer, urlWorld,
    20. 

  20.         totalLat = 0, totalLng = 0, averageLat, averageLng, distance, geo, coordinate,
    21. 

  21.         choose, marker1, marker2, marker3, editableLayers, drawControl,
    22. 

  22.         bearing, baseLayer, result, val,
    23. 

  23.         radius, steps, point;
    24. 

  24. 

  25.     var map = L.map('map', {
    26. 

  26.         crs: L.CRS.EPSG4326,
    27. 

  27.         center: {lon: 116.383572, lat: 39.914714},
    28. 

  28.         maxZoom: 18,
    29. 

  29.         zoom: 10
    30. 

  30.     });
    31. 

  31. 

  32. 

  33.     //底图
    34. 

  34.     baseLayer = L.supermap.tiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);
    35. 

  35. 

  36.     initEditView();
    37. 

  37. 

  38.     bindEvents();
    39. 

  39. 

  40.     $('#menuSelect').change();
    41. 

  41. 

  42.     function initEditView() {
    43. 

  43.         var infoView = L.control({position: 'topright'});
    44. 

  44.         infoView.onAdd = function () {
    45. 

  45.             var me = this;
    46. 

  46.             me._div = L.DomUtil.create('div');
    47. 

  47.             me._div.style.width = '350px';
    48. 

  48.             me._div.innerHTML = "<div class='panel panel-primary editPane' id='editPane'>"+
    49. 

  49.                 "<div class='panel-heading'>"+
    50. 

  50.             "<h5 class='panel-title text-center'>"+ resources.text_Jingshen + "</h5>"+
    51. 

  51.             "</div>"+
    52. 

  52.             "<div class='panel panel-body chooseItems' style='margin-bottom:0px;padding-bottom: 0px'>"+
    53. 

  53.             "<select class='form-control' id='menuSelect' >"+
    54. 

  54.             "<option value='along' selected='selected'>along</option>"+
    55. 

  55.             "<option value='area'>area</option>"+
    56. 

  56.             "<option value='bbox'>bbox</option>"+
    57. 

  57.             "<option value='center'>center</option>"+
    58. 

  58.             "<option value='destination'>destination</option>"+
    59. 

  59.             "<option value='distance'>distance</option>"+
    60. 

  60.             "<option value='midpoint'>midpoint</option>"+
    61. 

  61.             "<option value='square'>square</option>"+
    62. 

  62.             "<option value='greatCircle'>greatCircle</option>"+
    63. 

  63.             "<option value='bezierSpline'>bezierSpline</option>"+
    64. 

  64.             "<option value='buffer'>buffer</option>"+
    65. 

  65.             "<option value='circle'>circle</option>"+
    66. 

  66.             "</select>"+
    67. 

  67.             "</div>"+
    68. 

  68.             "<hr/>"+
    69. 

  69.             "<div class='panel-body' id='params' style='padding-top: 0px'>"+
    70. 

  70.             "<div class='input-group'>"+
    71. 

  71.             "<span class='input-group-addon'>" + resources.text_distanceUnit + "</span>"+
    72. 

  72.             "<select class='form-control' id='unitSelect' name='unitSelect'>"+
    73. 

  73.             "<option value='kilometers' selected = 'selected'>kilometers</option>"+
    74. 

  74.             "<option value='miles'>miles</option>"+
    75. 

  75.             "<option value='degrees'>degrees</option>"+
    76. 

  76.             "<option value='radians'>radians</option>"+
    77. 

  77.             "</select>"+
    78. 

  78.             "</div>"+
    79. 

  79.             "<p></p>"+
    80. 

  80.             "<div class='input-group'>"+
    81. 

  81.             "<span class='input-group-addon'>" + resources.text_distanceToStart + "</span>"+
    82. 

  82.             "<input id='distance' type='text' class='form-control' placeholder=" + resources.text_distance + " val='0.5'/>"+
    83. 

  83.             "</div>"+
    84. 

  84.             "<p></p>"+
    85. 

  85.             "<div class='input-group'>"+
    86. 

  86.             "<span class='input-group-addon'>" + resources.text_position + "</span>"+
    87. 

  87.             "<input id='bearing' type='text' class='form-control' placeholder=" + resources.text_positionRange + "/>"+
    88. 

  88.             "</div>"+
    89. 

  89.             "<p></p>"+
    90. 

  90.             "<div align='right' class='input-group'>"+
    91. 

  91.             "<input type='button' id='calc' class='btn btn-primary' value=" + resources.btn_getResult + "/>"+
    92. 

  92.             "</div>"+
    93. 

  93.             "</div>"+
    94. 

  94.             "</div>";
    95. 

  95.             handleMapEvent(me._div, me._map);
    96. 

  96.             return me._div;
    97. 

  97.         };
    98. 

  98.         infoView.addTo(map);
    99. 

  99.         hidePanel();
    100. 

  100.         reset();
    101. 

  101.     }
    102. 

  102. 

  103.     //初始化事件
    104. 

  104.     function bindEvents() {
    105. 

  105. //        //获取单位
    106. 

  106. //        $('#unitSelect').change(function () {
    107. 

  107. //            unit = $('#unitSelect').children('option:selected').val();
    108. 

  108. //        });
    109. 

  109.         //控件栏取消地图事件
    110. 

  110.         $("#editPane").mouseover(function (e) {
    111. 

  111.             map.dragging.disable();
    112. 

  112.         });
    113. 

  113.         $("#editPane").mouseout(function () {
    114. 

  114.             map.dragging.enable();
    115. 

  115.         });
    116. 

  116. 

  117.         $('#menuSelect').change(function () {
    118. 

  118.             widgets.alert.clearAlert();
    119. 

  119. 

  120.             //初始化图层
    121. 

  121.             removeLayer();
    122. 

  122. 

  123.             //初始化图层
    124. 

  124.             resetLayers();
    125. 

  125. 

  126.             url = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
    127. 

  127.             baseLayer = L.supermap.tiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);
    128. 

  128.             //第一个隐藏右侧菜单
    129. 

  129. 

  130.             choose = $('#menuSelect').children('option:selected').val();
    131. 

  131.             reset();
    132. 

  132. 

  133.             //对应菜单显示
    134. 

  134.             if (choose === 'along') {
    135. 

  135.                 $('.panel-heading>h5').text(resources.text_Jingshen);
    136. 

  136.                 drawLine();
    137. 

  137.                 setCenter();
    138. 

  138.                 setAlongIcon();
    139. 

  139.                 clearControl();
    140. 

  140.                 $('.input-group:eq(0)').show();
    141. 

  141.                 $('.input-group:eq(1)').show();
    142. 

  142.                 $('.input-group:eq(2)').hide();
    143. 

  143.                 $('.input-group:eq(3)').show();
    144. 

  144.                 $('.input-group:eq(1)>span').text(resources.text_distanceToStart);
    145. 

  145.                 $('.input-group:eq(1)>input').val("0.5");
    146. 

  146. 

  147.                 $('.input-group:eq(1)>input').focusout(function () {
    148. 

  148.                     val = $('.input-group:eq(1)>input').val();
    149. 

  149.                     var unit = $('#unitSelect').children('option:selected').val();
    150. 

  150.                     if ((unit === 'kilometers' && val > 1.1753172567467551) || (unit === 'miles' && val > 0.7303085417726581) || (unit === 'degrees' && val > 0.010566564943528475) || (unit === 'radians' && val > 0.00018442134893248942)) {
    151. 

  151.                         widgets.alert.showAlert(resources.text_beyondDistance, false, 260);
    152. 

  152.                         $('.input-group:eq(1)>input').val('');
    153. 

  153.                     }
    154. 

  154.                     else {
    155. 

  155.                         widgets.alert.clearAlert();
    156. 

  156.                     }
    157. 

  157.                 });
    158. 

  158. 

  159.                 $('#calc').val(resources.text_getPoint);
    160. 

  160.             }
    161. 

  161.             else if (choose === 'area') {
    162. 

  162.                 widgets.alert.showAlert(resources.msg_drawTurfPolygon, true, 500);
    163. 

  163.                 $('.panel-heading>h5').text(resources.text_measureArea);
    164. 

  164.                 clearControl();
    165. 

  165.                 setDefaultCenter(39.90455699411283, 116.407283, 11);
    166. 

  166.                 drawController(false, false, true);
    167. 

  167.                 drawing();
    168. 

  168.                 $('.input-group:eq(0)').hide();
    169. 

  169.                 $('.input-group:eq(1)').hide();
    170. 

  170.                 $('.input-group:eq(2)').hide();
    171. 

  171.                 $('.input-group:eq(3)').show();
    172. 

  172.                 $('#calc').val(resources.text_getArea);
    173. 

  173.             }
    174. 

  174.             else if (choose === 'bbox') {
    175. 

  175.                 $('.panel-heading>h5').text(resources.text_JingshenBounds);
    176. 

  176.                 setDefaultCenter(39.70182899926848, 116.11948400050001, 11);
    177. 

  177.                 drawLine();
    178. 

  178.                 setCenter();
    179. 

  179.                 clearControl();
    180. 

  180.                 $('.input-group:eq(0)').hide();
    181. 

  181.                 $('.input-group:eq(1)').hide();
    182. 

  182.                 $('.input-group:eq(2)').hide();
    183. 

  183.                 $('.input-group:eq(3)').show();
    184. 

  184.                 $('#calc').val(resources.text_getBounds);
    185. 

  185.             }
    186. 

  186.             else if (choose === 'destination') {
    187. 

  187.                 $('.panel-heading>h5').text(resources.text_pointToTarget);
    188. 

  188.                 setDefaultCenter(39.90455699411283, 116.407283, 7);
    189. 

  189.                 $('.input-group:eq(0)').show();
    190. 

  190.                 $('.input-group:eq(1)').show();
    191. 

  191.                 $('.input-group:eq(2)').show();
    192. 

  192.                 $('.input-group:eq(3)').show();
    193. 

  193.                 $('.input-group:eq(1)>span').text(resources.text_distanceToStart);
    194. 

  194.                 $('.input-group:eq(1)>input').unbind('focusout').val("0.5");
    195. 

  195.                 $('.input-group:eq(2)>span').text(resources.text_position);
    196. 

  196.                 $('.input-group:eq(2)>input').attr('placeholder', resources.text_positionRange);
    197. 

  197.                 setDestinationIcon();
    198. 

  198.                 clearControl();
    199. 

  199.                 $('#calc').val(resources.text_getTargetPoint);
    200. 

  200.             }
    201. 

  201.             else if (choose === 'distance') {
    202. 

  202.                 $('.panel-heading>h5').text(resources.text_distanceBetween);
    203. 

  203.                 setDefaultCenter(39.80771500024742, 116.72499999899998, 8);
    204. 

  204.                 clearControl();
    205. 

  205.                 setDistanceIcon();
    206. 

  206.                 $('.input-group:eq(0)').show();
    207. 

  207.                 $('.input-group:eq(1)').hide();
    208. 

  208.                 $('.input-group:eq(2)').hide();
    209. 

  209.                 $('.input-group:eq(3)').show();
    210. 

  210.                 $('#calc').val(resources.text_getDistance);
    211. 

  211.             }
    212. 

  212.             else if (choose === 'midpoint') {
    213. 

  213.                 $('.panel-heading>h5').text(resources.text_middlePointBetween);
    214. 

  214.                 setDefaultCenter(39.90455699411283, 116.407283, 7);
    215. 

  215.                 clearControl();
    216. 

  216.                 setMidpointIcon();
    217. 

  217.                 $('.input-group:eq(0)').hide();
    218. 

  218.                 $('.input-group:eq(1)').hide();
    219. 

  219.                 $('.input-group:eq(2)').hide();
    220. 

  220.                 $('.input-group:eq(3)').show();
    221. 

  221.                 $('#calc').val(resources.text_getMiddlePoint);
    222. 

  222.             }
    223. 

  223.             else if (choose === 'greatCircle') {
    224. 

  224.                 $('.panel-heading>h5').text(resources.text_bigRoundRoute);
    225. 

  225.                 isUseWorldMap(1);
    226. 

  226.                 clearControl();
    227. 

  227.                 setDefaultCenter(40, 112, 3);
    228. 

  228.                 setGreatCircleIcon();
    229. 

  229.                 $('.input-group:eq(0)').hide();
    230. 

  230.                 $('.input-group:eq(1)').hide();
    231. 

  231.                 $('.input-group:eq(2)').hide();
    232. 

  232.                 $('.input-group:eq(3)').show();
    233. 

  233.                 $('#calc').val(resources.text_getRoute);
    234. 

  234.             }
    235. 

  235.             else if (choose === 'square') {
    236. 

  236.                 widgets.alert.showAlert(resources.msg_externalTangentSquare, true, 500);
    237. 

  237.                 $('.panel-heading>h5').text(resources.text_externalTangentSquare);
    238. 

  238.                 setDefaultCenter(39.70914100034369, 116.11697300062501, 14);
    239. 

  239.                 clearControl();
    240. 

  240.                 drawController(false, false, false, false, true);
    241. 

  241.                 drawing();
    242. 

  242.                 $('.input-group:eq(0)').hide();
    243. 

  243.                 $('.input-group:eq(1)').hide();
    244. 

  244.                 $('.input-group:eq(2)').hide();
    245. 

  245.                 $('.input-group:eq(3)').show();
    246. 

  246.                 $('#calc').val(resources.text_getExternalTangentSquare);
    247. 

  247.             }
    248. 

  248.             else if (choose === 'center') {
    249. 

  249.                 $('.panel-heading>h5').text(resources.text_scenicSpotsCenter);
    250. 

  250.                 setDefaultCenter(39.93393099410061, 116.38035099999959, 12);
    251. 

  251.                 clearControl();
    252. 

  252.                 setCenterIcon();
    253. 

  253.                 $('.input-group:eq(0)').hide();
    254. 

  254.                 $('.input-group:eq(1)').hide();
    255. 

  255.                 $('.input-group:eq(2)').hide();
    256. 

  256.                 $('.input-group:eq(3)').show();
    257. 

  257. 

  258. 

  259.                 $('#calc').val(resources.text_getScenicSpotCenter);
    260. 

  260.             }
    261. 

  261.             else if (choose === 'bezierSpline') {
    262. 

  262.                 $('.panel-heading>h5').text(resources.text_bezier);
    263. 

  263.                 setDefaultCenter(40.676116230453765, 116.55439124389999, 12);
    264. 

  264.                 clearControl();
    265. 

  265.                 whiteRiver();
    266. 

  266.                 $('.input-group:eq(0)').hide();
    267. 

  267.                 $('.input-group:eq(1)').hide();
    268. 

  268.                 $('.input-group:eq(2)').hide();
    269. 

  269.                 $('.input-group:eq(3)').show();
    270. 

  270.                 $('#calc').val(resources.text_getBezier);
    271. 

  271.             }
    272. 

  272.             else if (choose === 'buffer') {
    273. 

  273.                 $('.panel-heading>h5').text(resources.text_buffer);
    274. 

  274.                 widgets.alert.showAlert(resources.msg_markPoint, true);
    275. 

  275.                 clearControl();
    276. 

  276.                 setDefaultCenter(40, 116.83, 9);
    277. 

  277.                 drawController(false, false, false, false, false, false, true);
    278. 

  278.                 drawing();
    279. 

  279. 

  280.                 $('.input-group:eq(0)').show();//单位
    281. 

  281.                 $('.input-group:eq(1)').show();//步长
    282. 

  282.                 $('.input-group:eq(2)').show();//半径
    283. 

  283.                 $('.input-group:eq(3)').show();
    284. 

  284.                 $('.input-group:eq(1)>span').text(resources.text_step);//步长
    285. 

  285.                 $('.input-group:eq(1)>input').unbind('focusout').val("1");
    286. 

  286.                 $('.input-group:eq(2)>span').text(resources.text_radius);//半径
    287. 

  287.                 $('.input-group:eq(2)>input').val("10");
    288. 

  288.                 $('#calc').val(resources.text_getBuffer);
    289. 

  289.             }
    290. 

  290.             else if (choose === 'circle') {
    291. 

  291.                 $('.panel-heading>h5').text(resources.text_polygon);
    292. 

  292.                 widgets.alert.showAlert(resources.msg_markPoint, true);
    293. 

  293.                 clearControl();
    294. 

  294.                 setDefaultCenter(40, 116.83, 9);
    295. 

  295.                 drawController(false, false, false, false, false, false, true);
    296. 

  296.                 drawing();
    297. 

  297.                 $('.title').show();
    298. 

  298.                 $('.title>span').text('circle');
    299. 

  299.                 $('.area').hide();
    300. 

  300.                 $('.input-group:eq(0)').show();//单位
    301. 

  301.                 $('.input-group:eq(1)').show();//步长
    302. 

  302.                 $('.input-group:eq(2)').show();//半径
    303. 

  303.                 $('.input-group:eq(3)').show();
    304. 

  304.                 $('.input-group:eq(1)>span').text(resources.text_step);//步长
    305. 

  305.                 $('.input-group:eq(1)>input').unbind('focusout').val("10");
    306. 

  306.                 $('.input-group:eq(2)>span').text(resources.text_radius);//半径
    307. 

  307.                 $('.input-group:eq(2)>input').val("10");
    308. 

  308.                 $('#calc').val(resources.text_getPolygon);
    309. 

  309.             }
    310. 

  310.             else {
    311. 

  311.                 widgets.alert.showAlert(resources.msg_noMethod, false);
    312. 

  312.             }
    313. 

  313.             showPanel();
    314. 

  314.         });
    315. 

  315. 

  316. 

  317.         //生成对应距离点点击事件
    318. 

  318.         $('#calc').click(function () {
    319. 

  319. 

  320.             //获取自定义距离
    321. 

  321.             distance = $('#distance').val();
    322. 

  322.             //获取自定方位
    323. 

  323.             bearing = $('#bearing').val();
    324. 

  324.             //步长
    325. 

  325.             steps = distance;
    326. 

  326. 

  327.             //半径
    328. 

  328.             radius = bearing;
    329. 

  329.             //角度
    330. 

  330. 

  331.             angle = distance;
    332. 

  332. 

  333.             meths = {
    334. 

  334.                 "along": along,
    335. 

  335.                 "area": area,
    336. 

  336.                 "bbox": bbox,
    337. 

  337.                 "destination": destination,
    338. 

  338.                 "distance": turf_Distance,
    339. 

  339.                 "midpoint": midpoint,
    340. 

  340.                 "greatCircle": greatCircle,
    341. 

  341.                 "square": square,
    342. 

  342.                 "center": center,
    343. 

  343.                 "bezierSpline": bezierSpline,
    344. 

  344.                 "buffer": buffer,
    345. 

  345.                 "circle": circle,
    346. 

  346.             };
    347. 

  347.             if (!meths[choose]) {
    348. 

  348.                 widgets.alert.showAlert(resources.msg_illegal, false);
    349. 

  349.             }
    350. 

  350.             meths[choose]();
    351. 

  351.         });
    352. 

  352.     }
    353. 

  353. 

  354. 

  355.     //添加draw的控件
    356. 

  356.     function drawController(toolbar, polyline, polygon, circle, rectangle, circlemarker, marker) {
    357. 

  357.         editableLayers = new L.FeatureGroup();
    358. 

  358.         map.addLayer(editableLayers);
    359. 

  359.         var options = {
    360. 

  360.             position: 'topleft',
    361. 

  361.             draw: {
    362. 

  362.                 toolbar: toolbar,
    363. 

  363.                 polyline: polyline,
    364. 

  364.                 polygon: polygon,
    365. 

  365.                 circle: circle,
    366. 

  366.                 rectangle: rectangle,
    367. 

  367.                 circlemarker: circlemarker,
    368. 

  368.                 marker: marker,
    369. 

  369.                 remove: {},
    370. 

  370.             }
    371. 

  371.         };
    372. 

  372.         drawControl = new L.Control.Draw(options);
    373. 

  373.         map.addControl(drawControl);
    374. 

  374.         handleMapEvent(drawControl.getContainer(), map);
    375. 

  375.     }
    376. 

  376. 

  377.     //开始画图
    378. 

  378.     function drawing() {
    379. 

  379.         map.on(L.Draw.Event.CREATED, function (e) {
    380. 

  380.             var type = e.layerType,
    381. 

  381.                 layer = e.layer;
    382. 

  382.             geo = layer.toGeoJSON();
    383. 

  383.             coordinate = geo.geometry.coordinates;
    384. 

  384.             editableLayers.addLayer(layer);
    385. 

  385.         });
    386. 

  386.     }
    387. 

  387. 

  388.     //京深路数据
    389. 

  389.     function drawLine() {
    390. 

  390.         roadLine = L.polyline([
    391. 

  391.             [39.70771500024742, 116.12499999899998],
    392. 

  392.             [39.70738300038022, 116.124684999625],
    393. 

  393.             [39.70738300038022, 116.124684999625],
    394. 

  394.             [39.70630000081341, 116.12366300000001],
    395. 

  395.             [39.70630000081341, 116.12366300000001],
    396. 

  396.             [39.70526299956156, 116.122695000875],
    397. 

  397.             [39.70182899926848, 116.11948400050001],
    398. 

  398.             [39.70182899926848, 116.11948400050001],
    399. 

  399.             [39.70001099999569, 116.117782000875],
    400. 

  400.             [39.70001099999569, 116.117782000875],
    401. 

  401.             [39.69914100034369, 116.11697300062501]
    402. 

  402.         ]).addTo(map);
    403. 

  403.         marker1 = L.marker([39.70771500024742, 116.12499999899998]), marker2 = L.marker([39.69914100034369, 116.11697300062501]);
    404. 

  404.         coordinate = roadLine.toGeoJSON().geometry.coordinates;
    405. 

  405.     }
    406. 

  406. 

  407.     //白河
    408. 

  408.     function whiteRiver() {
    409. 

  409.         riverLine = L.polyline([
    410. 

  410.             [40.675731250349635, 116.44468018273878],
    411. 

  411.             [40.67514041485476, 116.45764286288912],
    412. 

  412.             [40.675374865714495, 116.47234517561137],
    413. 

  413.             [40.68284917168584, 116.4864209475681],
    414. 

  414.             [40.6926826346566, 116.50806547030137],
    415. 

  415.             [40.701383778180805, 116.51490194761084],
    416. 

  416.             [40.68381460602459, 116.54403108790551],
    417. 

  417.             [40.676116230453765, 116.55439124389999],
    418. 

  418.             [40.67476948501498, 116.56406552077725],
    419. 

  419.             [40.68296164868846, 116.58188801112561],
    420. 

  420.             [40.70683026321353, 116.5925083591713],
    421. 

  421.             [40.72097728359635, 116.59861159022633],
    422. 

  422.             [40.71945202953016, 116.61194828377546],
    423. 

  423.             [40.71459183686403, 116.6157779223366]
    424. 

  424.         ]).addTo(map);
    425. 

  425.         coordinate = riverLine.toGeoJSON().geometry.coordinates;
    426. 

  426.     }
    427. 

  427. 

  428.     //设置中心点
    429. 

  429.     function setCenter() {
    430. 

  430.         //初始化
    431. 

  431.         totalLng = 0, totalLat = 0;
    432. 

  432.         for (var i = 0; i < coordinate.length; i++) {
    433. 

  433.             totalLat += coordinate[i][0];
    434. 

  434.         }
    435. 

  435.         averageLat = totalLat / coordinate.length;
    436. 

  436. 

  437.         for (var j = 0; j < coordinate.length; j++) {
    438. 

  438.             totalLng += coordinate[j][1];
    439. 

  439.         }
    440. 

  440.         averageLng = totalLng / coordinate.length;
    441. 

  441.         map.setView(L.latLng(averageLng, averageLat), 15);
    442. 

  442.     }
    443. 

  443. 

  444.     //设置自定义中心
    445. 

  445.     function setDefaultCenter(lng, lat, zoom) {
    446. 

  446.         var options = {
    447. 

  447.             "animate": true,
    448. 

  448.             "duration": 0.15,
    449. 

  449.             "easeLinearity": 0.25,
    450. 

  450.             "noMoveStart": false,
    451. 

  451.         };
    452. 

  452.         map.flyTo(L.latLng(lng, lat), zoom, options);
    453. 

  453.     }
    454. 

  454. 

  455.     //判断底图
    456. 

  456.     function isUseWorldMap(bool) {
    457. 

  457.         if (bool) {
    458. 

  458.             urlWorld = host + "/iserver/services/map-world/rest/maps/World";
    459. 

  459.             url = urlWorld;
    460. 

  460.             baseLayer = L.supermap.tiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);
    461. 

  461.         }
    462. 

  462.         else {
    463. 

  463.             url = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
    464. 

  464.             baseLayer = L.supermap.tiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);
    465. 

  465.         }
    466. 

  466.     }
    467. 

  467. 

  468.     //设置along方法的icon
    469. 

  469.     function setAlongIcon() {
    470. 

  470.         var startIcon = L.icon({
    471. 

  471.             iconUrl: '../img/start_trans.png',
    472. 

  472.             iconSize: [20, 20],
    473. 

  473.         });
    474. 

  474.         var endIcon = L.icon({
    475. 

  475.             iconUrl: '../img/end_trans.png',
    476. 

  476.             iconSize: [20, 20],
    477. 

  477.         });
    478. 

  478.         L.marker(marker1.getLatLng(), {icon: startIcon}).addTo(map);
    479. 

  479.         L.marker(marker2.getLatLng(), {icon: endIcon}).addTo(map);
    480. 

  480.     }
    481. 

  481. 

  482.     //设置center方法的icon
    483. 

  483.     function setCenterIcon() {
    484. 

  484.         turfLayer.process("Helper.multiPoint", {
    485. 

  485.             //北京周边景区
    486. 

  486.             "coordinates": ([[116.38035099999959, 39.93393099410061], [116.34482800000002, 39.914760994108605], [116.40732099999964, 39.916013994108134], [116.44748600000042, 39.93767799409907]]),
    487. 

  487.         });
    488. 

  488.     }
    489. 

  489. 

  490.     //设置distance方法的Icon
    491. 

  491.     function setDistanceIcon() {
    492. 

  492.         turfLayer.process("Helper.multiPoint", {
    493. 

  493.             //北京2天津
    494. 

  494.             "coordinates": ([[116.407283, 39.90455699411283], [117.215268, 39.12096299445415]]),
    495. 

  495.         });
    496. 

  496.     }
    497. 

  497. 

  498. 

  499.     //设置destination方法的Icon.
    500. 

  500.     function setDestinationIcon() {
    501. 

  501.         marker3 = L.marker([39.90455699411283, 116.407283]);
    502. 

  502.         var startIcon = L.icon({
    503. 

  503.             iconUrl: '../img/start_trans.png',
    504. 

  504.             iconSize: [20, 20],
    505. 

  505.         });
    506. 

  506.         L.marker(marker3.getLatLng(), {icon: startIcon}).addTo(map);
    507. 

  507.     }
    508. 

  508. 

  509.     //设置midpoint方法的Icon
    510. 

  510.     function setMidpointIcon() {
    511. 

  511.         turfLayer.process("Helper.multiPoint", {
    512. 

  512.             //北京2天津
    513. 

  513.             "coordinates": ([[116.407283, 39.90455699411283], [117.215268, 39.12096299445415]]),
    514. 

  514.         });
    515. 

  515.     }
    516. 

  516. 

  517.     //设置greatCircle方法的Icon
    518. 

  518.     function setGreatCircleIcon() {
    519. 

  519.         turfLayer.process("Helper.multiPoint", {
    520. 

  520.             //北京2布拉格
    521. 

  521.             "coordinates": ([[116.407283, 39.90455699411283], [51.052494, 18.852219]])
    522. 

  522.         });
    523. 

  523.     }
    524. 

  524. 

  525.     //右侧panel显示
    526. 

  526.     function showPanel() {
    527. 

  527.         $('#params').show();
    528. 

  528.     }
    529. 

  529. 

  530.     //右侧panel隐藏
    531. 

  531.     function hidePanel() {
    532. 

  532.         $('#params').hide();
    533. 

  533.     }
    534. 

  534. 

  535.     //初始化页面
    536. 

  536.     function reset() {
    537. 

  537.         $('.chooseItems').show();
    538. 

  538.         hidePanel();
    539. 

  539.         $('.panel-heading>h5').text(resources.text_measure);
    540. 

  540.         $('#unitSelect option:first').prop("selected", 'selected');
    541. 

  541.         $('#distance').val('');
    542. 

  542.         $('#bearing').val('');
    543. 

  543.         coordinate = 0;
    544. 

  544.     }
    545. 

  545. 

  546. 

  547.     function clearControl() {
    548. 

  548.         if (drawControl) {
    549. 

  549.             map.removeControl(drawControl);
    550. 

  550.         }
    551. 

  551.     }
    552. 

  552. 

  553.     //清空当前图层
    554. 

  554.     function removeLayer() {
    555. 

  555.         map.eachLayer(function (layer) {
    556. 

  556.             if (layer !== baseLayer) {
    557. 

  557.                 layer.removeFrom(map);
    558. 

  558.             }
    559. 

  559.         });
    560. 

  560.     }
    561. 

  561. 

  562.     //初始化生成图层
    563. 

  563.     function resetLayers() {
    564. 

  564.         turfLayer = L.supermap.turfLayer({
    565. 

  565.             attribution: " <span>© <a href='https://turfjs.org/' target='_blank'>turfjs</a></span>",
    566. 

  566.             style: function (feature) {
    567. 

  567.                 return {
    568. 

  568.                     color: "rgb(0,153,255)",
    569. 

  569.                     opacity: 1,
    570. 

  570.                     fillColor: "rgb(0,153,255)",
    571. 

  571.                     fillOpacity: 0.1,
    572. 

  572.                     weight: 6
    573. 

  573.                 };
    574. 

  574.             }
    575. 

  575.         }).addTo(map);
    576. 

  576. 

  577. 

  578.         resultLayer = L.supermap.turfLayer({
    579. 

  579.             attribution: "",
    580. 

  580.             style: function (feature) {
    581. 

  581. 

  582.                 return {
    583. 

  583.                     color: "rgb(255,0,0)",
    584. 

  584.                     opacity: 1,
    585. 

  585.                     fillColor: "rgb(255,0,0)",
    586. 

  586.                     fillOpacity: 0.1,
    587. 

  587.                     weight: 6
    588. 

  588.                 };
    589. 

  589.             }
    590. 

  590.         }).addTo(map);
    591. 

  591.     }
    592. 

  592. 

  593.     // 判断input是否是数字
    594. 

  594.     function checkIsNum(num) {
    595. 

  595.         var reg = /^\d+(\.\d+)?$/g;
    596. 

  596.         if (reg.test(num)) {
    597. 

  597.             return 1;
    598. 

  598.         } else {
    599. 

  599.             widgets.alert.showAlert(resources.msg_illegalFillIn, false, 260)
    600. 

  600.         }
    601. 

  601.     }
    602. 

  602. 

  603.     //判断是否在[-180,180]范围内
    604. 

  604.     function isInRange(val) {
    605. 

  605.         // return val >= -180 && val <= 180;
    606. 

  606.         if (val < -180 || val > 180) {
    607. 

  607.             widgets.alert.showAlert(resources.msg_inputValue, false, 260);
    608. 

  608.         }
    609. 

  609.         else {
    610. 

  610.             return 1;
    611. 

  611.         }
    612. 

  612.     }
    613. 

  613. 

  614. 

  615.     function greatThanZero(steps) {
    616. 

  616.         var reg = /^[1-9]\d*(\.\d+)?$/g;
    617. 

  617.         if (!reg.test(steps)) {
    618. 

  618.             widgets.alert.showAlert(resources.msg_stepSize, false);
    619. 

  619.         }
    620. 

  620.     }
    621. 

  621. 

  622. 

  623.     //turf along方法
    624. 

  624.     function along() {
    625. 

  625.         var unit = $('#unitSelect').children('option:selected').val();
    626. 

  626.         if (unit != 'null' && unit != undefined) {
    627. 

  627.             if (checkIsNum(distance) && coordinate) {
    628. 

  628.                 turfLayer.process("Helper.lineString", {
    629. 

  629.                     "coordinates": coordinate,
    630. 

  630.                 }, function (line) {
    631. 

  631.                     resultLayer.process("Measurement.along", {
    632. 

  632.                         "line": line,
    633. 

  633.                         "distance": distance,
    634. 

  634.                         "units": unit,
    635. 

  635.                     });
    636. 

  636.                 });
    637. 

  637.             }
    638. 

  638.         }
    639. 

  639.         else {
    640. 

  640.             widgets.alert.showAlert(resources.msg_selectUnit, false, 260);
    641. 

  641.         }
    642. 

  642.     }
    643. 

  643. 

  644.     //turf area方法
    645. 

  645.     function area() {
    646. 

  646.         if (coordinate) {
    647. 

  647.             turfLayer.process("Helper.polygon", {
    648. 

  648.                 "coordinates": coordinate,
    649. 

  649.             }, function (polygon) {
    650. 

  650.                 resultLayer.process("Measurement.area", {
    651. 

  651.                     "geojson": polygon
    652. 

  652.                 }, function (e) {
    653. 

  653.                     result = e + resources.msg_sqm;
    654. 

  654.                     widgets.alert.showAlert(result, true);
    655. 

  655.                     $(" input[ id='area' ] ").val(result);
    656. 

  656.                 });
    657. 

  657.             });
    658. 

  658.         }
    659. 

  659.         else {
    660. 

  660.             widgets.alert.showAlert(resources.msg_drawLayer, false, 260);
    661. 

  661.         }
    662. 

  662.     }
    663. 

  663. 

  664.     //turf bbox方法
    665. 

  665.     function bbox() {
    666. 

  666.         if (coordinate) {
    667. 

  667.             turfLayer.process("Helper.lineString", {
    668. 

  668.                 "coordinates": coordinate,
    669. 

  669.             }, function (e) {
    670. 

  670.                 resultLayer.process("Measurement.bbox", {
    671. 

  671.                     "geojson": e
    672. 

  672.                 }, function (bbox) {
    673. 

  673.                     resultLayer.process("Measurement.bboxPolygon", {
    674. 

  674.                         "bbox": bbox
    675. 

  675.                     });
    676. 

  676.                 });
    677. 

  677.             });
    678. 

  678.         }
    679. 

  679.     }
    680. 

  680. 

  681.     //turf destination方法
    682. 

  682.     function destination() {
    683. 

  683.         var unit = $('#unitSelect').children('option:selected').val();
    684. 

  684.         if (unit != 'null' && unit != undefined) {
    685. 

  685.             widgets.alert.clearAlert();
    686. 

  686.             if (checkIsNum(distance) && isInRange(bearing)) {
    687. 

  687.                 coordinates = [116.407283, 39.90455699411283];
    688. 

  688.                 resultLayer.process("Measurement.destination", {
    689. 

  689.                     "origin": coordinates,
    690. 

  690.                     "distance": distance,
    691. 

  691.                     "bearing": bearing,
    692. 

  692.                     "units": unit,
    693. 

  693.                 });
    694. 

  694. 

  695.             }
    696. 

  696.         }
    697. 

  697.         else {
    698. 

  698.             widgets.alert.showAlert(resources.msg_selectUnit, false, 260)
    699. 

  699.         }
    700. 

  700.     }
    701. 

  701. 

  702.     //turf distance方法
    703. 

  703.     function turf_Distance() {
    704. 

  704.         var disUnits = {
    705. 

  705.             "kilometers": "千米",
    706. 

  706.             "miles": "英里",
    707. 

  707.             "degrees": "角度",
    708. 

  708.             "radians": "弧度",
    709. 

  709.         };
    710. 

  710.         var inUnits = {
    711. 

  711.             "千米": "kilometers",
    712. 

  712.             "英里": "miles",
    713. 

  713.             "角度": "degrees",
    714. 

  714.             "弧度": "radians",
    715. 

  715.         };
    716. 

  716.         var unit = $('#unitSelect').children('option:selected').val();
    717. 

  717.         if (unit != 'null' && unit != undefined) {
    718. 

  718.             resultLayer.process("Measurement.distance", {
    719. 

  719.                 "from": turfLayer.toGeoJSON().features[0].geometry.coordinates[0],
    720. 

  720.                 "to": turfLayer.toGeoJSON().features[0].geometry.coordinates[1],
    721. 

  721.                 "units": unit,
    722. 

  722.             }, function (e) {
    723. 

  723.                 resultNum = e;
    724. 

  724.             });
    725. 

  725.             unit = disUnits[unit];
    726. 

  726.             result = resultNum + unit;
    727. 

  727.             widgets.alert.showAlert(result, true, 260);
    728. 

  728.             $(" input[ id='area' ] ").val(result);
    729. 

  729.             unit = inUnits[unit];
    730. 

  730.         }
    731. 

  731.         else {
    732. 

  732.             widgets.alert.showAlert(resources.msg_selectUnit, false, 260)
    733. 

  733.         }
    734. 

  734. 

  735.     }
    736. 

  736. 

  737.     //turf midpoint
    738. 

  738.     function midpoint() {
    739. 

  739. 

  740.         resultLayer.process("Measurement.midpoint", {
    741. 

  741.             "point1": turfLayer.toGeoJSON().features[0].geometry.coordinates[0],
    742. 

  742.             "point2": turfLayer.toGeoJSON().features[0].geometry.coordinates[1],
    743. 

  743.         });
    744. 

  744.         resultLayer.eachLayer(function (layer) {
    745. 

  745.             layer.setIcon(L.icon({
    746. 

  746.                 iconUrl: '../img/marker-gold.png',
    747. 

  747.                 iconSize: [20, 20],
    748. 

  748.             })).bindPopup(resources.text_center);
    749. 

  749.         })
    750. 

  750. 

  751.     }
    752. 

  752. 

  753.     //turf greatCircle
    754. 

  754.     function greatCircle() {
    755. 

  755.         resultLayer.process("Measurement.greatCircle", {
    756. 

  756.             "start": turfLayer.toGeoJSON().features[0].geometry.coordinates[0],
    757. 

  757.             "end": turfLayer.toGeoJSON().features[0].geometry.coordinates[1],
    758. 

  758.             "properties": {'name': '北京 to 布拉格'},
    759. 

  759.             "npoints": 100,
    760. 

  760.             "offset": 10
    761. 

  761.         });
    762. 

  762.     }
    763. 

  763. 

  764.     //turf square
    765. 

  765.     function square() {
    766. 

  766.         if (!coordinate) {
    767. 

  767.             return;
    768. 

  768.         }
    769. 

  769.         turfLayer.process("Helper.polygon", {
    770. 

  770.             "coordinates": coordinate,
    771. 

  771.         }, function (e) {
    772. 

  772.             turfLayer.process("Measurement.bbox", {
    773. 

  773.                 "geojson": e
    774. 

  774.             }, function (box) {
    775. 

  775.                 resultLayer.process("Measurement.square", {
    776. 

  776.                     "bbox": box
    777. 

  777.                 }, function (bbox) {
    778. 

  778.                     resultLayer.process("Measurement.bboxPolygon", {
    779. 

  779.                         "bbox": bbox
    780. 

  780.                     });
    781. 

  781.                 }, null, false);
    782. 

  782.             }, null, false);
    783. 

  783.         }, null, false);
    784. 

  784.     }
    785. 

  785. 

  786.     //turf center
    787. 

  787.     function center() {
    788. 

  788.         resultLayer.process("Measurement.center", {
    789. 

  789.             "geojson": turfLayer.toGeoJSON()
    790. 

  790.         });
    791. 

  791.         resultLayer.eachLayer(function (layer) {
    792. 

  792.             layer.setIcon(L.icon({
    793. 

  793.                 iconUrl: '../img/marker-gold.png',
    794. 

  794.                 iconSize: [30, 30],
    795. 

  795.             })).bindPopup(resources.text_center);
    796. 

  796.         });
    797. 

  797.     }
    798. 

  798. 

  799.     //turf bezierSpline
    800. 

  800.     function bezierSpline() {
    801. 

  801.         if (coordinate) {
    802. 

  802.             turfLayer.process("Helper.lineString", {
    803. 

  803.                 "coordinates": coordinate,
    804. 

  804.             }, function (line) {
    805. 

  805.                 resultLayer.process("Transformation.bezierSpline", {
    806. 

  806.                     "line": line,
    807. 

  807.                     "resolution": 10000,
    808. 

  808.                     "sharpness": 0.85
    809. 

  809.                 });
    810. 

  810.             });
    811. 

  811.         }
    812. 

  812.     }
    813. 

  813. 

  814.     //turf buffer
    815. 

  815.     //先draw一个点 再在此点上进行缓冲区分析,默认单位killo
    816. 

  816.     function buffer() {
    817. 

  817.         var unit = $('#unitSelect').children('option:selected').val();
    818. 

  818.         if (unit != 'null') {
    819. 

  819.             widgets.alert.clearAlert();
    820. 

  820.             greatThanZero(steps);
    821. 

  821.             if (coordinate && checkIsNum(distance) && checkIsNum(radius) && steps > 0) {
    822. 

  822.                 turfLayer.process("Helper.point", {
    823. 

  823.                     "coordinates": coordinate,
    824. 

  824.                 }, function (point) {
    825. 

  825.                     resultLayer.process("Transformation.buffer", {
    826. 

  826.                         "geojson": point,
    827. 

  827.                         "radius": radius,
    828. 

  828.                         "steps": parseFloat(steps),
    829. 

  829.                         "units": unit,
    830. 

  830.                     });
    831. 

  831.                 });
    832. 

  832.             } else {
    833. 

  833.                 widgets.alert.showAlert(resources.msg_incorrectInfo, false, 260);
    834. 

  834.             }
    835. 

  835.         }
    836. 

  836.         else {
    837. 

  837.             widgets.alert.showAlert(resources.msg_selectUnit, false, 260);
    838. 

  838.         }
    839. 

  839. 

  840.     }
    841. 

  841. 

  842.     //turf circle
    843. 

  843.     //先draw一个点 再在此点上画圆多边形
    844. 

  844.     //有默认单位kilometer
    845. 

  845.     function circle() {
    846. 

  846.         var unit = $('#unitSelect').children('option:selected').val();
    847. 

  847.         widgets.alert.clearAlert();
    848. 

  848.         greatThanZero(steps);
    849. 

  849.         if (coordinate && checkIsNum(distance) && checkIsNum(radius) && steps > 0) {
    850. 

  850.             turfLayer.process("Helper.point", {
    851. 

  851.                 "coordinates": coordinate,
    852. 

  852.             }, function (point) {
    853. 

  853.                 resultLayer.process("Transformation.circle", {
    854. 

  854.                     "center": point,
    855. 

  855.                     "radius": radius,
    856. 

  856.                     "steps": parseFloat(steps),
    857. 

  857.                     "units": unit,
    858. 

  858.                     "properties": {},
    859. 

  859.                 });
    860. 

  860.             });
    861. 

  861.         }
    862. 

  862.         else {
    863. 

  863.             widgets.alert.showAlert(resources.msg_incorrectInfo, false, 260);
    864. 

  864.         }
    865. 

  865.     }
    866. 

  866. 

  867.     function handleMapEvent(div, map) {
    868. 

  868.         if (!div || !map) {
    869. 

  869.             return;
    870. 

  870.         }
    871. 

  871.         div.addEventListener('mouseover', function () {
    872. 

  872.             map.scrollWheelZoom.disable();
    873. 

  873.             map.doubleClickZoom.disable();
    874. 

  874.         });
    875. 

  875.         div.addEventListener('mouseout', function () {
    876. 

  876.             map.scrollWheelZoom.enable();
    877. 

  877.             map.doubleClickZoom.enable();
    878. 

  878.         });
    879. 

  879.     }
    880. 

  880. </script>
    881. 

  881. </body>
    882. 

  882. </html>
    883.