mapHolder.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
  1. /**
  2. * [ONEMAP.M.mapHolder]
  3. * @return {[object]}
  4. * 地图框架引入
  5. * 地图操作
  6. */
  7. define([
  8. 'modDir/service/addressSearch',
  9. 'modDir/service/poiSearch',
  10. 'modDir/service/regionSearch',
  11. 'modDir/service/routeSearch',
  12. 'css!scripts/vendor/map23dlib/map23DView',
  13. 'css!styles/mapHolder'
  14. ], function (addressSearchF, poiSearchF, regionSearchF, routeSearchF) {
  15. /**
  16. * 地图初始化 根据客户端的类型 初始pc端和移动端
  17. * @exports ONEMAP.M.mapHolder
  18. * @type {Object}
  19. */
  20. var modValue = {
  21. mainLayers: null,
  22. leadorStreetViewControl: null,
  23. vact: 'add',
  24. beifen: {}
  25. }
  26. /**
  27. * 地图初始化参数
  28. */
  29. var options = {
  30. center: [39.90743, 116.39134],
  31. zoom: 6
  32. };
  33. //模块状态
  34. var status = {}
  35. /**
  36. * 初始化
  37. * @type {Function}
  38. * @returns {*}
  39. */
  40. function init() {
  41. if (ONEMAP.D.globalSettingData) {
  42. options.center = [
  43. ONEMAP.D.globalSettingData.baseMap2D.center.lat,
  44. ONEMAP.D.globalSettingData.baseMap2D.center.lng
  45. ];
  46. options.zoom = ONEMAP.D.globalSettingData.baseMap2D.zoom;
  47. }
  48. if (Detector.webgl) {
  49. modValue.webgl = true;
  50. } else {
  51. modValue.webgl = false;
  52. }
  53. mapInit();
  54. subscribe();
  55. ONEMAP.C.publisher.publish('mapDragend', 'mapChange');
  56. //移除加载动画
  57. if (navigator.appName == "Microsoft Internet Explorer") {
  58. $('#loadingGif').fadeOut(200, function () {
  59. $('#loadingTop').animate({
  60. top: '0px'
  61. }, 600);
  62. $('#loadingBottom').animate({
  63. top: '100%'
  64. }, 600);
  65. $('#loadingPanel').hide(400);
  66. setTimeout(function () {
  67. }, 600)
  68. });
  69. } else {
  70. setTimeout(function () {
  71. $('#loadingPanel').addClass('open');
  72. setTimeout(function () {
  73. $('#loadingPanel').fadeOut(400);
  74. }, 1000)
  75. }, 200)
  76. }
  77. };
  78. function mapInit() {
  79. if (modValue.webgl) {
  80. //地图加载
  81. map23DControl.init({
  82. mapWrapId: 'mapHolder',
  83. view: {
  84. center: {
  85. lat: options.center[0],
  86. lng: options.center[1]
  87. },
  88. zoom: options.zoom
  89. },
  90. synch: true,
  91. display: {
  92. map2D: false,
  93. map3D: true
  94. }
  95. });
  96. require(['modDir/3dEarth'], function (tdEarth) {
  97. tdEarth.init();
  98. });
  99. } else {
  100. //地图加载
  101. map23DControl.init({
  102. mapWrapId: 'mapHolder',
  103. view: {
  104. center: {
  105. lat: options.center[0],
  106. lng: options.center[1]
  107. },
  108. zoom: options.zoom
  109. },
  110. synch: false,
  111. display: {
  112. map2D: false,
  113. map3D: true
  114. }
  115. });
  116. }
  117. map23DControl.show3D();
  118. // 监听双击事件
  119. map3DViewer.map.screenSpaceEventHandler.setInputAction(function (event) {
  120. // 获取双击的entity
  121. var pickedObject = map3DViewer.map.scene.pick(event.position);
  122. if (Cesium.defined(pickedObject) && pickedObject.id.constructor === Cesium.Entity) {
  123. // 阻止默认的双击行为
  124. // 例如,取消定位到实体
  125. map3DViewer.map.scene.screenSpaceCameraController.enableInputs = false;
  126. // 在这里可以添加你自己的双击处理逻辑
  127. // ...
  128. // 一段时间后重新启用输入
  129. setTimeout(function () {
  130. map3DViewer.map.scene.screenSpaceCameraController.enableInputs = true;
  131. }, 1000); // 延迟时间可以根据需要调整
  132. }
  133. }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
  134. // $('#map3DWrap').css({
  135. // height: $(window).height()
  136. // });
  137. //设置地图边界
  138. map2DViewer.map.setMaxBounds([
  139. [84, 360],
  140. [-84, -360]
  141. ]);
  142. map3DViewer.map.scene.imageryLayers.addImageryProvider(
  143. new Cesium.SingleTileImageryProvider({
  144. url: "./images/world5km.webp",
  145. rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0)
  146. })
  147. )
  148. if (ONEMAP.D.globalSettingData) {
  149. switch (ONEMAP.D.globalSettingData.baseMap2D.type) {
  150. case 1:
  151. if (Detector.webgl) {
  152. map23DControl.setDefaultTileLayer("gm");
  153. } else {
  154. map2DViewer.setDefaultTileLayer("gm");
  155. }
  156. modValue.mainLayers = "gm";
  157. $("#mapBaseLayerControl .choosemap .name-dem-control .name-control").hide();
  158. $("#mapBaseLayerControl .choosemap .name-dem-control .dem-control").hide();
  159. break;
  160. case 2:
  161. if (Detector.webgl) {
  162. map23DControl.setDefaultTileLayer("gr");
  163. } else {
  164. map2DViewer.setDefaultTileLayer("gr");
  165. }
  166. modValue.mainLayers = "gr";
  167. setTimeout(function () {
  168. $("#mapBaseLayerControl .choosemap .name-dem-control .name-control").show();
  169. $("#mapBaseLayerControl .choosemap .name-dem-control .dem-control").show();
  170. }, 500)
  171. break;
  172. case 3:
  173. if (Detector.webgl) {
  174. map23DControl.setDefaultTileLayer("gt");
  175. } else {
  176. map2DViewer.setDefaultTileLayer("gt");
  177. }
  178. modValue.mainLayers = "gt";
  179. $("#mapBaseLayerControl .choosemap .name-dem-control .name-control").hide();
  180. $("#mapBaseLayerControl .choosemap .name-dem-control .dem-control").hide();
  181. break;
  182. }
  183. }
  184. map2DViewer.map.on('dragend', function () {
  185. var zoom = map2DViewer.map.getZoom();
  186. ONEMAP.C.publisher.publish('mapDragend', 'mapChange');
  187. ONEMAP.C.publisher.publish(map2DViewer.map.getZoom(), 'mapChange23D');
  188. })
  189. map2DViewer.map.on('moveend', function (e) {
  190. ONEMAP.C.publisher.publish('mapMove', 'map2DMoveEnd');
  191. })
  192. map2DViewer.map.on('move', function (e) {
  193. ONEMAP.C.publisher.publish('mapMoveIng', 'map2DMoveIng');
  194. })
  195. //操作地图关闭侧栏
  196. map2DViewer.map.on('click dragend', function () {
  197. ONEMAP.C.publisher.publish('mapDragend', 'layout::sideBar');
  198. $("#openTdSideContent").show();
  199. $("#mapHolder").unbind('mouseover');
  200. })
  201. map2DViewer.map.on('mousemove', function (e) {
  202. var lat = e.latlng.lat;
  203. var lng = e.latlng.lng;
  204. ONEMAP.C.publisher.publish({
  205. lat: lat,
  206. lng: lng,
  207. e: e
  208. }, 'mousemove23D');
  209. })
  210. map2DViewer.map.on('zoomend', function () {
  211. if (map2DViewer.map.getZoom() == map2DViewer.map.options.maxZoom) {
  212. ONEMAP.C.publisher.publish({
  213. type: 'warning',
  214. message: '已达地图最大显示级别'
  215. }, 'noteBar::add');
  216. }
  217. if (map2DViewer.map.getZoom() == map2DViewer.map.options.minZoom) {
  218. ONEMAP.C.publisher.publish({
  219. type: 'warning',
  220. message: '已达地图最小显示级别'
  221. }, 'noteBar::add');
  222. }
  223. ONEMAP.C.publisher.publish(map2DViewer.map.getZoom(), 'userHeatlayerMarker');
  224. ONEMAP.C.publisher.publish(map2DViewer.map.getZoom(), 'mapChange23D');
  225. ONEMAP.C.publisher.publish('zoomend', 'mapChange');
  226. })
  227. //地图点击事件
  228. map2DViewer.map.on('click', function (e) {
  229. var lat = e.latlng.lat,
  230. lng = e.latlng.lng;
  231. var options = {
  232. lng: lng,
  233. lat: lat
  234. }
  235. ONEMAP.C.publisher.publish(options, 'mapClick2D');
  236. });
  237. };
  238. function delMarker(ajaxData) {
  239. $.ajax({
  240. type: "get",
  241. dataType: 'json',
  242. url: onemapUrlConfig.userCenterUrl + '/bookmarker/del',
  243. data: ajaxData,
  244. success: function (data) {
  245. //console.log(data)
  246. }
  247. })
  248. }
  249. /**
  250. * 设置经纬网
  251. */
  252. function setSTLatLngLayer(options) {
  253. var chrome = navigator.userAgent.toLowerCase().match(/chrome/) != null || navigator.userAgent.toLowerCase().match(/firefox/) != null;
  254. if (options == 'show') {
  255. STLatLngLayerControl.changStatus(true);
  256. if (!chrome) {
  257. // locaSpace.SetLatLonGridVisible(true);
  258. // locaSpaceMap.Refresh()
  259. }
  260. } else {
  261. STLatLngLayerControl.changStatus(false);
  262. if (!chrome) {
  263. //locaSpace.SetLatLonGridVisible(false);
  264. //locaSpaceMap.Refresh()
  265. }
  266. }
  267. };
  268. /**
  269. * 右键菜单函数
  270. */
  271. //
  272. function disable() {
  273. return false
  274. };
  275. //从这里出发
  276. function pointStartli(e) {
  277. require(['modDir/tools/toolRouteSearch'], function (toolRouteSearch) {
  278. toolRouteSearch.setStartPoint(e.latlng);
  279. });
  280. };
  281. //添加途经点
  282. function pointAcrossli(e) {
  283. require(['modDir/tools/toolRouteSearch'], function (toolRouteSearch) {
  284. toolRouteSearch.setAcrossPoint(e.latlng);
  285. });
  286. };
  287. //添加规避点
  288. function pointAvoidli(e) {
  289. require(['modDir/tools/toolRouteSearch'], function (toolRouteSearch) {
  290. toolRouteSearch.setAvoidPoint(e.latlng);
  291. });
  292. };
  293. //到这里去
  294. function pointStopli(e) {
  295. require(['modDir/tools/toolRouteSearch'], function (toolRouteSearch) {
  296. toolRouteSearch.setStopPoint(e.latlng);
  297. });
  298. };
  299. //周边搜索
  300. function aroundFindli(e) {
  301. require(['modDir/tools/toolPlaceSearch'], function (toolPlaceSearch) {
  302. toolPlaceSearch.rightClickPopup(e.latlng);
  303. });
  304. };
  305. //加入地图书签
  306. // function addBookMarker() {
  307. //判断是否登录,没有登录进行提示
  308. // if (!ONEMAP.D.isLoad) {
  309. // ONEMAP.C.publisher.publish({
  310. // type: 'warning',
  311. // message: '请登录后使用!'
  312. // }, 'noteBar::add');
  313. // return false;
  314. // }
  315. // require(['modDir/user/userFav'], function (userFav) {
  316. // userFav.addFav();
  317. // });
  318. // };
  319. //鼠标抓手样式
  320. function removeMouseHand() {
  321. map2DViewer.map.off("mousedown", mouseDownStatus);
  322. map2DViewer.map.off("mouseup", mouseUpStatus);
  323. };
  324. function mouseDownStatus() {
  325. if (L.Browser.ie || L.Browser.firefox) {
  326. map2DViewer.map.getContainer().style.cursor = 'url(/images/layout/mouseDown.cur),auto';
  327. } else {
  328. map2DViewer.map.getContainer().style.cursor = 'url(/images/layout/mouseDown.cur) 5 5,auto';
  329. }
  330. }
  331. function mouseUpStatus() {
  332. if (L.Browser.ie || L.Browser.firefox) {
  333. map2DViewer.map.getContainer().style.cursor = 'url(/images/layout/mouseMove.cur),auto';
  334. } else {
  335. map2DViewer.map.getContainer().style.cursor = 'url(/images/layout/mouseMove.cur) 5 5,auto';
  336. }
  337. }
  338. function mouseHand() {
  339. mouseUpStatus();
  340. map2DViewer.map.on("mousedown", mouseDownStatus);
  341. map2DViewer.map.on("mouseup", mouseUpStatus);
  342. };
  343. //清空地图
  344. function cleanMapli() {
  345. ONEMAP.M.myLayerActions.clearLayer();
  346. ONEMAP.C.publisher.publish('', 'cleanMap');
  347. ONEMAP.C.publisher.publish({
  348. modName: 'cleanMap',
  349. }, 'tools:active');
  350. $("#cleanMap").click();
  351. };
  352. /**
  353. * 判断是否是正确的latlng
  354. * @param lat
  355. * @param lng
  356. * @returns {boolean}
  357. */
  358. function isNatureLatLng(lat, lng) {
  359. if (lat > -90 && lat < 90 && lng > -180 && lng < 180) {
  360. return true;
  361. } else {
  362. return false;
  363. }
  364. };
  365. function getContextmenuPlaceName(e) {
  366. contextmenuPlaceName.innerHTML = '正在搜索中...';
  367. var earthLatlng = L.Util.formatEarthLatLng(e.latlng);
  368. if (isNatureLatLng(earthLatlng.lat, earthLatlng.lng)) {
  369. var addressSearch = new addressSearchF();
  370. addressSearch.getAddressInfo({
  371. zoom: map2DViewer.map.getZoom(),
  372. latLng: [earthLatlng.lat, earthLatlng.lng]
  373. }, function (data) {
  374. data = data.data;
  375. contextmenuPlaceName.innerHTML = data.region ? data.region : '未知地点';
  376. });
  377. }
  378. };
  379. function getContextmenuLatlng(e) {
  380. modValue.latlng = e.latlng;
  381. var nLatlng = L.Util.formatHMS(e.latlng);
  382. contextmenuLatlng.innerHTML = nLatlng.lng + ' , ' + nLatlng.lat;
  383. };
  384. function getContextmenuCPJ(e) {
  385. // contextmenuCPJ.innerHTML = "当前磁偏角:正在查询中...";
  386. }
  387. function getCP(altData) {
  388. contextmenuCPJ.innerHTML = '正在查询中...';
  389. var ajaxUrl = onemapUrlConfig.declination;
  390. var newdata = new Date();
  391. var year = newdata.getFullYear();
  392. var month = (newdata.getMonth() + 1) < 10 ? '0' + (newdata.getMonth() + 1) : (newdata.getMonth() + 1);
  393. var day = newdata.getDate() < 10 ? '0' + newdata.getDate() : newdata.getDate();
  394. var ajaxData = {
  395. alt: altData,
  396. lat: modValue.latlng.lat,
  397. lon: modValue.latlng.lng,
  398. startYear: year,
  399. startMonth: month,
  400. startDay: day
  401. };
  402. //console.log(ajaxData);
  403. $.ajax({
  404. url: ajaxUrl + '?alt=' + altData + '&lat=' + ajaxData.lat + '&lon=' + ajaxData.lon + '&startYear=' + year + '&startMonth=' + month + '&startDay=' + day,
  405. type: 'GET',
  406. dataType: 'json',
  407. // data: ajaxData,
  408. })
  409. .done(function (data) {
  410. // //console.log(data);
  411. // //console.log(data.declination);
  412. contextmenuCPJ.innerHTML = "当前磁偏角:" + data.declination;
  413. //console.log("success");
  414. })
  415. .fail(function (data) {
  416. // //console.log(data);
  417. // //console.log("error");
  418. contextmenuCPJ.innerHTML = "当前磁偏角:暂无数据";
  419. })
  420. .always(function () {
  421. //console.log("complete");
  422. });
  423. }
  424. function getContextmenuDEMHeight(e) {
  425. contextmenuDEMHeight.innerHTML = '正在查询中...';
  426. var ajaxUrl = onemapUrlConfig.elevationDataUrl + '/v1.0/geoprocessing/single_elevation';
  427. var ajaxData = {
  428. lat: e.latlng.lat,
  429. lon: e.latlng.lng,
  430. zoom: map23DData.view.zoom,
  431. delta_zoom: 0
  432. };
  433. $.ajax({
  434. type: "get",
  435. dataType: 'json',
  436. data: ajaxData,
  437. url: ajaxUrl,
  438. beforeSend: ONEMAP.V.loading.load(),
  439. success: function (data) {
  440. if (data.code == 0) {
  441. contextmenuDEMHeight.innerHTML = "当前高程: " + data.data + "米";
  442. // getCP(data.data);
  443. } else {
  444. contextmenuDEMHeight.innerHTML = "当前高程: " + data.message;
  445. }
  446. },
  447. completer: ONEMAP.V.loading.loaded()
  448. });
  449. }
  450. /**
  451. * 获取当前点地形数据
  452. * [getTerrainanalysis description]
  453. * @return {[type]} [description]
  454. */
  455. function getTerrainanalysis(e) {
  456. contextmenuTerrainanalysis.innerHTML = '地形查询中...';
  457. var curlatlng = e.latlng.lat + "," + e.latlng.lng
  458. //获取该点坡向
  459. $.ajax({
  460. type: "get",
  461. dataType: 'json',
  462. data: {
  463. locations: curlatlng
  464. },
  465. url: onemapUrlConfig.elevationDataUrl + '/v2.0/geoprocessing/aspect',
  466. beforeSend: ONEMAP.V.loading.load(),
  467. success: function (data) {
  468. if (data.status == 'ok') {
  469. modValue.curPX = data.results[0].aspect.toFixed(3);
  470. contextmenuTerrainanalysis.innerHTML = "坡向: " + modValue.curPX;
  471. $.ajax({
  472. type: "get",
  473. dataType: 'json',
  474. data: {
  475. locations: curlatlng
  476. },
  477. url: onemapUrlConfig.elevationDataUrl + '/v2.0/geoprocessing/slope',
  478. beforeSend: ONEMAP.V.loading.load(),
  479. success: function (data) {
  480. if (data.status == 'ok') {
  481. modValue.PD = data.results[0].slope.toFixed(3);
  482. contextmenuTerrainanalysis.innerHTML = "坡向:" + modValue.curPX + ";坡度:" + modValue.PD;
  483. // getCP(data.data);
  484. } else {
  485. contextmenuTerrainanalysis.innerHTML = "坡向:无数据;坡度:无数据";
  486. }
  487. },
  488. completer: ONEMAP.V.loading.loaded()
  489. });
  490. // getCP(data.data);
  491. } else {
  492. contextmenuTerrainanalysis.innerHTML = "坡向: 无数据";
  493. }
  494. },
  495. completer: ONEMAP.V.loading.loaded()
  496. });
  497. }
  498. /**
  499. * 地图容器重置
  500. * @return {[type]} [description]
  501. */
  502. function mapResize() {
  503. if (ONEMAP.M.pcLayout.status.showFullMap) {
  504. $('#map3DWrap').css({
  505. height: $(window).height(),
  506. top: '0px'
  507. });
  508. } else {
  509. $('#map3DWrap').css({
  510. height: $(window).height(),
  511. top: '0px'
  512. });
  513. }
  514. setTimeout(function () {
  515. map2DViewer.map.invalidateSize();
  516. }, 100);
  517. }
  518. function resetMapCenterZoomLayer(center, zoom) {
  519. map2DViewer.setView({
  520. center: {
  521. lat: center.lat,
  522. lng: center.lon
  523. },
  524. zoom: zoom
  525. })
  526. }
  527. /**
  528. * 注册监听
  529. * @type {Function}
  530. */
  531. function subscribe() {
  532. ONEMAP.C.publisher.subscribe(setSTLatLngLayer, 'mapHolder::STLatLngLayer');
  533. ONEMAP.C.publisher.subscribe(mapResize, 'layout::resize');
  534. };
  535. return ONEMAP.M.mapHolder = {
  536. init: init,
  537. modValue: modValue,
  538. mouseHand: mouseHand,
  539. removeMouseHand: removeMouseHand,
  540. getContextmenuPlaceName: getContextmenuPlaceName,
  541. resetMapCenterZoomLayer: resetMapCenterZoomLayer
  542. };
  543. })