GisShareApp3D.html 53 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  6. <title>上海城地API</title>
  7. <style>
  8. html,
  9. body,
  10. #mapDiv {
  11. padding: 0;
  12. margin: 0;
  13. height: 100%;
  14. width: 100%;
  15. }
  16. /*自定义窗口样式*/
  17. .leaflet-popup-content-wrapper {
  18. background-color: rgba(0, 0, 0, 0.5) !important;
  19. color: white !important;
  20. }
  21. .leaflet-popup-tip {
  22. background-color: rgba(0, 0, 0, 0.5) !important;
  23. }
  24. .esri-view-surface--inset-outline:focus::after {
  25. outline: none !important;
  26. }
  27. </style>
  28. <script src="js/echarts.min.js"></script>
  29. <script src="jquery/jquery-2.2.3.min.js"></script>
  30. <script type="text/javascript" src="jquery/xml2json.js"></script>
  31. <script>
  32. var dojoConfig = {
  33. async: true,
  34. parseOnLoad: true,
  35. packages: [{
  36. name: "lib",
  37. location: location.pathname.replace(/\/[^/]+$/, "") + "/lib"
  38. }]
  39. };
  40. </script>
  41. <script src="Common/mapClass/corrugatedPoint/gl-matrix.js"></script>
  42. <!--<script src="http://172.16.28.83/arcgis_api/library/4.17/init.js"></script>-->
  43. <!--<link rel="stylesheet" href="http://172.16.28.83/arcgis_js_api/library/4.17/esri/themes/light/main.css">-->
  44. <script src="http://10.101.35.50/arcgis_js_api/library/4.19/init.js"></script>
  45. <link rel="stylesheet" href="http://10.101.35.50/arcgis_js_api/library/4.19/esri/themes/light/main.css">
  46. <!--<script src="http://172.28.45.174/arcgis_js_api/library/4.15/init.js"></script>-->
  47. <!--<link rel="stylesheet" href="http://172.28.45.174/arcgis_js_api/library/4.15/esri/themes/light/main.css">-->
  48. <link rel="stylesheet" href="css/echartsLayerCss.css">
  49. <!--系统自定义JS-->
  50. <script src="Common/dataClass/XMLUtil.js"></script> <!--XML操作功能-->
  51. <script src="Common/dataClass/ConfigManagertest.js"></script>
  52. <script src="Common/dataClass/DataCommonClass.js"></script>
  53. <script src="Common/dataClass/MD5.js"></script>
  54. <script src="Common/dataClass/Base64.js"></script>
  55. <script src="Common/mapClass/MapClass420.js"></script>
  56. <script src="Common/WsCommonClass.js"></script>
  57. <script src="Common/mapClass/GSFunction.js"></script>
  58. <script src="Common/mapClass/corrugatedPoint/corrugatedPoint.js"></script>
  59. <script>
  60. //监听message
  61. window.onmessage = function (e) {
  62. //alert(e.origin);
  63. //if (e.origin !== 'http://10.101.35.46/WJGisShare/')
  64. //return;
  65. var payload;
  66. try {
  67. payload = JSON.parse(e.data);
  68. }
  69. catch (e) {
  70. return;
  71. }
  72. switch (payload.method) {
  73. case 'ZoomIn':
  74. //localStorage.setItem(payload.key, JSON.stringify(payload.data));
  75. ZoomIn(payload.data);
  76. break;
  77. case 'ZoomOut':
  78. ZoomOut(payload.data);
  79. break;
  80. case 'Clear':
  81. Clear(payload.data);
  82. break;
  83. case 'ViewChange':
  84. ViewChange();
  85. break;
  86. case 'fullExtent':
  87. toFullExtent();
  88. break;
  89. case 'doSetExtent':
  90. doSetExtent(parseInt(payload.data));
  91. break;
  92. case 'measureSquare':
  93. measureSquare();
  94. break;
  95. case 'measureLength':
  96. measureLength();
  97. break;
  98. case 'downLoadPicture':
  99. downLoadPicture();
  100. break;
  101. case 'doGetGraphicByJson':
  102. doGetGraphicByJson(payload.data[0], payload.data[1]);
  103. break;
  104. case 'drawSquare':
  105. drawSquare();
  106. break;
  107. case 'query':
  108. query(payload.data[0], payload.data[1]);
  109. break;
  110. case 'queryByWhereStr':
  111. querybyWhereStr(payload.data[0], payload.data[1]);
  112. break;
  113. case 'openFeatureLayer':
  114. OpenFeatureLayerByID(payload.data[0], payload.data[1]);
  115. break;
  116. case 'openFeatureLayerByName':
  117. // var isVisible=true;
  118. // if(parseInt(payload.data[1])==0)
  119. // {
  120. // isVisible=false;
  121. // }
  122. OpenMapImageLayerByName(payload.data[0], payload.data[1], payload.data[2]);
  123. break;
  124. case "GoToJZ":
  125. {
  126. queryNoFFXYPointJCZ(payload.data[0], payload.data[1], payload.data[2]);
  127. break;
  128. }
  129. case "ShowBuildlayer":{
  130. ShowBuildlayer(payload.data[0]);
  131. break;
  132. }
  133. case "switch2Dor3DMap":{
  134. if (payload.data[0] == "3D") {
  135. switchTo3DMap();
  136. }
  137. else {
  138. switchTo2DMap();
  139. }
  140. break;
  141. }
  142. case "ShowBuildlayerSX":{
  143. ShowBuildlayerSX(payload.data[0]);
  144. break;
  145. }
  146. case "ResettingMap":{
  147. ResettingMap();
  148. break;
  149. }
  150. case "consoleXYZ":{
  151. consoleXYZ();
  152. break;
  153. }
  154. case "doClusterByJson":{
  155. clusterByJson(payload.data[0]);
  156. break;
  157. }
  158. case "CloseChangeLayer":
  159. {
  160. closeMapImageLayerByName();
  161. break;
  162. }
  163. case 'openFeatureLayer0':
  164. var isVisible = true;
  165. if (parseInt(payload.data[0]) == 0) {
  166. isVisible = false;
  167. }
  168. OpenFeatureLayerByID1(0, isVisible);
  169. break;
  170. case 'openFeatureLayer1':
  171. var isVisible = true;
  172. if (parseInt(payload.data[0]) == 0) {
  173. isVisible = false;
  174. }
  175. OpenFeatureLayerByID1(1, isVisible);
  176. break;
  177. case 'openFeatureLayer2':
  178. var isVisible = true;
  179. if (parseInt(payload.data[0]) == 0) {
  180. isVisible = false;
  181. }
  182. OpenFeatureLayerByID1(2, isVisible);
  183. break;
  184. case 'openFeatureLayer3':
  185. var isVisible = true;
  186. if (parseInt(payload.data[0]) == 0) {
  187. isVisible = false;
  188. }
  189. OpenFeatureLayerByID1(3, isVisible);
  190. break;
  191. case 'openFeatureLayer4':
  192. var isVisible = true;
  193. if (parseInt(payload.data[0]) == 0) {
  194. isVisible = false;
  195. }
  196. OpenFeatureLayerByID1(4, isVisible);
  197. break;
  198. case 'openFeatureLayer5':
  199. var isVisible = true;
  200. if (parseInt(payload.data[0]) == 0) {
  201. isVisible = false;
  202. }
  203. OpenFeatureLayerByID1(5, isVisible);
  204. break;
  205. case 'openFeatureLayer6':
  206. var isVisible = true;
  207. if (parseInt(payload.data[0]) == 0) {
  208. isVisible = false;
  209. }
  210. OpenFeatureLayerByID1(6, isVisible);
  211. break;
  212. case 'openFeatureLayer7':
  213. var isVisible = true;
  214. if (parseInt(payload.data[0]) == 0) {
  215. isVisible = false;
  216. }
  217. OpenFeatureLayerByID1(7, isVisible);
  218. break;
  219. case 'openFeatureLayer8':
  220. var isVisible = true;
  221. if (parseInt(payload.data[0]) == 0) {
  222. isVisible = false;
  223. }
  224. OpenFeatureLayerByID1(8, isVisible);
  225. break;
  226. case 'openFeatureLayer9':
  227. var isVisible = true;
  228. if (parseInt(payload.data[0]) == 0) {
  229. isVisible = false;
  230. }
  231. OpenFeatureLayerByID1(9, isVisible);
  232. break;
  233. case 'openFeatureLayer10':
  234. var isVisible = true;
  235. if (parseInt(payload.data[0]) == 0) {
  236. isVisible = false;
  237. }
  238. OpenFeatureLayerByID1(10, isVisible);
  239. break;
  240. case 'setCenterExtent':
  241. setCenterExtent(payload.data[0], payload.data[1], payload.data[2]);
  242. break;
  243. case 'drawCircle':
  244. {
  245. drawCircle(payload.data[0]);
  246. break;
  247. }
  248. case 'queryByCircle':
  249. {
  250. queryByCircle(payload.data[0], payload.data[1], payload.data[2], payload.data[3])
  251. break;
  252. }
  253. case 'doFlashStatus':
  254. {
  255. var flahLayerName = payload.data[0];
  256. switch (flahLayerName) {
  257. case "违章建筑":
  258. flashLayerStatus(fe0, "状态", 1);
  259. break;
  260. case "电梯":
  261. flashLayerStatus(fe4, "状态", 1);
  262. break;
  263. case "虹口烟感":
  264. flashLayerStatus(fe1, "状态", 1);
  265. break;
  266. case "摄像头":
  267. flashLayerStatus(fe2, "状态", 1);
  268. break;
  269. case "危险源":
  270. flashLayerStatus(fe3, "状态", 1);
  271. break;
  272. case "门磁":
  273. flashLayerStatus(fe5, "状态", 1);
  274. break;
  275. default:
  276. ClearLightLayerStatus();
  277. break;
  278. }
  279. break;
  280. }
  281. case "onLocation":
  282. {
  283. setPointBylonlat(payload.data[0], payload.data[1], payload.data[2], payload.data[3], payload.data[4], payload.data[5], payload.data[6]);
  284. break;
  285. }
  286. case "MeasureLengthByPoint":
  287. {
  288. //parent.eval(payload.backfun+"()");
  289. MeasureLengthByPoint(payload.data[0], payload.data[1], payload.data[2], payload.data[3], payload.backfun);
  290. break;
  291. }
  292. case "newQuery":
  293. {
  294. newQuerybyWhereStr(payload.data[0], payload.data[1], GetConfigDataByName("MYQueryLayer"), null, null, payload.data[2]);
  295. break;
  296. }
  297. case "onLocationforGrid" :
  298. {
  299. setPointBylonlatForGrid(payload.data[0], payload.data[1]);
  300. break;
  301. }
  302. case "onLocationforAddress":
  303. {
  304. setPointBylonlatForAddress(payload.data[0], payload.data[1]);
  305. break;
  306. }
  307. case "onQueryByPoint":
  308. {
  309. setPointBylonlatForGetBuffer(payload.data[0], payload.data[1], payload.data[2], payload.data[3], payload.data[4], payload.data[5]);
  310. break;
  311. }
  312. case "onQueryByGrid":
  313. {
  314. getGridGeometry(payload.data[0], payload.data[1]);
  315. break;
  316. }
  317. case "onMapCenter":
  318. {
  319. var mapcenter = m_view.center;
  320. window.parent.postMessage(
  321. {
  322. method: "mapCenterCallback",
  323. data: [JSON.stringify(mapcenter).replace(/\"/g, '"')]
  324. },
  325. '*'
  326. );
  327. break;
  328. }
  329. case "onMapLevel":
  330. {
  331. var mapzoom = m_view.zoom;
  332. window.parent.postMessage(
  333. {
  334. method: "mapLevelCallback",
  335. data: [JSON.stringify(mapzoom).replace(/\"/g, '"')]
  336. },
  337. '*'
  338. );
  339. break;
  340. }
  341. case "onMapSetCenter":
  342. {
  343. goToZoom(payload.data[0], payload.data[1]);
  344. // setPointBylonlatForSetCenter(payload.data[0],payload.data[1]);
  345. break;
  346. }
  347. case "onGetXYbyAddress":
  348. {
  349. getXYbyAddress(payload.data[0]);
  350. break;
  351. }
  352. case "onSetInitExtentByStr":
  353. {
  354. // getXYbyAddress(payload.data[0]);
  355. if (payload.data[0] == "区县边界")
  356. queryForExtent(payload.data[0], "区县名称=" + "'" + payload.data[1] + "'", 100);
  357. else
  358. queryForExtent(payload.data[0], "街道名称=" + "'" + payload.data[1] + "'", 100);
  359. break;
  360. }
  361. case "onQueryByCondition":
  362. {
  363. newQuerybyWhereStr(payload.data[0], payload.data[1], GetConfigDataByName("MYQueryLayer"), null, payload.data[2], payload.data[3]);
  364. break;
  365. }
  366. case "openFeatureLayerByNameandWhere":
  367. {
  368. newOpenFeatureLayer(payload.data[0], payload.data[1], payload.data[2], payload.data[3], payload.data[4]);
  369. break;
  370. }
  371. case "onClickLocation":
  372. {
  373. m_mapClickdraw = true;
  374. m_mapAttribute = payload.data[0];
  375. m_mapToolTip = payload.data[1];
  376. m_mapImgUrl = payload.data[2];
  377. m_mapImgWidth = payload.data[3];
  378. m_mapImgHeight = payload.data[4];
  379. break;
  380. }
  381. case "onSetResizeType":
  382. {
  383. sj_type = payload.data[0];
  384. sj_radius = payload.data[1];
  385. sj_layername = payload.data[2];
  386. break;
  387. }
  388. case "onSetLayerCluster":
  389. {
  390. setLayerCluster(payload.data[0], payload.data[1]);
  391. break;
  392. }
  393. case "onShowPolygonandText":
  394. {
  395. var jsonarr = payload.data[0];
  396. for (var i = 0; i < jsonarr.length; i++) {
  397. var jsonStr = jsonarr[i];
  398. // var test = jsonStr;
  399. ShowPolygonandText(jsonStr.type, jsonStr.name, jsonStr.text);
  400. }
  401. // ShowPolygonandText(payload.data[0],payload.data[1],payload.data[2]);
  402. break;
  403. }
  404. case "onLocationGetLatLon":
  405. {
  406. var action = m_drawtool.create("point");
  407. require(["esri/geometry/Point", "esri/Graphic"],
  408. function (Point, Graphic) {
  409. action.on("draw-complete",
  410. function (evt) {
  411. m_view.graphics.removeAll();
  412. GraphicsLayer_flyTipLayer.removeAll();
  413. var point = new Point({
  414. x: evt.coordinates[0],
  415. y: evt.coordinates[1],
  416. spatialReference: m_view.spatialReference
  417. });
  418. var markerSymbol = {
  419. type: "simple-marker",
  420. color: payload.data[0],
  421. style: "circle",
  422. size: 10
  423. }
  424. var pointGraphic = new Graphic({
  425. geometry: point,
  426. symbol: markerSymbol
  427. });
  428. GraphicsLayer_flyTipLayer.add(pointGraphic);
  429. window.parent.postMessage(
  430. {
  431. method: "onLocationGetLatLonbackfun",
  432. data: [evt.coordinates]
  433. },
  434. '*'
  435. );
  436. });
  437. });
  438. break;
  439. }
  440. case "onDrawPolygonCircle":
  441. {
  442. require(["esri/geometry/Polygon", "esri/Graphic", "esri/geometry/Point", "esri/geometry/Circle"],
  443. function (Polygon, Graphic, Point, Circle) {
  444. m_view.graphics.removeAll();
  445. GraphicsLayer_flyTipLayer.removeAll();
  446. var action = m_drawtool.create("circle");
  447. // 获取焦点
  448. m_view.focus();
  449. //顶点移除事件
  450. action.on("vertex-remove", createCircle);
  451. // 鼠标移动事件
  452. action.on("cursor-update", createCircle);
  453. // 绘制完成事件
  454. action.on("draw-complete", createCirclecomplete);
  455. function createCircle(event) {
  456. //获取所有顶点
  457. var vertices = event.vertices;
  458. //少于一个点无法展示圆
  459. if (vertices.length < 2) {
  460. return
  461. }
  462. //清除之前绘制
  463. GraphicsLayer_flyTipLayer.removeAll();
  464. //生成绘制的图形,两点画圆
  465. var center = new Point({
  466. hasZ: false,
  467. hasM: false,
  468. x: vertices[0][0],
  469. y: vertices[0][1],
  470. spatialReference: m_view.spatialReference
  471. });
  472. var dis = center.distance(new Point({
  473. hasZ: false,
  474. hasM: false,
  475. x: vertices[1][0],
  476. y: vertices[1][1],
  477. spatialReference: m_view.spatialReference
  478. }));
  479. var graphic = new Graphic({
  480. geometry: new Circle({
  481. hasZ: false,
  482. hasM: false,
  483. center: center,
  484. radius: dis,
  485. spatialReference: m_view.spatialReference
  486. }),
  487. symbol: {
  488. type: "simple-fill", // autocasts as new SimpleFillSymbol()
  489. color: [51, 51, 204, 0.9],
  490. style: "solid",
  491. outline: { // autocasts as new SimpleLineSymbol()
  492. color: "white",
  493. width: 1
  494. }
  495. }
  496. });
  497. // 将绘制的图形添加到view
  498. GraphicsLayer_flyTipLayer.add(graphic);
  499. }
  500. function createCirclecomplete(event) {
  501. //获取所有顶点
  502. var vertices = event.vertices;
  503. //少于一个点无法展示圆
  504. if (vertices.length < 2) {
  505. return
  506. }
  507. //清除之前绘制
  508. GraphicsLayer_flyTipLayer.removeAll();
  509. //生成绘制的图形,两点画圆
  510. var center = new Point({
  511. hasZ: false,
  512. hasM: false,
  513. x: vertices[0][0],
  514. y: vertices[0][1],
  515. spatialReference: m_view.spatialReference
  516. });
  517. var dis = center.distance(new Point({
  518. hasZ: false,
  519. hasM: false,
  520. x: vertices[1][0],
  521. y: vertices[1][1],
  522. spatialReference: m_view.spatialReference
  523. }));
  524. var graphic = new Graphic({
  525. geometry: new Circle({
  526. hasZ: false,
  527. hasM: false,
  528. center: center,
  529. radius: dis,
  530. spatialReference: m_view.spatialReference
  531. }),
  532. symbol: {
  533. type: "simple-fill", // autocasts as new SimpleFillSymbol()
  534. color: [51, 51, 204, 0.9],
  535. style: "solid",
  536. outline: { // autocasts as new SimpleLineSymbol()
  537. color: "white",
  538. width: 1
  539. }
  540. }
  541. });
  542. // 将绘制的图形添加到view
  543. GraphicsLayer_flyTipLayer.add(graphic);
  544. window.parent.postMessage(
  545. {
  546. method: "onDrawPolygoncallbackfun",
  547. data: [graphic.geometry.rings]
  548. },
  549. '*'
  550. );
  551. }
  552. });
  553. break;
  554. }
  555. case "onLightArea":
  556. {
  557. highLightArea(payload.data[0], payload.data[1], payload.data[2], payload.data[3]);
  558. break;
  559. }
  560. case "onEchartsRoute":
  561. {
  562. echartsRoute(payload.data[0], payload.data[1], payload.data[2], payload.data[3]);
  563. break;
  564. }
  565. case "onPopupIn":
  566. {
  567. if (popupInfos.length > 0) {
  568. popupShowAll();
  569. }
  570. else {
  571. popupInit(payload.data[0], payload.data[1]);
  572. }
  573. break;
  574. }
  575. case "onPopupClose":
  576. {
  577. popupCloseAll();
  578. popupInfos = [];
  579. break;
  580. }
  581. case 'doDeletePointById':
  582. doDeletePointById(payload.data[0]);
  583. break;
  584. case "doShowAreaName":
  585. doShowAreaName(payload.data[0], payload.data[1], payload.data[2], payload.data[3], payload.data[4]);
  586. break;
  587. case "onDrawPolygonSquare":
  588. {
  589. require(["esri/geometry/Polygon", "esri/Graphic", "esri/geometry/Point", "esri/geometry/Circle"],
  590. function (Polygon, Graphic, Point, Circle) {
  591. m_view.graphics.removeAll();
  592. GraphicsLayer_flyTipLayer.removeAll();
  593. var action = m_drawtool.create("rectangle", {
  594. mode: "click"//点击方式加点
  595. });
  596. // 获取焦点
  597. m_view.focus();
  598. //顶点移除事件
  599. action.on("vertex-remove", createRectangle);
  600. // 鼠标移动事件
  601. action.on("cursor-update", createRectangle);
  602. // 绘制完成事件
  603. action.on("draw-complete", createRectangleComplete);
  604. function createRectangle(event) {
  605. //获取所有顶点
  606. var vertices = event.vertices;
  607. //两点画矩形
  608. if (vertices.length < 2) {
  609. return
  610. }
  611. var rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
  612. //清除之前绘制
  613. GraphicsLayer_flyTipLayer.removeAll();
  614. // 生成绘制的图形
  615. var graphic = new Graphic({
  616. geometry: new Polygon({
  617. hasZ: false,
  618. hasM: false,
  619. rings: [rings],
  620. spatialReference: m_view.spatialReference
  621. }),
  622. symbol: {
  623. type: "simple-fill", // autocasts as new SimpleFillSymbol()
  624. color: [51, 51, 204, 0.9],
  625. style: "solid",
  626. outline: { // autocasts as new SimpleLineSymbol()
  627. color: "white",
  628. width: 1
  629. }
  630. }
  631. });
  632. // 将绘制的图形添加到view
  633. GraphicsLayer_flyTipLayer.add(graphic);
  634. }
  635. function createRectangleComplete(event) {
  636. //获取所有顶点
  637. var vertices = event.vertices;
  638. //两点画矩形
  639. if (vertices.length < 2) {
  640. return
  641. }
  642. var rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
  643. //清除之前绘制
  644. GraphicsLayer_flyTipLayer.removeAll();
  645. // 生成绘制的图形
  646. var graphic = new Graphic({
  647. geometry: new Polygon({
  648. hasZ: false,
  649. hasM: false,
  650. rings: [rings],
  651. spatialReference: m_view.spatialReference
  652. }),
  653. symbol: {
  654. type: "simple-fill", // autocasts as new SimpleFillSymbol()
  655. color: [51, 51, 204, 0.9],
  656. style: "solid",
  657. outline: { // autocasts as new SimpleLineSymbol()
  658. color: "white",
  659. width: 1
  660. }
  661. }
  662. });
  663. // 将绘制的图形添加到view
  664. GraphicsLayer_flyTipLayer.add(graphic);
  665. window.parent.postMessage(
  666. {
  667. method: "onDrawPolygoncallbackfun",
  668. data: [graphic.geometry.rings]
  669. },
  670. '*'
  671. );
  672. }
  673. });
  674. break;
  675. }
  676. case "doCorrugatedPointByOid":
  677. {
  678. doCorrugatedPointByOid(payload.data[0]);
  679. break;
  680. }
  681. case "doClearCorrugatedPoint":
  682. {
  683. doClearCorrugatedPoint();
  684. break;
  685. }
  686. case "doXyToStreetId":
  687. {
  688. doXyToStreetId(payload.data[0], payload.data[1]);
  689. break;
  690. }
  691. case "goToGraphic":{
  692. goToGraphic(payload.data[0], payload.data[1]);
  693. break;
  694. }
  695. case "doWaterRouteClick":
  696. {
  697. if (chartLayer) {
  698. chartLayer.removeLayer();
  699. chartLayer = null;
  700. }
  701. if (chartLayer2) {
  702. chartLayer2.removeLayer();
  703. chartLayer2 = null;
  704. }
  705. if (chartLayer3) {
  706. chartLayer3.removeLayer();
  707. chartLayer3 = null;
  708. }
  709. queryResetNumByType(payload.data[0]);
  710. break
  711. }
  712. }
  713. };
  714. //初始化配置文件
  715. GetConfigData();
  716. loadMap();
  717. function loadMap() {
  718. //判断
  719. if (GetConfigDataByName("maptype") == "3D") {
  720. init3DScene();
  721. }
  722. else {
  723. initMap();
  724. }
  725. }
  726. function onMapLoadInfo() {
  727. postToParentPageMethed("maploadCallback", []);
  728. }
  729. function onMapLoaded() {
  730. //removeLoadingDiv();
  731. // GetLayerMainRestInfo2(GetConfigDataByName("MYQueryLayer"));
  732. // var test = GetConfigDataByName("MYCXFeatureLayerLayer");
  733. // setPointBylonlat(121,30);
  734. //alert("加载完成");
  735. }
  736. //--------------- 按钮事件 -----------------
  737. //切换二三维地图
  738. function onViewTestClick() {
  739. ViewChange()
  740. }
  741. function ViewChange() {
  742. // m_view.container = null;
  743. // showLoadingDiv("正在切换地图,请稍后...");
  744. if (currentMapMode == "2D") {
  745. switchTo3DMap();
  746. }
  747. else {
  748. switchTo2DMap();
  749. }
  750. }
  751. //清空地图
  752. function btClear_Click() {
  753. //Clear();
  754. }
  755. function Clear(type) {
  756. require(["esri/layers/GraphicsLayer"],
  757. function ( GraphicsLayer) {
  758. switch (type) {
  759. case "all":
  760. {
  761. m_map.remove(GraphicsLayer_DrawLayer)
  762. GraphicsLayer_DrawLayer = new GraphicsLayer({id: "myDrawGLayer"});
  763. GraphicsLayer_DrawLayer.listMode = "hide";
  764. m_map.add(GraphicsLayer_DrawLayer);
  765. GraphicsLayer_myLayer.removeAll();
  766. isInLightArea = ""
  767. // GraphicsLayer_DrawLayer.removeAll();
  768. GraphicsLayer_flyTipLayer.removeAll();
  769. if (chartLayer) {
  770. chartLayer.removeLayer();
  771. chartLayer = null;
  772. }
  773. if (chartLayer2) {
  774. chartLayer2.removeLayer();
  775. chartLayer2 = null;
  776. }
  777. if (chartLayer3) {
  778. chartLayer3.removeLayer();
  779. chartLayer3 = null;
  780. }
  781. xmlQueryExtend = null;
  782. queryExtent = null;
  783. break;
  784. }
  785. case "drawLayer":
  786. {
  787. GraphicsLayer_DrawLayer.removeAll();
  788. GraphicsLayer_flyTipLayer.removeAll();
  789. xmlQueryExtend = null;
  790. queryExtent = null;
  791. break;
  792. }
  793. case "queryLayer":
  794. {
  795. GraphicsLayer_myLayer.removeAll();
  796. isInLightArea = ""
  797. GraphicsLayer_flyTipLayer.removeAll();
  798. xmlQueryExtend = null;
  799. queryExtent = null;
  800. break;
  801. }
  802. case "chartLayer":
  803. {
  804. if (chartLayer) {
  805. chartLayer.removeLayer();
  806. chartLayer = null;
  807. }
  808. if (chartLayer2) {
  809. chartLayer2.removeLayer();
  810. chartLayer2 = null;
  811. }
  812. if (chartLayer3) {
  813. chartLayer3.removeLayer();
  814. chartLayer3 = null;
  815. }
  816. break;
  817. }
  818. }
  819. })
  820. // var mtype = type | "all";
  821. }
  822. //查询
  823. function btSearch_Click() {
  824. // var dynamicLayerURL="https://services8.arcgis.com/wUIATpkD1eTGk5lC/arcgis/rest/services/CMRQTest2_WFL1/FeatureServer";
  825. // var QueryLayerID="13";
  826. var dynamicLayerURL = "http://139.196.105.31:6080/ArcGIS/rest/services/HKEMAP/MapServer";
  827. if (GetConfigDataByName("QueryLayer")) {
  828. dynamicLayerURL = GetConfigDataByName("QueryLayer");
  829. }
  830. var QueryLayerID = "13";
  831. var whereString = "";
  832. whereString = "HANDLE号 like '%" + document.getElementById("txtSearch").value + "%'";
  833. require([
  834. "esri/Graphic",
  835. "esri/tasks/QueryTask",
  836. "esri/tasks/support/Query",
  837. "esri/symbols/SimpleMarkerSymbol",
  838. "esri/symbols/SimpleLineSymbol",
  839. "esri/geometry/Point",
  840. "esri/geometry/Polyline",
  841. "esri/symbols/PointSymbol3D",
  842. "esri/renderers/SimpleRenderer",
  843. "esri/symbols/ObjectSymbol3DLayer",
  844. "esri/PopupTemplate",
  845. "dojo/_base/array"
  846. ], function (Graphic, QueryTask, Query, SimpleMarkerSymbol, SimpleLineSymbol, Point, Polyline, PointSymbol3D, SimpleRenderer, ObjectSymbol3DLayer, PopupTemplate, array) {
  847. var layerinfo = getLayerByLayerId(QueryLayerID);
  848. var queryTask = new QueryTask(dynamicLayerURL + "/" + QueryLayerID);
  849. var query = new Query();
  850. query.returnGeometry = true;
  851. query.outFields = ["*"];
  852. query.where = whereString;
  853. var defaultPointSymbol = new SimpleMarkerSymbol({
  854. color: [226, 119, 40],
  855. outline: { // autocasts as new SimpleLineSymbol()
  856. color: [255, 255, 255],
  857. width: 2
  858. }
  859. });
  860. var defaultLineSymbol = new SimpleLineSymbol({
  861. color: [255, 0, 255],
  862. width: 2
  863. });
  864. var objectSymbol = new PointSymbol3D({
  865. symbolLayers: [new ObjectSymbol3DLayer({
  866. width: 2,
  867. height: 3,
  868. resource: {
  869. primitive: "cone"
  870. },
  871. material: {
  872. color: "#FFD700"
  873. }
  874. })]
  875. });
  876. var objectSymbolRenderer = new SimpleRenderer({
  877. symbol: objectSymbol
  878. });
  879. //graphicsLayer.renderer = objectSymbolRenderer;
  880. queryTask.execute(query).then(function (results) {
  881. array.forEach(results.features, function (graphic, i) {
  882. var graphic2;
  883. var point2;
  884. switch (graphic.geometry.type) {
  885. case "point":
  886. {
  887. graphic.geometry.z = 1000;
  888. graphic.symbol = defaultPointSymbol;
  889. break;
  890. }
  891. case "polyline":
  892. var geo = Polyline(graphic.geometry);
  893. geo.hasZ = true;
  894. geo.hasM = false;
  895. var paths = geo.paths;
  896. for (var i = 0; i < paths.length; i++) {
  897. for (var j = 0; j < paths[i].length; j++) {
  898. paths[i][j] = [paths[i][j][0], paths[i][j][1], 50];
  899. }
  900. var middleNumber = Math.floor(paths[i].length / 2);
  901. point2 = new Point({
  902. x: paths[i][middleNumber][0],
  903. y: paths[i][middleNumber][1],
  904. z: 50,
  905. spatialReference: view.spatialReference
  906. });
  907. }
  908. graphic.symbol = defaultLineSymbol;
  909. graphic.geometry = geo;
  910. graphic2 = new Graphic();
  911. graphic2.attributes = graphic.attributes;
  912. graphic2.geometry = point2;
  913. graphic2.symbol = objectSymbol;
  914. graphic2.attributes = graphic.attributes;
  915. graphic2.popupTemplate = layerinfo.popupTemplate;
  916. graphic.popupTemplate = new PopupTemplate({
  917. title: "HANDLE号:{HANDLE号}"
  918. });
  919. break;
  920. }
  921. GraphicsLayer_myLayer.add(graphic);
  922. GraphicsLayer_myLayer.add(graphic2);
  923. });
  924. });
  925. })
  926. }
  927. var laylistshow = 0;
  928. function layerOnOff() {
  929. if (laylistshow == 0) {
  930. laylistshow = 1;
  931. m_view.ui.add(layerList, {
  932. position: "bottom-right"
  933. });
  934. }
  935. else {
  936. laylistshow = 0;
  937. m_view.ui.remove(layerList);
  938. }
  939. }
  940. function doSetExtent(num) {
  941. var xmin, ymin, xmax, ymax;
  942. switch (num) {
  943. case 1:
  944. xmin = -17221.816;
  945. ymin = -5450.66;
  946. xmax = -15189.445;
  947. ymax = -4297.402;
  948. break;
  949. case 2:
  950. xmin = -25930.782;
  951. ymin = -10527.042;
  952. xmax = -5599.259;
  953. ymax = 647.995;
  954. break;
  955. case 3:
  956. xmin = -89836.648;
  957. ymin = -56485.216;
  958. xmax = 70797.201;
  959. ymax = 31738.557;
  960. break;
  961. }
  962. setExtent(xmin, ymin, xmax, ymax);
  963. }
  964. var myAttribute, myToolTip, myImgUrl, myImgWidth, myImgHeight;
  965. function setPointBylonlat(x, y, Attribute, ToolTip, ImgUrl, ImgWidth, ImgHeight) {
  966. myAttribute = Attribute;
  967. myToolTip = ToolTip;
  968. myImgUrl = ImgUrl;
  969. myImgWidth = ImgWidth;
  970. myImgHeight = ImgHeight
  971. var url = GetConfigDataByName("WebServiceConvertCoordinateURL");
  972. WsCommonClass("ConvertLonLatToXY", ["lon", "lat"], [x, y], getXYbylonlat, null, url);
  973. }
  974. function getXYbylonlat(evt) {
  975. if (evt[0] == null) {
  976. console.log("经纬度转换失败 error");
  977. return;
  978. }
  979. // console.log(evt[0].textContent);
  980. var point = evt[0].textContent;
  981. var jsonStr = '{"ExChangeRoot": {"Features": [' +
  982. ' { "type": "point", "featureName": "兴趣点", "Feature":[ { "Geometry": { "Points":[ { "Point": "' + point + '" } ]},' +
  983. '"Attribute": ' + myAttribute + ', "ToolTip": "' + myToolTip + '",' +
  984. '"ImgUrl":"' + myImgUrl + '" ,"ImgWidth":"' + myImgWidth + '","ImgHeight":"' + myImgHeight + '" } ] } ]}}';
  985. doGetGraphicByJson(jsonStr, true);
  986. // console.log(jsonStr);
  987. }
  988. function setPointBylonlatForGrid(x, y) {
  989. var url = GetConfigDataByName("WebServiceConvertCoordinateURL");
  990. WsCommonClass("ConvertLonLatToXY", ["lon", "lat"], [x, y], getXYbylonlatforGrid, null, url);
  991. }
  992. function getXYbylonlatforGrid(evt) {
  993. if (evt[0] == null) {
  994. console.log("经纬度转换失败 error");
  995. return;
  996. }
  997. // console.log(evt[0].textContent);
  998. var point = evt[0].textContent;
  999. identifyTask(point, identifyTaskcallbackfun);
  1000. }
  1001. function identifyTaskcallbackfun(results) {
  1002. window.parent.postMessage(
  1003. {
  1004. method: "identifyTaskcallbackfun",
  1005. data: [results]
  1006. },
  1007. '*'
  1008. );
  1009. }
  1010. function setPointBylonlatForAddress(x, y) {
  1011. var url = GetConfigDataByName("WebServiceConvertCoordinateURL");
  1012. WsCommonClass("ConvertLonLatToXY", ["lon", "lat"], [x, y], getXYbylonlatforAddress, null, url);
  1013. }
  1014. function getXYbylonlatforAddress(evt) {
  1015. if (evt[0] == null) {
  1016. console.log("经纬度转换失败 error");
  1017. return;
  1018. }
  1019. // console.log(evt[0].textContent);
  1020. var point = evt[0].textContent;
  1021. // var url = GetConfigDataByName("WebServiceExtraURL");
  1022. // WsCommonClass("GetAddress",["x","y"],[point.split(',')[0],point.split(',')[1]],getAddressCallback,null,url);
  1023. GetAddressByXY(point.split(',')[0], point.split(',')[1], 50);
  1024. }
  1025. function getAddressCallback(evt) {
  1026. if (evt[0] == null) {
  1027. console.log("经纬度转换失败 error");
  1028. return;
  1029. }
  1030. var address = evt[0].textContent;
  1031. window.parent.postMessage(
  1032. {
  1033. method: "addressdataCallback",
  1034. data: [address]
  1035. },
  1036. '*'
  1037. );
  1038. }
  1039. var m_radius;
  1040. var m_layername;
  1041. var m_showGraphic;
  1042. function setPointBylonlatForGetBuffer(x, y, layername, radius, isshow, isGoTo) {
  1043. m_radius = radius;
  1044. m_layername = layername;
  1045. m_showGraphic = isshow;
  1046. var url = GetConfigDataByName("WebServiceConvertCoordinateURL");
  1047. WsCommonClass("ConvertLonLatToXY", ["lon", "lat"], [x - 0, y - 0], getXYbylonlatforBuffer, isGoTo, url);
  1048. }
  1049. function getXYbylonlatforBuffer(evt, isGoTo) {
  1050. if (evt[0] == null) {
  1051. console.log("经纬度转换失败 error");
  1052. return;
  1053. }
  1054. var point = evt[0].textContent;
  1055. // var buffer = getBufferByPoint(point.split(',')[0],point.split(',')[1],m_radius);
  1056. getBufferByPoint(point.split(',')[0], point.split(',')[1], m_radius, m_layername, m_showGraphic, isGoTo);
  1057. //m_layername;
  1058. // queryByGeometryAndLayer(buffer,m_layername);
  1059. }
  1060. function getGridGeometry(grid, layername) {
  1061. getGridGeometryByGridID(grid, layername);
  1062. }
  1063. function setPointBylonlatForSetCenter(x, y) {
  1064. var url = GetConfigDataByName("WebServiceConvertCoordinateURL");
  1065. WsCommonClass("ConvertLonLatToXY", ["lon", "lat"], [x - 0, y - 0], getPointBylonlatForSetCenterr, null, url);
  1066. }
  1067. function getPointBylonlatForSetCenterr(evt) {
  1068. if (evt[0] == null) {
  1069. console.log("经纬度转换失败 error");
  1070. return;
  1071. }
  1072. var point = evt[0].textContent;
  1073. m_view.center.x = point.split(',')[0] - 0;
  1074. m_view.center.y = point.split(',')[1] - 0;
  1075. m_view.goTo({
  1076. target: m_view.center
  1077. });
  1078. // m_view.center = [point.split(',')[0]-0,point.split(',')[1]-0];
  1079. }
  1080. var callMeasureLengthfun;
  1081. function MeasureLengthByPoint(x, y, x1, y1, fun) {
  1082. callMeasureLengthfun = fun;
  1083. var url = GetConfigDataByName("WebServiceConvertCoordinateURL");
  1084. var sql = "121,31;121,31.1";
  1085. sql = x + "," + y + ";" + x1 + "," + y1;
  1086. WsCommonClass("ConvertLonLatToXYMass", ["lonAndLatGroup"], [sql], getXYbylonlatMass, null, url);
  1087. }
  1088. function getXYbylonlatMass(evt) {
  1089. console.log(evt[0].textContent);
  1090. var points = evt[0].textContent.split(';');
  1091. var x = points[0].split(',')[0];
  1092. var y = points[0].split(',')[1];
  1093. var x1 = points[1].split(',')[0];
  1094. var y1 = points[1].split(',')[1];
  1095. var len = measurePolylineByPoint(x, y, x1, y1);
  1096. // parent.eval(callMeasureLengthfun+"("+ len+")");
  1097. window.parent.postMessage(
  1098. {
  1099. method: callMeasureLengthfun,
  1100. data: [len]
  1101. },
  1102. '*'
  1103. );
  1104. }
  1105. function getXYbyAddress(str) {
  1106. var url = GetConfigDataByName("WebServiceExtraURL");
  1107. WsCommonClass("GetStreetInfo", ["address"], [str], getXYbyAddressCallback, null, url);
  1108. }
  1109. function getXYbyAddressCallback(evt) {
  1110. if (evt[0] == null) {
  1111. console.log("error");
  1112. return;
  1113. }
  1114. // var jsonArray = $.xml2json(evt[0].textContent);
  1115. var jsonArray = $.xml2json(evt[0].innerHTML);
  1116. // var jsonArray = xmltojson(evt[0].textContent);
  1117. //var jsonArray =JSON.parse(evt[0].textContent)[0].data;
  1118. window.parent.postMessage(
  1119. {
  1120. method: "XYbyAddressCallback",
  1121. data: [JSON.stringify(jsonArray).replace(/\"/g, '"')]
  1122. },
  1123. '*'
  1124. );
  1125. }
  1126. function newOpenFeatureLayer(layername, type, name, isGoTo, isOpen) {
  1127. newOpenLayer(layername, type, name, isGoTo, isOpen);
  1128. }
  1129. function popupClick(json) {
  1130. postToParentPageMethed("popupClickReturn", [json]);
  1131. }
  1132. function sqlReturn(evt, keyValue) {
  1133. require(["esri/geometry/Extent", "esri/Graphic"],
  1134. function (Extent, Graphic) {
  1135. var allCount;
  1136. var pageIndex;
  1137. var jsonArray;
  1138. if (evt[0] != null) {
  1139. allCount = JSON.parse(evt[0].textContent)[0].AllCount;
  1140. pageIndex = JSON.parse(evt[0].textContent)[0].pageIndex;
  1141. jsonArray = JSON.parse(evt[0].textContent)[0].data;
  1142. } else {
  1143. jsonArray = []
  1144. }
  1145. switch (keyValue) {
  1146. case "queryResetNumByType":
  1147. {
  1148. var TestData1 = [];
  1149. var TestData2 = [];
  1150. for (var i = 0; i < jsonArray.length; i++) {
  1151. TestData1.push([{
  1152. name: jsonArray[i].water_source_name,
  1153. xy: [jsonArray[i].x1, jsonArray[i].y1]
  1154. },
  1155. {name: jsonArray[i].water_work_name, xy: [jsonArray[i].x2, jsonArray[i].y2]}]);
  1156. TestData2.push([{
  1157. name: jsonArray[i].water_work_name,
  1158. xy: [jsonArray[i].x2, jsonArray[i].y2]
  1159. },
  1160. {name: jsonArray[i].area_name, xy: [jsonArray[i].x3, jsonArray[i].y3]}]);
  1161. }
  1162. echartsWaterSourceToWorkRoute(TestData1, "#3581FF", "", 4);
  1163. echartsWaterWorkToAreaRoute(TestData2, "#42ebff", "", 4);
  1164. break;
  1165. }
  1166. }
  1167. })
  1168. }
  1169. </script>
  1170. </head>
  1171. <body>
  1172. <div id="mapDiv">
  1173. <!--<div id="viewTest">-->
  1174. <!--<button onclick="layerOnOff();">图层开关</button>-->
  1175. <!--</div>-->
  1176. </div>
  1177. <div id="infoDialog" title="详细信息">
  1178. <div id="divShowResult"></div>
  1179. </div>
  1180. </body>
  1181. </html>