Home Explore Help
Register Sign In
fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git
Watch 1
Star 0
Fork 0
Files Issues 0 Wiki
Tree: a74ae6bc0a
Branches Tags
Project_yhfu
/
public
/
supermap
/
examples
/
openlayers
/
turf_measurement.html

turf_measurement.html 33 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893 
  1. <!--********************************************************************
    2. 

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

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

  4. <!DOCTYPE html>
    5. 

  5. <html lang="en">
    6. 

  6. <head>
    7. 

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

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

  9.     <style>
    10. 

  10.         .editPane {
    11. 

  11.             position: absolute;
    12. 

  12.             right: 10px;
    13. 

  13.             top: 10px;
    14. 

  14.             width: 350px;
    15. 

  15.             text-align: center;
    16. 

  16.             background: #FFF;
    17. 

  17.             z-index: 1000;
    18. 

  18.         }
    19. 

  19.     </style>
    20. 

  20. </head>
    21. 

  21. <body style='margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;'>
    22. 

  22. <div id='map' style='margin:0 auto;width: 100%;height: 100%'></div>
    23. 

  23. <div class='panel panel-primary editPane' id='editPane'>
    24. 

  24.     <div class='panel-heading'>
    25. 

  25.         <h5 class='panel-title text-center' data-i18n="resources.text_Jingshen"></h5>
    26. 

  26.     </div>
    27. 

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

  28.         <select class='form-control' id='menuSelect'>
    29. 

  29.             <option value='along' selected='selected'>along</option>
    30. 

  30.             <option value='area'>area</option>
    31. 

  31.             <option value='bbox'>bbox</option>
    32. 

  32.             <option value='center'>center</option>
    33. 

  33.             <option value='destination'>destination</option>
    34. 

  34.             <option value='distance'>distance</option>
    35. 

  35.             <option value='midpoint'>midpoint</option>
    36. 

  36.             <option value='square'>square</option>
    37. 

  37.             <option value='greatCircle'>greatCircle</option>
    38. 

  38.             <option value='bezierSpline'>bezierSpline</option>
    39. 

  39.             <option value='buffer'>buffer</option>
    40. 

  40.             <option value='circle'>circle</option>
    41. 

  41.         </select>
    42. 

  42.     </div>
    43. 

  43.     <hr/>
    44. 

  44.     <div class='panel-body' id='params' style="padding-top: 0px">
    45. 

  45. 

  46.         <div class='input-group' id="drawMethods">
    47. 

  47.             <div class="btn-group" role="group" aria-label="..." id="draw">
    48. 

  48.                 <button id="drawPoint" value='Point' type="button" class="btn btn-default"
    49. 

  49.                         data-i18n="resources.text_input_value_drawPoint">
    50. 

  50.                 </button>
    51. 

  51.                 <button id="drawPolygon" value='Polygon' type="button" class="btn btn-default"
    52. 

  52.                         data-i18n="resources.text_input_value_drawPolygon">
    53. 

  53.                 </button>
    54. 

  54.                 <button id="none" value='None' type="button" class="btn btn-default" data-i18n="resources.btn_notDraw">
    55. 

  55.                 </button>
    56. 

  56.                 <button id="clearLayer" value='Clear' type="button" class="btn btn-default"
    57. 

  57.                         data-i18n="resources.text_input_value_clear">
    58. 

  58.                 </button>
    59. 

  59.             </div>
    60. 

  60.         </div>
    61. 

  61.         <p>
    62. 

  62.         <div class='input-group'>
    63. 

  63.             <span class='input-group-addon' data-i18n="resources.text_distanceUnit"></span>
    64. 

  64.             <select class='form-control' id='unitSelect'>
    65. 

  65.                 <option value='kilometers' selected='selected'>kilometers</option>
    66. 

  66.                 <option value='miles'>miles</option>
    67. 

  67.                 <option value='degrees'>degrees</option>
    68. 

  68.                 <option value='radians'>radians</option>
    69. 

  69.             </select>
    70. 

  70.         </div>
    71. 

  71.         <p></p>
    72. 

  72.         <div class='input-group'>
    73. 

  73.             <span class='input-group-addon' data-i18n="resources.text_distanceToStart"></span>
    74. 

  74.             <input id='distance' type='text' class='form-control' data-i18n="[placeholder]resources.text_distance"/>
    75. 

  75.         </div>
    76. 

  76.         <p></p>
    77. 

  77.         <div class='input-group'>
    78. 

  78.             <span class='input-group-addon'></span>
    79. 

  79.             <input id='bearing' type='text' class='form-control' data-i18n="[placeholder]resources.text_positionRange"/>
    80. 

  80.         </div>
    81. 

  81.         <p></p>
    82. 

  82.         <div align='right' class='input-group'>
    83. 

  83.             <input type='button' id='calc' class='btn btn-primary' data-i18n="[value]resources.text_getPoint"/>&nbsp
    84. 

  84.         </div>
    85. 

  85.     </div>
    86. 

  86. </div>
    87. 

  87. </body>
    88. 

  88. <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
    89. 

  89. <script type="text/javascript" include="turf" src="../../dist/ol/include-ol.js"></script>
    90. 

  90. <script>
    91. 

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

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

  93.         urlWorld = host + "/iserver/services/map-world/rest/maps/World",
    94. 

  94.         container = document.getElementById('info'), distance, geo, coordinate,
    95. 

  95.         choose, bearing, result,
    96. 

  96.         radius, steps, draw, drawSource,
    97. 

  97. 

  98.         overlay = new ol.Overlay(({
    99. 

  99.             element: container,
    100. 

  100.             autoPan: true,
    101. 

  101.             autoPanAnimation: {
    102. 

  102.                 duration: 250
    103. 

  103.             }
    104. 

  104.         }));
    105. 

  105. 

  106.     //添加底图
    107. 

  107.     map = new ol.Map({
    108. 

  108.         target: 'map',
    109. 

  109.         controls: ol.control.defaults({attributionOptions: {collapsed: false}})
    110. 

  110.             .extend([new ol.supermap.control.Logo()]),
    111. 

  111.         view: new ol.View({
    112. 

  112.             center: [116.407283, 39.90455699411283],
    113. 

  113.             zoom: 11,
    114. 

  114.             projection: 'EPSG:4326'
    115. 

  115.         }),
    116. 

  116.         overlays: [overlay]
    117. 

  117.     });
    118. 

  118. 

  119.     var baseLayer = new ol.layer.Tile({
    120. 

  120.         source: new ol.source.TileSuperMapRest({
    121. 

  121.             url: url,
    122. 

  122.             prjCoordSys: {"epsgCode": 4326}
    123. 

  123.         }),
    124. 

  124.         projection: 'EPSG:4326'
    125. 

  125.     });
    126. 

  126.     map.addLayer(baseLayer);
    127. 

  127. 

  128.     //初始化的图层
    129. 

  129.     var turfSource = new ol.source.Turf({
    130. 

  130.         wrapX: false,
    131. 

  131.         attributions: "© <a href='https://turfjs.org/' target='_blank'>turfjs<span></a> with"
    132. 

  132.     });
    133. 

  133. 

  134.     map.addLayer(new ol.layer.Vector({
    135. 

  135.         source: turfSource,
    136. 

  136.         style: new ol.style.Style({
    137. 

  137.             stroke: new ol.style.Stroke({
    138. 

  138.                 color: 'rgba(0,153,255,1)',
    139. 

  139.                 width: 6
    140. 

  140.             }),
    141. 

  141.             image: new ol.style.Icon(({
    142. 

  142.                 crossOrigin: 'anonymous',
    143. 

  143.                 src: '../img/marker-icon.png',
    144. 

  144.                 scale: 0.7
    145. 

  145.             })),
    146. 

  146.             fill: new ol.style.Fill({
    147. 

  147.                 color: 'rgba(0,153,255,0.1)'
    148. 

  148.             })
    149. 

  149.         })
    150. 

  150.     }));
    151. 

  151. 

  152.     //结果图层
    153. 

  153.     var resultSource = new ol.source.Turf({
    154. 

  154.         wrapX: false,
    155. 

  155.         attributions: ""
    156. 

  156.     });
    157. 

  157. 

  158.     map.addLayer(new ol.layer.Vector({
    159. 

  159.         source: resultSource,
    160. 

  160.         style: new ol.style.Style({
    161. 

  161.             stroke: new ol.style.Stroke({
    162. 

  162.                 color: 'rgb(255,0,0)',
    163. 

  163.                 width: 4
    164. 

  164.             }),
    165. 

  165.             image: new ol.style.Icon(({
    166. 

  166.                 crossOrigin: 'anonymous',
    167. 

  167.                 src: '../img/marker-gold.png',
    168. 

  168.                 scale: 0.7
    169. 

  169.             })),
    170. 

  170.             fill: new ol.style.Fill({
    171. 

  171.                 color: 'rgba(178,34,34,0.3)'
    172. 

  172.             })
    173. 

  173.         }),
    174. 

  174.     }));
    175. 

  175. 

  176.     //初始化数据
    177. 

  177.     function bindEvents() {
    178. 

  178.         $('.chooseItems').show();
    179. 

  179.         hidePanel();
    180. 

  180.         $('.panel-heading>h5').text('turf测量');
    181. 

  181.         $("#menuSelect").change(function (e) {
    182. 

  182.             //初始化图层
    183. 

  183.             isUseWorldMap(0);
    184. 

  184.             overlay.setPosition(undefined);
    185. 

  185.             clearSource();
    186. 

  186.             resetSelect();
    187. 

  187. 

  188.             choose = $('#menuSelect').children('option:selected').val();
    189. 

  189.             //对应菜单显示
    190. 

  190.             if (choose === 'along') {
    191. 

  191.                 widgets.alert.clearAlert();
    192. 

  192.                 rodeCoordinate();
    193. 

  193.                 drawALine();
    194. 

  194.                 setAlongIcon();
    195. 

  195.                 $('.panel-heading>h5').text(resources.text_Jingshen);
    196. 

  196.                 map.getView().animate({zoom: 15}, {duration: 500, center: [116.12499999899998, 39.70771500024742]});
    197. 

  197.                 $('.input-group:eq(0)').hide();
    198. 

  198.                 $('.input-group:eq(1)').show();
    199. 

  199.                 $('.input-group:eq(2)').show();
    200. 

  200.                 $('.input-group:eq(2)>span').text(resources.text_distanceToStart);
    201. 

  201.                 $('.input-group:eq(2)>input').attr('placeholder', resources.text_totalLength).val("0.5");
    202. 

  202.                 $('.input-group:eq(3)').hide();
    203. 

  203.                 $('.input-group:eq(4)').show();
    204. 

  204.                 $('#calc').val(resources.text_getPoint);
    205. 

  205.             }
    206. 

  206.             else if (choose === 'area') {
    207. 

  207.                 widgets.alert.clearAlert();
    208. 

  208.                 widgets.alert.showAlert(resources.msg_drawPolygonAndClick, true);
    209. 

  209.                 drawing();
    210. 

  210.                 $('#drawPoint').hide();
    211. 

  211.                 $('#drawPolygon').show();
    212. 

  212.                 $('.panel-heading>h5').text(resources.text_measureArea);
    213. 

  213.                 map.getView().animate({zoom: 11}, {duration: 500, center: [116.407283, 39.90455699411283]});
    214. 

  214.                 $('.input-group:eq(0)').show();
    215. 

  215.                 $('.input-group:eq(1)').hide();
    216. 

  216.                 $('.input-group:eq(2)').hide();
    217. 

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

  218.                 $('.input-group:eq(4)').show();
    219. 

  219.                 $('#calc').val(resources.text_getArea);
    220. 

  220. 

  221.             } else if (choose === 'bbox') {
    222. 

  222.                 widgets.alert.clearAlert();
    223. 

  223.                 rodeCoordinate();
    224. 

  224.                 drawALine();
    225. 

  225.                 $('.panel-heading>h5').text(resources.text_JingshenBounds);
    226. 

  226.                 map.getView().animate({zoom: 16}, {duration: 500, center: [116.12499999899998, 39.70171500024742]});
    227. 

  227.                 $('.input-group:eq(0)').hide();
    228. 

  228.                 $('.input-group:eq(1)').hide();
    229. 

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

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

  231.                 $('.input-group:eq(4)').show();
    232. 

  232.                 $('#calc').val(resources.text_getBounds);
    233. 

  233.             }
    234. 

  234.             else if (choose === 'destination') {
    235. 

  235.                 //北京
    236. 

  236.                 widgets.alert.clearAlert();
    237. 

  237.                 setDestinationIcon();
    238. 

  238.                 $('.panel-heading>h5').text(resources.text_pointToTarget);
    239. 

  239.                 map.getView().animate({zoom: 10}, {duration: 500, center: [116.407283, 39.90455699411283]});
    240. 

  240.                 $('.input-group:eq(0)').hide();
    241. 

  241.                 $('.input-group:eq(1)').show();
    242. 

  242.                 $('.input-group:eq(2)').show();
    243. 

  243.                 $('.input-group:eq(3)').show();
    244. 

  244.                 $('.input-group:eq(4)').show();
    245. 

  245.                 $('.input-group:eq(2)>span').text(resources.text_distanceToStart);
    246. 

  246.                 $('.input-group:eq(2)>input').attr('placeholder', resources.text_distanceToStart).val("0.5");
    247. 

  247.                 $('.input-group:eq(3)>span').text(resources.text_position);
    248. 

  248.                 $('.input-group:eq(3)>input').attr('placeholder', resources.text_positionRange);
    249. 

  249.                 $('#calc').val(resources.text_getTargetPoint);
    250. 

  250. 

  251.             }
    252. 

  252.             else if (choose === 'center') {
    253. 

  253.                 widgets.alert.clearAlert();
    254. 

  254.                 setCenterIcon();
    255. 

  255.                 $('.panel-heading>h5').text(resources.text_scenicSpotsCenter);
    256. 

  256.                 map.getView().animate({zoom: 12}, {duration: 500, center: [116.38035099999959, 39.93393099410061]});
    257. 

  257.                 $('.input-group:eq(0)').hide();
    258. 

  258.                 $('.input-group:eq(1)').hide();
    259. 

  259.                 $('.input-group:eq(2)').hide();
    260. 

  260.                 $('.input-group:eq(3)').hide();
    261. 

  261.                 $('.input-group:eq(4)').show();
    262. 

  262.                 $('#calc').val(resources.text_getScenicSpotCenter);
    263. 

  263.             }
    264. 

  264.             else if (choose === 'distance') {
    265. 

  265.                 widgets.alert.clearAlert();
    266. 

  266.                 setDistanceIcon();
    267. 

  267.                 $('.panel-heading>h5').text(resources.text_distanceBetween);
    268. 

  268.                 map.getView().animate({zoom: 8}, {duration: 500, center: [116.12499999899998, 39.70771500024742]});
    269. 

  269.                 $('.input-group:eq(0)').hide();
    270. 

  270.                 $('.input-group:eq(1)').show();
    271. 

  271.                 $('.input-group:eq(2)').hide();
    272. 

  272.                 $('.input-group:eq(3)').hide();
    273. 

  273.                 $('.input-group:eq(4)').show();
    274. 

  274.                 $('#calc').val(resources.text_getDistance);
    275. 

  275.             }
    276. 

  276.             else if (choose === 'midpoint') {
    277. 

  277.                 widgets.alert.clearAlert();
    278. 

  278.                 setMidpointIcon();
    279. 

  279.                 $('.panel-heading>h5').text(resources.text_middlePointBetween);
    280. 

  280.                 map.getView().animate({zoom: 8}, {duration: 500, center: [116.12499999899998, 39.70771500024742]});
    281. 

  281.                 $('.input-group:eq(0)').hide();
    282. 

  282.                 $('.input-group:eq(1)').hide();
    283. 

  283.                 $('.input-group:eq(2)').hide();
    284. 

  284.                 $('.input-group:eq(3)').hide();
    285. 

  285.                 $('.input-group:eq(4)').show();
    286. 

  286.                 $('#calc').val(resources.text_getMiddlePoint);
    287. 

  287.             }
    288. 

  288.             else if (choose === 'greatCircle') {
    289. 

  289.                 widgets.alert.clearAlert();
    290. 

  290.                 isUseWorldMap(1);
    291. 

  291.                 setGreatCircleIcon();
    292. 

  292.                 map.getView().animate({zoom: 4}, {duration: 500, center: [90.407283, 40.90455699411283]});
    293. 

  293.                 $('.panel-heading>h5').text(resources.text_bigRoundRoute);
    294. 

  294.                 $('.input-group:eq(0)').hide();
    295. 

  295.                 $('.input-group:eq(1)').hide();
    296. 

  296.                 $('.input-group:eq(2)').hide();
    297. 

  297.                 $('.input-group:eq(3)').hide();
    298. 

  298.                 $('.input-group:eq(4)').show();
    299. 

  299.                 $('#calc').val(resources.text_getRoute);
    300. 

  300.             }
    301. 

  301.             else if (choose === 'buffer') {
    302. 

  302.                 widgets.alert.clearAlert();
    303. 

  303.                 drawing();
    304. 

  304.                 $('#drawPolygon').hide();
    305. 

  305.                 $('#drawPoint').show();
    306. 

  306.                 widgets.alert.showAlert(resources.msg_markPoint, true);
    307. 

  307.                 map.getView().animate({zoom: 12}, {duration: 500, center: [116.407283, 39.90455699411283]});
    308. 

  308.                 $('.panel-heading>h5').text(resources.text_buffer);
    309. 

  309.                 $('.input-group:eq(0)').show();
    310. 

  310.                 $('.input-group:eq(1)').show();//单位
    311. 

  311.                 $('.input-group:eq(2)').show();//步长
    312. 

  312.                 $('.input-group:eq(3)').show(); //半径
    313. 

  313.                 $('.input-group:eq(4)').show();
    314. 

  314.                 $('.input-group:eq(3)>span').text(resources.text_radius);//半径
    315. 

  315.                 $('.input-group:eq(3)>input').attr('placeholder', resources.text_radius).val("10");
    316. 

  316.                 $('.input-group:eq(2)>span').text(resources.text_step);//步长
    317. 

  317.                 $('.input-group:eq(2)>input').attr('placeholder', resources.text_step).val("10");
    318. 

  318.                 $('#calc').val(resources.text_getBuffer);
    319. 

  319.             }
    320. 

  320.             else if (choose === 'circle') {
    321. 

  321.                 widgets.alert.clearAlert();
    322. 

  322.                 drawing();
    323. 

  323.                 $('#drawPolygon').hide();
    324. 

  324.                 $('#drawPoint').show();
    325. 

  325.                 widgets.alert.showAlert(resources.msg_markPoint, true);
    326. 

  326.                 map.getView().animate({zoom: 12}, {duration: 500, center: [116.407283, 39.90455699411283]});
    327. 

  327.                 $('.panel-heading>h5').text(resources.text_polygon);
    328. 

  328.                 $('.input-group:eq(0)').show();
    329. 

  329.                 $('.input-group:eq(1)').show();//单位
    330. 

  330.                 $('.input-group:eq(2)').show();//步长
    331. 

  331.                 $('.input-group:eq(3)').show(); //半径
    332. 

  332.                 $('.input-group:eq(4)').show();
    333. 

  333.                 $('.input-group:eq(3)>span').text(resources.text_radius);//半径
    334. 

  334.                 $('.input-group:eq(3)>input').attr('placeholder', resources.text_radius).val("10");
    335. 

  335.                 $('.input-group:eq(2)>span').text(resources.text_step);//步长
    336. 

  336.                 $('.input-group:eq(2)>input').attr('placeholder', resources.text_step).val("10");
    337. 

  337.                 $('#calc').val(resources.text_getPolygon);
    338. 

  338. 

  339.             }
    340. 

  340.             else if (choose === 'bezierSpline') {
    341. 

  341.                 widgets.alert.clearAlert();
    342. 

  342.                 $('.panel-heading>h5').text(resources.text_bezier);
    343. 

  343.                 map.getView().animate({zoom: 12}, {
    344. 

  344.                     duration: 500,
    345. 

  345.                     center: [116.55439124389999, 40.676116230453765]
    346. 

  346.                 });
    347. 

  347.                 $('.input-group:eq(0)').hide();
    348. 

  348.                 $('.input-group:eq(1)').hide();//单位
    349. 

  349.                 $('.input-group:eq(2)').hide();//步长
    350. 

  350.                 $('.input-group:eq(3)').hide(); //半径
    351. 

  351.                 $('.input-group:eq(4)').show();
    352. 

  352.                 whiteRiver();
    353. 

  353.                 setBezierLine();
    354. 

  354.                 $('#calc').val(resources.text_getBezier);
    355. 

  355.             }
    356. 

  356.             else if (choose === 'square') {
    357. 

  357.                 widgets.alert.clearAlert();
    358. 

  358.                 setSquarePolygon();
    359. 

  359.                 $('.panel-heading>h5').text(resources.text_externalTangentSquare);
    360. 

  360.                 map.getView().animate({zoom: 12}, {duration: 500, center: [116.18865966796875, 39.88904724121094]});
    361. 

  361.                 $('.input-group:eq(0)').hide();//draw控件
    362. 

  362.                 $('.input-group:eq(1)').hide();//单位
    363. 

  363.                 $('.input-group:eq(2)').hide();//距离
    364. 

  364.                 $('.input-group:eq(3)').hide(); //步长
    365. 

  365.                 $('.input-group:eq(4)').show();
    366. 

  366.                 $('#calc').val(resources.text_getExternalTangentSquare);
    367. 

  367.             }
    368. 

  368.             else {
    369. 

  369.                 widgets.alert.clearAlert(resources.msg_noMethod, false);
    370. 

  370.             }
    371. 

  371.             showPanel();
    372. 

  372.         });
    373. 

  373. 

  374.         //生成对应距离点点击事件
    375. 

  375.         $('#calc').click(function () {
    376. 

  376.             //获取自定义距离
    377. 

  377.             distance = $('#distance').val();
    378. 

  378.             //获取自定方位
    379. 

  379.             bearing = $('#bearing').val();
    380. 

  380.             //步长
    381. 

  381.             steps = distance;
    382. 

  382.             //半径
    383. 

  383.             radius = bearing;
    384. 

  384.             //角度
    385. 

  385.             angle = distance;
    386. 

  386.             meths = {
    387. 

  387.                 "along": along,
    388. 

  388.                 "area": area,
    389. 

  389.                 "bbox": bbox,
    390. 

  390.                 "destination": destination,
    391. 

  391.                 "distance": turf_Distance,
    392. 

  392.                 "midpoint": midpoint,
    393. 

  393.                 "greatCircle": greatCircle,
    394. 

  394.                 "square": square,
    395. 

  395.                 "center": center,
    396. 

  396.                 "bezierSpline": bezierSpline,
    397. 

  397.                 "buffer": buffer,
    398. 

  398.                 "circle": circle,
    399. 

  399.             };
    400. 

  400.             if (!meths[choose]) {
    401. 

  401.                 widgets.alert.showAlert(resources.msg_illegal, false);
    402. 

  402.             }
    403. 

  403.             meths[choose]();
    404. 

  404.         });
    405. 

  405. 

  406.         //获取单位
    407. 

  407.         $('#unitSelect').change(function () {
    408. 

  408.             unit = $('#unitSelect').children('option:selected').val();
    409. 

  409.         });
    410. 

  410.     }
    411. 

  411. 

  412.     bindEvents();
    413. 

  413.     $("#menuSelect").change();
    414. 

  414. 

  415.     //白河
    416. 

  416.     function whiteRiver() {
    417. 

  417.         coordinate = [
    418. 

  418.             [116.44468018273878, 40.675731250349635],
    419. 

  419.             [116.45764286288912, 40.67514041485476],
    420. 

  420.             [116.47234517561137, 40.675374865714495],
    421. 

  421.             [116.4864209475681, 40.68284917168584],
    422. 

  422.             [116.50806547030137, 40.6926826346566],
    423. 

  423.             [116.51490194761084, 40.701383778180805],
    424. 

  424.             [116.54403108790551, 40.68381460602459],
    425. 

  425.             [116.55439124389999, 40.676116230453765],
    426. 

  426.             [116.56406552077725, 40.67476948501498],
    427. 

  427.             [116.58188801112561, 40.68296164868846],
    428. 

  428.             [116.5925083591713, 40.70683026321353],
    429. 

  429.             [116.59861159022633, 40.72097728359635],
    430. 

  430.             [116.61194828377546, 40.71945202953016],
    431. 

  431.             [116.6157779223366, 40.71459183686403]
    432. 

  432.         ];
    433. 

  433.     }
    434. 

  434. 

  435.     //	京深路数据
    436. 

  436.     function rodeCoordinate() {
    437. 

  437.         coordinate = [
    438. 

  438.             [116.12499999899998, 39.70771500024742],
    439. 

  439.             [116.124684999625, 39.70738300038022],
    440. 

  440.             [116.124684999625, 39.70738300038022],
    441. 

  441.             [116.12366300000001, 39.70630000081341],
    442. 

  442.             [116.12366300000001, 39.70630000081341],
    443. 

  443.             [116.122695000875, 39.70526299956156],
    444. 

  444.             [116.11948400050001, 39.70182899926848],
    445. 

  445.             [116.11948400050001, 39.70182899926848],
    446. 

  446.             [116.117782000875, 39.70001099999569],
    447. 

  447.             [116.117782000875, 39.70001099999569],
    448. 

  448.             [116.11697300062501, 39.69914100034369]
    449. 

  449.         ];
    450. 

  450.     }
    451. 

  451. 

  452.     //自定义的一条线
    453. 

  453.     function drawALine() {
    454. 

  454.         turfSource.process("Helper.lineString", {
    455. 

  455.             "coordinates": coordinate,
    456. 

  456.         });
    457. 

  457.     }
    458. 

  458. 

  459.     function setAlongIcon() {
    460. 

  460.         //添加目的地
    461. 

  461.         var start = new ol.geom.Point([116.12499999899998, 39.70771500024742]);
    462. 

  462.         var end = new ol.geom.Point([116.11697300062501, 39.69914100034369]);
    463. 

  463. 

  464.         var iconStart = new ol.style.Style({
    465. 

  465.             image: new ol.style.Icon(({
    466. 

  466.                 src: '../img/start_trans.png'
    467. 

  467.             }))
    468. 

  468.         });
    469. 

  469.         var iconEnd = new ol.style.Style({
    470. 

  470.             image: new ol.style.Icon(({
    471. 

  471.                 src: '../img/end_trans.png'
    472. 

  472.             }))
    473. 

  473.         });
    474. 

  474. 

  475.         var feature1 = new ol.Feature(start);
    476. 

  476.         var feature2 = new ol.Feature(end);
    477. 

  477.         turfSource.addFeature(feature2);
    478. 

  478.         turfSource.addFeature(feature1);
    479. 

  479.         feature1.setStyle(iconStart);
    480. 

  480.         feature2.setStyle(iconEnd);
    481. 

  481.     }
    482. 

  482. 

  483.     //判断底图
    484. 

  484.     function isUseWorldMap(bool) {
    485. 

  485.         if (bool) {
    486. 

  486.             baseLayer.setSource(new ol.source.TileSuperMapRest({
    487. 

  487.                 url: urlWorld,
    488. 

  488.                 prjCoordSys: {"epsgCode": 4326}
    489. 

  489.             }));
    490. 

  490.         }
    491. 

  491.         else {
    492. 

  492.             baseLayer.setSource(new ol.source.TileSuperMapRest({
    493. 

  493.                 url: url,
    494. 

  494.                 prjCoordSys: {"epsgCode": 4326}
    495. 

  495.             }));
    496. 

  496.         }
    497. 

  497.     }
    498. 

  498. 

  499.     function resetSelect() {
    500. 

  500.         $('#unitSelect option:first').prop("selected", 'selected');
    501. 

  501.         $('#distance').val('');
    502. 

  502.         $('#bearing').val('');
    503. 

  503.     }
    504. 

  504. 

  505.     //清除draw
    506. 

  506.     function clearInteraction() {
    507. 

  507.         if (draw) {
    508. 

  508.             map.removeInteraction(draw);
    509. 

  509.         }
    510. 

  510.     }
    511. 

  511. 

  512.     //draw
    513. 

  513.     function drawing() {
    514. 

  514.         var buttons = $('.btn-group').children();
    515. 

  515.         buttons.map(function (key) {
    516. 

  516.             var value = buttons[key].value;
    517. 

  517.             if (value === 'None') {
    518. 

  518.                 $(buttons[key]).on('click', function () {
    519. 

  519.                     clearInteraction();
    520. 

  520.                 });
    521. 

  521.                 return;
    522. 

  522.             }
    523. 

  523.             if (value === 'Clear') {
    524. 

  524.                 $(buttons[key]).on('click', function () {
    525. 

  525.                     clearInteraction();
    526. 

  526.                     drawSource.clear();
    527. 

  527.                 });
    528. 

  528.                 return;
    529. 

  529.             }
    530. 

  530.             $(buttons[key]).on('click', function () {
    531. 

  531.                 clearInteraction();
    532. 

  532.                 draw = new ol.interaction.Draw({
    533. 

  533.                     source: drawSource,
    534. 

  534.                     //type:('Point', 'LineString', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon' or 'Circle')
    535. 

  535.                     type: buttons[key].value,
    536. 

  536.                     snapTolerance: 20
    537. 

  537.                 });
    538. 

  538.                 map.addInteraction(draw);
    539. 

  539.                 draw.on('drawend', function (evt) {
    540. 

  540.                     coordinate = evt.feature.getGeometry().getCoordinates();
    541. 

  541.                     clearInteraction();
    542. 

  542.                 });
    543. 

  543. 

  544.             });
    545. 

  545.         });
    546. 

  546.         drawSource = new ol.source.Vector({wrapX: false});
    547. 

  547.         var vector = new ol.layer.Vector({
    548. 

  548.             source: drawSource
    549. 

  549.         });
    550. 

  550.         map.addLayer(vector);
    551. 

  551.     }
    552. 

  552. 

  553.     //右侧panel显示
    554. 

  554.     function showPanel() {
    555. 

  555.         $('.panel-body').show();
    556. 

  556.     }
    557. 

  557. 

  558.     //右侧panel隐藏
    559. 

  559.     function hidePanel() {
    560. 

  560.         $('.panel-body').hide();
    561. 

  561.         $('.panel-body:eq(0)').show();
    562. 

  562.     }
    563. 

  563. 

  564.     // 判断input是否是数字
    565. 

  565.     function checkIsNum(num) {
    566. 

  566.         var reg = /^\d+(\.\d+)?$/g;
    567. 

  567.         if (reg.test(num)) {
    568. 

  568.             return 1;
    569. 

  569.         } else {
    570. 

  570.             widgets.alert.showAlert(resources.msg_incorrectInfo, false);
    571. 

  571.         }
    572. 

  572.     }
    573. 

  573. 

  574.     //判断是否在[-180,180]范围内
    575. 

  575.     function isInRange(val) {
    576. 

  576.         if (val < -180 || val > 180) {
    577. 

  577.             widgets.alert.showAlert(resources.msg_inputValue, false);
    578. 

  578.         }
    579. 

  579.         else {
    580. 

  580.             return 1;
    581. 

  581.         }
    582. 

  582.     }
    583. 

  583. 

  584.     function greatThanZero(steps) {
    585. 

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

  586.         if (!reg.test(steps)) {
    587. 

  587.             widgets.alert.showAlert(resources.msg_stepSize, false);
    588. 

  588.         }
    589. 

  589.     }
    590. 

  590. 

  591.     //设置center方法的icon
    592. 

  592.     function setCenterIcon() {
    593. 

  593.         turfSource.process("Helper.multiPoint", {
    594. 

  594.             //北京周边景区
    595. 

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

  596.         }, function (e) {
    597. 

  597.             geo = e;
    598. 

  598.         });
    599. 

  599.     }
    600. 

  600. 

  601.     //设置distance方法的Icon
    602. 

  602.     function setDistanceIcon() {
    603. 

  603.         turfSource.process("Helper.multiPoint", {
    604. 

  604.             //北京2天津
    605. 

  605.             "coordinates": ([[116.407283, 39.90455699411283], [117.215268, 39.12096299445415]]),
    606. 

  606.         }, function (e) {
    607. 

  607.             geo = e;
    608. 

  608.         });
    609. 

  609.     }
    610. 

  610. 

  611.     //设置destination方法的Icon
    612. 

  612.     function setDestinationIcon() {
    613. 

  613.         //设置起点
    614. 

  614.         var iconStyle1 = new ol.style.Style({
    615. 

  615.             image: new ol.style.Icon(({
    616. 

  616.                 anchor: [0.5, 1],
    617. 

  617.                 src: '../img/start_trans.png'
    618. 

  618.             }))
    619. 

  619.         });
    620. 

  620.         var start = new ol.geom.Point([116.407283, 39.90455699411283]);
    621. 

  621.         var feature1 = new ol.Feature(start);
    622. 

  622.         feature1.setStyle(iconStyle1);
    623. 

  623.         turfSource.addFeature(feature1);
    624. 

  624.     }
    625. 

  625. 

  626.     //设置midpoint方法的Icon
    627. 

  627.     function setMidpointIcon() {
    628. 

  628.         turfSource.process("Helper.multiPoint", {
    629. 

  629.             //北京2天津
    630. 

  630.             "coordinates": ([[116.407283, 39.90455699411283], [117.215268, 39.12096299445415]]),
    631. 

  631.         }, function (e) {
    632. 

  632. 

  633.             geo = e;
    634. 

  634.         });
    635. 

  635.     }
    636. 

  636. 

  637.     //设置greatCircle方法的Icon
    638. 

  638.     function setGreatCircleIcon() {
    639. 

  639.         turfSource.process("Helper.multiPoint", {
    640. 

  640.             //北京2布拉格
    641. 

  641.             "coordinates": ([[116.407283, 39.90455699411283], [51.052494, 18.852219]])
    642. 

  642.         }, function (e) {
    643. 

  643.             geo = e;
    644. 

  644.         });
    645. 

  645.     }
    646. 

  646. 

  647.     function setBezierLine() {
    648. 

  648.         if (coordinate) {
    649. 

  649.             turfSource.process("Helper.lineString", {
    650. 

  650.                 "coordinates": coordinate,
    651. 

  651.             }, function (e) {
    652. 

  652.                 geo = e;
    653. 

  653.             });
    654. 

  654.         }
    655. 

  655.     }
    656. 

  656. 

  657.     //设置square的data
    658. 

  658.     function setSquarePolygon() {
    659. 

  659.         coordinate = [[[116.18865966796875, 39.78904724121094], [116.18865966796875, 40.008087158203125], [116.27998352050781, 40.008087158203125], [116.27998352050781, 39.78904724121094], [116.18865966796875, 39.78904724121094]]];
    660. 

  660.         turfSource.process("Helper.polygon", {
    661. 

  661.             "coordinates": (coordinate),
    662. 

  662.         }, function (e) {
    663. 

  663.             console.log(e);
    664. 

  664.             geo = e;
    665. 

  665.         });
    666. 

  666.     }
    667. 

  667. 

  668.     //turf along方法
    669. 

  669.     function along() {
    670. 

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

  671.         if (unit != 'null' && unit != undefined) {
    672. 

  672.             widgets.alert.clearAlert();
    673. 

  673.             if (checkIsNum(distance) && coordinate) {
    674. 

  674.                 turfSource.process("Helper.lineString", {
    675. 

  675.                     "coordinates": coordinate,
    676. 

  676.                 }, function (e) {
    677. 

  677.                     resultSource.process("Measurement.along", {
    678. 

  678.                         "line": e,
    679. 

  679.                         "distance": distance,
    680. 

  680.                         "units": unit,
    681. 

  681.                     });
    682. 

  682.                 }, false);
    683. 

  683.             }
    684. 

  684.         }
    685. 

  685.         else {
    686. 

  686.             widgets.alert.showAlert(resources.msg_selectUnit, false);
    687. 

  687.         }
    688. 

  688.     }
    689. 

  689. 

  690.     //turf area方法
    691. 

  691.     function area() {
    692. 

  692.         if (coordinate) {
    693. 

  693.             turfSource.process("Helper.polygon", {
    694. 

  694.                 "coordinates": (coordinate),
    695. 

  695.             }, function (polygon) {
    696. 

  696.                 resultSource.process("Measurement.area", {
    697. 

  697.                     "geojson": polygon
    698. 

  698.                 }, function (e) {
    699. 

  699.                     result = e + resources.msg_sqm;
    700. 

  700.                     widgets.alert.showAlert(result, true);
    701. 

  701.                 });
    702. 

  702.             });
    703. 

  703.         }
    704. 

  704.     }
    705. 

  705. 

  706.     //turf bbox方法
    707. 

  707.     function bbox() {
    708. 

  708.         if (coordinate) {
    709. 

  709.             turfSource.process("Helper.lineString", {
    710. 

  710.                 "coordinates": coordinate,
    711. 

  711.             }, function (e) {
    712. 

  712.                 resultSource.process("Measurement.bbox", {
    713. 

  713.                     "geojson": e
    714. 

  714.                 }, function (bbox) {
    715. 

  715.                     resultSource.process("Measurement.bboxPolygon", {
    716. 

  716.                         "bbox": bbox
    717. 

  717.                     });
    718. 

  718.                 });
    719. 

  719.             });
    720. 

  720.         }
    721. 

  721.     }
    722. 

  722. 

  723.     //turf destination方法
    724. 

  724.     function destination() {
    725. 

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

  726.         if (unit != 'null' && unit != undefined) {
    727. 

  727.             widgets.alert.clearAlert();
    728. 

  728.             if (checkIsNum(distance) && isInRange(bearing)) {
    729. 

  729.                 turfSource.process("Helper.point", {
    730. 

  730.                     //北京
    731. 

  731.                     "coordinates": [116.407283, 39.90455699411283],
    732. 

  732.                 }, function (point) {
    733. 

  733.                     resultSource.process("Measurement.destination", {
    734. 

  734.                         "origin": point,
    735. 

  735.                         "distance": distance,
    736. 

  736.                         "bearing": bearing,
    737. 

  737.                         "units": unit,
    738. 

  738.                     });
    739. 

  739.                 }, false);
    740. 

  740.             }
    741. 

  741.         }
    742. 

  742.         else {
    743. 

  743.             widgets.alert.showAlert(resources.msg_selectUnit, false);
    744. 

  744.         }
    745. 

  745.     }
    746. 

  746. 

  747.     //turf distance方法
    748. 

  748.     function turf_Distance() {
    749. 

  749.         var disUnits = {
    750. 

  750.             "kilometers": "千米",
    751. 

  751.             "miles": "英里",
    752. 

  752.             "degrees": "角度",
    753. 

  753.             "radians": "弧度",
    754. 

  754.         };
    755. 

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

  756.         if (unit != 'null' && unit != undefined) {
    757. 

  757.             widgets.alert.clearAlert();
    758. 

  758.             resultSource.process("Measurement.distance", {
    759. 

  759.                 "from": geo.geometry.coordinates[0],
    760. 

  760.                 "to": geo.geometry.coordinates[1],
    761. 

  761.                 "units": unit,
    762. 

  762.             }, function (e) {
    763. 

  763.                 resultNum = e;
    764. 

  764.             });
    765. 

  765.             unit = disUnits[unit];
    766. 

  766.             result = resultNum + unit;
    767. 

  767.             widgets.alert.showAlert(result, true);
    768. 

  768.         }
    769. 

  769.         else {
    770. 

  770.             widgets.alert.showAlert(resources.msg_selectUnit, false);
    771. 

  771.         }
    772. 

  772.     }
    773. 

  773. 

  774.     //turf midpoint
    775. 

  775.     function midpoint() {
    776. 

  776.         if (geo) {
    777. 

  777.             resultSource.process("Measurement.midpoint", {
    778. 

  778.                 "point1": geo.geometry.coordinates[0],
    779. 

  779.                 "point2": geo.geometry.coordinates[1],
    780. 

  780.             });
    781. 

  781.         }
    782. 

  782.     }
    783. 

  783. 

  784.     //turf greatCircle
    785. 

  785.     function greatCircle() {
    786. 

  786.         if (geo) {
    787. 

  787.             resultSource.process("Measurement.greatCircle", {
    788. 

  788.                 "start": geo.geometry.coordinates[0],
    789. 

  789.                 "end": geo.geometry.coordinates[1],
    790. 

  790.                 "properties": {'name': '北京 to 布拉格'},
    791. 

  791.                 "npoints": 100,
    792. 

  792.                 "offset": 10
    793. 

  793.             });
    794. 

  794.         }
    795. 

  795.     }
    796. 

  796. 

  797.     //turf square
    798. 

  798.     function square() {
    799. 

  799.         if (geo) {
    800. 

  800.             turfSource.process("Measurement.bbox", {
    801. 

  801.                 "geojson": geo
    802. 

  802.             }, function (box) {
    803. 

  803.                 resultSource.process("Measurement.square", {
    804. 

  804.                     "bbox": box
    805. 

  805.                 }, function (bbox) {
    806. 

  806.                     resultSource.process("Measurement.bboxPolygon", {
    807. 

  807.                         "bbox": bbox
    808. 

  808.                     });
    809. 

  809.                 }, null, false);
    810. 

  810.             }, null, false);
    811. 

  811.         }
    812. 

  812.     }
    813. 

  813. 

  814.     //turf center
    815. 

  815.     function center() {
    816. 

  816.         if (geo) {
    817. 

  817.             resultSource.process("Measurement.center", {
    818. 

  818.                 "geojson": geo
    819. 

  819.             });
    820. 

  820.         }
    821. 

  821.     }
    822. 

  822. 

  823.     //turf bezierSpline
    824. 

  824.     function bezierSpline() {
    825. 

  825.         if (geo) {
    826. 

  826.             resultSource.process("Transformation.bezierSpline", {
    827. 

  827.                 "line": geo,
    828. 

  828.                 "resolution": 10000,
    829. 

  829.                 "sharpness": 0.85
    830. 

  830.             });
    831. 

  831.         }
    832. 

  832.     }
    833. 

  833. 

  834.     //turf buffer
    835. 

  835.     //先draw一个点 再在此点上进行缓冲区分析
    836. 

  836.     function buffer() {
    837. 

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

  838.         if (unit != 'null') {
    839. 

  839.             widgets.alert.clearAlert();
    840. 

  840.             greatThanZero(steps);
    841. 

  841.             if (coordinate && checkIsNum(distance) && checkIsNum(radius) && steps > 0) {
    842. 

  842.                 turfSource.process("Helper.point", {
    843. 

  843.                     "coordinates": coordinate,
    844. 

  844.                 }, function (point) {
    845. 

  845.                     resultSource.process("Transformation.buffer", {
    846. 

  846.                         "geojson": point,
    847. 

  847.                         "radius": radius,
    848. 

  848.                         "steps": parseFloat(steps),
    849. 

  849.                         "units": unit,
    850. 

  850.                     });
    851. 

  851.                 });
    852. 

  852.             } else {
    853. 

  853.                 widgets.alert.showAlert(resources.msg_incorrectInfo, false);
    854. 

  854.             }
    855. 

  855.         }
    856. 

  856.         else {
    857. 

  857.             widgets.alert.showAlert(resources.msg_selectUnit, false);
    858. 

  858.         }
    859. 

  859.     }
    860. 

  860. 

  861.     //turf circle
    862. 

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

  863.     function circle() {
    864. 

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

  865.         widgets.alert.clearAlert();
    866. 

  866.         greatThanZero(steps);
    867. 

  867.         if (coordinate && checkIsNum(distance) && checkIsNum(radius) && steps > 0) {
    868. 

  868.             turfSource.process("Helper.point", {
    869. 

  869.                 "coordinates": coordinate,
    870. 

  870.             }, function (point) {
    871. 

  871.                 resultSource.process("Transformation.circle", {
    872. 

  872.                     "center": point,
    873. 

  873.                     "radius": radius,
    874. 

  874.                     "steps": parseFloat(steps),
    875. 

  875.                     "units": unit,
    876. 

  876.                     "properties": {}
    877. 

  877.                 });
    878. 

  878.             });
    879. 

  879.         }
    880. 

  880.         else {
    881. 

  881.             widgets.alert.showAlert(resources.msg_incorrectInfo, false);
    882. 

  882.         }
    883. 

  883.     }
    884. 

  884. 

  885.     //清空图层
    886. 

  886.     function clearSource() {
    887. 

  887.         drawSource && drawSource.clear();
    888. 

  888.         turfSource && turfSource.clear();
    889. 

  889.         resultSource && resultSource.clear();
    890. 

  890.     }
    891. 

  891. 

  892. </script>
    893. 

  893. </html>
    894.