MapManager3D.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948
  1. /**
  2. * 创建者:王成
  3. * 创建日期:2021年11月8日
  4. * 描述:三维地图操作
  5. */
  6. /**
  7. * 地图服务相关地址
  8. */
  9. var serverBaseURL = "http://218.59.194.74";
  10. var agsServerPort = "6080";
  11. /**
  12. * 地图API 必须调用init方法 才能正常使用
  13. */
  14. var gisAPI = undefined;
  15. /**
  16. * 案件图层特殊处理
  17. */
  18. var isDrawCaseLabel = false; //案件图层是否显示 案件标注是否绘制
  19. var caseLayerId = 'map_case_polygon'; //案件图层的Id
  20. /**
  21. * 图层类型
  22. */
  23. var layerType = {
  24. mapboxLayer: 'mapboxLayer', //Mapbox图层
  25. onLineRaster: 'onLineRaster', //在线卫星图层
  26. onLineVector: 'onLineVector', //在线标注地图
  27. wmts: 'wmts', //wmts图层
  28. agsVectorServer: 'agsVectorServer', //ArcGIS矢量服务图层
  29. tilesets: 'tilesets', //3D图层
  30. glbs: 'glbs', //glb图层
  31. agsVectorServerToo: 'agsVectorServerToo', //特殊测试图层
  32. geoJson: 'geoJson', //geoJson数据
  33. }
  34. var nodeFather = ['基础数据', '业务数据', '影像数据'];
  35. /**
  36. * 图层配置数组
  37. */
  38. var layerConfigs = [];
  39. /**
  40. * 加载Mapbox图层
  41. * @param {boolena} visible 是否显示
  42. */
  43. function loadMapboxLayer(visible) {
  44. layerConfigs.push({
  45. layId: 'mapBoxLayer',
  46. layName: '暗夜版底图',
  47. layType: layerType.mapboxLayer,
  48. isShow: visible,
  49. fatherIdx: 0,
  50. config: {
  51. id: 'mapBoxLayer',
  52. }
  53. });
  54. }
  55. /**
  56. * 加载在线地图
  57. * @param {boolena} visible 是否显示
  58. */
  59. function loadMapOnline(visible) {
  60. layerConfigs.push({
  61. layId: 'onLineVector',
  62. layName: '天地图',
  63. layType: layerType.onLineVector,
  64. isShow: visible,
  65. fatherIdx: 0,
  66. config: {
  67. id: 'onLineVector',
  68. }
  69. });
  70. }
  71. /**
  72. * 加载影像图
  73. * @param {boolean} 是否显示
  74. */
  75. function loadMapRaster(visible) {
  76. layerConfigs.push({
  77. layId: 'xz_yxt',
  78. layName: '影像图',
  79. layType: layerType.wmts,
  80. isShow: visible,
  81. fatherIdx: 2,
  82. config: {
  83. id: 'xz_yxt',
  84. url: serverBaseURL + ':' + agsServerPort +
  85. '/arcgis/rest/services/LYLSQ_YX_102100_202105/MapServer/WMTS',
  86. minLevel: 0,
  87. maxLevel: 19,
  88. isshow: true,
  89. alpha: 0.75,
  90. }
  91. });
  92. }
  93. /**
  94. * 加载现状图
  95. * @param {boolean} visible 是否显示
  96. */
  97. function loadMapCurrentStation(visible) {
  98. layerConfigs.push({
  99. layId: 'map_xzt',
  100. layName: '现状图',
  101. layType: layerType.wmts,
  102. isShow: visible,
  103. fatherIdx: 1,
  104. config: {
  105. id: 'map_xzt',
  106. url: serverBaseURL + ':' + agsServerPort +
  107. '/arcgis/rest/services/LYLSQ_XZT_102100_202009/MapServer/WMTS',
  108. minLevel: 0,
  109. maxLevel: 19,
  110. isshow: true,
  111. alpha: 0.9,
  112. },
  113. });
  114. }
  115. /**
  116. * 添加镇区规划
  117. * @param {boolean} visible 是否显示
  118. */
  119. function loadMapPlaning(visible) {
  120. layerConfigs.push({
  121. layId: 'map_ght',
  122. layName: '规划图',
  123. layType: layerType.wmts,
  124. isShow: visible,
  125. fatherIdx: 1,
  126. config: {
  127. id: 'map_ght',
  128. url: serverBaseURL + ':' + agsServerPort +
  129. '/arcgis/rest/services/LYLSQ_GHT_102100_202009/MapServer/WMTS',
  130. minLevel: 0,
  131. maxLevel: 19,
  132. isshow: true,
  133. alpha: 0.9,
  134. },
  135. });
  136. }
  137. /**
  138. * 加载镇界
  139. * @param {boolean} visible 是否显示
  140. */
  141. function loadMapTown(visible) {
  142. layerConfigs.push({
  143. layId: 'map_town',
  144. layName: '镇界',
  145. layType: layerType.agsVectorServer,
  146. isShow: visible,
  147. fatherIdx: 1,
  148. config: {
  149. id: 'map_town',
  150. url: serverBaseURL + ':' + agsServerPort + '/arcgis/rest/services/LYLSQ_RE_WEB_V3/MapServer',
  151. layers: [2],
  152. isQuery: false,
  153. label: {
  154. url: serverBaseURL + ':' + agsServerPort + '/arcgis/rest/services/LYLSQ_RE_WEB_V3/MapServer/2',
  155. showField: 'XZQMC',
  156. size: 30,
  157. linespace: 12,
  158. display: 500000,
  159. family: 'SimHei',
  160. lng: 'LNG',
  161. lat: 'LAT',
  162. alt: 'ALT',
  163. color: '102,152,61,1',
  164. image: 'ico_village.png',
  165. key: 'XZQMC',
  166. },
  167. }
  168. });
  169. }
  170. /**
  171. * 添加村界
  172. * @param {boolean} visible 是否显示
  173. */
  174. function loadMapVillage(visible) {
  175. layerConfigs.push({
  176. layId: 'map_village',
  177. layName: '村庄',
  178. layType: layerType.wmts,
  179. isShow: visible,
  180. fatherIdx: 1,
  181. config: {
  182. id: 'map_village',
  183. url: serverBaseURL + ':' + agsServerPort +
  184. '/arcgis/rest/services/LYLSQ_XZQ_CJ_102100/MapServer/WMTS',
  185. minLevel: 0,
  186. maxLevel: 19,
  187. isshow: true,
  188. alpha: 0.9,
  189. },
  190. });
  191. }
  192. /**
  193. * 加载图斑
  194. * @param {boolean} visible 是否显示
  195. */
  196. function loadMapCasePolygon(visible) {
  197. layerConfigs.push({
  198. layId: caseLayerId,
  199. layName: '案件图斑',
  200. layType: layerType.agsVectorServer,
  201. isShow: visible,
  202. fatherIdx: 1,
  203. config: {
  204. id: caseLayerId,
  205. url: serverBaseURL + ':' + agsServerPort + '/arcgis/rest/services/LYLSQ_RE_WEB_V3/MapServer',
  206. layers: [1],
  207. isQuery: false,
  208. }
  209. });
  210. }
  211. /**
  212. * 加载实景数据
  213. * @param {boolean} visible 是否显示
  214. */
  215. function loadMapVillageTileset(visible) {
  216. var tilesetUrls = [];
  217. tilesetUrls.push('http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json');
  218. layerConfigs.push({
  219. layId: '3d_data01',
  220. layName: '三维实景',
  221. layType: layerType.tilesets,
  222. isShow: visible,
  223. fatherIdx: 0,
  224. config: {
  225. id: '3d_data01',
  226. isshow: true,
  227. url: tilesetUrls,
  228. }
  229. });
  230. }
  231. /**
  232. * strLng:117.834,
  233. strLat:36.221,
  234. endLng:118.108,
  235. endLat:36.474,
  236. * 添加旋转区域
  237. */
  238. function appendRotateArea() {
  239. gisAPI.addRotateArea({
  240. strLng: 118.050,
  241. strLat: 34.953,
  242. endLng: 118.530,
  243. endLat: 35.434,
  244. northImage: 'zhibei.png',
  245. scaleImage: 'kedu.png'
  246. })
  247. }
  248. /**
  249. * 添加图层
  250. * @param {Object} layerId 图层Id
  251. */
  252. function appendLayer(layerId) {
  253. for (var i = 0; i < layerConfigs.length; i++) {
  254. var layConfig = layerConfigs[i];
  255. if (layConfig.layId == layerId) {
  256. if (layConfig.layType == layerType.onLineVector) {
  257. gisAPI.addOnlineVectorLayer(layConfig.config);
  258. } else if (layConfig.layType == layerType.agsVectorServer) {
  259. gisAPI.addAGSVectorServer(layConfig.config);
  260. } else if (layConfig.layType == layerType.wmts) {
  261. gisAPI.addWmtsTileLayer(layConfig.config);
  262. } else if (layConfig.layType == layerType.tilesets) {
  263. gisAPI.add3DTilesets(layConfig.config);
  264. } else if (layConfig.layType == layerType.glbs) {
  265. gisAPI.addGlbs(layConfig.config);
  266. } else if (layConfig.layType == layerType.agsVectorServerToo) {
  267. gisAPI.addAGSVectorServerToo(layConfig.config);
  268. } else if (layConfig.layType == layerType.mapboxLayer) {
  269. gisAPI.addMapboxLayer(layConfig.config);
  270. } else if (layConfig.layType == layerType.geoJson) {
  271. gisAPI.addGeoJSONLayer(layConfig.config);
  272. }
  273. break;
  274. }
  275. }
  276. }
  277. /**
  278. * 移除图层
  279. * @param {Object} layerId 图层Id
  280. */
  281. function removeLayer(layerId) {
  282. gisAPI.removeLayer(layerId);
  283. }
  284. /**
  285. * 图层初始化显示
  286. */
  287. function layerInit() {
  288. /* 进入中国位置 */
  289. gisAPI.setMapRange({
  290. lng: 103.84, //经度
  291. lat: 31.15, // 维度
  292. alt: 24000000, // 高度
  293. heading: 0, //偏航
  294. pitch: -90, //俯仰,人如果在赤道上空,俯仰角为0可见地球。如果在北纬,俯仰角为负才能见地球
  295. roll: 0.0 //翻滚
  296. })
  297. /* 飞行到指定位置 */
  298. gisAPI.flyToRectangle({
  299. strLng: 118.050,
  300. strLat: 34.953,
  301. endLng: 118.530,
  302. endLat: 35.434,
  303. success: function() {
  304. /* 加载初始图层 */
  305. for (var i = 0; i < layerConfigs.length; i++) {
  306. gisAPI.addBeforeLayerId(layerConfigs[i].layId);
  307. /* 初始化显示图层 */
  308. if (layerConfigs[i].isShow) {
  309. appendLayer(layerConfigs[i].layId);
  310. }
  311. }
  312. /* 增加酷炫效果 */
  313. appendRotateArea();
  314. }
  315. });
  316. }
  317. /**
  318. * 以下代码为注册地图事件
  319. */
  320. /**
  321. * 注册地图范围变化事件
  322. * @param {Object} objMap 地图实例
  323. */
  324. function registerMapAreaChange(objMap) {
  325. objMap.onExtentChange = function(event) {
  326. /* 打印当前地图范围 */
  327. // console.log(JSON.stringify(event));
  328. // gisAPI.addAreaRectangle({
  329. // strLng:event.west,
  330. // strLat:event.south,
  331. // endLng:event.east,
  332. // endLat:event.north,
  333. // });
  334. if (event.height < 1500 && (event.pitch >= -90 && event.pitch <= -40)) {
  335. /* 判断是否查询绘制标注 如果不绘制 则无需执行 */
  336. if (isDrawCaseLabel == true) {
  337. //queryCaseLavelsByRect(event);
  338. }
  339. //queryPlanningData(event);
  340. }
  341. };
  342. }
  343. /**
  344. * 注册地图移动事件
  345. * @param {Object} objMap 地图实例
  346. */
  347. function resgisterMapMoving(objMap) {
  348. objMap.onMouseMove = function(event) {
  349. var msgHtml = "";
  350. // msgHtml += "&nbsp;&nbsp;屏幕坐标(" + event.screenX.toFixed(3) + "," + event.screenY.toFixed(3) + ")";
  351. msgHtml += "<div><span>经度</span><span>" + event.mapX + "</span></div>";
  352. msgHtml += "<div><span>纬度</span><span>" + event.mapY + "</span></div>";
  353. msgHtml += "<div><span>视场角</span><span>" + Math.abs(event.pitch).toFixed(2) + "</span></div>";
  354. msgHtml += "<div><span>视距</span><span>" + event.height.toFixed(2) + "</span></div>";
  355. //console.log(msgHtml);
  356. $("#divButtomInfo").html(msgHtml);
  357. }
  358. }
  359. /* 查询气泡窗口 */
  360. var CaseQueryWindow = $("#divCaseQueryWindow");
  361. /**
  362. * 注册地图场景变化事件
  363. * @param {Object} objMap 地图实例
  364. */
  365. function registerPostSceneChange(objMap) {
  366. objMap.onPostSceneChange = function(event) {
  367. }
  368. }
  369. /**
  370. * 注册查询工具弹出
  371. * @param {Object} objMap 地图实例
  372. */
  373. function registerPopoverQueryTool(objMap) {
  374. objMap.onPopoverQueryTool = function(param) {
  375. /* 判断查询类型 如果是点查询 不弹出 直接查询 区域查询则弹出 */
  376. if (param.queryType == 'point') {
  377. /* 赋值气泡窗口的查询范围属性 */
  378. CaseQueryWindow.attr("extent", param.extent);
  379. /* 开始查询 */
  380. startQueryCasesFromMap();
  381. } else {
  382. setCaseQueryWindowLocation(param.x, param.y);
  383. CaseQueryWindow.show();
  384. /* 赋值气泡窗口的定位属性 */
  385. CaseQueryWindow.attr("location", param.lng + "," + param.lat + "," + param.alt);
  386. /* 赋值气泡窗口的查询范围属性 */
  387. CaseQueryWindow.attr("extent", param.extent);
  388. }
  389. }
  390. }
  391. /**
  392. * @param {float} pointScreenX 气泡窗口关联屏幕点的x位置
  393. * @param {float} pointScreenY 气泡窗口关联屏幕点的y位置
  394. */
  395. function setCaseQueryWindowLocation(pointScreenX, pointScreenY) {
  396. CaseQueryWindow.css('top', pointScreenY - CaseQueryWindow.height() - 15);
  397. CaseQueryWindow.css('left', pointScreenX - CaseQueryWindow.width() / 2);
  398. }
  399. /**
  400. * 页面初始化 只有在第一次的时候加载显示
  401. */
  402. function pageInit() {
  403. /**
  404. * 具体操作
  405. */
  406. /* 地图管理器初始化 */
  407. getNetImageRootURL(function(rootUrl) {
  408. /* 初始化地图 */
  409. // if (document.getElementById("map3d") != undefined) {
  410. // gisAPI = new CrMap({
  411. // selector: 'map3d',
  412. // serverUrl: rootUrl + 'img/',
  413. // });
  414. // muiToast('三维地图初始化完成!');
  415. // } else {
  416. // muiAlert('地图控件未定义','提示');
  417. // }
  418. gisAPI = new CrMap({
  419. selector: 'map3d',
  420. serverUrl: rootUrl + 'img/',
  421. });
  422. /* 设置地形 */
  423. if (gisAPI != undefined) {
  424. /* 添加地形 */
  425. gisAPI.setTerrainLayer({
  426. url: 'http://218.59.194.82:13080/crdata/shandong/dem', //http://218.59.194.82:9080/crdem http://218.59.194.82:9089/bsdem
  427. });
  428. /* 注册地图范围变更事件 */
  429. registerMapAreaChange(gisAPI);
  430. /* 注册地图移动事件 */
  431. resgisterMapMoving(gisAPI);
  432. /* 注册地图场景变化事件 */
  433. registerPostSceneChange(gisAPI);
  434. /* 注册查询弹出工具事件 */
  435. registerPopoverQueryTool(gisAPI);
  436. } else {
  437. muiAlert('gpsAPI未定义', '警告');
  438. }
  439. /* 加载Mapbox底图 */
  440. loadMapboxLayer(true);
  441. /* 加载天地图 */
  442. loadMapOnline(false);
  443. /* 加载影像图 */
  444. loadMapRaster(true);
  445. /* 加载现状图 */
  446. loadMapCurrentStation(false);
  447. /* 加载规划图 */
  448. loadMapPlaning(false);
  449. /* 加载镇界 */
  450. loadMapTown(true);
  451. /* 加载村界 */
  452. loadMapVillage(false);
  453. /* 加载案件图斑 */
  454. loadMapCasePolygon(isDrawCaseLabel);
  455. /* 加载实景数据 */
  456. loadMapVillageTileset(false);
  457. /* 图层初始化 */
  458. layerInit();
  459. });
  460. }
  461. function queryPlanningData(options) {
  462. var geometry = options.west + "," + options.south + "," + options.east + "," + options.north;
  463. console.log("当前范围:" + geometry);
  464. //查询数据
  465. gisAPI.addFeaturesFromServerByPolygon({
  466. geometry: geometry,
  467. geometryType: 'Envelope',
  468. fields: 'YSDM',
  469. url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_RE_WEB_V3/MapServer/5'
  470. }, function(resData) {
  471. console.log("查询数量:" + resData.features.length);
  472. appendPlanFeatureToMap(resData.features);
  473. }, function(err) {
  474. console.log("错误:" + err);
  475. });
  476. }
  477. function appendPlanFeatureToMap(featureData){
  478. /* 先删除全部已绘制数据 */
  479. gisAPI.removeEntityByName('planEntity');
  480. for(var i in featureData){
  481. var feature = featureData[i];
  482. var points = [];
  483. var ring0 = feature.geometry.rings[0];
  484. for(var idx in ring0){
  485. points.push({
  486. lng:ring0[idx][0],
  487. lat:ring0[idx][1]
  488. })
  489. }
  490. gisAPI.addPolygonEntityTest({
  491. config:{
  492. name:'planEntity',
  493. },
  494. description:{
  495. name:'123',
  496. },
  497. color:{
  498. r:255,
  499. g:0,
  500. b:0,
  501. a:0.75
  502. },
  503. points:points,
  504. })
  505. }
  506. }
  507. /**
  508. * 根据区域查询案件图斑标注
  509. * @param {JSON} options 配置项
  510. */
  511. function queryCaseLavelsByRect(options) {
  512. /* 构建查询模型 */
  513. var iData = {
  514. slng: options.west,
  515. slat: options.south,
  516. elng: options.east,
  517. elat: options.north
  518. }
  519. /* 开始联网查询 */
  520. sendAjax({
  521. data: iData,
  522. type: 'post',
  523. url: 'appQueryCaseLabelsByRect',
  524. success: function(items) {
  525. var promise = gisAPI.removeAllCaseLabel();
  526. promise.then(function(isComplete) {
  527. /* 进行展示之前先计算高程 */
  528. var points = [];
  529. for (var i = 0; i < items.length; i++) {
  530. points.push({
  531. lng: items[i].lng,
  532. lat: items[i].lat,
  533. });
  534. }
  535. /* 计算高度 */
  536. gisAPI.calculateAltitude({
  537. points: points,
  538. success: function(heights) {
  539. for (var i = 0; i < items.length; i++) {
  540. var imgName = "img_case_wait_assign.png";
  541. var estate = items[i].estate;
  542. if (estate == caseState.stateWaitAssign) {
  543. imgName = "img_case_wait_assign.png";
  544. } else if (estate == caseState.stateWaitCheck) {
  545. imgName = "img_case_wait_check.png";
  546. } else if (estate == caseState.stateWaitRepeat) {
  547. imgName = "img_case_wait_flight.png";
  548. } else if (estate == caseState.stateWaitVerify) {
  549. imgName = "img_case_wait_verify.png";
  550. } else if (estate == caseState.stateClose) {
  551. imgName = "img_case_close.png";
  552. }
  553. /* 绘制试试 */
  554. gisAPI.addCaseLabel({
  555. lng: items[i].lng,
  556. lat: items[i].lat,
  557. alt: heights[i],
  558. text: items[i].casenum,
  559. image: imgName,
  560. });
  561. }
  562. console.log("本次查询的数据量:" + items.length);
  563. }
  564. })
  565. })
  566. },
  567. error: function(err) {
  568. }
  569. });
  570. }
  571. /**
  572. * 函数相关
  573. */
  574. /**
  575. * 图层控制
  576. * @param {Object} obj checkBox
  577. * @param {JSON} layer 图层
  578. */
  579. function LayerControl(obj, layer) {
  580. if (obj.checked) {
  581. appendLayer(layer.layId);
  582. setLayerState(layer.layId, true);
  583. /* 案件图层需要进行特殊处理 */
  584. if (layer.layId == caseLayerId) {
  585. isDrawCaseLabel = true;
  586. }
  587. } else {
  588. removeLayer(layer.layId);
  589. setLayerState(layer.layId, false);
  590. /* 案件图层需要进行特殊处理 */
  591. if (layer.layId == caseLayerId) {
  592. var promise = gisAPI.removeAllCaseLabel();
  593. promise.then(function(isComplete) {
  594. isDrawCaseLabel = false;
  595. });
  596. }
  597. }
  598. /* 更新场景 */
  599. gisAPI.updateSence();
  600. }
  601. /**
  602. * @param {Object} obj 点击对象
  603. * @param {string} layId 图层Id
  604. */
  605. function LayerTo(obj, layId) {
  606. var layer = getLayerConfig(layId);
  607. if (layer != undefined) {
  608. if (layer.isShow == false) {
  609. muiToast("该图层未显示,无法定位!");
  610. } else {
  611. // alert(window[layer.layId]);
  612. gisAPI.flyTo(window[layer.layId]);
  613. }
  614. }
  615. }
  616. /**
  617. * 设置图层树的节点是否选中
  618. * @param {Object} layId 节点Id
  619. * @param {Object} isShow 是否选中
  620. */
  621. function setLayerState(layId, isShow) {
  622. for (var i = 0; i < layerConfigs.length; i++) {
  623. if (layerConfigs[i].layId == layId) {
  624. layerConfigs[i].isShow = isShow;
  625. break;
  626. }
  627. }
  628. }
  629. /**
  630. * 根据图层Id获取图层配置JSON
  631. * @param {string} layId 图层Id
  632. */
  633. function getLayerConfig(layId) {
  634. for (var i = 0; i < layerConfigs.length; i++) {
  635. if (layerConfigs[i].layId == layId) {
  636. return layerConfigs[i];
  637. }
  638. }
  639. return undefined;
  640. }
  641. /* 案件标注查询模型 */
  642. var queryCaseLabelsModel = {
  643. page: 0,
  644. /* 查询的起始位置 */
  645. limit: 3000,
  646. /* 每次查询的数量 */
  647. }
  648. /* 案件标注数据数组 [{},{},...] */
  649. var caseLabelsData = [];
  650. /**
  651. * 查询案件的标注数量
  652. * @param {JSON} qModel 查询模型
  653. */
  654. function queryCalseLabels(qModel) {
  655. sendAjax({
  656. data: qModel,
  657. type: 'post',
  658. url: 'appQueryCaseLabels',
  659. waitMessage: '正在加载案件图斑标注数据...',
  660. success: function(resData) {
  661. // alert(JSON.stringify(resData));
  662. var items = resData[0].items;
  663. if (items.length == queryCaseLabelsModel.limit) {
  664. for (var i = 0; i < items.length; i++) {
  665. caseLabelsData.push(items[i]);
  666. /* 绘制试试 */
  667. gisAPI.addCaseLabel({
  668. lng: items[i].lat,
  669. lat: items[i].lng,
  670. alt: items[i].alt,
  671. text: items[i].cstate,
  672. });
  673. }
  674. /* 移动起始点 */
  675. queryCaseLabelsModel.page = queryCaseLabelsModel.page + 1;
  676. /* 继续查询 */
  677. queryCalseLabels(queryCaseLabelsModel);
  678. } else {
  679. for (var i = 0; i < items.length; i++) {
  680. caseLabelsData.push(items[i]);
  681. }
  682. muiAlert(caseLabelsData.length, "提示");
  683. }
  684. },
  685. error: function(err) {
  686. muiAlertError(err);
  687. }
  688. })
  689. }
  690. /**
  691. * 定位
  692. * @param {float} longitude 定位点经度
  693. * @param {float} latitude 定位点纬度
  694. * @param {string} title 案件编号
  695. * @param {string} state 案件状态
  696. * @param {string} area 图斑面积
  697. */
  698. function mapLocation(longitude, latitude, title, state, area) {
  699. printToConsole("定位点位置 lng=" + longitude + " lat=" + latitude);
  700. gisAPI.flyToo({
  701. lng: longitude,
  702. lat: latitude - 0.008,
  703. alt: 500,
  704. heading: 0,
  705. pitch: -45,
  706. duration: 3,
  707. success: function() {
  708. gisAPI.appendLabelToMap({
  709. title: title,
  710. state: '<' + state + '>',
  711. area: '[' + area + ']',
  712. lng: longitude,
  713. lat: latitude,
  714. })
  715. }
  716. });
  717. }
  718. /**
  719. * 按钮点击事件
  720. */
  721. /**
  722. * 图层控制事件
  723. * @param {Object} btnObj 图层控制按钮
  724. */
  725. function EventClick_Layer(btnObj) {
  726. var mainHtml = "";
  727. /* 初始化图层控制控件 */
  728. for (var i = 0; i < nodeFather.length; i++) {
  729. mainHtml += "<h5>" + nodeFather[i] + "</h5>"
  730. mainHtml += "<form id='layerGroup" + i + "' class='mui-input-group'></form>"
  731. }
  732. $("#divLayerList").html(mainHtml);
  733. for (var i = 0; i < layerConfigs.length; i++) {
  734. var layer = layerConfigs[i];
  735. var domDiv = document.createElement('div');
  736. domDiv.className = 'mui-input-row mui-checkbox';
  737. var strHtml = "";
  738. strHtml += "<label><span class='app-icon app-icon-map-layer-normal'></span>" + layer.layName + "</label>";
  739. if (layer.isShow) {
  740. strHtml += "<input name='checkbox' value='Item 1' type='checkbox' checked";
  741. } else {
  742. strHtml += "<input name='checkbox' value='Item 1' type='checkbox'";
  743. }
  744. strHtml += " onclick=\"LayerControl(this," + JSON.stringify(layer).replace(/\"/g, "'") + ")\"/>";
  745. if (layer.layType == layerType.tilesets) {
  746. strHtml += "<span class='app-icon app-icon-map-location cr-layer-control-location'";
  747. strHtml += " onclick=\"LayerTo(this,'" + layer.layId + "')\"/></span>";
  748. }
  749. domDiv.innerHTML = strHtml;
  750. $("#layerGroup" + layer.fatherIdx).append(domDiv);
  751. }
  752. mui('#layerPopover').popover('toggle', btnObj);
  753. }
  754. /**
  755. * 长度测量
  756. * @param {Object} btnObj 按钮
  757. */
  758. function EventClick_MeasureLength(btnObj) {
  759. gisAPI.measureLength(function(msg) {
  760. muiToast(msg);
  761. CaseQueryWindow.hide();
  762. });
  763. }
  764. /**
  765. * 面积测量
  766. * @param {Object} btnObj 按钮
  767. */
  768. function EventClick_MeasureArea(btnObj) {
  769. gisAPI.measureArea(function(msg) {
  770. muiToast(msg);
  771. CaseQueryWindow.hide();
  772. });
  773. }
  774. /**
  775. * GPS定位
  776. * @param {Object} btnObj 按钮
  777. */
  778. function EventClick_Location(btnObj) {
  779. }
  780. /**
  781. * 显示全图
  782. * @param {Object} btnObj 按钮
  783. */
  784. function EventClick_AllView(btnObj) {
  785. /* 进入中国位置 */
  786. gisAPI.setMapRange({
  787. lng: 103.84, //经度
  788. lat: 31.15, // 维度
  789. alt: 24000000, // 高度
  790. heading: 0, //偏航
  791. pitch: -90, //俯仰,人如果在赤道上空,俯仰角为0可见地球。如果在北纬,俯仰角为负才能见地球
  792. roll: 0.0 //翻滚
  793. })
  794. /* 飞行到指定位置 */
  795. gisAPI.flyToRectangle({
  796. strLng: 118.050,
  797. strLat: 34.953,
  798. endLng: 118.530,
  799. endLat: 35.434,
  800. });
  801. }
  802. /**
  803. * 开始从地图上查询案件
  804. */
  805. function startQueryCasesFromMap() {
  806. var extent = $("#divCaseQueryWindow").attr("extent");
  807. /* 隐藏查询气泡窗口 */
  808. CaseQueryWindow.hide();
  809. /* 恢复查询工具初始化状态 */
  810. gisAPI.measureClear();
  811. /* 开始查询 */
  812. caseBase.queryDataByExtent(extent);
  813. }
  814. /**
  815. * 坐标查询
  816. * @param {Object} btnObj 按钮
  817. */
  818. function EventClick_Query_Coords(btnObj) {
  819. console.log("添加要素!");
  820. gisAPI.addFeaturesFromServerByPolygon({
  821. geometry: '118.2485795,35.2265747750001,118.2534336,35.2279738980001,118.259044369,35.226060811,118.259429842,35.2202501680001,118.254076054,35.2193507310001,118.248465285,35.2202787210001,118.2485795,35.2265747750001',
  822. fields: 'DLMC',
  823. url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_RE_WEB_V1/MapServer/12',
  824. }, function(resData) {
  825. console.log(JSON.stringify(resData));
  826. }, function(err) {
  827. muiToast(err);
  828. });
  829. }
  830. /**
  831. * 案件点查询
  832. * @param {Object} btnObj 按钮
  833. */
  834. function EventClick_Query_Point(btnObj) {
  835. gisAPI.casePointQuery(function(msg) {
  836. muiToast(msg);
  837. CaseQueryWindow.hide();
  838. });
  839. }
  840. /**
  841. * 案件区域查询
  842. * @param {Object} btnObj 按钮
  843. */
  844. function EventClick_Query_Area(btnObj) {
  845. gisAPI.casePolygonQuery(function(msg) {
  846. muiToast(msg);
  847. CaseQueryWindow.hide();
  848. });
  849. }
  850. /**
  851. * 清扫工具
  852. * @param {Object} btnObj 按钮
  853. */
  854. function EventClick_Clean(btnObj) {
  855. gisAPI.measureClear(function() {
  856. CaseQueryWindow.hide();
  857. });
  858. /* 输出相机参数 */
  859. var result = gisAPI.exportCameraViewParams();
  860. console.log(JSON.stringify(result));
  861. }
  862. /**
  863. * 开始查询
  864. * @param {Object} btnObj 案件查询按钮
  865. */
  866. function EventClick_Case_Query(btnObj) {
  867. startQueryCasesFromMap();
  868. }
  869. /**
  870. * 查询结果窗口显示/隐藏
  871. * @param {Object} btnObj 按钮
  872. */
  873. function EventClick_QueryWindow(btnObj) {
  874. mui('#queryResultPopover').popover('toggle');
  875. }