JTMapKit.js 103 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770
  1. /**
  2. * 初始化函数
  3. * @param {any} option 一个JSON类型
  4. * selector 地图选择器 对应的DIV
  5. * onMapReady 地图加载完成调用
  6. * onViewReady 地图加载完成后加载底图
  7. * mapType 地图类型 '2d'或者'3d' 默认是'2d'
  8. * center 中心点
  9. * extent 显示范围
  10. * basemap 基础底图
  11. */
  12. function JTMapKit(option) {
  13. this.mapOption = {};
  14. this._init(option || {});
  15. //默认点符号
  16. this.pointSymbol = {
  17. type: "simple-marker",
  18. style: "circle",
  19. color: "red",
  20. size: "10px",
  21. outline: {
  22. color: [255, 255, 0],
  23. width: 1
  24. }
  25. }
  26. //起始点点符号
  27. this.pointStrSymbol = {
  28. type: "simple-marker",
  29. style: "circle",
  30. color: "red",
  31. size: "10px",
  32. outline: {
  33. color: [255, 255, 0],
  34. width: 1
  35. }
  36. }
  37. //终止点点符号
  38. this.pointEndSymbol = {
  39. type: "simple-marker",
  40. style: "circle",
  41. color: "green",
  42. size: "10px",
  43. outline: {
  44. color: [255, 255, 0],
  45. width: 1
  46. }
  47. }
  48. //中间点点符号
  49. this.pointMiddleSymbol = {
  50. type: "simple-marker",
  51. style: "circle",
  52. color: [128, 128, 128],
  53. size: "10px",
  54. outline: {
  55. color: [255, 255, 0],
  56. width: 1
  57. }
  58. }
  59. //默认线符号
  60. this.lineSymbol = {
  61. type: "simple-line",
  62. color: [255, 255, 255],
  63. width: 2,
  64. cap: "round",
  65. join: "round"
  66. }
  67. //默认面符号
  68. this.fillSymbol = {
  69. type: "simple-fill",
  70. color: [4, 90, 141, 0.3],
  71. style: "solid",
  72. outline: {
  73. color: [255, 255, 255],
  74. width: 2
  75. }
  76. }
  77. //默认文字符号
  78. this.textSymbol = {
  79. type: 'text',
  80. color: "#FFFFFF",
  81. haloColor: "#555555",
  82. haloSize: "2px",
  83. text: '',
  84. xoffset: 0,
  85. yoffset: 10,
  86. font: {
  87. size: 10,
  88. family: "Playfair Display",
  89. weight: "bold"
  90. }
  91. };
  92. /* 草图编辑符号 点符号样式 */
  93. this.sketchPointSymbol = {
  94. type: "simple-marker",
  95. style: "circle",
  96. color: [128, 128, 128],
  97. size: "10px",
  98. outline: {
  99. color: [255, 255, 0],
  100. width: 1
  101. }
  102. }
  103. /* 草图编辑符号 面符号样式 */
  104. this.sketchPolygonSymbol = {
  105. type: "simple-fill",
  106. color: [4, 90, 141, 0.3],
  107. style: "solid",
  108. outline: {
  109. type: "simple-line",
  110. color: [255, 255, 255],
  111. width: 1,
  112. style: 'short-dash-dot',
  113. cap: "round",
  114. join: "round"
  115. }
  116. }
  117. /* 草图编辑符号 现符号样式 */
  118. this.sketchLineSymbol = {
  119. type: "simple-line",
  120. color: [255, 255, 255],
  121. width: 1,
  122. style: 'short-dash-dot',
  123. cap: "round",
  124. join: "round"
  125. }
  126. /* GPS图片符号 */
  127. this.gpsSysmbol = {
  128. type: "picture-marker",
  129. url: this.serverUrl + 'icon_gps_cn.png',
  130. width: "40px",
  131. height: "40px",
  132. angle: 0,
  133. }
  134. this.isDrawing = false; //正在绘制中,用于控制多点绘制
  135. /* 操作类型 */
  136. this.actionType = {
  137. unknown: 'unknown', //未知
  138. LandAnalysis: 'LandAnalysis', //地类分析
  139. CaseAnalysis: 'CaseAnalysis', //案件占压分析
  140. ForestAnalysis: 'ForestAnalysis', //林地占压分析
  141. DiggingsAnalysis: 'DiggingsAnalysis', //矿区治理区占地分析
  142. LayerQueryPoint: 'LayerQueryPoint', //点击查询图层数据
  143. LayerQueryPolygon: 'LayerQueryPolygon', //区域查询图层数据
  144. CommonSpatialAnalysis: 'CommonSpatialAnalysis', //通用空间占地分析
  145. };
  146. this.currentActionType = this.actionType.unknown; //当前操作类型
  147. }
  148. /**
  149. * 原型中添加的方法
  150. * @param {any} option
  151. */
  152. JTMapKit.prototype.extend = function(option) {
  153. for (key in option) {
  154. JTMapKit.prototype[key] = option[key];
  155. }
  156. }
  157. /**+++++++++++++++初始化相关内容+++++++++++++++++*/
  158. JTMapKit.prototype.extend({
  159. /**
  160. * 默认执行的初始化信息
  161. * @param {any} option
  162. */
  163. _init: function(option) {
  164. this.selector = option.selector || 'map'; //地图选择器 对应的DIV控件
  165. this.serverUrl = option.serverUrl;
  166. this.onMapReady = option.onMapReady; //地图加载完后处理
  167. this.onViewReady = option.onViewReady; //mapView加载完成后添加底图
  168. this.onViewEventPointMove = option.onViewEventPointMove; //地图鼠标移动事件
  169. this.onQueryTackEvent = option.onQueryTackEvent; //查询结果监听事件
  170. this.onViewEventChange = option.onViewEventChange; //视图变化监听事件
  171. this.onPrintEventProgress = option.onPrintEventProgress; //地图正在输出中
  172. this.onPrintEventComplete = option.onPrintEventComplete; //地图输出完成事件
  173. this.onEventError = option.onEventError; //错误事件接收
  174. this.onCaseQueryPolygonBegin = option.onCaseQueryPolygonBegin; //区域查询方式查询案件开始监听
  175. this.mapType = option.mapType || '2d'; //地图类型,2d,3d
  176. //小组件
  177. this.uiZoom = null; //放大缩小组件
  178. this.uiScaleBar = null; //比例尺组件
  179. //地图相关参数
  180. this.mapOption.basemap = option.basemap; //底图
  181. this.mapOption.center = option.center; //中心点
  182. this.mapOption.extent = option.extent; //全图
  183. this.subDomains = ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]; //天地图的URL服务器
  184. //gov.cn
  185. this.baseMapVectorURL =
  186. "http://{subDomain}.tianditu.com/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=944815e0a333f538646868d896ef7378";
  187. this.baseMapVectorLabelURL =
  188. "http://{subDomain}.tianditu.com/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=944815e0a333f538646868d896ef7378";
  189. this.baseMapRasterURL =
  190. "http://{subDomain}.tianditu.com/DataServer?T=img_w&x={col}&y={row}&l={level}&tk=944815e0a333f538646868d896ef7378";
  191. this.baseMapRasterLabelURL =
  192. "http://{subDomain}.tianditu.com/DataServer?T=cia_w&x={col}&y={row}&l={level}&tk=944815e0a333f538646868d896ef7378";
  193. //绘图相关
  194. this.draw = undefined;
  195. if (this.mapType.toLocaleLowerCase() === '3d') {
  196. } else {
  197. this._init2dMap(option);
  198. }
  199. },
  200. /**
  201. * 创建tms格式的底图
  202. * @param {String} baseMapUrl 底图服务地址
  203. * @param {Function} callComplete 完成回调callComplete(baseLayer)
  204. */
  205. _initBaseMapTMSLayer: function(baseMapUrl, callComplete) {
  206. if (!baseMapUrl && callComplete) callComplete(undefined);
  207. require(["esri/layers/BaseTileLayer"], function(BaseTileLayer) {
  208. /* 创建TMSLayer */
  209. let TMSLayer = BaseTileLayer.createSubclass({
  210. properties: {
  211. urlTemplate: null
  212. },
  213. /* 获取切片地址 */
  214. getTileUrl: function(z, y, x) {
  215. /* 这里对y轴瓦片编号进行转置 */
  216. let y2 = Math.pow(2, z) - y - 1;
  217. return this.urlTemplate
  218. .replace("{z}", z)
  219. .replace("{x}", x)
  220. .replace("{y}", y2);
  221. },
  222. });
  223. /* 创建图层 */
  224. let tmsLayer = new TMSLayer({
  225. urlTemplate: baseMapUrl,
  226. title: '基础图层',
  227. });
  228. /* 返回图层 */
  229. if (callComplete) callComplete(tmsLayer);
  230. });
  231. },
  232. /**
  233. * 创建Mapbox格式的底图
  234. * @param {String} baseMapUrl 底图服务地址
  235. * @param {Function} callComplete 完成回调callComplete(baseLayer)
  236. */
  237. _initBaseMapMapboxLayer(baseMapUrl, callComplete) {
  238. let _self = this;
  239. // require(["esri/layers/WebTileLayer"], function(WebTileLayer) {
  240. // let url =
  241. // "https://api.mapbox.com/styles/v1/chenchen1990/ckvgc14xrh7mo14qowdw4wrkf/tiles/512/{z}/{x}/{y}?access_token=pk.eyJ1IjoiY2hlbmNoZW4xOTkwIiwiYSI6ImNrbzA3eTY1OTA3dXkyd20zdG40ZGdmNXYifQ.xWKxjBG6mEDh55_oln0nAg";
  242. // let mapboxLayer = new WebTileLayer(url, {
  243. // "subDomains": ["a", "b", "c"]
  244. // });
  245. // if (callComplete) callComplete(mapboxLayer);
  246. // });
  247. /* 新的方式添加底图 */
  248. /* 此处注意使用TileLayer导致地图放到一定比例后无法放大 */
  249. require(["esri/layers/MapImageLayer"], function(MapImageLayer) {
  250. var layer = new MapImageLayer({
  251. url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
  252. title: '基础底图',
  253. });
  254. if (callComplete) callComplete(layer);
  255. });
  256. },
  257. /**
  258. * 初始化地图
  259. * @param {JSON} option 配置项
  260. */
  261. _init2dMap: function(option) {
  262. console.log("地图控件开始初始化...");
  263. var self = this;
  264. require(["esri/Map", "esri/views/MapView", "esri/core/urlUtils", "esri/layers/WMTSLayer",
  265. "esri/Basemap"
  266. ], function(Map, MapView, urlUtils, WMTSLayer, Basemap) {
  267. /* 创建底图 */
  268. self._initBaseMapMapboxLayer(option.baseMapUrl, function(baseLayer) {
  269. console.log("创建的底图", baseLayer);
  270. if (baseLayer) {
  271. /* 创建底图 */
  272. let baseMap = new Basemap({
  273. baseLayers: [baseLayer],
  274. });
  275. /* 挂接底图图层创建成功事件 */
  276. baseLayer.on('layerview-create', function() {
  277. if (self.onViewReady) self.onViewReady();
  278. });
  279. /* 挂接底图图层创建失败事件 */
  280. baseLayer.on('layerview-create-error', function(event) {
  281. if (self.onViewReady) self.onViewReady();
  282. });
  283. /* 创建地图实例 */
  284. self.map = new Map({
  285. basemap: baseMap,
  286. });
  287. } else {
  288. if (self.onViewReady) self.onViewReady();
  289. /* 创建地图实例 */
  290. self.map = new Map();
  291. }
  292. /* 创建地图视图实例 */
  293. self.mapView = new MapView({
  294. container: self.selector,
  295. map: self.map,
  296. });
  297. /* 清空所有自带组件 */
  298. self.mapView.ui.components = [];
  299. /* 禁止地图旋转 */
  300. self.mapView.constraints = {
  301. rotationEnabled: false,
  302. // minScale: 10000,
  303. // maxZoom: 22,
  304. }
  305. /* 初始化加载的图层 */
  306. if (!self.loadLayers) {
  307. self.loadLayers = [];
  308. }
  309. /* 注册底图事件 */
  310. self._initRegisterMapEvent();
  311. });
  312. });
  313. },
  314. /**
  315. * 注册地图事件
  316. */
  317. _initRegisterMapEvent: function() {
  318. let _self = this;
  319. this.mapView.when(function() {
  320. /* 注册鼠标移动事件 */
  321. _self.mapView.on("pointer-move", function(event) {
  322. if (self.onViewEventPointMove) {
  323. var mapPoint = self.mapView.toMap({
  324. x: event.x,
  325. y: event.y
  326. });
  327. //构建JSON
  328. var result = {
  329. sx: event.x.toFixed(3),
  330. sy: event.y.toFixed(3),
  331. mx: mapPoint.x.toFixed(3),
  332. my: mapPoint.y.toFixed(3)
  333. }
  334. self.onViewEventPointMove(result);
  335. }
  336. });
  337. /* 注册地图拖动事件 */
  338. _self.mapView.on("drag", function(event) {
  339. if (self.onViewEventChange) {
  340. self.onViewEventChange(self.mapView.extent);
  341. }
  342. });
  343. /* 注册滚轮事件 */
  344. _self.mapView.on("mouse-wheel", function(event) {
  345. //此处使用延时 主要是因为mouse-wheel事件是在滚轮刚开始滚动时就开始
  346. //而不是在滚动结束时开始
  347. window.setTimeout(function() {
  348. if (self.onViewEventChange) {
  349. self.onViewEventChange(self.mapView.extent);
  350. }
  351. }, 1000);
  352. });
  353. /* 注册地图变化事件 */
  354. _self.mapView.on("resize", function(event) {
  355. if (_self.onViewEventChange) {
  356. _self.onViewEventChange(_self.mapView.extent);
  357. }
  358. console.log('地图变化');
  359. });
  360. });
  361. },
  362. /**
  363. * 设置范围
  364. * @param {any} extent
  365. */
  366. setExtent: function(extent) {
  367. this.mapView.extent = extent;
  368. },
  369. /**
  370. * 设置放大比例
  371. * @param {any} zoom
  372. */
  373. setZoom: function(zoom) {
  374. this.mapView.zoom = zoom;
  375. },
  376. /**
  377. * 设置地图中心点
  378. * @param {any} center
  379. */
  380. setCenter: function(center) {
  381. this.mapView.center = center;
  382. },
  383. /**
  384. * 设置比例尺
  385. * @param {any} scale
  386. */
  387. setScale: function(scale) {
  388. this.mapView.scale = scale;
  389. },
  390. // 隐藏放大缩小的工具条
  391. hidenZoomToolBar: function() {
  392. this.mapView.ui.remove("zoom");
  393. },
  394. /** 隐藏底部的LOGO */
  395. hidenLogo: function() {
  396. this.mapView.ui.remove("attribution");
  397. },
  398. /** 放大 */
  399. zoomIn: function() {
  400. var self = this;
  401. require(["esri/widgets/Zoom"], function(Zoom) {
  402. var zoom = new Zoom({
  403. view: self.mapView
  404. });
  405. zoom.zoomIn();
  406. });
  407. },
  408. /** 缩小 */
  409. zoomOut: function() {
  410. var self = this;
  411. require(["esri/widgets/Zoom"], function(Zoom) {
  412. var zoom = new Zoom({
  413. view: self.mapView
  414. });
  415. zoom.zoomOut();
  416. });
  417. },
  418. /**
  419. * 定位地图中心位置
  420. * @param {any} longitude 经度
  421. * @param {any} latitude 纬度
  422. */
  423. zoomTo: function(longitude, latitude) {
  424. var self = this;
  425. require(["esri/geometry/SpatialReference",
  426. "esri/geometry/Extent"
  427. ], function(SpatialReference, Extent) {
  428. var spa = new SpatialReference({
  429. wkid: 4326
  430. });
  431. var extent = new Extent({
  432. xmin: parseFloat(longitude) - 0.002,
  433. ymin: parseFloat(latitude) - 0.002,
  434. xmax: parseFloat(longitude) + 0.002,
  435. ymax: parseFloat(latitude) + 0.002,
  436. spatialReference: spa
  437. })
  438. self.mapView.extent = extent;
  439. });
  440. },
  441. /**
  442. * 缩放地图至指定区域
  443. * @param {JSON} options 配置项
  444. * xmin{double}:经度最小值
  445. * ymin{double}:纬度最小值
  446. * xmax{double}:经度最大值
  447. * ymax{double}:纬度最大值
  448. */
  449. zoomToExtent: function(options) {
  450. var self = this;
  451. require(["esri/geometry/SpatialReference",
  452. "esri/geometry/Extent"
  453. ], function(SpatialReference, Extent) {
  454. var spa = new SpatialReference({
  455. wkid: 4326
  456. });
  457. var extent = new Extent({
  458. xmin: parseFloat(options.xmin),
  459. ymin: parseFloat(options.ymin),
  460. xmax: parseFloat(options.xmax),
  461. ymax: parseFloat(options.ymax),
  462. spatialReference: spa
  463. })
  464. self.mapView.extent = extent;
  465. });
  466. },
  467. /**
  468. * 缩放地图至指定区域
  469. * @param {JSON} options 配置项
  470. * xmin{double}:经度最小值
  471. * ymin{double}:纬度最小值
  472. * xmax{double}:经度最大值
  473. * ymax{double}:纬度最大值
  474. */
  475. zoomToExtentNormal: function(options) {
  476. let self = this;
  477. require(["esri/geometry/SpatialReference",
  478. "esri/geometry/Extent"
  479. ], function(SpatialReference, Extent) {
  480. let extent = new Extent({
  481. xmin: parseFloat(options.xmin),
  482. ymin: parseFloat(options.ymin),
  483. xmax: parseFloat(options.xmax),
  484. ymax: parseFloat(options.ymax),
  485. spatialReference: self.mapView.spatialReference,
  486. })
  487. self.mapView.extent = extent;
  488. });
  489. },
  490. });
  491. /**++++++++++++++添加小组件++++++++++++++++++++*/
  492. JTMapKit.prototype.extend({
  493. /**
  494. * 添加放大缩小组件
  495. */
  496. setUIZoomVisible: function(isVisible) {
  497. var self = this;
  498. require(["esri/widgets/Zoom"], function(Zoom) {
  499. if (self.uiZoom == null) {
  500. self.uiZoom = new Zoom({
  501. view: self.mapView,
  502. id: "toolsZoom"
  503. });
  504. }
  505. var widget = self.mapView.ui.find("toolsZoom");
  506. if (isVisible) {
  507. if (widget == undefined) {
  508. self.mapView.ui.add(self.uiZoom, {
  509. position: "top-left",
  510. });
  511. }
  512. } else {
  513. if (widget != undefined) {
  514. self.mapView.ui.remove(self.uiZoom);
  515. }
  516. }
  517. });
  518. },
  519. /**
  520. * 添加放大缩小组件
  521. */
  522. setUIScaleBarVisible: function(isVisible) {
  523. var self = this;
  524. require(["esri/widgets/ScaleBar"], function(ScaleBar) {
  525. if (self.uiScaleBar == null) {
  526. self.uiScaleBar = new ScaleBar({
  527. view: self.mapView,
  528. id: "toolsScaleBar",
  529. unit: "metric",
  530. });
  531. }
  532. var widget = self.mapView.ui.find("toolsScaleBar");
  533. if (isVisible) {
  534. if (widget == undefined) {
  535. self.mapView.ui.add(self.uiScaleBar, {
  536. position: "bottom-right",
  537. });
  538. }
  539. } else {
  540. if (widget != undefined) {
  541. self.mapView.ui.remove(self.uiScaleBar);
  542. }
  543. }
  544. });
  545. },
  546. });
  547. /**+++++++++++++++添加加载图层的相关内容+++++++++*/
  548. JTMapKit.prototype.extend({
  549. /**
  550. * 添加到图层中
  551. * @param {any} id 图层ID 如果时服务图层 则代表子图层的索引Index
  552. * @param {any} title 图层的名称
  553. * @param {any} visible 图层是否可见
  554. * @param {any} type 图层的类型
  555. * @param {any} slayer 所属服务图层
  556. */
  557. _addLayerToLayers: function(id, title, visible, type, slayer) {
  558. var self = this;
  559. self.loadLayers.push({
  560. id: id,
  561. title: title,
  562. visible: visible,
  563. type: type,
  564. slayer: slayer
  565. });
  566. },
  567. /**
  568. * 添加动态服务图层
  569. * @param {JSON} options 配置项
  570. * options.url{string}:服务地址
  571. * options.title{string}:图层标题
  572. * options.subids{array}:子图层id集合
  573. * options.visible{boolean}:图层是否显示
  574. * @param {function} callSuccess 成功回调
  575. * @param {function} callError 错误回调
  576. */
  577. addDynamicLayer: function(options, callSuccess, callError) {
  578. if (!options) return;
  579. /* 对子图层进行设置 */
  580. if (!options.subids || !options.subids.length) return;
  581. let sublayers = [];
  582. for (let subid of options.subids) {
  583. sublayers.push({
  584. id: subid,
  585. definitionExpression: options.filter == undefined ? "" : options
  586. .filter,
  587. })
  588. }
  589. let _self = this;
  590. require(["esri/layers/MapImageLayer"], function(MapImageLayer) {
  591. var layer = new MapImageLayer({
  592. url: options.url,
  593. title: options.title,
  594. sublayers: sublayers,
  595. visible: options.visible == undefined ? false : options
  596. .visible,
  597. });
  598. /* 添加成功加载监听 */
  599. layer.on("layerview-create", function() {
  600. layer.sublayers.find(function(subLayer) {
  601. subLayer.labelsVisible = options
  602. .labelVisible ===
  603. undefined ?
  604. false : options.labelVisible;
  605. })
  606. /* 设置子图层 */
  607. if (callSuccess) callSuccess();
  608. });
  609. /* 添加添加错误监听 */
  610. layer.on("layerview-create-error", function(event) {
  611. if (callError) callError(event.error.message);
  612. });
  613. _self.map.add(layer, 1);
  614. });
  615. },
  616. /**
  617. * 添加发布的切片服务
  618. * @param {JSON} options 配置项
  619. * options.url{string}:服务地址
  620. * options.title{string}:图层标题
  621. * @param {function} callSuccess 成功回调
  622. * @param {function} callError 错误回调
  623. */
  624. addTileLayer: function(options, callSuccess, callError) {
  625. if (!options) {
  626. return
  627. }
  628. let _self = this;
  629. require(["esri/layers/TileLayer"], function(TileLayer) {
  630. var layer = new TileLayer({
  631. url: options.url,
  632. title: options.title,
  633. });
  634. /* 添加创建成功回调 */
  635. layer.on("layerview-create", function() {
  636. if (callSuccess) callSuccess();
  637. });
  638. layer.on("layerview-create-error", function(event) {
  639. if (callError) callError(event.error.message);
  640. });
  641. _self.map.add(layer, 0);
  642. });
  643. },
  644. /**
  645. * 添加WMS服务图层
  646. * @param {any} option 地图选项
  647. * @param {any} index 地图图层索引
  648. */
  649. addWebTitleLayer: function(option, index, name, callback) {
  650. if (!option) {
  651. return;
  652. }
  653. var self = this;
  654. require(["esri/layers/WebTileLayer"], function(WebTileLayer) {
  655. var layer = new WebTileLayer(option);
  656. layer.title = name;
  657. //添加图层到视图中执行该代码
  658. layer.on("layerview-create", function() {
  659. //将该图层添加到图层中
  660. self._addLayerToLayers(layer.id, layer.title, layer
  661. .visible,
  662. "webtilelayer",
  663. undefined);
  664. if (callback) {
  665. callback();
  666. }
  667. });
  668. layer.on("layerview-create-error", function(event) {
  669. alert(event.error.message);
  670. });
  671. self.map.add(layer, index);
  672. return layer;
  673. });
  674. },
  675. /**
  676. * 加载底图
  677. * @param {Object} callback 加载完成后回调
  678. */
  679. loadBaseMap: function(callback) {
  680. var self = this;
  681. //添加天地图的影像图 回调后添加其他图层 主要时为了保证能够正常获取地图视图的坐标系
  682. self.addWebTitleLayer({
  683. urlTemplate: self.baseMapRasterURL,
  684. subDomains: self.subDomains,
  685. }, 0, "天地图影像图", function() {
  686. //添加天地图的标注图
  687. self.addWebTitleLayer({
  688. urlTemplate: self.baseMapRasterLabelURL,
  689. subDomains: self.subDomains,
  690. }, 100, "天地图标注", function() {
  691. callback();
  692. });
  693. });
  694. },
  695. /**
  696. * 切换底图为影像底图
  697. * @param {Object} callback 加载完成回调
  698. */
  699. loadBaseRasterMap: function(callback) {
  700. var self = this;
  701. self.map.layers.removeAt(0);
  702. self.map.layers.removeAt(100);
  703. //添加天地图的影像图 回调后添加其他图层 主要时为了保证能够正常获取地图视图的坐标系
  704. self.addWebTitleLayer({
  705. urlTemplate: self.baseMapRasterURL,
  706. subDomains: self.subDomains,
  707. }, 0, "天地图影像图", function() {
  708. //添加天地图的标注图
  709. self.addWebTitleLayer({
  710. urlTemplate: self.baseMapRasterLabelURL,
  711. subDomains: self.subDomains,
  712. }, 100, "天地图标注", function() {
  713. callback();
  714. });
  715. });
  716. },
  717. /**
  718. * 切换底图为标准底图
  719. * @param {Object} callback 加载完成回调
  720. */
  721. loadBaseVectorMap: function(callback) {
  722. var self = this;
  723. self.map.layers.removeAt(0);
  724. self.map.layers.removeAt(100);
  725. //添加天地图的影像图 回调后添加其他图层 主要时为了保证能够正常获取地图视图的坐标系
  726. self.addWebTitleLayer({
  727. urlTemplate: self.baseMapVectorURL,
  728. subDomains: self.subDomains,
  729. }, 0, "天地图影像图", function() {
  730. //添加天地图的标注图
  731. self.addWebTitleLayer({
  732. urlTemplate: self.baseMapVectorLabelURL,
  733. subDomains: self.subDomains,
  734. }, 100, "天地图标注", function() {
  735. callback();
  736. });
  737. });
  738. },
  739. /**
  740. * 获取加载的图层信息
  741. * @param {Object} callback 获取完成回调
  742. * callback([{title:},....])
  743. */
  744. getLayers: function(callback) {
  745. let _self = this;
  746. let resLayers = [];
  747. this.map.layers.forEach(function(layer, index) {
  748. resLayers.push({
  749. title: layer.title,
  750. });
  751. if (index === _self.map.layers.length - 1 && callback) {
  752. callback(resLayers);
  753. }
  754. });
  755. },
  756. });
  757. /**+++++++++++++++草图编辑相关+++++++++++++++++++*/
  758. JTMapKit.prototype.extend({
  759. /**
  760. * 草图视图模型
  761. * @param {function} callback 回调
  762. */
  763. _sketchViewModel: function(callback) {
  764. var self = this;
  765. require([
  766. "esri/layers/GraphicsLayer",
  767. "esri/widgets/Sketch/SketchViewModel",
  768. "esri/geometry/projection",
  769. "esri/geometry/SpatialReference"
  770. ],
  771. function(GraphicsLayer, SketchViewModel, projection, SpatialReference) {
  772. /* 加入草图图层 */
  773. if (!self.layerSketch) {
  774. self.layerSketch = new GraphicsLayer();
  775. self.map.add(self.layerSketch);
  776. }
  777. /* 如果草图编辑工具已经初始化 则释放资源 重新初始化 */
  778. if (self.sketchViewModel) {
  779. self.sketchViewModel.layer.graphics.removeAll();
  780. self.sketchDrawGeometry = undefined;
  781. self.sketchViewModel.destroy();
  782. self.sketchViewModel = null;
  783. }
  784. /* 创建草图编辑工具 */
  785. if (!self.sketchViewModel) {
  786. self.sketchViewModel = new SketchViewModel({
  787. layer: self.layerSketch,
  788. view: self.mapView,
  789. polygonSymbol: self.sketchPolygonSymbol,
  790. });
  791. /* 绑定创建事件 */
  792. self.sketchViewModel.on("create", function(event) {
  793. if (event.state == "start") {
  794. self.layerSketch.removeAll(); //删除全部
  795. }
  796. /* 输出绘制要素 */
  797. self._outGraphic(event, "创建");
  798. });
  799. /* 绑定redo事件 */
  800. self.sketchViewModel.on('redo', function(event) {
  801. self._outGraphic(event, "恢复");
  802. });
  803. /* 绑定undo事件 */
  804. self.sketchViewModel.on('undo', function(event) {
  805. self._outGraphic(event, "回退");
  806. });
  807. }
  808. /* 创建成功回调 */
  809. if (callback) callback();
  810. });
  811. },
  812. /**
  813. * 草图编辑过程中输出
  814. * @param {Object} event 草图编辑事件
  815. * @param {string} eventName 事件名称
  816. */
  817. _outGraphic: function(event, eventName) {
  818. /* 全局替换 */
  819. let _self = this;
  820. /* 全局定义草图编辑绘制的要素 */
  821. this.sketchDrawGeometry = undefined;
  822. /* 对绘制的草图要素进行赋值 */
  823. if (event.graphic != undefined) {
  824. this.sketchDrawGeometry = event.graphic.geometry
  825. }
  826. /* 对绘制的草图要素进行赋值 */
  827. if (event.graphics != undefined) {
  828. this.sketchDrawGeometry = event.graphics[0].geometry;
  829. }
  830. /* 输出回调 这很重要 */
  831. if (this.onQueryPolygonComplete != undefined && this.sketchDrawGeometry !=
  832. undefined && this
  833. .currentActionType == this.actionType.LayerQueryPolygon) {
  834. /* 多图层区域查询回调 */
  835. if (event.type == 'create' && event.state == 'start') {
  836. this.onQueryPolygonComplete(0, this.sketchDrawGeometry);
  837. } else {
  838. this.onQueryPolygonComplete(this.sketchDrawGeometry.rings[0].length,
  839. this
  840. .sketchDrawGeometry);
  841. }
  842. } else if (this.onCommonSpatialAnalysisComplete != undefined && this
  843. .sketchDrawGeometry !=
  844. undefined && this.currentActionType == this.actionType.CommonSpatialAnalysis
  845. ) {
  846. /* 通用空间占地分析回调 */
  847. if (event.type == 'create' && event.state == 'start') {
  848. this._projectTransform({
  849. geometry: this.sketchDrawGeometry,
  850. wkid: 4326,
  851. }, function(outGeometry) {
  852. _self.onCommonSpatialAnalysisComplete(0, outGeometry);
  853. })
  854. } else {
  855. this._projectTransform({
  856. geometry: this.sketchDrawGeometry,
  857. wkid: 4326,
  858. }, function(outGeometry) {
  859. _self.onCommonSpatialAnalysisComplete(outGeometry.rings[0]
  860. .length,
  861. outGeometry);
  862. })
  863. }
  864. }
  865. },
  866. /**
  867. * 坐标转换
  868. * @param {JSON} options 配置项
  869. * @param {function} callSuccess 转换成功回调
  870. */
  871. _projectTransform: function(options, callSuccess) {
  872. require([
  873. "esri/geometry/projection",
  874. "esri/geometry/SpatialReference"
  875. ], function(projection, SpatialReference) {
  876. let outSpatialReference = new SpatialReference({
  877. wkid: options.wkid,
  878. });
  879. projection.load().then(function() {
  880. let outGeometry = projection.project(options.geometry,
  881. outSpatialReference);
  882. if (callSuccess) callSuccess(outGeometry);
  883. })
  884. });
  885. },
  886. /**
  887. * 提取要素坐标
  888. * @param {Object} geo 待提取的要素
  889. * @param {Function} callback 提取完成回调
  890. */
  891. _pickCoordinate: function(geo, callback) {
  892. var resCoords = "";
  893. if (geo.type == "point") {
  894. resCoords = point.x + "," + point.y;
  895. callback("point", resCoords);
  896. } else if (geo.type == "polyline") {
  897. for (var idx = 0; idx < geo.paths[0].length; idx++) {
  898. var point = geo.getPoint(0, idx);
  899. if (resCoords == "") {
  900. resCoords = point.x + "," + point.y;
  901. } else {
  902. resCoords += "," + point.x + "," + point.y;
  903. }
  904. }
  905. callback("polyline", resCoords);
  906. } else if (geo.type == "polygon") {
  907. for (var idx = 0; idx < geo.rings[0].length; idx++) {
  908. var point = geo.getPoint(0, idx);
  909. if (resCoords == "") {
  910. resCoords = point.x + "," + point.y;
  911. } else {
  912. resCoords += "," + point.x + "," + point.y;
  913. }
  914. }
  915. callback("polygon", resCoords);
  916. } else {
  917. callback(undefined, "");
  918. }
  919. },
  920. /**
  921. * 激活草图绘制面要素工具
  922. */
  923. sketchPolygonTools: function() {
  924. var self = this;
  925. this._sketchViewModel(function() {
  926. self.sketchViewModel.create("polygon", {
  927. mode: "click"
  928. });
  929. });
  930. },
  931. /**
  932. * 草图恢复
  933. */
  934. sketchRedo: function() {
  935. if (this.sketchViewModel) {
  936. this.sketchViewModel.redo();
  937. }
  938. },
  939. /**
  940. * 草图回退
  941. */
  942. sketchUndo: function() {
  943. if (this.sketchViewModel) {
  944. this.sketchViewModel.undo();
  945. }
  946. },
  947. /**
  948. * 草图删除全部绘制
  949. */
  950. sketchDelete: function() {
  951. var self = this;
  952. this._sketchViewModel(function() {
  953. self.sketchViewModel.cancel();
  954. self.layerSketch.removeAll(); //删除全部
  955. });
  956. },
  957. /**
  958. * 获取全部绘制要素
  959. * @param {function} callback 回调
  960. */
  961. sketchGraphic: function(callback) {
  962. var self = this;
  963. if (self.layerSketch) {
  964. if (self.layerSketch.graphics.length > 0) {
  965. self.layerSketch.graphics.filter(function(graphic) {
  966. self.sGraphic = graphic;
  967. require([
  968. "esri/geometry/projection",
  969. "esri/geometry/SpatialReference",
  970. "esri/geometry/support/geodesicUtils"
  971. ],
  972. function(projection, SpatialReference,
  973. geodesicUtils) {
  974. //定义坐标系
  975. var outSpatialReference = new SpatialReference({
  976. wkid: 4326
  977. });
  978. //默认没有坐标系 需要设置
  979. self.sGraphic.geometry.spatialReference = self
  980. .mapView
  981. .spatialReference;
  982. //必须这样执行 只有projection.load()执行完成才能调用坐标转换
  983. projection.load().then(function() {
  984. var proGeometry = projection
  985. .project(self
  986. .sGraphic
  987. .geometry,
  988. outSpatialReference);
  989. self._pickCoordinate(proGeometry,
  990. function(type,
  991. result) {
  992. callback(type, result);
  993. });
  994. });
  995. });
  996. });
  997. } else {
  998. //如果没有绘制要素则返回undefined
  999. callback(0, undefined);
  1000. }
  1001. } else {
  1002. callback(false, undefined);
  1003. }
  1004. },
  1005. /**
  1006. * 添加绘制编辑要素
  1007. * @param {Object} graphic 要素
  1008. */
  1009. sketchAddGraphic: function(graphic) {
  1010. var self = this;
  1011. this._sketchViewModel(function() {
  1012. require([
  1013. "esri/geometry/projection",
  1014. "esri/geometry/SpatialReference",
  1015. "esri/Graphic"
  1016. ],
  1017. function(projection, SpatialReference, Graphic) {
  1018. //定义坐标系
  1019. var outSpatialReference = new SpatialReference({
  1020. wkid: 4326
  1021. });
  1022. graphic.spatialReference = outSpatialReference;
  1023. //由于选择的图斑是WGS84坐标系下的成果 需要改正
  1024. projection.load().then(function() {
  1025. self.layerSketch.removeAll();
  1026. var polygon = projection.project(graphic
  1027. .geometry, self
  1028. .mapView
  1029. .spatialReference);
  1030. var resGraphic = new Graphic({
  1031. geometry: polygon,
  1032. symbol: self.sketchViewModel
  1033. .polygonSymbol,
  1034. });
  1035. self.layerSketch.add(resGraphic);
  1036. });
  1037. });
  1038. });
  1039. },
  1040. });
  1041. /**+++++++++++++++绘制相关+++++++++++++++++++++++*/
  1042. JTMapKit.prototype.extend({
  1043. _draw: function(type, option) {
  1044. var self = this;
  1045. self.isDrawing = true;
  1046. require([
  1047. "esri/views/draw/Draw",
  1048. "esri/layers/GraphicsLayer",
  1049. "esri/Graphic"
  1050. ],
  1051. function(Draw, GraphicsLayer, Graphic) {
  1052. self.clearGraphic();
  1053. if (!self.graphicsLayer) {
  1054. self.graphicsLayer = new GraphicsLayer();
  1055. self.map.layers.add(self.graphicsLayer);
  1056. }
  1057. var draw = new Draw({
  1058. view: self.mapView
  1059. });
  1060. var action = draw.create(type);
  1061. option.type = type;
  1062. //添加点
  1063. action.on("vertex-add", function(evt) {
  1064. self._drawActionHandler(evt, option, Graphic);
  1065. });
  1066. //绘制结束
  1067. action.on("draw-complete", function(evt) {
  1068. self.isDrawing = false;
  1069. self._drawActionHandler(evt, option, Graphic);
  1070. });
  1071. //删除点
  1072. action.on("vertex-remove", function(evt) {
  1073. self._drawActionHandler(evt, option, Graphic);
  1074. });
  1075. action.on("cursor-update", function(evt) {
  1076. if (type === 'circle') {
  1077. self._drawActionHandler(evt, option, Graphic);
  1078. } else if (type === 'rectangle') {
  1079. self._drawActionHandler(evt, option, Graphic);
  1080. }
  1081. })
  1082. if (type === 'multipoint') {
  1083. self.mapView.on('click', function(evt) {
  1084. self._addMultipoint(evt, option, Graphic)
  1085. })
  1086. }
  1087. });
  1088. },
  1089. //绘制处理事件
  1090. _drawActionHandler(evt, option, Graphic) {
  1091. if (option.type === 'circle') {
  1092. this._drawCircleActionHandler(evt, option, Graphic);
  1093. return;
  1094. } else if (option.type === 'rectangle') {
  1095. this._drawRectangleActionHandler(evt, option, Graphic);
  1096. return;
  1097. }
  1098. var geometry;
  1099. if (evt.coordinates) { //绘制单个点时获取的是coordinates
  1100. var coordinates = evt.coordinates;
  1101. geometry = {
  1102. type: "point",
  1103. x: coordinates[0],
  1104. y: coordinates[1],
  1105. spatialReference: this.mapView.spatialReference
  1106. };
  1107. } else if (evt.vertices) {
  1108. var vertices = evt.vertices;
  1109. var type = option.type;
  1110. geometry = {
  1111. spatialReference: this.mapView.spatialReference
  1112. };
  1113. //多点
  1114. if (type === 'multipoint') {
  1115. this.isDrawing = false;
  1116. geometry.points = vertices;
  1117. geometry.type = "multipoint";
  1118. } else if (type === 'polyline') {
  1119. geometry.paths = vertices;
  1120. geometry.type = "polyline";
  1121. } else {
  1122. geometry.rings = vertices;
  1123. geometry.type = "polygon";
  1124. }
  1125. }
  1126. var graphic = new Graphic({
  1127. geometry: geometry,
  1128. symbol: option.symbol
  1129. });
  1130. this.graphicsLayer.removeAll();
  1131. this.graphicsLayer.add(graphic);
  1132. //将绘制的要素通过回调方法回调回去
  1133. if (this.onDrawEventComplete && !this.isDrawing) {
  1134. //将绘制的图元要素返回
  1135. this.onDrawEventComplete(geometry);
  1136. }
  1137. },
  1138. //绘制圆
  1139. _drawCircleActionHandler(evt, option, Graphic) {
  1140. var self = this;
  1141. require(["esri/geometry/Circle",
  1142. "esri/geometry/Point"
  1143. ], function(Circle, Point) {
  1144. var vertices = evt.vertices;
  1145. if (vertices.length < 2) {
  1146. return
  1147. }
  1148. self.graphicsLayer.removeAll();
  1149. var center = new Point({
  1150. hasZ: false,
  1151. hasM: false,
  1152. x: vertices[0][0],
  1153. y: vertices[0][1],
  1154. spatialReference: self.mapView.spatialReference
  1155. });
  1156. var radius = center.distance(new Point({
  1157. hasZ: false,
  1158. hasM: false,
  1159. x: vertices[1][0],
  1160. y: vertices[1][1],
  1161. spatialReference: self.mapView.spatialReference
  1162. }));
  1163. var graphic = new Graphic({
  1164. geometry: new Circle({
  1165. hasZ: false,
  1166. hasM: false,
  1167. center: center,
  1168. radius: radius,
  1169. spatialReference: self.mapView.spatialReference
  1170. }),
  1171. symbol: option.symbol
  1172. });
  1173. self.graphicsLayer.add(graphic);
  1174. });
  1175. },
  1176. //绘制矩形
  1177. _drawRectangleActionHandler(evt, option, Graphic) {
  1178. var self = this;
  1179. require(["esri/geometry/Circle",
  1180. "esri/geometry/Polygon"
  1181. ], function(Circle, Polygon) {
  1182. //获取所有顶点
  1183. var vertices = evt.vertices;
  1184. if (vertices.length < 2) {
  1185. return
  1186. }
  1187. var rings = [vertices[0],
  1188. [vertices[0][0], vertices[1][1]], vertices[1],
  1189. [vertices[1][0], vertices[0][1]]
  1190. ];
  1191. self.graphicsLayer.removeAll();
  1192. var graphic = new Graphic({
  1193. geometry: new Polygon({
  1194. hasZ: false,
  1195. hasM: false,
  1196. rings: [rings],
  1197. spatialReference: self.mapView.spatialReference
  1198. }),
  1199. symbol: option.symbol
  1200. });
  1201. self.graphicsLayer.add(graphic);
  1202. });
  1203. },
  1204. //绘制多个点
  1205. _addMultipoint: function(evt, option, Graphic) {
  1206. if (this.isDrawing) {
  1207. var graphic = new Graphic({
  1208. geometry: evt.mapPoint,
  1209. symbol: option.symbol
  1210. });
  1211. this.graphicsLayer.add(graphic);
  1212. }
  1213. },
  1214. //绘制单个点
  1215. drawPoint: function(option) {
  1216. var options = option || {};
  1217. if (!options.symbol) {
  1218. options.symbol = this.pointSymbol;
  1219. }
  1220. this._draw('point', options);
  1221. },
  1222. //绘制多个点
  1223. drawMultiPoint: function(option) {
  1224. this.isDrawing = true;
  1225. var options = option || {};
  1226. if (!options.symbol) {
  1227. options.symbol = this.pointSymbol;
  1228. }
  1229. this._draw('multipoint', options);
  1230. },
  1231. //绘制线
  1232. drawPolyline: function(option) {
  1233. var options = option || {};
  1234. if (!options.symbol) {
  1235. options.symbol = this.lineSymbol;
  1236. }
  1237. this._draw('polyline', options);
  1238. },
  1239. //绘制多边形
  1240. drawPolygon: function(option) {
  1241. var options = option || {};
  1242. if (!options.symbol) {
  1243. options.symbol = this.fillSymbol;
  1244. }
  1245. this._draw('polygon', options);
  1246. },
  1247. //绘制矩形
  1248. drawRectangle: function(option) {
  1249. var options = option || {};
  1250. if (!options.symbol) {
  1251. options.symbol = this.fillSymbol;
  1252. }
  1253. this._draw('rectangle', options);
  1254. },
  1255. //绘制圆
  1256. drawCircle: function(option) {
  1257. var options = option || {};
  1258. if (!options.symbol) {
  1259. options.symbol = this.fillSymbol;
  1260. }
  1261. this._draw('circle', options);
  1262. },
  1263. //清空绘制图层
  1264. clearGraphic: function() {
  1265. if (this.graphicsLayer) {
  1266. this.graphicsLayer.removeAll();
  1267. }
  1268. this.sketchDelete(); //删除编辑工具编辑内容
  1269. this.queryTaskGraphic = undefined; //初始化查询绘制要素
  1270. this.measureGraphic = undefined; //初始化测量绘制要素
  1271. if (this.draw) {
  1272. this.draw.reset(); //清除全部动作
  1273. this.draw = undefined;
  1274. }
  1275. this.isDrawing = false; //重置测量标志
  1276. this.mapView.popup.visible = false; //关闭气泡窗口
  1277. }
  1278. })
  1279. /**+++++++++++++++查询相关+++++++++++++++++++++++*/
  1280. JTMapKit.prototype.extend({
  1281. /**
  1282. * 查询任务
  1283. * @param {Object} type 类型
  1284. * @param {Object} option 配置项
  1285. */
  1286. _queryTack: function(type, option) {
  1287. var self = this;
  1288. self.clearGraphic();
  1289. self.isDrawing = true;
  1290. require([
  1291. "esri/views/draw/Draw",
  1292. "esri/layers/GraphicsLayer",
  1293. "esri/Graphic"
  1294. ],
  1295. function(Draw, GraphicsLayer, Graphic) {
  1296. if (!self.graphicsLayer) {
  1297. self.graphicsLayer = new GraphicsLayer();
  1298. self.map.layers.add(self.graphicsLayer);
  1299. }
  1300. if (!self.draw) {
  1301. self.draw = draw = new Draw({
  1302. view: self.mapView,
  1303. });
  1304. } else {
  1305. self.draw.reset();
  1306. }
  1307. var action = draw.create(type);
  1308. action.mode = "click"; //只有点击绘制
  1309. option.type = type;
  1310. //添加点
  1311. action.on("vertex-add", function(evt) {
  1312. self._queryTackActionHandler(evt, option, Graphic);
  1313. });
  1314. //绘制结束
  1315. action.on("draw-complete", function(evt) {
  1316. self.isDrawing = false;
  1317. self._queryTackActionHandler(evt, option, Graphic);
  1318. });
  1319. action.on("cursor-update", function(evt) {
  1320. if (type === 'rectangle') {
  1321. self._queryTackRectangleActionHandler(evt, option,
  1322. Graphic);
  1323. }
  1324. })
  1325. });
  1326. },
  1327. /**
  1328. * @param {Object} evt 事件
  1329. * @param {JSON} option 配置项
  1330. * @param {Object} Graphic 要素
  1331. */
  1332. _queryTackActionHandler(evt, option, Graphic) {
  1333. var self = this;
  1334. //矩形查询绘制事件
  1335. if (option.type === 'rectangle') {
  1336. this._queryTackRectangleActionHandler(evt, option, Graphic);
  1337. return;
  1338. }
  1339. var geometry, clickPoint;
  1340. if (evt.coordinates) { //绘制单个点时获取的是coordinates
  1341. var coordinates = evt.coordinates;
  1342. geometry = {
  1343. type: "point",
  1344. x: coordinates[0],
  1345. y: coordinates[1],
  1346. spatialReference: this.mapView.spatialReference
  1347. };
  1348. } else if (evt.vertices) {
  1349. var vertices = evt.vertices;
  1350. //创建点击点 以便实现效果
  1351. clickPoint = {
  1352. type: "point",
  1353. x: vertices[vertices.length - 1][0],
  1354. y: vertices[vertices.length - 1][1],
  1355. spatialReference: this.mapView.spatialReference
  1356. };
  1357. var type = option.type;
  1358. geometry = {
  1359. spatialReference: this.mapView.spatialReference
  1360. };
  1361. if (type === 'polyline') {
  1362. geometry.paths = vertices;
  1363. geometry.type = "polyline";
  1364. } else {
  1365. geometry.rings = vertices;
  1366. geometry.type = "polygon";
  1367. }
  1368. }
  1369. //如果不存在则创建 否则更新
  1370. if (!this.queryTaskGraphic) {
  1371. this.queryTaskGraphic = new Graphic({
  1372. geometry: geometry,
  1373. symbol: option.symbol
  1374. });
  1375. this.graphicsLayer.add(this.queryTaskGraphic);
  1376. } else {
  1377. this.queryTaskGraphic.geometry = geometry;
  1378. }
  1379. //追加点击点
  1380. var graphicPoint = new Graphic({
  1381. geometry: clickPoint,
  1382. symbol: this.pointSymbol
  1383. });
  1384. this.graphicsLayer.add(graphicPoint);
  1385. var mGeometry = this.queryTaskGraphic.geometry; //获取绘制的要素
  1386. /* 判断查询方式 */
  1387. if (option.type === 'point') {
  1388. self._queryTaskFromGeometry(self.queryTaskGraphic.geometry);
  1389. self.queryTaskGraphic = undefined;
  1390. } else if (option.type === 'polygon') {
  1391. //绘制的是查询面 且点数大于等于3
  1392. if (mGeometry.type == 'polygon' && mGeometry.rings[0].length >= 3) {
  1393. if (self.onCaseQueryPolygonBegin != undefined) {
  1394. self.onCaseQueryPolygonBegin();
  1395. }
  1396. }
  1397. }
  1398. },
  1399. /**
  1400. * 显示测量结果
  1401. * @param {ESRIPoint} location 测量结果内容
  1402. * @param {function} callback 点击查询回调
  1403. */
  1404. _showQueryResultPopup: function(location, callback) {
  1405. /* 创建查询按钮 */
  1406. var queryButton = document.createElement("button");
  1407. queryButton.className =
  1408. "mui-btn mui-btn-primary mui-icon app-icon app-icon-map-areaquery wc-btn-child wc-btn-query";
  1409. var btnLabel = document.createTextNode("查询案件");
  1410. queryButton.appendChild(btnLabel);
  1411. queryButton.onclick = function(event) {
  1412. if (callback) callback();
  1413. }
  1414. /* 显示弹窗试试 */
  1415. var popup = this.mapView.popup;
  1416. /* 显示位置 */
  1417. popup.location = location;
  1418. /* 设置标题 */
  1419. popup.title = "区域案件查询";
  1420. /* 设置显示内容 */
  1421. popup.viewModel.content = queryButton;
  1422. /* 控制窗口的停靠按钮是否显示 */
  1423. popup.dockOptions = {
  1424. buttonEnabled: false,
  1425. }
  1426. /* 控制是否显示关闭按钮 */
  1427. popup.visibleElements = {
  1428. closeButton: true,
  1429. featureNavigation: false
  1430. }
  1431. popup.on("trigger-action", function(event) {
  1432. console.log("ActionId = " + event.action.id);
  1433. });
  1434. /* 关闭自动缩放按钮 */
  1435. popup.viewModel.includeDefaultActions = false;
  1436. /* 控制是否显示 */
  1437. popup.visible = true;
  1438. },
  1439. //查询绘制矩形
  1440. _queryTackRectangleActionHandler(evt, option, Graphic) {
  1441. var self = this;
  1442. require(["esri/geometry/Circle",
  1443. "esri/geometry/Polygon"
  1444. ], function(Circle, Polygon) {
  1445. //获取所有顶点
  1446. var vertices = evt.vertices;
  1447. if (vertices.length < 2) {
  1448. return
  1449. }
  1450. var rings = [vertices[0],
  1451. [vertices[0][0], vertices[1][1]], vertices[1],
  1452. [vertices[1][0], vertices[0][1]]
  1453. ];
  1454. self.graphicsLayer.removeAll();
  1455. var graphic = new Graphic({
  1456. geometry: new Polygon({
  1457. hasZ: false,
  1458. hasM: false,
  1459. rings: [rings],
  1460. spatialReference: self.mapView.spatialReference
  1461. }),
  1462. symbol: option.symbol
  1463. });
  1464. self.graphicsLayer.removeAll();
  1465. self.graphicsLayer.add(graphic);
  1466. //执行查询
  1467. if (!self.isDrawing) {
  1468. self._queryTaskFromGeometry(graphic.geometry);
  1469. }
  1470. });
  1471. },
  1472. /**
  1473. * 根据要素进行查询
  1474. * @param {Object} geometry 参考要素
  1475. */
  1476. _queryTaskFromGeometry: function(geometry) {
  1477. var self = this;
  1478. require([
  1479. "esri/tasks/support/Query",
  1480. "esri/tasks/QueryTask",
  1481. "esri/geometry/projection",
  1482. "esri/geometry/SpatialReference"
  1483. ],
  1484. function(Query, QueryTask, projection, SpatialReference) {
  1485. var qTask = new QueryTask({
  1486. url: self.queryURL
  1487. });
  1488. var params = new Query({
  1489. returnGeometry: true,
  1490. outFields: ["*"],
  1491. distance: 2,
  1492. geometry: geometry,
  1493. spatialRelationship: "intersects",
  1494. where: self.queryFilter,
  1495. });
  1496. //定义坐标系
  1497. var outSpatialReference = new SpatialReference({
  1498. wkid: 4326
  1499. });
  1500. qTask.execute(params).then(function(response) {
  1501. /* 打印当前查询类型 */
  1502. console.log("当前查询类型 = " + self.currentActionType);
  1503. /* 如果当前为案件分析动作 且挂接了回调事件 */
  1504. if (self.onForestAnalysisEvent && self
  1505. .currentActionType == self
  1506. .actionType.ForestAnalysis) {
  1507. self.graphicsLayer.removeAll(); //删除绘制的要素
  1508. if (response.features.length == 0) {
  1509. self.onForestAnalysisEvent(undefined);
  1510. } else {
  1511. self.onForestAnalysisEvent(response.features[0]
  1512. .attributes[
  1513. 'OBJECTID']);
  1514. }
  1515. } else if (self.onDiggingsAnalysisEvent && self
  1516. .currentActionType ==
  1517. self
  1518. .actionType.DiggingsAnalysis) {
  1519. self.graphicsLayer.removeAll(); //删除绘制的要素
  1520. if (response.features.length == 0) {
  1521. self.onDiggingsAnalysisEvent(undefined);
  1522. } else {
  1523. self.onDiggingsAnalysisEvent(response.features[
  1524. 0]
  1525. .attributes[
  1526. 'OBJECTID']);
  1527. }
  1528. } else if (self.onQueryTackEvent) {
  1529. self.graphicsLayer.removeAll(); //删除绘制的要素
  1530. //变换投影
  1531. projection.load().then(function() {
  1532. //将最终的要素图形转换为经纬度返回
  1533. response.features.forEach(function(
  1534. graphic, index) {
  1535. graphic.geometry
  1536. .spatialReference = self
  1537. .mapView
  1538. .spatialReference;
  1539. var geo = projection
  1540. .project(graphic
  1541. .geometry,
  1542. outSpatialReference
  1543. );
  1544. graphic.geometry = geo;
  1545. });
  1546. self.onQueryTackEvent(response
  1547. .features);
  1548. });
  1549. }
  1550. /* 清除查询标志 */
  1551. self.currentActionType = self.actionType.unknown;
  1552. });
  1553. }
  1554. );
  1555. },
  1556. /**
  1557. * 根据绘制要素执行查询任务
  1558. */
  1559. queryTaskFromGeometry: function() {
  1560. this._queryTaskFromGeometry(this.queryTaskGraphic.geometry);
  1561. this.queryTaskGraphic = undefined;
  1562. },
  1563. /**
  1564. * 点击查询
  1565. * @param {JSON} option
  1566. */
  1567. queryTackPoint: function(option) {
  1568. var options = option || {};
  1569. this.isDrawing = true;
  1570. if (!options.symbol) {
  1571. options.symbol = this.pointSymbol;
  1572. }
  1573. if (option.url) {
  1574. this.queryURL = option.url;
  1575. }
  1576. if (option.filter) {
  1577. this.queryFilter = option.filter;
  1578. }
  1579. this._queryTack('point', options);
  1580. },
  1581. /**
  1582. * 点图查询案件
  1583. * @param {url} option 配置项
  1584. * url{string}:查询图层访问地址
  1585. * filter{string}:查询图层过滤条件
  1586. * actionType{string}:动作类型
  1587. */
  1588. queryCase: function(option) {
  1589. var options = option || {};
  1590. this.isDrawing = true;
  1591. if (!options.symbol) {
  1592. options.symbol = this.pointSymbol;
  1593. }
  1594. if (option.url) {
  1595. this.queryURL = option.url;
  1596. }
  1597. if (option.filter) {
  1598. this.queryFilter = option.filter;
  1599. }
  1600. /* 设置当前动作类型为案件查询 */
  1601. this.currentActionType = this.actionType.CaseAnalysis;
  1602. this._queryTack('point', options);
  1603. },
  1604. /**
  1605. * 点图查询林地
  1606. * @param {url} option 配置项
  1607. * url{string}:查询图层访问地址
  1608. * filter{string}:查询图层过滤条件
  1609. * actionType{string}:动作类型
  1610. */
  1611. queryForest: function(option) {
  1612. var options = option || {};
  1613. this.isDrawing = true;
  1614. if (!options.symbol) {
  1615. options.symbol = this.pointSymbol;
  1616. }
  1617. if (option.url) {
  1618. this.queryURL = option.url;
  1619. }
  1620. if (option.filter) {
  1621. this.queryFilter = option.filter;
  1622. }
  1623. /* 设置当前动作类型为案件查询 */
  1624. this.currentActionType = this.actionType.ForestAnalysis;
  1625. this._queryTack('point', options);
  1626. },
  1627. /**
  1628. * 点图查询矿区治理区
  1629. * @param {url} option 配置项
  1630. * url{string}:查询图层访问地址
  1631. * filter{string}:查询图层过滤条件
  1632. * actionType{string}:动作类型
  1633. */
  1634. queryDiggingsAnalysis: function(option) {
  1635. var options = option || {};
  1636. this.isDrawing = true;
  1637. if (!options.symbol) {
  1638. options.symbol = this.pointSymbol;
  1639. }
  1640. if (option.url) {
  1641. this.queryURL = option.url;
  1642. }
  1643. if (option.filter) {
  1644. this.queryFilter = option.filter;
  1645. }
  1646. /* 设置当前动作类型为案件查询 */
  1647. this.currentActionType = this.actionType.DiggingsAnalysis;
  1648. this._queryTack('point', options);
  1649. },
  1650. /**
  1651. * @param {Object} option 多边形查询
  1652. */
  1653. queryTackPolygon: function(option) {
  1654. var options = option || {};
  1655. this.isDrawing = true;
  1656. if (!options.symbol) {
  1657. options.symbol = this.fillSymbol;
  1658. }
  1659. if (option.url) {
  1660. this.queryURL = option.url;
  1661. }
  1662. if (option.filter) {
  1663. this.queryFilter = option.filter;
  1664. }
  1665. this._queryTack('polygon', options);
  1666. },
  1667. /**
  1668. * 矩形查询
  1669. * @param {JSON} option 配置项
  1670. */
  1671. queryTackRectangle: function(option) {
  1672. var options = option || {};
  1673. this.isDrawing = true;
  1674. if (!options.symbol) {
  1675. options.symbol = this.fillSymbol;
  1676. }
  1677. if (option.url) {
  1678. this.queryURL = option.url;
  1679. }
  1680. if (option.filter) {
  1681. this.queryFilter = option.filter;
  1682. }
  1683. this._queryTack('rectangle', options);
  1684. },
  1685. /**
  1686. * 根据传入的参数查询图层数据
  1687. * @param {JSON} option 配置项
  1688. * type:{string} 类型<point\polygon>
  1689. * url{string}:查询的服务地址
  1690. * filter{string}:过滤条件
  1691. * queryLayers{array}:查询图层数组
  1692. */
  1693. queryLayerByGeometry: function(option) {
  1694. let _self = this;
  1695. if (option.url) {
  1696. this.queryURL = option.url;
  1697. }
  1698. if (option.filter) {
  1699. this.queryFilter = option.filter;
  1700. }
  1701. if (option.queryLayers) {
  1702. this.queryLayers = option.queryLayers;
  1703. }
  1704. require([
  1705. "esri/geometry/Polygon",
  1706. "esri/geometry/Point",
  1707. ], function(Polygon, Point) {
  1708. let geometry = undefined;
  1709. if (option.type === 'polygon') {
  1710. geometry = new Polygon({
  1711. spatialReference: {
  1712. wkid: option.geometry.spatialReference.wkid,
  1713. },
  1714. rings: option.geometry.rings,
  1715. })
  1716. } else if (option.type === 'point') {
  1717. geometry = new Point({
  1718. spatialReference: {
  1719. wkid: option.geometry.spatialReference.wkid,
  1720. },
  1721. x: option.geometry.x,
  1722. y: option.geometry.y,
  1723. })
  1724. }
  1725. if (geometry != undefined) {
  1726. _self._queryLayersTaskFromGeometry(geometry);
  1727. }
  1728. });
  1729. },
  1730. /**
  1731. * @param {string} type
  1732. * @param {JSON} option 配置项
  1733. */
  1734. _queryLayersTack: function(type, option) {
  1735. var self = this;
  1736. /* 清除绘制的要素 */
  1737. self.clearGraphic();
  1738. /* 设置当前为绘制模式 */
  1739. self.isDrawing = true;
  1740. require([
  1741. "esri/views/draw/Draw",
  1742. "esri/layers/GraphicsLayer",
  1743. "esri/Graphic"
  1744. ],
  1745. function(Draw, GraphicsLayer, Graphic) {
  1746. /* 判断绘制要素的图层是否存在,如果不存在则创建 */
  1747. if (!self.graphicsLayer) {
  1748. self.graphicsLayer = new GraphicsLayer();
  1749. self.map.layers.add(self.graphicsLayer);
  1750. }
  1751. /* 判断绘制是否启用,如果未启用,则创建,如果启用则重置 */
  1752. if (!self.draw) {
  1753. self.draw = draw = new Draw({
  1754. view: self.mapView,
  1755. });
  1756. } else {
  1757. self.draw.reset();
  1758. }
  1759. /* 创建绘制动作 */
  1760. let action = draw.create(type);
  1761. action.mode = "click"; //只有点击绘制
  1762. option.type = type;
  1763. /* 添加绘制点监听 */
  1764. action.on("vertex-add", function(evt) {
  1765. self._queryLayersTackActionHandler(evt, option,
  1766. Graphic);
  1767. });
  1768. /* 添加绘制完成监听 */
  1769. action.on("draw-complete", function(evt) {
  1770. self.isDrawing = false;
  1771. self._queryLayersTackActionHandler(evt, option,
  1772. Graphic);
  1773. });
  1774. });
  1775. },
  1776. /**
  1777. * @param {Object} evt 事件
  1778. * @param {JSON} option 配置项
  1779. * @param {Object} Graphic 要素
  1780. */
  1781. _queryLayersTackActionHandler(evt, option, Graphic) {
  1782. let self = this;
  1783. let geometry, clickPoint;
  1784. if (evt.coordinates) {
  1785. /* 绘制单个点时获取的是coordinates */
  1786. let coordinates = evt.coordinates;
  1787. geometry = {
  1788. type: "point",
  1789. x: coordinates[0],
  1790. y: coordinates[1],
  1791. spatialReference: this.mapView.spatialReference
  1792. };
  1793. } else if (evt.vertices) {
  1794. var vertices = evt.vertices;
  1795. clickPoint = {
  1796. type: "point",
  1797. x: vertices[vertices.length - 1][0],
  1798. y: vertices[vertices.length - 1][1],
  1799. spatialReference: this.mapView.spatialReference
  1800. };
  1801. var type = option.type;
  1802. geometry = {
  1803. spatialReference: this.mapView.spatialReference
  1804. };
  1805. if (type === 'polyline') {
  1806. geometry.paths = vertices;
  1807. geometry.type = "polyline";
  1808. } else {
  1809. geometry.rings = vertices;
  1810. geometry.type = "polygon";
  1811. }
  1812. }
  1813. //如果不存在则创建 否则更新
  1814. if (!this.queryTaskGraphic) {
  1815. this.queryTaskGraphic = new Graphic({
  1816. geometry: geometry,
  1817. symbol: option.symbol
  1818. });
  1819. this.graphicsLayer.add(this.queryTaskGraphic);
  1820. } else {
  1821. this.queryTaskGraphic.geometry = geometry;
  1822. }
  1823. //追加点击点
  1824. var graphicPoint = new Graphic({
  1825. geometry: clickPoint,
  1826. symbol: this.pointSymbol
  1827. });
  1828. this.graphicsLayer.add(graphicPoint);
  1829. var mGeometry = this.queryTaskGraphic.geometry; //获取绘制的要素
  1830. /* 判断查询方式 */
  1831. if (option.type === 'point') {
  1832. if (self.onQueryPointComplete) self.onQueryPointComplete(mGeometry);
  1833. self.queryTaskGraphic = undefined;
  1834. } else if (option.type === 'polygon') {
  1835. //绘制的是查询面 且点数大于等于3
  1836. if (mGeometry.type == 'polygon' && mGeometry.rings[0].length >= 3) {
  1837. if (self.onQueryPolygonComplete) onQueryPolygonComplete(3, mGeometry);
  1838. self.queryTaskGraphic = undefined;
  1839. }
  1840. }
  1841. },
  1842. /**
  1843. * 根据空间要素进行查询
  1844. * @param {Object} geometry 参考要素
  1845. */
  1846. _queryLayersTaskFromGeometry: function(geometry) {
  1847. let self = this;
  1848. require([
  1849. "esri/rest/support/IdentifyParameters",
  1850. "esri/rest/identify",
  1851. "esri/geometry/SpatialReference",
  1852. "esri/geometry/Polygon",
  1853. "esri/geometry/Polyline",
  1854. "esri/geometry/Point",
  1855. ],
  1856. function(IdentifyParameters, identify, SpatialReference, Polygon,
  1857. Polyline, Point) {
  1858. /* 定义查询地址 */
  1859. let url = self.queryURL;
  1860. /* 组织查询的Id数组 */
  1861. let queryIds = [];
  1862. for (let i in self.queryLayers) {
  1863. queryIds.push(parseInt(self.queryLayers[i].id));
  1864. }
  1865. /* 定义查询参数 */
  1866. let parameters = new IdentifyParameters({
  1867. tolerance: 3,
  1868. layerIds: queryIds,
  1869. geometry: geometry,
  1870. mapExtent: self.mapView.extent,
  1871. returnGeometry: true,
  1872. layerOption: 'all',
  1873. })
  1874. /* 结果集合 */
  1875. let results = [];
  1876. /* 开始查询之前传递个事件出去,显示等待框 */
  1877. if (self.onQueryLayersTaskBegin) self.onQueryLayersTaskBegin();
  1878. /* 打印测试 */
  1879. // console.log("查询图层 = " + JSON.stringify(self.queryLayers));
  1880. // console.log("查询图层Id = " + JSON.stringify(queryIds));
  1881. /* 开始查询 */
  1882. identify.identify(url, parameters).then(function(response) {
  1883. // console.log("成功");
  1884. /* 对数据进行组合 */
  1885. for (let i in response.results) {
  1886. let item = response.results[i];
  1887. /* 创建要素 */
  1888. let geometry = undefined;
  1889. let geometryType = item.feature.geometry.type;
  1890. if (geometryType === 'polygon') {
  1891. geometry = new Polygon({
  1892. spatialReference: {
  1893. wkid: item.feature.geometry
  1894. .spatialReference
  1895. .wikd,
  1896. },
  1897. rings: item.feature.geometry.rings,
  1898. })
  1899. } else if (geometryType === 'polyline') {
  1900. geometry = new Polyline({
  1901. spatialReference: {
  1902. wkid: item.feature.geometry
  1903. .spatialReference
  1904. .wikd,
  1905. },
  1906. paths: item.feature.geometry.paths,
  1907. })
  1908. } else if (geometryType === 'point') {
  1909. geometry = new Polyline({
  1910. spatialReference: {
  1911. wkid: item.feature.geometry
  1912. .spatialReference
  1913. .wikd,
  1914. },
  1915. x: item.feature.geometry.x,
  1916. y: item.feature.geometry.y,
  1917. })
  1918. }
  1919. /* 返回的要素不符合要求 则进入下一次循环 */
  1920. if (geometry == undefined) continue;
  1921. let extent = geometry.extent;
  1922. /* 过滤数组 */
  1923. let layerConfigs = self.queryLayers.filter(function(
  1924. p) {
  1925. return p.eName.toUpperCase() === item
  1926. .layerName;
  1927. });
  1928. let layerConfig = layerConfigs[0];
  1929. /* 创建结果要素 */
  1930. let resultFeature = {
  1931. fId: item.feature.attributes['OBJECTID'],
  1932. sValue: item.feature.attributes[layerConfig
  1933. .fldName
  1934. .toUpperCase()],
  1935. xmin: extent.xmin,
  1936. ymin: extent.ymin,
  1937. xmax: extent.xmax,
  1938. ymax: extent.ymax,
  1939. xcenter: extent.center.x,
  1940. ycenter: extent.center.y,
  1941. // attribute: item.feature.attributes,
  1942. }
  1943. /* 结果集中是否已经存在 */
  1944. let isExists = false;
  1945. for (let rIdx in results) {
  1946. let result = results[rIdx];
  1947. if (result.eName == item.layerName) {
  1948. result.features.push(resultFeature)
  1949. isExists = true;
  1950. break;
  1951. }
  1952. }
  1953. /* 如果不存在 */
  1954. if (!isExists) {
  1955. results.push({
  1956. eName: item.layerName,
  1957. cName: layerConfig.cName,
  1958. features: [resultFeature]
  1959. })
  1960. }
  1961. }
  1962. /* 回调返回结果 */
  1963. if (self.onQueryLayersTaskComplete) self
  1964. .onQueryLayersTaskComplete(
  1965. results);
  1966. });
  1967. }
  1968. );
  1969. },
  1970. })
  1971. /**+++++++++++++++测量相关+++++++++++++++++++++++*/
  1972. JTMapKit.prototype.extend({
  1973. /**
  1974. * @param {string} type 测量类型 point/polyline/polygon
  1975. * @param {JSON} option 配置项
  1976. */
  1977. _measure: function(type, option) {
  1978. var self = this;
  1979. //清除已绘制内容
  1980. self.clearGraphic();
  1981. self.isDrawing = true;
  1982. require([
  1983. "esri/views/draw/Draw",
  1984. "esri/layers/GraphicsLayer",
  1985. "esri/Graphic"
  1986. ],
  1987. function(Draw, GraphicsLayer, Graphic) {
  1988. /* 判断绘制图层是否存在 如果不存在 则创建 并加入到地图中 */
  1989. if (!self.graphicsLayer) {
  1990. self.graphicsLayer = new GraphicsLayer();
  1991. self.map.layers.add(self.graphicsLayer);
  1992. }
  1993. /* 判断绘制工具是否已经实例化 如果未实例化则创建 否则重置 */
  1994. if (!self.draw) {
  1995. self.draw = new Draw({
  1996. view: self.mapView
  1997. });
  1998. } else {
  1999. self.draw.reset();
  2000. }
  2001. /* 未绘制工具创建动作 因为reset会清除已添加的动作 */
  2002. action = self.draw.create(type, {
  2003. mode: 'click'
  2004. });
  2005. option.type = type;
  2006. //添加点
  2007. action.on("vertex-add", function(evt) {
  2008. self._measureActionHandler(evt, option, Graphic);
  2009. });
  2010. //绘制结束
  2011. action.on("draw-complete", function(evt) {
  2012. self.isDrawing = false;
  2013. self._measureActionHandler(evt, option, Graphic);
  2014. });
  2015. //删除点
  2016. action.on("vertex-remove", function(evt) {
  2017. self._measureActionHandler(evt, option, Graphic);
  2018. });
  2019. });
  2020. },
  2021. /**
  2022. * 处理绘制事件
  2023. * @param {JSON} evt 事件
  2024. * @param {JSON} option 配置项
  2025. * @param {Object} Graphic 要素类原型
  2026. */
  2027. _measureActionHandler(evt, option, Graphic) {
  2028. var geometry, clickPoint;
  2029. if (evt.coordinates) { //绘制单个点时获取的是coordinates
  2030. var coordinates = evt.coordinates;
  2031. clickPoint = geometry = {
  2032. type: "point",
  2033. x: coordinates[0],
  2034. y: coordinates[1],
  2035. spatialReference: this.mapView.spatialReference
  2036. };
  2037. } else if (evt.vertices) {
  2038. var vertices = evt.vertices;
  2039. var type = option.type;
  2040. //创建点击点 以便实现效果
  2041. clickPoint = {
  2042. type: "point",
  2043. x: vertices[vertices.length - 1][0],
  2044. y: vertices[vertices.length - 1][1],
  2045. spatialReference: this.mapView.spatialReference
  2046. };
  2047. geometry = {
  2048. spatialReference: this.mapView.spatialReference
  2049. };
  2050. if (type === 'polyline') {
  2051. geometry.paths = vertices;
  2052. geometry.type = "polyline";
  2053. } else {
  2054. geometry.rings = vertices;
  2055. geometry.type = "polygon";
  2056. }
  2057. }
  2058. if (!this.measureGraphic) {
  2059. this.measureGraphic = new Graphic({
  2060. geometry: geometry,
  2061. symbol: option.symbol
  2062. });
  2063. this.graphicsLayer.add(this.measureGraphic);
  2064. } else {
  2065. this.measureGraphic.geometry = geometry;
  2066. }
  2067. //追加点击点
  2068. var graphicPoint = new Graphic({
  2069. geometry: clickPoint,
  2070. symbol: this.pointSymbol
  2071. });
  2072. this.graphicsLayer.add(graphicPoint);
  2073. /* 判断是否需要计算并返回结果 */
  2074. var self = this;
  2075. var mGeometry = this.measureGraphic.geometry; //获取绘制的要素
  2076. if (mGeometry.type == "polyline") {
  2077. if (mGeometry.paths[0].length >= 2) {
  2078. this._measureLengthOrAreaOrCoord(function(lastLength, allLength) {
  2079. self._measureAddText(lastLength, clickPoint);
  2080. // self._showMeasureResultPopup("长度测量结果", "当前测量总长:" + allLength, clickPoint);
  2081. if (self.onMeasureEventComplete != undefined) {
  2082. self.onMeasureEventComplete('length', "当前测量总长:" +
  2083. allLength);
  2084. }
  2085. });
  2086. } else {
  2087. this._measureAddText('起点', clickPoint);
  2088. }
  2089. } else if (mGeometry.type == "polygon") {
  2090. if (mGeometry.rings[0].length >= 3) {
  2091. this._measureLengthOrAreaOrCoord(function(result) {
  2092. // self._showMeasureResultPopup("面积测量结果", result, clickPoint);
  2093. if (self.onMeasureEventComplete != undefined) {
  2094. self.onMeasureEventComplete('area', result);
  2095. }
  2096. });
  2097. } else if (mGeometry.rings[0].length == 1) {
  2098. this._measureAddText('起点', clickPoint);
  2099. }
  2100. } else if (mGeometry.type == "point") {
  2101. this._measureLengthOrAreaOrCoord(function(result) {
  2102. // self._showMeasureResultPopup("当前位置坐标", result, clickPoint);
  2103. if (self.onMeasureEventComplete != undefined) {
  2104. self.onMeasureEventComplete('coord', result);
  2105. }
  2106. });
  2107. }
  2108. },
  2109. /**
  2110. * 添加文字
  2111. * @param {string} text
  2112. * @param {EsriPoint} location 文字位置
  2113. */
  2114. _measureAddText: function(text, location) {
  2115. var self = this;
  2116. require(["esri/Graphic"], function(Graphic) {
  2117. /* 创建文字符号 */
  2118. // var textSymbol = {
  2119. // type: 'text',
  2120. // color: "#FFFFFF",
  2121. // haloColor: "#555555",
  2122. // haloSize: "2px",
  2123. // text: text,
  2124. // xoffset: 0,
  2125. // yoffset: -20,
  2126. // font: {
  2127. // size: 10,
  2128. // family: "Playfair Display",
  2129. // weight: "bold"
  2130. // }
  2131. // };
  2132. self.textSymbol.text = text;
  2133. /* 创建文字要素 */
  2134. var txtGraphic = new Graphic({
  2135. geometry: location,
  2136. symbol: self.textSymbol
  2137. });
  2138. /* 将文字要素添加到绘制图层 */
  2139. self.graphicsLayer.add(txtGraphic);
  2140. });
  2141. },
  2142. /**
  2143. * 转换线的长度
  2144. * @param {float} lineLength 线的长度
  2145. */
  2146. _measureTrasformLineLength: function(lineLength) {
  2147. var len = parseFloat(lineLength);
  2148. var lenResult = "";
  2149. if (len < 1000) {
  2150. lenResult = len.toFixed(2) + "米";
  2151. } else {
  2152. lenResult = (len / 1000).toFixed(2) + "公里";
  2153. }
  2154. return lenResult;
  2155. },
  2156. /**
  2157. * 根据绘制图层绘制的要素类型 计算坐标、长度或者面积
  2158. * @param {function} callback 计算完成回调
  2159. */
  2160. _measureLengthOrAreaOrCoord: function(callback) {
  2161. var self = this;
  2162. require([
  2163. "esri/geometry/support/geodesicUtils",
  2164. "esri/geometry/projection",
  2165. "esri/geometry/SpatialReference",
  2166. "esri/geometry/geometryEngine",
  2167. "esri/geometry/geometryEngineAsync"
  2168. ],
  2169. function(geodesicUtils, projection, SpatialReference, geometryEngine,
  2170. geometryEngineAsync) {
  2171. //设置要素的投影
  2172. self.measureGraphic.geometry.spatialReference = self.mapView
  2173. .spatialReference;
  2174. //定义坐标系
  2175. var outSpatialReference = new SpatialReference({
  2176. wkid: 4326
  2177. });
  2178. var mGeometry = self.measureGraphic.geometry;
  2179. if (mGeometry.type == "polyline") {
  2180. //计算最后一段长度
  2181. var pt1 = mGeometry.getPoint(0, mGeometry.paths[0].length - 1);
  2182. var pt2 = mGeometry.getPoint(0, mGeometry.paths[0].length - 2);
  2183. //创建要素
  2184. var lastGeometry = {
  2185. spatialReference: self.mapView.spatialReference,
  2186. type: "polyline",
  2187. paths: [
  2188. [
  2189. [pt1.x, pt1.y],
  2190. [pt2.x, pt2.y]
  2191. ]
  2192. ],
  2193. };
  2194. lastGeometry.spatialReference = self.mapView.spatialReference;
  2195. //开始异步计算长度
  2196. geometryEngineAsync.geodesicLength(lastGeometry, "meters").then(
  2197. function(
  2198. lastResult) {
  2199. geometryEngineAsync.geodesicLength(mGeometry,
  2200. "meters").then(
  2201. function(
  2202. result) {
  2203. var lenLastResult = self
  2204. ._measureTrasformLineLength(
  2205. lastResult);
  2206. var lenAllResult = self
  2207. ._measureTrasformLineLength(
  2208. result);
  2209. if (callback != undefined) callback(
  2210. lenLastResult,
  2211. lenAllResult);
  2212. })
  2213. });
  2214. } else if (mGeometry.type == "polygon") {
  2215. var result = geometryEngine.geodesicArea(mGeometry,
  2216. "square-meters");
  2217. var area = Math.abs(parseFloat(result));
  2218. //如果初次计算的面积小于0 说明坐标串是反序的 将其反过来 重新计算
  2219. if (area < 0) {
  2220. // mGeometry.rings[0].reverse();
  2221. // alert(mGeometry.rings[0]);
  2222. // result = geometryEngine.geodesicArea(mGeometry, "square-meters");
  2223. // area = parseFloat(result[0]);
  2224. }
  2225. var areaMu = area * 0.0015;
  2226. var areaResult = "";
  2227. if (area < 1000000) {
  2228. areaResult = area.toFixed(3) + "平方米 " + areaMu.toFixed(3) +
  2229. "亩";
  2230. } else {
  2231. areaResult = (area / 1000000).toFixed(3) + "平方公里 " + areaMu
  2232. .toFixed(3) + "亩";
  2233. }
  2234. if (callback != undefined) callback(areaResult);
  2235. } else if (mGeometry.type == "point") {
  2236. //对坐标进行转换
  2237. projection.load().then(function() {
  2238. var geometry = projection.project(mGeometry,
  2239. outSpatialReference);
  2240. var coordResult = "经度:" + geometry.x.toFixed(6) +
  2241. " 纬度:" +
  2242. geometry.y
  2243. .toFixed(6);
  2244. if (callback != undefined) callback(coordResult);
  2245. });
  2246. }
  2247. }
  2248. );
  2249. },
  2250. /**
  2251. * 显示测量结果
  2252. * @param {string} title 标题
  2253. * @param {string} content 测量结果内容
  2254. * @param {ESRIPoint} location 测量结果内容
  2255. */
  2256. _showMeasureResultPopup: function(title, content, location) {
  2257. /* 显示弹窗试试 */
  2258. var popup = this.mapView.popup;
  2259. /* 显示位置 */
  2260. popup.location = location;
  2261. /* 设置标������� */
  2262. popup.title = title;
  2263. /* �����置显示内容 */
  2264. popup.viewModel.content = content;
  2265. /* 控制窗口的停靠按钮是否显示 */
  2266. popup.dockOptions = {
  2267. buttonEnabled: false,
  2268. }
  2269. /* 控制是否显示关闭按钮 */
  2270. popup.visibleElements = {
  2271. closeButton: true,
  2272. featureNavigation: false
  2273. }
  2274. /* 关闭自动缩放按钮 */
  2275. popup.viewModel.includeDefaultActions = false;
  2276. /* 控制是否������������������������ */
  2277. popup.visible = true;
  2278. },
  2279. //测量长度
  2280. measureLength: function(option) {
  2281. var options = option || {};
  2282. if (!options.symbol) {
  2283. options.symbol = this.lineSymbol;
  2284. }
  2285. this._measure('polyline', options);
  2286. },
  2287. //测量面积
  2288. measureArea: function(option) {
  2289. var options = option || {};
  2290. if (!options.symbol) {
  2291. options.symbol = this.fillSymbol;
  2292. }
  2293. this._measure('polygon', options);
  2294. },
  2295. //测量坐标
  2296. measureCoordinate: function(option) {
  2297. var options = option || {};
  2298. if (!options.symbol) {
  2299. options.symbol = this.pointSymbol;
  2300. }
  2301. this._measure('point', options);
  2302. }
  2303. })
  2304. /**+++++++++++++++图层操作相关+++++++++++++++++++++++*/
  2305. JTMapKit.prototype.extend({
  2306. /**
  2307. * 根据���层名称设置其可见性
  2308. * @param {any} layerName 图层名称
  2309. * @param {any} isVisible 是否可见
  2310. */
  2311. _setLayerIsVisibleByName: function(layerName, isVisible) {
  2312. this.map.layers.forEach(function(layer, idx) {
  2313. if (layer.title && layer.title.toLocaleLowerCase() == layerName
  2314. .toLocaleLowerCase()) {
  2315. layer.visible = isVisible;
  2316. return idx;
  2317. }
  2318. });
  2319. },
  2320. /**
  2321. * 根据图层名称查找图层
  2322. * @param {string} layerName
  2323. */
  2324. findLayer: function(layerName) {
  2325. let findLayer = this.map.allLayers.find(function(layer) {
  2326. return layer.title === layerName;
  2327. });
  2328. if (findLayer) return findLayer;
  2329. else return undefined;
  2330. },
  2331. /**
  2332. * 删除指定名称的图层
  2333. * @param {string} layerName 图层名称
  2334. */
  2335. removeLayer: function(layerName, callSuccess, callError) {
  2336. let _self = this;
  2337. let findLayer = this.map.allLayers.find(function(layer) {
  2338. return layer.title === layerName;
  2339. })
  2340. if (findLayer) {
  2341. this.map.layers.remove(findLayer);
  2342. if (callSuccess) callSuccess();
  2343. } else {
  2344. if (callError) callError("名称为" + layerName +
  2345. "的图层不存在,无法完成删除!"
  2346. );
  2347. }
  2348. },
  2349. /**
  2350. * 设�����图层可见及不可见
  2351. * @param {any} visibleLayerNames
  2352. * @param {any} noVisibleLayerNames
  2353. */
  2354. setVisibleByNames: function(visibleLayerNames, noVisibleLayerNames) {
  2355. var self = this;
  2356. for (var i = 0; i < self.loadLayers.length; i++) {
  2357. var layer = self.loadLayers[i];
  2358. if (visibleLayerNames.indexOf(layer.title) != -1) {
  2359. layer.slayer.findSublayerById(layer.id).visible = true;
  2360. }
  2361. if (noVisibleLayerNames.indexOf(layer.title) != -1) {
  2362. layer.slayer.findSublayerById(layer.id).visible = false;
  2363. }
  2364. }
  2365. },
  2366. /** 设置单个图层可见或隐藏
  2367. * @param {string} layerName 图层名称
  2368. * @param {boolean} visible 显示或隐藏
  2369. */
  2370. setVisibleByName: function(layerName, visible) {
  2371. this._setLayerIsVisibleByName(layerName, visible);
  2372. },
  2373. /**
  2374. * 设置图层标注是否可见
  2375. * @param {string} layerName 图层名称
  2376. * @param {boolean} visible 标注是否可见
  2377. */
  2378. setLabelVisibleByName: function(layerName, visible) {
  2379. this.map.layers.forEach(function(layer, idx) {
  2380. if (layer.title.toLocaleLowerCase() == layerName
  2381. .toLocaleLowerCase()) {
  2382. layer.sublayers.find(function(subLayer) {
  2383. subLayer.labelsVisible = visible;
  2384. });
  2385. }
  2386. });
  2387. },
  2388. });
  2389. /**++++++++++++其他相关内内容++++++++++++++++++++++*/
  2390. JTMapKit.prototype.extend({
  2391. /**
  2392. * 初始化
  2393. * @param {function} callback 成功回调
  2394. */
  2395. DeleteTempDraw: function(callback) {
  2396. this.clearGraphic();
  2397. this.currentActionType = this.actionType.unknown; //初始化状态
  2398. if (callback) callback();
  2399. },
  2400. /**
  2401. * 地图输出
  2402. * @param {any} title 标题
  2403. * @param {any} layout 模式 A3���式 A3竖式 A4横式 A4竖式
  2404. * @param {any} restype 返回���式
  2405. */
  2406. PrintMap: function(title, layout, restype) {
  2407. var self = this;
  2408. var scale = self.mapView.scale > 1000000 ? 3000 : self.mapView.scale;
  2409. var sLayout = layout;
  2410. if (layout == "A3横向") {
  2411. sLayout = "a3-landscape";
  2412. } else if (layout == "A3竖向") {
  2413. sLayout = "a3-portrait";
  2414. } else if (layout == "A4横向") {
  2415. sLayout = "a4-landscape";
  2416. } else if (layout == "A4竖向") {
  2417. sLayout = "a4-portrait";
  2418. }
  2419. require([
  2420. "esri/tasks/PrintTask",
  2421. "esri/tasks/support/PrintParameters",
  2422. "esri/tasks/support/PrintTemplate"
  2423. ],
  2424. function(PrintTask, PrintParameters, PrintTemplate) {
  2425. //此方法是为了关闭标注层 否则打印的地图将出现黑色
  2426. self._setLayerIsVisibleByName("天地图���注", false);
  2427. var printTask = new PrintTask({
  2428. url: "http://218.59.194.74:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
  2429. });
  2430. //打印模板
  2431. var template = new PrintTemplate({
  2432. format: restype,
  2433. exportOptions: {
  2434. dpi: 100,
  2435. width: self.mapView.width,
  2436. height: self.mapView.height
  2437. },
  2438. layout: sLayout,
  2439. layoutOptions: {
  2440. titleText: title,
  2441. authorText: ""
  2442. },
  2443. outScale: scale,
  2444. });
  2445. //打印参数
  2446. var params = new PrintParameters({
  2447. view: self.mapView,
  2448. template: template
  2449. });
  2450. if (self.onPrintEventProgress) {
  2451. self.onPrintEventProgress(false);
  2452. }
  2453. //执行输出地图
  2454. printTask.execute(params).then(function(result) {
  2455. self._setLayerIsVisibleByName("天地图标注", true);
  2456. if (self.onPrintEventProgress) self
  2457. .onPrintEventProgress(true);
  2458. if (self.onPrintEventComplete) {
  2459. self.onPrintEventComplete(result.url);
  2460. }
  2461. }, function(error) {
  2462. self._setLayerIsVisibleByName("天地图标注", true);
  2463. if (self.onPrintEventProgress) self
  2464. .onPrintEventProgress(true);
  2465. if (self.onEventError) {
  2466. self.onEventError(error);
  2467. }
  2468. });
  2469. }
  2470. );
  2471. },
  2472. /**
  2473. * 向地图中添加点
  2474. * @param {any} x
  2475. * @param {any} y
  2476. */
  2477. AddPointToMap: function(x, y) {
  2478. var self = this;
  2479. require([
  2480. "esri/symbols/PictureMarkerSymbol",
  2481. "esri/geometry/Point",
  2482. "esri/geometry/SpatialReference",
  2483. "esri/layers/GraphicsLayer",
  2484. "esri/Graphic",
  2485. "esri/geometry/geometryEngine"
  2486. ],
  2487. function(PictureMarkerSymbol, Point, SpatialReference, GraphicsLayer,
  2488. Graphic,
  2489. geometryEngine) {
  2490. if (!self.graphicsLayer) {
  2491. self.graphicsLayer = new GraphicsLayer();
  2492. self.map.layers.add(self.graphicsLayer);
  2493. }
  2494. //定义坐标系统
  2495. var spa = new SpatialReference({
  2496. wkid: 4326,
  2497. });
  2498. //定义符号
  2499. var ptSymbol = new PictureMarkerSymbol({
  2500. url: self.serverUrl + "location02.png",
  2501. width: "20px",
  2502. height: "20px",
  2503. xoffset: 0,
  2504. yoffset: 7,
  2505. });
  2506. //定义点
  2507. var pt = new Point({
  2508. x: x,
  2509. y: y,
  2510. spatialReference: spa,
  2511. });
  2512. //定义要素
  2513. var graphicPt = new Graphic({
  2514. geometry: pt,
  2515. symbol: ptSymbol,
  2516. });
  2517. //添加要素
  2518. self.graphicsLayer.add(graphicPt);
  2519. //超�����范围则重新定���地图中���
  2520. if (!geometryEngine.intersects(pt, self.mapView.extent)) {
  2521. self.mapView.center = [x, y];
  2522. }
  2523. }
  2524. );
  2525. },
  2526. /**
  2527. * 将点数组追加到地图中
  2528. * @param {any} points
  2529. */
  2530. AddPointsToMap: function(points) {
  2531. var self = this;
  2532. require([
  2533. "esri/symbols/SimpleLineSymbol",
  2534. "esri/symbols/SimpleMarkerSymbol",
  2535. "esri/Color",
  2536. "esri/geometry/Polyline",
  2537. "esri/geometry/Point",
  2538. "esri/geometry/SpatialReference",
  2539. "esri/layers/GraphicsLayer",
  2540. "esri/Graphic"
  2541. ],
  2542. function(SimpleLineSymbol, SimpleMarkerSymbol, Color, Polyline, Point,
  2543. SpatialReference,
  2544. GraphicsLayer, Graphic) {
  2545. if (!self.graphicsLayer) {
  2546. self.graphicsLayer = new GraphicsLayer();
  2547. self.map.layers.add(self.graphicsLayer);
  2548. }
  2549. //定义坐标系统
  2550. var spa = new SpatialReference({
  2551. wkid: 4326,
  2552. });
  2553. //定义颜色
  2554. var r = Math.floor(Math.random() * 200);;
  2555. var g = Math.floor(Math.random() * 200);
  2556. var b = Math.floor(Math.random() * 200);
  2557. var rgb = [r, g, b];
  2558. var ptColor = new Color([34, 139, 34, 1]);
  2559. var lineColorBack = new Color([255, 255, 255]);
  2560. var lineColor = new Color(rgb);
  2561. //定义点样式
  2562. var ptSymbol = new SimpleMarkerSymbol({
  2563. style: "circle",
  2564. color: ptColor,
  2565. size: "8px", // pixels
  2566. });
  2567. //定义线样式
  2568. var lineSymbolBack = new SimpleLineSymbol({
  2569. color: lineColorBack,
  2570. width: "5px",
  2571. style: "solid"
  2572. });
  2573. //定义线样式
  2574. var lineSymbol = new SimpleLineSymbol({
  2575. color: lineColor,
  2576. width: "2px",
  2577. style: "solid"
  2578. });
  2579. //加载数据
  2580. var paths = [];
  2581. var pointStart, pointEnd;
  2582. for (var i = 0; i < points.length; i++) {
  2583. if (i == 0) {
  2584. pointStart = new Point({
  2585. x: points[i].x,
  2586. y: points[i].y,
  2587. spatialReference: spa,
  2588. });
  2589. }
  2590. if (i == points.length - 1) {
  2591. pointEnd = new Point({
  2592. x: points[i].x,
  2593. y: points[i].y,
  2594. spatialReference: spa,
  2595. });
  2596. }
  2597. paths.push([points[i].x, points[i].y]);
  2598. }
  2599. //创建线
  2600. var lineBack = new Polyline({
  2601. paths: paths,
  2602. spatialReference: spa,
  2603. });
  2604. var line = new Polyline({
  2605. paths: paths,
  2606. spatialReference: spa,
  2607. });
  2608. //创建要素
  2609. var graphicBack = new Graphic({
  2610. geometry: lineBack,
  2611. symbol: lineSymbolBack,
  2612. });
  2613. var graphic = new Graphic({
  2614. geometry: line,
  2615. symbol: lineSymbol,
  2616. });
  2617. var graphicStr = new Graphic({
  2618. geometry: pointStart,
  2619. symbol: ptSymbol,
  2620. });
  2621. var graphicEnd = new Graphic({
  2622. geometry: pointEnd,
  2623. symbol: ptSymbol,
  2624. });
  2625. //添加要素
  2626. self.graphicsLayer.add(graphicBack);
  2627. self.graphicsLayer.add(graphic);
  2628. self.graphicsLayer.add(graphicStr);
  2629. self.graphicsLayer.add(graphicEnd);
  2630. //定位范围
  2631. self.mapView.extent = line.extent;
  2632. }
  2633. );
  2634. },
  2635. /**
  2636. * 将polygon添加到地图
  2637. * @param {JSON} options
  2638. * points{Array}:[{longitude,latitude},{longitude,latitude},...]
  2639. * lineColor{Array}:[r,g,b,a]
  2640. * fillColor{Array}:[r,g,b,a]
  2641. * success{Function}: 回调
  2642. */
  2643. AddPolygonToMap: function(options) {
  2644. var self = this;
  2645. require([
  2646. "esri/symbols/SimpleLineSymbol",
  2647. "esri/symbols/SimpleFillSymbol",
  2648. "esri/Color",
  2649. "esri/geometry/Polygon",
  2650. "esri/geometry/SpatialReference",
  2651. "esri/layers/GraphicsLayer",
  2652. "esri/Graphic"
  2653. ],
  2654. function(SimpleLineSymbol, SimpleFillSymbol, Color, Polygon,
  2655. SpatialReference,
  2656. GraphicsLayer, Graphic) {
  2657. if (!self.graphicsLayer) {
  2658. self.graphicsLayer = new GraphicsLayer();
  2659. self.map.layers.add(self.graphicsLayer);
  2660. }
  2661. //定义坐标系统
  2662. var spa = new SpatialReference({
  2663. wkid: 4326,
  2664. });
  2665. //定义颜色
  2666. var fillColor = options.fillColor == undefined ? new Color([0, 0,
  2667. 255, 0.3
  2668. ]) :
  2669. options
  2670. .fillColor;
  2671. var lineColor = options.lineColor == undefined ? new Color([255, 0,
  2672. 0, 0.5
  2673. ]) :
  2674. options
  2675. .lineColor;
  2676. //定义线样式
  2677. var lineSymbol = new SimpleLineSymbol({
  2678. color: lineColor,
  2679. width: "2px",
  2680. style: "solid"
  2681. });
  2682. //定义面样式
  2683. var fullSymbol = new SimpleFillSymbol({
  2684. color: fillColor,
  2685. style: "solid",
  2686. outline: lineSymbol,
  2687. });
  2688. //构建数据
  2689. var rings = [
  2690. []
  2691. ];
  2692. for (var i in options.points) {
  2693. var point = options.points[i]
  2694. rings[0].push([point.longitude, point.latitude]);
  2695. }
  2696. //创建区域
  2697. var polygon = new Polygon({
  2698. rings: rings,
  2699. spatialReference: spa,
  2700. });
  2701. //创建要素
  2702. var graphicPolygon = new Graphic({
  2703. geometry: polygon,
  2704. symbol: fullSymbol,
  2705. });
  2706. //添加要素
  2707. self.graphicsLayer.add(graphicPolygon);
  2708. if (options.success != undefined) options.success(graphicPolygon);
  2709. //定位范围
  2710. self.mapView.extent = graphicPolygon.extent;
  2711. }
  2712. );
  2713. },
  2714. /**
  2715. * 删除绘制的临时要素
  2716. * @param {Object} graphic 绘制的要素
  2717. */
  2718. removeGrahpic: function(graphic) {
  2719. if (graphic != undefined) {
  2720. if (this.graphicsLayer) {
  2721. this.graphicsLayer.remove(graphic);
  2722. }
  2723. }
  2724. },
  2725. /**
  2726. * 删除全部绘制的临时要素
  2727. */
  2728. removeAllGraphic: function() {
  2729. if (this.graphicsLayer) {
  2730. this.graphicsLayer.removeAll();
  2731. }
  2732. },
  2733. /**
  2734. * 绘制Polygon,MultPolygon到临时图层
  2735. * @param {JSON} options 配置项
  2736. * options.lineColor{array}:[r,g,b,a]
  2737. * options.fillColor{Array}:[r,g,b,a]
  2738. * options.type{string}:绘制的区域类型 Polygon/MultiPolygon
  2739. * options.coordinates{array}:绘制区域的坐标串
  2740. */
  2741. appendPolygonToMap: function(options) {
  2742. var _self = this;
  2743. require([
  2744. "esri/symbols/SimpleLineSymbol",
  2745. "esri/symbols/SimpleFillSymbol",
  2746. "esri/Color",
  2747. "esri/geometry/Polygon",
  2748. "esri/geometry/SpatialReference",
  2749. "esri/layers/GraphicsLayer",
  2750. "esri/Graphic"
  2751. ],
  2752. function(SimpleLineSymbol, SimpleFillSymbol, Color, Polygon,
  2753. SpatialReference,
  2754. GraphicsLayer, Graphic) {
  2755. /* 判断临时绘制图层是否存在 不存在则创建 */
  2756. if (!_self.graphicsLayer) {
  2757. _self.graphicsLayer = new GraphicsLayer();
  2758. _self.map.layers.add(_self.graphicsLayer);
  2759. } else {
  2760. _self.graphicsLayer.removeAll();
  2761. }
  2762. /* 定义绘制要素的坐标系统 */
  2763. let spa = new SpatialReference({
  2764. wkid: 4326,
  2765. });
  2766. /* 定义颜色 */
  2767. let fillColor = options.fillColor == undefined ? new Color([0, 0,
  2768. 255, 0.2
  2769. ]) :
  2770. options
  2771. .fillColor;
  2772. let lineColor = options.lineColor == undefined ? new Color([255, 255,
  2773. 255, 0.8
  2774. ]) :
  2775. options
  2776. .lineColor;
  2777. /* 定义符号样式 */
  2778. var lineSymbol = new SimpleLineSymbol({
  2779. color: lineColor,
  2780. width: "2px",
  2781. style: "short-dash-dot-dot"
  2782. });
  2783. let fullSymbol = new SimpleFillSymbol({
  2784. color: fillColor,
  2785. style: "solid",
  2786. outline: lineSymbol,
  2787. });
  2788. /* 绘制的要素 */
  2789. let graphics = [];
  2790. /* 根据类型进行绘制 */
  2791. if (options.type === 'Polygon') {
  2792. /* 创建区域 */
  2793. let polygon = new Polygon({
  2794. rings: options.coordinates,
  2795. spatialReference: spa,
  2796. });
  2797. /* 绘制区域 */
  2798. let graphicPolygon = new Graphic({
  2799. geometry: polygon,
  2800. symbol: fullSymbol,
  2801. });
  2802. /* 添加要素 */
  2803. graphics.push(graphicPolygon);
  2804. } else if (options.type === 'MultiPolygon') {
  2805. for (rings of options.coordinates) {
  2806. /* 创建区域 */
  2807. let polygon = new Polygon({
  2808. rings: rings,
  2809. spatialReference: spa,
  2810. });
  2811. /* 绘制区域 */
  2812. let graphicPolygon = new Graphic({
  2813. geometry: polygon,
  2814. symbol: fullSymbol,
  2815. });
  2816. /* 添加要素 */
  2817. graphics.push(graphicPolygon);
  2818. }
  2819. }
  2820. /* 绘制 */
  2821. _self.graphicsLayer.addMany(graphics);
  2822. /* 缩放至位置 */
  2823. // _self.mapView.extent = graphics[0].geometry.extent;
  2824. // _self.mapView.zoom = _self.mapView.zoom - 1;
  2825. _self.mapView.goTo(graphics[0].geometry.extent, {
  2826. duration: 500
  2827. }).then(function() {
  2828. _self.mapView.zoom = _self.mapView.zoom - 1;
  2829. console.log("设置地图缩放等级 = " + _self.mapView.zoom);
  2830. });
  2831. }
  2832. );
  2833. },
  2834. });
  2835. /**
  2836. * 扩展工具
  2837. */
  2838. JTMapKit.prototype.extend({
  2839. /**
  2840. * 启用草图编辑工具
  2841. * @param {JSON} options 配置项
  2842. * options.onadded{function}:添加点回调
  2843. * options.onredo{function}:恢复回调
  2844. * options.onundo{function}:撤销回调
  2845. * @param {function} callSuccess 成功回调
  2846. */
  2847. _sketchToolsInit: function(options, callSuccess) {
  2848. /* 自身替换 */
  2849. let _self = this;
  2850. require([
  2851. "esri/layers/GraphicsLayer",
  2852. "esri/widgets/Sketch/SketchViewModel",
  2853. "esri/geometry/projection",
  2854. "esri/geometry/SpatialReference"
  2855. ],
  2856. function(GraphicsLayer, SketchViewModel, projection, SpatialReference) {
  2857. /* 判断是否存在草图图层 不存在则创建并加入地图中 */
  2858. if (!_self.layerSketch) {
  2859. _self.layerSketch = new GraphicsLayer();
  2860. _self.map.add(_self.layerSketch);
  2861. }
  2862. /* 草图辅助图层 */
  2863. if (!_self.graphicsLayer) {
  2864. _self.graphicsLayer = new GraphicsLayer();
  2865. _self.map.layers.add(_self.graphicsLayer);
  2866. } else {
  2867. _self.graphicsLayer.removeAll();
  2868. }
  2869. /* 判断草图工具是否存在 不存在则创建 */
  2870. if (!_self.sketchViewModel) {
  2871. _self.sketchViewModel = new SketchViewModel({
  2872. layer: _self.layerSketch,
  2873. view: _self.mapView,
  2874. pointSymbol: _self.sketchPointSymbol,
  2875. polylineSymbol: _self.sketchLineSymbol,
  2876. polygonSymbol: _self.sketchPolygonSymbol,
  2877. });
  2878. /* 绑定创建事件 */
  2879. _self.sketchViewModel.on("create", function(event) {
  2880. if (event.state == "start") {
  2881. _self.layerSketch.removeAll(); //删除全部
  2882. }
  2883. if (event.toolEventInfo && event.toolEventInfo
  2884. .type ===
  2885. "vertex-add") {
  2886. if (options && options.onadded) options.onadded(
  2887. event
  2888. .graphic
  2889. .geometry);
  2890. }
  2891. if (event.state === 'complete') {
  2892. if (options && options.oncomplete) options
  2893. .oncomplete(event
  2894. .graphic
  2895. .geometry);
  2896. }
  2897. });
  2898. /* 绑定redo事件 */
  2899. _self.sketchViewModel.on('redo', function(event) {
  2900. if (event.graphics && options && options.onredo)
  2901. options.onredo(
  2902. event
  2903. .graphics[0]
  2904. .geometry);
  2905. });
  2906. /* 绑定undo事件 */
  2907. _self.sketchViewModel.on('undo', function(event) {
  2908. if (event.graphics && options && options.onundo)
  2909. options.onundo(
  2910. event
  2911. .graphics[0]
  2912. .geometry);
  2913. });
  2914. /* 回调 */
  2915. if (callSuccess) callSuccess();
  2916. }
  2917. });
  2918. },
  2919. /**
  2920. * 启用草图工具
  2921. * @param {string} type 工具类型
  2922. * @param {JSON} options 配置项
  2923. */
  2924. _activeSketchTools: function(type, options) {
  2925. let _self = this;
  2926. /* 如果草图编辑工具已经初始化 则释放资源 重新初始化 */
  2927. if (this.sketchViewModel) {
  2928. this.sketchViewModel.layer.graphics.removeAll();
  2929. this.sketchViewModel.destroy();
  2930. this.sketchViewModel = null;
  2931. }
  2932. /* 初始化草图工具 */
  2933. this._sketchToolsInit(options, function() {
  2934. /* 启用草图工具 */
  2935. if (type === 'point') {
  2936. _self.sketchViewModel.create('point');
  2937. } else if (type === 'line') {
  2938. _self.sketchViewModel.create('polyline');
  2939. } else if (type === 'rectangle') {
  2940. _self.sketchViewModel.create('rectangle');
  2941. } else {
  2942. _self.sketchViewModel.create('polygon');
  2943. }
  2944. });
  2945. },
  2946. /**
  2947. * 草图编辑工具完成确认
  2948. */
  2949. _sketchComplete: function() {
  2950. if (this.sketchViewModel) {
  2951. this.sketchViewModel.complete();
  2952. }
  2953. },
  2954. /**
  2955. * 启用点草图工具
  2956. * @param {JSON} options 配置项
  2957. */
  2958. activeSketchPointTools: function(options) {
  2959. this._activeSketchTools('point', options);
  2960. },
  2961. /**
  2962. * 启用线草图工具
  2963. * @param {JSON} options 配置项
  2964. */
  2965. activeSketchLineTools: function(options) {
  2966. this._activeSketchTools('line', options);
  2967. },
  2968. /**
  2969. * 启用矩形草图工具
  2970. * @param {JSON} options 配置项
  2971. */
  2972. activeSketchRectangleTools: function(options) {
  2973. this._activeSketchTools('rectangle', options);
  2974. },
  2975. /**
  2976. * 启用区域草图工具
  2977. * @param {JSON} options 配置项
  2978. */
  2979. activeSketchPolygonTools: function(options) {
  2980. this._activeSketchTools('polygon', options);
  2981. },
  2982. /**
  2983. * 草图编辑提交
  2984. */
  2985. sketchComplete: function() {
  2986. this._sketchComplete();
  2987. },
  2988. })
  2989. /**
  2990. * 草图功能扩展
  2991. */
  2992. JTMapKit.prototype.extend({
  2993. /**
  2994. * 多图层查询 点方式
  2995. * @param {JSON} options 配置项
  2996. * options.queryLayers{JSON}:查询图层参考
  2997. * options.url{string}:查询地址
  2998. * @param {function} callSuccess 成功回调
  2999. * callSuccess({})
  3000. * @param {function} callError 错误回调
  3001. * callError(string)
  3002. */
  3003. manyLayerQueryByPoint: function(options, callSuccess, callError) {
  3004. let _self = this;
  3005. _self.activeSketchPointTools({
  3006. oncomplete: function(geometry) {
  3007. _self.manyLayerQuery({
  3008. geometry: geometry,
  3009. queryLayers: options.queryLayers,
  3010. url: options.url
  3011. }, callSuccess, callError);
  3012. }
  3013. })
  3014. },
  3015. /**
  3016. * 多图层查询 绘制区域方式
  3017. * @param {JSON} options 配置项
  3018. * options.queryLayers{JSON}:查询图层参考
  3019. * options.url{string}:查询地址
  3020. * @param {function} callOperation 操作回调
  3021. * callOperation({})
  3022. * @param {function} callSuccess 成功回调
  3023. * callSuccess({})
  3024. * @param {function} callError 错误回调
  3025. * callError(string)
  3026. */
  3027. manyLayerQueryByPolygon: function(options, callOperation, callSuccess, callError) {
  3028. let _self = this;
  3029. _self.activeSketchPolygonTools({
  3030. onadded: function(geometry) {
  3031. if (callOperation) callOperation({
  3032. geometry: geometry,
  3033. })
  3034. },
  3035. oncomplete: function(geometry) {
  3036. _self.manyLayerQuery({
  3037. geometry: geometry,
  3038. queryLayers: options.queryLayers,
  3039. url: options.url
  3040. }, callSuccess, callError);
  3041. }
  3042. })
  3043. },
  3044. /**
  3045. * 多图层查询 绘制区域方式 查询确认
  3046. */
  3047. manyLayerQueryByPolygonComplete: function() {
  3048. this._sketchComplete();
  3049. },
  3050. /**
  3051. * 多图层查询
  3052. * @param {JSON} options 配置项
  3053. * options.geometry{JSON}:查询参考图形要素
  3054. * options.url{string}:查询地址
  3055. * options.queryLayers{array{JSON}}:查询图层集合
  3056. * @param {function} callSuccess 成功回调
  3057. * callSuccess({})
  3058. * @param {function} callError 错误回调
  3059. * callError(string)
  3060. */
  3061. manyLayerQuery: function(options, callSuccess, callError) {
  3062. let _self = this;
  3063. require([
  3064. "esri/rest/support/IdentifyParameters",
  3065. "esri/rest/identify"
  3066. ], function(IdentifyParameters, identify) {
  3067. /* 过滤查询的图层 */
  3068. let queryIds = [];
  3069. for (let layer of options.queryLayers) {
  3070. queryIds.push(parseInt(layer.id));
  3071. }
  3072. /* 设置查询参数 */
  3073. let params = new IdentifyParameters({
  3074. geometry: options.geometry,
  3075. mapExtent: _self.mapView.extent,
  3076. returnGeometry: true,
  3077. tolerance: 3,
  3078. layerIds: queryIds,
  3079. layerOption: 'all',
  3080. });
  3081. identify.identify(options.url, params).then(function(response) {
  3082. /* 查询结果 */
  3083. let results = [];
  3084. /* 循环查询数据集 */
  3085. for (let item of response.results) {
  3086. /* 巡查查询数据对应的配置图层 */
  3087. let layers = options.queryLayers.filter(function(
  3088. p) {
  3089. return p.eName.toUpperCase() === item
  3090. .layerName;
  3091. });
  3092. let layer = layers[0];
  3093. /* 创建结果要素 */
  3094. let resultFeature = {
  3095. fId: item.feature.attributes['OBJECTID'],
  3096. tabName: layer.eName,
  3097. sValue: item.feature.attributes[layer
  3098. .fldName
  3099. .toUpperCase()],
  3100. }
  3101. /* 结果集中是否已经存在 */
  3102. let isExists = false;
  3103. for (let result of results) {
  3104. if (result.eName == item.layerName) {
  3105. result.features.push(resultFeature)
  3106. isExists = true;
  3107. break;
  3108. }
  3109. }
  3110. /* 如果不存在 */
  3111. if (!isExists) {
  3112. results.push({
  3113. eName: item.layerName,
  3114. cName: layer.cName,
  3115. isCase: layer.isCase,
  3116. features: [resultFeature]
  3117. })
  3118. }
  3119. }
  3120. /* 返回结果 */
  3121. if (results.length === 0 && callError) callError(
  3122. "未查询到任何数据!");
  3123. if (results.length > 0 && callSuccess) callSuccess(
  3124. results);
  3125. });
  3126. });
  3127. },
  3128. /**
  3129. * 通用占压分析
  3130. * @param {function} callSuccess 成功回调
  3131. * @param {function} callError 失败回调
  3132. */
  3133. commonOccupyAnalysis: function(callSuccess, callError) {
  3134. let _self = this;
  3135. require([
  3136. "esri/geometry/projection",
  3137. "esri/geometry/SpatialReference"
  3138. ], function(projection, SpatialReference) {
  3139. /* 定义输出投影 */
  3140. let outSReference = new SpatialReference({
  3141. wkid: 4326,
  3142. });
  3143. _self.activeSketchPolygonTools({
  3144. onadded: function(geometry) {
  3145. /* 进行坐标转换 */
  3146. projection.load().then(function() {
  3147. let outGeometry = projection
  3148. .project(geometry,
  3149. outSReference);
  3150. let outCoordinate = undefined;
  3151. for (let ring of outGeometry.rings[
  3152. 0]) {
  3153. if (outCoordinate) {
  3154. outCoordinate += "," + ring[
  3155. 0] + "," +
  3156. ring[1];
  3157. } else {
  3158. outCoordinate = ring[0] +
  3159. "," + ring[1];
  3160. }
  3161. }
  3162. /* 回调输出 */
  3163. if (callSuccess) callSuccess(
  3164. outCoordinate);
  3165. })
  3166. }
  3167. })
  3168. });
  3169. },
  3170. /**
  3171. * 占压分析
  3172. * @param {JSON} options 配置项
  3173. * @param {String} options.url 查询地址
  3174. * @param {Array} options.queryLayers 查询配置表
  3175. * @param {function} callSuccess 成功回调callSuccess({tabName:features:{objId:showName}})
  3176. * @param {function} callError 错误回调callError(string)
  3177. */
  3178. occupyAnalysis: function(options, callSuccess, callError) {
  3179. let _self = this;
  3180. require([
  3181. "esri/rest/support/IdentifyParameters",
  3182. "esri/rest/identify"
  3183. ], function(IdentifyParameters, identify) {
  3184. /* 启用草图工具 */
  3185. _self.activeSketchPointTools({
  3186. onadded: function(geometry) {
  3187. let params = new IdentifyParameters({
  3188. geometry: geometry,
  3189. mapExtent: _self.mapView.extent,
  3190. returnGeometry: true,
  3191. tolerance: 3,
  3192. layerOption: 'all',
  3193. });
  3194. identify.identify(options.url, params).then(
  3195. function(
  3196. response) {
  3197. /* 查询结果 */
  3198. let qResults = [];
  3199. /* 循环查询结果 */
  3200. for (let item of response.results) {
  3201. let layerName = item.layerName
  3202. .toUpperCase();
  3203. /* 巡查查询数据对应的配置图层 */
  3204. let layers = options.queryLayers
  3205. .filter(
  3206. function(
  3207. p) {
  3208. return p.eName
  3209. .toUpperCase() ===
  3210. layerName;
  3211. });
  3212. let configLayer = layers !=
  3213. undefined &&
  3214. layers
  3215. .length > 0 ? layers[0] :
  3216. undefined;
  3217. if (configLayer === undefined)
  3218. continue;
  3219. let tabCName = configLayer
  3220. .cName;
  3221. let fldName = configLayer
  3222. .fldName;
  3223. /* 创建返回要素 */
  3224. let objId = item.feature
  3225. .attributes[
  3226. 'OBJECTID'];
  3227. let showName = item.feature
  3228. .attributes[
  3229. fldName
  3230. .toUpperCase()];
  3231. let feature = {
  3232. objId: objId,
  3233. tabName: layerName,
  3234. showName: showName,
  3235. }
  3236. /* 寻找 */
  3237. let tempResults = qResults
  3238. .filter(function(
  3239. p) {
  3240. return p
  3241. .tabEName ===
  3242. layerName;
  3243. })
  3244. if (tempResults === undefined ||
  3245. tempResults
  3246. .length === 0) {
  3247. qResults.push({
  3248. tabEName: layerName,
  3249. tabCName: tabCName,
  3250. features: [
  3251. feature
  3252. ],
  3253. })
  3254. } else {
  3255. tempResults[0].features
  3256. .push(feature);
  3257. }
  3258. }
  3259. /* 返回结果 */
  3260. if (qResults.length > 0 &&
  3261. callSuccess) {
  3262. callSuccess(qResults);
  3263. } else if (qResults.length === 0 &&
  3264. callError) {
  3265. callError('未查询到任何数据!');
  3266. }
  3267. });
  3268. }
  3269. })
  3270. });
  3271. },
  3272. /**
  3273. * 案件查询 点方式
  3274. * @param {JSON} options 配置项
  3275. * options.url{string}:查询地址
  3276. * options.filter{string}:案件查询过滤条件
  3277. * @param {function} callSuccess 成功回调
  3278. * callSuccess{array{string}}
  3279. * @param {function} callError 错误回调
  3280. * callError{string}
  3281. */
  3282. queryCaseByPoint: function(options, callSuccess, callError) {
  3283. let _self = this;
  3284. _self.activeSketchPointTools({
  3285. onadded: function(geometry) {
  3286. _self._queryCaseFeature({
  3287. geometry: geometry,
  3288. url: options.url,
  3289. id: options.id
  3290. }, callSuccess, callError);
  3291. }
  3292. })
  3293. },
  3294. /**
  3295. * 案件查询 绘制区域方式
  3296. * @param {JSON} options 配置项
  3297. * options.url{string}:查询地址
  3298. * options.filter{string}:案件查询过滤条件
  3299. * @param {function} callOperation 操作回调
  3300. * callOperation({})
  3301. * @param {function} callSuccess 成功回调
  3302. * callSuccess{array{string}}
  3303. * @param {function} callError 错误回调
  3304. * callError{string}
  3305. */
  3306. queryCaseByPolygon: function(options, callOperation, callSuccess, callError) {
  3307. let _self = this;
  3308. _self.activeSketchPolygonTools({
  3309. onadded: function(geometry) {
  3310. if (callOperation) callOperation({
  3311. geometry: geometry,
  3312. });
  3313. },
  3314. oncomplete: function(geometry) {
  3315. _self._queryCaseFeature({
  3316. geometry: geometry,
  3317. url: options.url,
  3318. id: options.id
  3319. }, callSuccess, callError);
  3320. }
  3321. })
  3322. },
  3323. /**
  3324. * 区域案件查询完成操作
  3325. */
  3326. queryCaseByPolygonComplete: function() {
  3327. this._sketchComplete();
  3328. },
  3329. /**
  3330. * 案件要素查询
  3331. * @param {JSON} options 配置项
  3332. * options.geometry{JSON}:查询参考要素
  3333. * options.url{string}:查询地址
  3334. * options.filter{string}:查询数据的过滤条件
  3335. * @param {function} callSuccess 成功回调
  3336. * callSuccess{array{string}}
  3337. * @param {function} callError 错误回调
  3338. * callError{string}
  3339. */
  3340. _queryCaseFeature: function(options, callSuccess, callError) {
  3341. let _self = this;
  3342. var self = this;
  3343. require([
  3344. "esri/tasks/support/Query",
  3345. "esri/tasks/QueryTask",
  3346. ],
  3347. function(Query, QueryTask) {
  3348. /* 定义查询任务 */
  3349. let qTask = new QueryTask({
  3350. url: options.url
  3351. });
  3352. /* 定义查询参数 */
  3353. let params = new Query({
  3354. returnGeometry: true,
  3355. outFields: ["*"],
  3356. distance: 3,
  3357. geometry: options.geometry,
  3358. spatialRelationship: "intersects",
  3359. where: options.filter,
  3360. });
  3361. /* 开始查询 */
  3362. qTask.execute(params).then(function(response) {
  3363. let result = [];
  3364. for (let feature of response.features) {
  3365. result.push(feature.attributes['AJH']);
  3366. }
  3367. if (result.length === 0 && callError) callError(
  3368. '未查询到任何案件!');
  3369. if (result.length > 0 && callSuccess) callSuccess(
  3370. result);
  3371. });
  3372. });
  3373. },
  3374. /**
  3375. * 长度测量
  3376. * @param {function} callSuccess 成功回调
  3377. * callSuccess(float)
  3378. */
  3379. eMeasureLength: function(callSuccess) {
  3380. _self = this;
  3381. /* 存储临时长度 */
  3382. _self.tempLen = 0;
  3383. /* 绘制的文字要素集合 */
  3384. _self.drawLabelGraphics = [];
  3385. _self.activeSketchLineTools({
  3386. onadded: function(geometry) {
  3387. /* 传递的geometry为polyline类型 数据存储在paths中 */
  3388. let path = geometry.paths[0];
  3389. let pt = path[path.length - 1];
  3390. _self._measureLengthByGeometry(geometry, function(len) {
  3391. let lenTemp = len - _self.tempLen;
  3392. _self.tempLen = len;
  3393. let showLen = _self._measureLengthTrasform(
  3394. lenTemp);
  3395. let label = len === 0 ? '起点' : showLen;
  3396. _self._measureLengthAddLabel({
  3397. x: pt[0],
  3398. y: pt[1],
  3399. label: label
  3400. }, function(graphic) {
  3401. _self.drawLabelGraphics.push(
  3402. graphic);
  3403. });
  3404. /* 长度回调 */
  3405. if (len > 0 && callSuccess) callSuccess(_self
  3406. ._measureLengthTrasform(len));
  3407. })
  3408. },
  3409. onredo: function(geometry) {
  3410. /* 传递的geometry为polyline类型 数据存储在paths中 */
  3411. let path = geometry.paths[0];
  3412. let pt = path[path.length - 1];
  3413. _self._measureLengthByGeometry(geometry, function(len) {
  3414. let lenTemp = len - _self.tempLen;
  3415. _self.tempLen = len;
  3416. let showLen = _self._measureLengthTrasform(
  3417. lenTemp);
  3418. let label = len === 0 ? '起点' : showLen;
  3419. _self._measureLengthAddLabel({
  3420. x: pt[0],
  3421. y: pt[1],
  3422. label: label
  3423. }, function(graphic) {
  3424. _self.drawLabelGraphics.push(
  3425. graphic);
  3426. });
  3427. /* 长度回调 */
  3428. if (len > 0 && callSuccess) callSuccess(_self
  3429. ._measureLengthTrasform(len));
  3430. })
  3431. },
  3432. onundo: function(geometry) {
  3433. _self._measureLengthByGeometry(geometry, function(len) {
  3434. /* 干掉最后一个 */
  3435. let graphic = _self.drawLabelGraphics.pop();
  3436. _self.graphicsLayer.graphics.remove(graphic);
  3437. /* 赋值临时长度 */
  3438. _self.tempLen = len;
  3439. /* 长度回调 */
  3440. if (callSuccess) callSuccess(_self
  3441. ._measureLengthTrasform(
  3442. len));
  3443. });
  3444. }
  3445. })
  3446. },
  3447. /**
  3448. * 面积测量
  3449. * @param {function} callSuccess 成功回调
  3450. * callSuccess(float)
  3451. */
  3452. eMeasureArea: function(callSuccess) {
  3453. let _self = this;
  3454. _self.activeSketchPolygonTools({
  3455. onadded: function(geometry) {
  3456. _self._measureAreaByGeometry(geometry, function(area) {
  3457. if (callSuccess) callSuccess(_self
  3458. ._measureAreaTrasform(
  3459. area));
  3460. });
  3461. },
  3462. onredo: function(geometry) {
  3463. _self._measureAreaByGeometry(geometry, function(area) {
  3464. if (callSuccess) callSuccess(_self
  3465. ._measureAreaTrasform(
  3466. area));
  3467. });
  3468. },
  3469. onundo: function(geometry) {
  3470. _self._measureAreaByGeometry(geometry, function(area) {
  3471. if (callSuccess) callSuccess(_self
  3472. ._measureAreaTrasform(
  3473. area));
  3474. });
  3475. }
  3476. })
  3477. },
  3478. /**
  3479. * 查询坐标
  3480. * @param {function} callSuccess 成功回调
  3481. */
  3482. eMeasureCoordinate: function(callSuccess) {
  3483. let _self = this;
  3484. _self.activeSketchPointTools({
  3485. onadded: function(geometry) {
  3486. require(["esri/geometry/SpatialReference",
  3487. "esri/geometry/projection"
  3488. ],
  3489. function(SpatialReference, projection) {
  3490. let outProject = new SpatialReference({
  3491. wkid: 4326,
  3492. });
  3493. projection.load().then(function() {
  3494. let outGeometry = projection
  3495. .project(geometry,
  3496. outProject);
  3497. if (callSuccess) callSuccess({
  3498. x: outGeometry.x,
  3499. y: outGeometry.y,
  3500. })
  3501. });
  3502. });
  3503. }
  3504. });
  3505. },
  3506. /**
  3507. * 转换长度为字符串
  3508. * @param {float} len 长度
  3509. * @return {string} 带单位的长度表示
  3510. */
  3511. _measureLengthTrasform: function(len) {
  3512. let strLen = len < 1000 ? len.toFixed(2) + '米' : (len /
  3513. 1000).toFixed(2) + '公里';
  3514. return strLen;
  3515. },
  3516. /**
  3517. * 转换面积为字符串
  3518. * @param {float} area 面积
  3519. * @return {string} 带单位的面积表示
  3520. */
  3521. _measureAreaTrasform: function(area) {
  3522. let strMuArea = (area * 0.0015).toFixed(2) + "亩";
  3523. let strGqArea = (area * 0.0001).toFixed(2) + "公顷";
  3524. let strArea = area < 1000000 ? area.toFixed(2) + "平方米 " + strMuArea : (area /
  3525. 1000000)
  3526. .toFixed(2) +
  3527. "平方公里 " + strGqArea;
  3528. return strArea;
  3529. },
  3530. /**
  3531. * 测量长度时添加标签
  3532. * @param {JSON} options 配置项
  3533. * options.x{float}:标注点位置x坐标
  3534. * options.y{float}:标注点位置y坐标
  3535. * options.label{string}:标注点文字
  3536. * @param {function} callSuccess 成功回调
  3537. * callSuccess(graphic)
  3538. */
  3539. _measureLengthAddLabel: function(options, callSuccess) {
  3540. let _self = this;
  3541. require([
  3542. "esri/Graphic",
  3543. "esri/geometry/Point"
  3544. ], function(Graphic, Point) {
  3545. _self.textSymbol.text = options.label;
  3546. /* 创建文字要素 */
  3547. let txtGraphic = new Graphic({
  3548. geometry: new Point({
  3549. x: options.x,
  3550. y: options.y,
  3551. spatialReference: _self.mapView
  3552. .spatialReference,
  3553. }),
  3554. symbol: _self.textSymbol
  3555. });
  3556. /* 将文字要素添加到绘制图层 */
  3557. _self.graphicsLayer.add(txtGraphic);
  3558. /* 回调 */
  3559. if (callSuccess) callSuccess(txtGraphic);
  3560. });
  3561. },
  3562. /**
  3563. * 计算长度
  3564. * @param {JSON} geometry 待计算要素
  3565. * @param {function} callSuccess 计算成功回调
  3566. * callSuccess({float})
  3567. */
  3568. _measureLengthByGeometry: function(geometry, callSuccess) {
  3569. require([
  3570. "esri/geometry/geometryEngine"
  3571. ], function(geometryEngine) {
  3572. let len = geometryEngine.geodesicLength(geometry, "meters");
  3573. if (callSuccess) callSuccess(len);
  3574. });
  3575. },
  3576. /**
  3577. * 计算面积
  3578. * @param {JSON} geometry 待计算要素
  3579. * @param {function} callSuccess 计算成功回调
  3580. * callSuccess({float})
  3581. */
  3582. _measureAreaByGeometry: function(geometry, callSuccess) {
  3583. require([
  3584. "esri/geometry/geometryEngine"
  3585. ], function(geometryEngine) {
  3586. let len = geometryEngine.geodesicArea(geometry, "square-meters");
  3587. if (callSuccess) callSuccess(len);
  3588. });
  3589. }
  3590. })
  3591. /* GPS定位及方向变化相关 */
  3592. JTMapKit.prototype.extend({
  3593. /**
  3594. * 添加GPS位置
  3595. * @param {Object} options 配置项
  3596. * @param {String} options.longitude 定位经度
  3597. * @param {String} options.latitude 定位纬度
  3598. * @param {String} options.angle 角度
  3599. * @param {Function} callSuccess 成功回调callSuccess()
  3600. */
  3601. _appendGPSSymbol: function(options, callSuccess) {
  3602. let _self = this;
  3603. require(["esri/Graphic", "esri/geometry/Point",
  3604. "esri/geometry/SpatialReference",
  3605. "esri/layers/GraphicsLayer"
  3606. ], function(Graphic,
  3607. Point, SpatialReference, GraphicsLayer) {
  3608. /* 定义坐标系 */
  3609. let spatialReference = new SpatialReference({
  3610. wkid: 4326,
  3611. })
  3612. /* 定义点 */
  3613. let gpsPoint = new Point({
  3614. x: parseFloat(options.longitude),
  3615. y: parseFloat(options.latitude),
  3616. spatialReferenct: spatialReference,
  3617. })
  3618. /* 创建要素 */
  3619. if (_self.gpsGraphic === undefined) {
  3620. _self.gpsGraphic = new Graphic({
  3621. geometry: gpsPoint,
  3622. symbol: _self.gpsSysmbol,
  3623. })
  3624. if (!_self.gpsLayer) {
  3625. _self.gpsLayer = new GraphicsLayer();
  3626. _self.map.layers.add(_self.gpsLayer);
  3627. } else {
  3628. _self.gpsLayer.removeAll();
  3629. }
  3630. _self.gpsLayer.graphics.add(_self.gpsGraphic);
  3631. } else {
  3632. _self.gpsGraphic.geometry = gpsPoint;
  3633. }
  3634. /* 定位要素 */
  3635. // _self.zoomTo(options.longitude, options.latitude);
  3636. /* 成功回调 */
  3637. // console.log(options.longitude, options.latitude);
  3638. if (callSuccess) callSuccess();
  3639. });
  3640. },
  3641. /**
  3642. * 添加GPS位置
  3643. * @param {Object} options 配置项
  3644. * @param {String} options.longitude 定位经度
  3645. * @param {String} options.latitude 定位纬度
  3646. * @param {String} options.angle 角度
  3647. * @param {Function} callSuccess 成功回调callSuccess()
  3648. */
  3649. gpsAppendToMap: function(options, callSuccess) {
  3650. this._appendGPSSymbol(options, callSuccess);
  3651. },
  3652. /**
  3653. * 移除GPS符号
  3654. */
  3655. gpsRemoveFromMap: function() {
  3656. /* 移除展示元素 */
  3657. if (this.gpsLayer != undefined) {
  3658. this.gpsLayer.removeAll();
  3659. }
  3660. /* 重置展示元素 */
  3661. this.gpsGraphic = undefined;
  3662. },
  3663. /**
  3664. * 设置GPS符号的角度
  3665. * @param {float} angle 角度
  3666. */
  3667. gpsSetAngle: function(angle) {
  3668. if (this.gpsGraphic != undefined) {
  3669. this.gpsSysmbol.angle = parseFloat(-1 * angle);
  3670. this.gpsGraphic.symbol = this.gpsSysmbol;
  3671. }
  3672. }
  3673. })