MapManager.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. /*+++++++++++++++地图管理类 所有与地图相关的内容均位于此++++++++++++++++++*/
  2. var jtMapKit; //主地图组件
  3. /* 图层类型 */
  4. var LayerType = {
  5. /**
  6. * 业务图层
  7. */
  8. server: 'server',
  9. /**
  10. * 基础图层
  11. */
  12. base: 'base',
  13. }
  14. /* 初始地图中心位置 */
  15. var initMapCenter = {
  16. longitude: 118.2192,
  17. latitude: 35.1711,
  18. scale: 5000,
  19. }
  20. /* 定位比例尺 */
  21. var locationScale = 2500;
  22. /* 案件图层的查询URL及数据过滤条件 */
  23. var caseServerUrl = undefined;
  24. var caseQueryFilter = undefined;
  25. /**
  26. * 加载地图
  27. * @param {string} MainDivID 地图容器Id
  28. * @param {JSON} initLocation 初始化位置
  29. */
  30. function MapInit(MainDivID, initLocation) {
  31. getNetImageRootURL(function(rootUrl) {
  32. //初始化地图组件
  33. jtMapKit = new JTMapKit({
  34. selector: MainDivID,
  35. serverUrl: rootUrl + "/img/",
  36. });
  37. //给地图绑定测量事件
  38. jtMapKit.onMeasureEventComplete = function(result) {
  39. mui.alert(result);
  40. }
  41. /* 给地图绑定查询回调事件 */
  42. jtMapKit.onQueryTackEvent = function(features) {
  43. showQueryTaskResult(features);
  44. }
  45. //挂接主地图的加载事件
  46. jtMapKit.onViewReady = function() {
  47. jtMapKit.loadBaseMap(function() {
  48. //加载影像地图
  49. LoadRasterServer();
  50. //加载矢量地图
  51. LoadVectorServer(initLocation);
  52. });
  53. jtMapKit.setUIZoomVisible(false);
  54. jtMapKit.setUIScaleBarVisible(true);
  55. }
  56. });
  57. }
  58. var layerIndex = 1;
  59. /**
  60. * 加载栅格服务
  61. */
  62. function LoadRasterServer() {
  63. getSaveUserLayers({
  64. success: function(jsonLayers) {
  65. for (var i = 0; i < jsonLayers.length; i++) {
  66. var rasLayer = jsonLayers[i] //获取当前图层
  67. if (rasLayer.layerType == 'base') {
  68. if(rasLayer.layerIsVisible == '1'){
  69. jtMapKit.addTileLayer({
  70. url: rasLayer.layerURL,
  71. id: 'baseYxtMapLayer',
  72. }, parseInt(layerIndex), rasLayer.eName, function() {
  73. printToConsole(rasLayer.cName + "图层加载完成!");
  74. });
  75. layerIndex = layerIndex + 1;
  76. break;
  77. }
  78. }
  79. }
  80. },
  81. error: function(err) {
  82. muiAlert(err, "错误");
  83. }
  84. })
  85. }
  86. /**
  87. * 加载矢量服务
  88. * @param {JSON} initLocation
  89. */
  90. function LoadVectorServer(initLocation) {
  91. getSaveUserLayers({
  92. success: function(jsonLayers) {
  93. //组装一个矢量服务过滤内容
  94. var serverSubLayers = []; //服务的子图层
  95. for (var i = 0; i < jsonLayers.length; i++) {
  96. var vecLayer = jsonLayers[i] //获取当前图层
  97. if (vecLayer.layerType == 'server') {
  98. serverSubLayers.push({
  99. url: vecLayer.layerURL,
  100. id: parseInt(vecLayer.lyrIdx),
  101. title: vecLayer.eName,
  102. visible: vecLayer.layerIsVisible == "1" ? true : false,
  103. source: {
  104. type: 'map-layer',
  105. mapLayerId: parseInt(vecLayer.lyrIdx),
  106. },
  107. definitionExpression: vecLayer.layerIsFilter
  108. });
  109. /* 案件条件保存 */
  110. if (vecLayer.isCase === '1') {
  111. caseServerUrl = vecLayer.layerURL + "/" + vecLayer.lyrIdx;
  112. caseQueryFilter = vecLayer.layerIsFilter;
  113. }
  114. }
  115. }
  116. //对数组进行倒序排列 图层特殊需要 必须这样 否则会导致矢量数据无法加载
  117. serverSubLayers = serverSubLayers.sort(function(json1, json2) {
  118. return json2.id - json1.id;
  119. });
  120. jtMapKit.addDynamicLayer({
  121. url: jsonLayers[0].layerURL,
  122. sublayers: serverSubLayers,
  123. }, 2, "矢量服务", function(fullExtent) {
  124. /* 判断是初始化时是定位需求还是普通需求 */
  125. if (initLocation != undefined) {
  126. initMapCenter.longitude = parseFloat(initLocation.longitue);
  127. initMapCenter.latitude = parseFloat(initLocation.latitude);
  128. initMapCenter.scale = locationScale;
  129. }
  130. jtMapKit.setCenter([initMapCenter.longitude, initMapCenter.latitude]);
  131. jtMapKit.setScale(initMapCenter.scale);
  132. });
  133. },
  134. error: function(err) {
  135. muiAlertError(err);
  136. }
  137. })
  138. }
  139. /**
  140. * 定位地图位置
  141. * @param {string} longitude 定位经度
  142. * @param {string} latitude 定位纬度
  143. */
  144. function mapLocation(longitude, latitude) {
  145. var iLongitude = parseFloat(longitude);
  146. var iLatitude = parseFloat(latitude);
  147. jtMapKit.setCenter([iLongitude, iLatitude]);
  148. jtMapKit.setScale(locationScale);
  149. }
  150. /**
  151. * 切换底图为影像底图
  152. */
  153. function EventClick_ShowRaster() {
  154. jtMapKit.loadBaseRasterMap(function() {
  155. });
  156. }
  157. /**
  158. * 切换底图为标准底图
  159. */
  160. function EventClick_ShowVector() {
  161. jtMapKit.loadBaseVectorMap(function() {
  162. });
  163. }
  164. /**
  165. * 测量长度
  166. */
  167. function EventClick_MeasureLength() {
  168. muiToast("地图单击测量长度!");
  169. jtMapKit.measureLength();
  170. }
  171. /**
  172. * 测量面积
  173. */
  174. function EventClick_MeasureArea() {
  175. muiToast("地图单击测量面积!");
  176. jtMapKit.measureArea();
  177. }
  178. /**
  179. * 定位位置
  180. */
  181. function EventClick_Location() {
  182. //调用GPS定位方法
  183. plusGetLocation(function(latitude, longitude) {
  184. jtMapKit.zoomTo(longitude, latitude);
  185. muiToast("定位成功!");
  186. });
  187. }
  188. /**
  189. * 地图初始化
  190. */
  191. function EventClick_MapInit() {
  192. jtMapKit.setCenter([initMapCenter.longitude, initMapCenter.latitude]);
  193. jtMapKit.setScale(initMapCenter.scale);
  194. muiToast("地图已定位至初始位置!");
  195. }
  196. /**
  197. * 查询地图上点击位置的坐标
  198. */
  199. function EventClick_QueryCoord() {
  200. muiToast("地图单击,获取位子坐标!");
  201. jtMapKit.measureCoordinate();
  202. }
  203. /**
  204. * 输入坐标进行查询定位
  205. */
  206. function EventClick_CoordQuery() {
  207. mui('#popoverCoordLocation').popover('toggle');
  208. }
  209. /**
  210. * 输入定位按钮
  211. */
  212. function EventClick_InputLocation() {
  213. var longitude = $("#iLongitude").val();
  214. var latitude = $("#iLatitude").val();
  215. if (longitude == '') {
  216. muiAlert("请输入经度", "提示", function() {
  217. $("#iLongitude").focus();
  218. });
  219. return;
  220. }
  221. if (latitude == '') {
  222. muiAlert("请输入纬度", "提示", function() {
  223. $("#iLatitude").focus();
  224. });
  225. return;
  226. }
  227. var fLongitude = parseFloat(longitude);
  228. var fLatitude = parseFloat(latitude);
  229. if (fLongitude < 100 || fLongitude > 150) {
  230. muiAlert("经度数值必须在100~150之间", "提示", function() {
  231. $("#iLongitude").focus();
  232. });
  233. return;
  234. }
  235. if (fLatitude < 20 || fLatitude > 50) {
  236. muiAlert("纬度数值必须在20~50之间", "提示", function() {
  237. $("#iLatitude").focus();
  238. });
  239. return;
  240. }
  241. jtMapKit.AddPointToMap(fLongitude, fLatitude);
  242. }
  243. /**
  244. * 地图上点击查询案件
  245. */
  246. function EventClick_PointQuery() {
  247. muiToast("地图单击案件图斑进行查询!");
  248. jtMapKit.queryTackPoint({
  249. url: caseServerUrl,
  250. filter: caseQueryFilter,
  251. });
  252. }
  253. /**
  254. * 地图上区域查询案件
  255. */
  256. function EventClick_AreaQuery() {
  257. // mui('#queryResultPopover').popover('toggle');
  258. muiToast("地图上单击绘制区域,点击查询按钮进行查询!");
  259. jtMapKit.queryTackPolygon({
  260. url: caseServerUrl,
  261. filter: caseQueryFilter,
  262. });
  263. }
  264. /**
  265. * 查询窗口管理 控制 显示\隐藏
  266. */
  267. function EventClick_QueryWindow() {
  268. mui('#queryResultPopover').popover('toggle');
  269. }
  270. /**
  271. * 清除绘制内容 恢复地图初始状态
  272. */
  273. function EventClick_Clean() {
  274. jtMapKit.DeleteTempDraw();
  275. }
  276. /**
  277. * 分屏对比
  278. */
  279. function EventClick_SplitScreen() {
  280. alert(mui('.mui-off-canvas-wrap'));
  281. mui('.mui-off-canvas-wrap').offCanvas('show');
  282. }
  283. /**
  284. * 图层控制事件
  285. * @param {Object} btnObj 图层控制按钮
  286. */
  287. function EventClick_Layer(btnObj) {
  288. domTableYW.innerHTML = "";
  289. domTableYX.innerHTML = "";
  290. getSaveUserLayers({
  291. success: function(jsonLayers) {
  292. for (var i = 0; i < jsonLayers.length; i++) {
  293. var layer = jsonLayers[i];
  294. var parLayer = {
  295. layerType:layer.layerType,
  296. eName:layer.eName,
  297. };
  298. var domDiv = document.createElement('div');
  299. if (layer.layerType == LayerType.server) {
  300. var mmm = "<div class='mui-input-row mui-checkbox'>";
  301. mmm += "<label><span class='app-icon app-icon-map-layer-vector'></span>" + layer.cName +
  302. "</label>";
  303. if (layer.layerIsVisible == "1") {
  304. mmm += "<input name='checkbox' value='Item 1' type='checkbox' checked";
  305. } else {
  306. mmm += "<input name='checkbox' value='Item 1' type='checkbox'";
  307. }
  308. mmm += " onclick=\"LayerControl(this," + JSON.stringify(layer).replace(/\"/g, "'") +
  309. ")\">";
  310. } else if (layer.layerType == LayerType.base) {
  311. var mmm = "<div class='mui-input-row mui-radio mui-right'>";
  312. mmm += "<label><span class='app-icon app-icon-map-layer-raster'></span>" + layer.cName +
  313. "</label>"
  314. if (layer.layerIsVisible == "1") {
  315. mmm += "<input name='radio' value='Item 1' type='radio' checked";
  316. } else {
  317. mmm += "<input name='radio' value='Item 1' type='radio'";
  318. }
  319. mmm += " onclick=\"LayerControl(this," + JSON.stringify(layer).replace(/\"/g, "'") +
  320. ")\">";
  321. }
  322. mmm += "</div>";
  323. domDiv.innerHTML = mmm;
  324. if (layer.layerType == LayerType.server) {
  325. domTableYW.appendChild(domDiv);
  326. } else if (layer.layerType == LayerType.base) {
  327. domTableYX.appendChild(domDiv);
  328. }
  329. }
  330. /* 打印 */
  331. //console.log(domTableYW.innerHTML);
  332. mui('#layerPopover').popover('toggle', btnObj);
  333. },
  334. error: function(err) {
  335. muiAlertError(err);
  336. }
  337. })
  338. }
  339. /**
  340. * 图层控制
  341. * @param {Object} obj checkBox
  342. * @param {Object} layer 图层
  343. */
  344. function LayerControl(obj, layer) {
  345. getSaveUserLayers({
  346. success: function(jsonLayers) {
  347. var setLayer = undefined;
  348. if (layer.layerType == LayerType.server) {
  349. for (var i = 0; i < jsonLayers.length; i++) {
  350. var tempLayer = jsonLayers[i];
  351. if (tempLayer.eName == layer.eName) {
  352. tempLayer.layerIsVisible = obj.checked ? "1" : "0";
  353. setLayer = tempLayer;
  354. break; //退出循环
  355. }
  356. }
  357. //再次保存
  358. saveUserLayers({
  359. layers: jsonLayers,
  360. success: function() {
  361. //控制图层显示或隐藏
  362. jtMapKit.setVisibleByName(setLayer.eName, setLayer.layerIsVisible ==
  363. "1" ? true : false);
  364. },
  365. error: function(err) {
  366. muiAlertError(err);
  367. }
  368. })
  369. }
  370. if (layer.layerType == LayerType.base) {
  371. var player = jtMapKit.findLayer("baseYxtMapLayer");
  372. if (player != undefined) jtMapKit.removeLayer(player);
  373. for (var i = 0; i < jsonLayers.length; i++) {
  374. var tempLayer = jsonLayers[i];
  375. if (tempLayer.eName == layer.eName) {
  376. tempLayer.layerIsVisible = obj.checked ? "1" : "0";
  377. setLayer = tempLayer;
  378. break; //退出循环
  379. }
  380. }
  381. //再次保存
  382. saveUserLayers({
  383. layers: jsonLayers,
  384. success: function() {
  385. //控制图层显示或隐藏
  386. jtMapKit.addTileLayer({
  387. url: layer.layerURL,
  388. id: 'baseYxtMapLayer',
  389. }, 1, "影像图");
  390. },
  391. error: function(err) {
  392. muiAlertError(err);
  393. }
  394. })
  395. }
  396. },
  397. error: function(err) {
  398. muiAlertError(err);
  399. }
  400. })
  401. }
  402. /**
  403. * 展示查询结果
  404. * @param {Array[{FeaJSON},{FeaJSON},...]} features 查询要素集
  405. */
  406. function showQueryTaskResult(features) {
  407. if (features.length == 0) {
  408. muiAlert('未查询到任何案件!', '提示');
  409. } else {
  410. queryCaseIds.length = 0;
  411. features.forEach(function(result, index) {
  412. queryCaseIds.push(result.attributes.AJH);
  413. });
  414. caseBase.queryDataByCaseId(queryCaseIds);
  415. }
  416. }