index.vue 70 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346
  1. <template>
  2. <vl-map
  3. class-name="overview-map"
  4. :map.sync="map"
  5. projection="EPSG:4490"
  6. @loaded="mapLoaded"
  7. >
  8. <vl-china-cities :enabled="false" @pick="(fea) => (feature = fea)" />
  9. <vl-map-dev-info
  10. :top="140"
  11. :show-panel="false"
  12. @info-update="(v) => (viewInfo = v)"
  13. />
  14. <vl-config-layers
  15. ref="configLayer"
  16. :layers-config="layersConfig"
  17. :visible-layer-ids="realLayers"
  18. @loaded="configLayerLoaded"
  19. />
  20. <vl-tool-bar :height="34" :radius="4">
  21. <vl-tool-bar-item
  22. no-padding
  23. class="tool-box"
  24. style="width: 110px !important;color: #FFF"
  25. >
  26. <vl-tool-box
  27. ref="toolBox"
  28. :enable-scope-sketch="false"
  29. @drawend="drawend"
  30. style="width: 110px"
  31. />
  32. </vl-tool-bar-item>
  33. <vl-tool-bar-item
  34. no-padding
  35. style="margin-left: 10px;"
  36. v-show="layerShow"
  37. title="图层"
  38. >
  39. <vl-layer-tree :enabled-layers="enabledLayersConfig" />
  40. </vl-tool-bar-item>
  41. </vl-tool-bar>
  42. <vl-legend
  43. :size="40"
  44. :legend-fill="0.4"
  45. :enabled-layers="enabledLayersConfig"
  46. :default-expand="defaultExpand"
  47. v-if="legendShow"
  48. />
  49. <VlImglayers
  50. :imgLayers="imgLayers"
  51. @change="vlImgLayerChangeHandle"
  52. @change1="vlImgLayerChangeHandle1"
  53. @sliderChange="vlImgLayerSliderChangeHandle"
  54. @sliderChange1="vlImgLayerSliderChangeHandle1"
  55. >
  56. </VlImglayers>
  57. <vl-feature-flicker
  58. :feature="feature"
  59. new-layer
  60. :duration="2400"
  61. :interval="800"
  62. />
  63. <!-- 详情 -->
  64. <vl-feature-overlay
  65. v-show="overlayShow"
  66. :feature="feature"
  67. :use-centroid="false"
  68. no-styled
  69. >
  70. <template slot-scope="{ props }" v-if="detailType != 0">
  71. <div class="overlayBox">
  72. <span class="title" v-if="detailType == 1 || detailType == 2"
  73. >详情<a class="btn" @click="showLandDetail(props)">详情</a></span
  74. >
  75. <span class="title" v-if="detailType == 4 || detailType == 5"
  76. >详情<a
  77. v-if="detailType == 6"
  78. class="btn"
  79. @click="mockDetail(props)"
  80. >要素配置模拟</a
  81. ></span
  82. >
  83. <span
  84. class="title"
  85. v-if="
  86. (detailType == 5 && tzzxShow) || (detailType == 33 && tzzxShow)
  87. "
  88. >详情<a class="btn" @click="tzzxDetail(props)">提质增效</a></span
  89. >
  90. <span class="title" v-if="detailType == 10 || detailType == 11"
  91. >详情<a class="btn" @click="showSpDetail(props)">更多</a></span
  92. >
  93. <span
  94. class="title"
  95. v-if="
  96. detailType == 13 ||
  97. detailType == 14 ||
  98. detailType == 15 ||
  99. detailType == 16 ||
  100. detailType == 33
  101. "
  102. >详情</span
  103. >
  104. <span class="title" v-if="detailType == 12"
  105. >详情<a class="btn" @click="locationTsxzDetail(props)"
  106. >详情</a
  107. ></span
  108. >
  109. <span
  110. class="title"
  111. v-if="
  112. detailType == 20 ||
  113. detailType == 21 ||
  114. detailType == 22 ||
  115. detailType == 23 ||
  116. detailType == 24 ||
  117. detailType == 25 ||
  118. detailType == 26 ||
  119. detailType == 27 ||
  120. detailType == 31 ||
  121. detailType == 100
  122. "
  123. >详情<a class="btn" @click="skyb(props)">时空演变</a></span
  124. >
  125. <span class="title" v-if="detailType == 101"
  126. >控规详情<a class="btn" @click="skyb(props)">时空演变</a></span
  127. >
  128. <span class="title" v-if="detailType == 32"
  129. >详情<a
  130. v-if="detailType == 32"
  131. class="btn"
  132. @click="bjmockDetail(props)"
  133. >要素配置模拟</a
  134. ></span
  135. >
  136. <span class="title" v-if="detailType == 50 || detailType == 51">
  137. 详情
  138. </span>
  139. <span class="title" v-if="detailType == 99">
  140. 详情
  141. <a class="label" v-show="props['dksyh']">工业用地</a>
  142. <a
  143. class="label"
  144. v-show="props['tdyt'] && props['tdyt'].startsWith('07')"
  145. >住宅用地</a
  146. >
  147. <a
  148. class="label"
  149. v-show="props['tdyt'] && props['tdyt'].startsWith('0803')"
  150. >教育用地</a
  151. >
  152. <a class="label" v-show="props['新增调查地']">商业用地</a>
  153. <a class="label" v-show="props['spmj']">临时用地</a>
  154. </span>
  155. <div class="content" v-if="detailType == 1">
  156. <h2>{{ props["KFQMC"] }}</h2>
  157. <p>总面积:{{ Number(props["开发区评价面积"]).toFixed(0) }}公顷</p>
  158. <p>管理机构:{{ props["开发区管理机构"] }}</p>
  159. <p>地块位置:{{ props["开发区四至范围"] }}</p>
  160. </div>
  161. <div class="content" v-if="detailType == 2">
  162. <h2>{{ props["TDQLR"] }}</h2>
  163. <p>总面积:{{ Number(props["SJYDMJ"] * 0.0015).toFixed(2) }}亩</p>
  164. <p>容积率:{{ props["SJRJL"].toFixed(1) }}</p>
  165. <p>税收总额:{{ props["SJSF2020"].toFixed(1) }}万元</p>
  166. </div>
  167. <div class="content" v-if="detailType == 4 || detailType == 6">
  168. <h2>{{ props["dkbh"] }}</h2>
  169. <p>总面积:{{ Number(props["mj"] * 15).toFixed(2) }}亩</p>
  170. <p>批复文号:{{ props["pfwh"] }}</p>
  171. <p>规划单元:{{ props["ghdy"] }}</p>
  172. </div>
  173. <div class="content" v-if="detailType == 5">
  174. <h2>{{ props["TDQLR"] }}</h2>
  175. <p>总面积:{{ Number(props["SJYDMJ"] * 0.0015).toFixed(2) }}亩</p>
  176. <p>亩均税收:{{ Number(props["mjss"]).toFixed(2) }}万元/亩</p>
  177. <p>行业类别:{{ props["HYLB"] }}</p>
  178. <p>土地坐落:{{ props["TDZL"] }}</p>
  179. </div>
  180. <div class="content" v-if="detailType == 10">
  181. <h2>{{ props["xmmc"] }}</h2>
  182. <p>行政区:{{ props["szs"] || props["sxs"] }}</p>
  183. <!-- <p>面积:{{props['sjydmj']}}</p>-->
  184. <p>项目类型:{{ props["xmlx"] }}</p>
  185. </div>
  186. <div class="content" v-if="detailType == 11">
  187. <h2>{{ props["xmmc"] }}</h2>
  188. <p>行政区:{{ props["xzqmc"] }}</p>
  189. <p>面积:{{ props["ydmj"] }}亩</p>
  190. <p>总投资:{{ props["ztz"] }}亿元</p>
  191. <p>2022完成投资:{{ props["ywctz"] }}亿元</p>
  192. <p>2023计划投资:{{ props["jhtz"] }}亿元</p>
  193. </div>
  194. <div class="content" v-if="detailType == 12">
  195. <h2>{{ props["name"] }}</h2>
  196. <p>行政区:{{ props["sqs"] }}</p>
  197. <p>建成面积:{{ (props["jcmj"] * 1500).toFixed(0) }}亩</p>
  198. <p>产业类型:{{ props["cylx"] }}</p>
  199. <p>
  200. 非生产性用地面积:{{ (props["fscxydmj"] * 1500).toFixed(0) }}亩
  201. </p>
  202. </div>
  203. <div class="content" v-if="detailType == 13">
  204. <h2>{{ props["tdqlr"] }}</h2>
  205. <p>地块名称:{{ props["dkmc"] }}</p>
  206. <p>土地坐落:{{ props["tdzl"] }}</p>
  207. </div>
  208. <div class="content" v-if="detailType == 14">
  209. <h2>{{ props["xmmc"] }}</h2>
  210. <p>批准文号:{{ props["pzwh"] }}</p>
  211. <p>实际利用:{{ props["sjly"] }}</p>
  212. </div>
  213. <div class="content" v-if="detailType == 15">
  214. <h2>{{ props["dlmc"] }}</h2>
  215. <p>坐落单位名称:{{ props["zldwmc"] }}</p>
  216. <p>面积:{{ (props["tbmj"] * 0.0015).toFixed(2) }}亩</p>
  217. </div>
  218. <div class="content" v-if="detailType == 20">
  219. <h2>{{ detailData["dkbh"] || props['dkbh'] }}</h2>
  220. <p>行政区划:{{ (detailData["ssqx"] || props["ssqx"]) }} - {{ detailData["ssjd"] || props["ssjd"] }}</p>
  221. <p>面积:{{ ((detailData["mj"] || props['mj'] * 15)).toFixed(2) }} 亩</p>
  222. </div>
  223. <div class="content" v-if="detailType == 21">
  224. <h2>{{ props["tdqlr"] }}</h2>
  225. <p>
  226. 行政区划:{{ props["szx"] }}
  227. {{
  228. props["szxz"] && props["szxz"] !== " "
  229. ? "-" + props["szxz"]
  230. : ""
  231. }}
  232. </p>
  233. <p>用地面积:{{ (props["sjydmj"] * 0.0015).toFixed(2) }} 亩</p>
  234. </div>
  235. <div class="content" v-if="detailType == 22">
  236. <h2>{{ props["xmmc"] }}</h2>
  237. <p>批次名称:{{ props["bpxmmc"] }}</p>
  238. <p>批准文号:{{ props["pzwh"] }}</p>
  239. </div>
  240. <div class="content" v-if="detailType == 23">
  241. <h2>
  242. {{ props["dkmc"] }}
  243. {{ props["dkbh"] && props["dkbh"] !== " " ? props["dkbh"] : "" }}
  244. </h2>
  245. <p>项目名称:{{ props["tzxmmc"] }}</p>
  246. <p>
  247. 面积:{{ props["txmj"] && (props["txmj"] * 0.0015).toFixed(2) }}
  248. </p>
  249. </div>
  250. <div class="content" v-if="detailType == 24">
  251. <h2>{{ detailData["dkbh"] }}</h2>
  252. <p>行政区划:{{ "滨江区 - " + detailData["dkwz"] }}</p>
  253. <p>管地单位:{{ detailData["gddw"] }}</p>
  254. </div>
  255. <div class="content" v-if="detailType == 25">
  256. <h2>{{ props["name"] }}</h2>
  257. <p>
  258. 面积:{{ (props["sde.sde.特色小镇.area"] * 100 * 15).toFixed(1) }}
  259. </p>
  260. </div>
  261. <div class="content" v-if="detailType == 26">
  262. <h2>{{ props["项目名称"] }}</h2>
  263. <p>面积:{{ (props["总用地面积"] * 0.0015).toFixed(2) }} 亩</p>
  264. </div>
  265. <div class="content" v-if="detailType == 27">
  266. <h2>{{ props["dkmc"] }}</h2>
  267. <p>面积:{{ (props["txmj"] * 0.0015).toFixed(2) }} 亩</p>
  268. </div>
  269. <div class="content" v-if="detailType == 31 || detailType == 33">
  270. <h2>
  271. {{
  272. props["tdqlr"] ||
  273. props["BSM"] ||
  274. props["项目名称"] ||
  275. props["dkbh"]
  276. }}
  277. </h2>
  278. <p v-show="props['sjydmj']">
  279. 面积:{{ (props["sjydmj"] * 0.0015).toFixed(2) }}亩
  280. </p>
  281. <p v-show="props['mj']">
  282. 面积:{{ (props["mj"] * 15).toFixed(2) }}亩
  283. </p>
  284. <p v-show="props['txmj']">
  285. 面积:{{ (props["txmj"] * 0.0015).toFixed(2) }}亩
  286. </p>
  287. <p v-show="props['总用地面积']">
  288. 面积:{{ (props["总用地面积"] * 0.0015).toFixed(2) }}亩
  289. </p>
  290. <!-- <p>批准文号:{{ props['pzwh'] }} </p>-->
  291. </div>
  292. <div class="content" v-if="detailType == 32">
  293. <h2>{{ props["dkbh"] }}</h2>
  294. <p v-show="props['mj']">
  295. 面积:{{ (props["mj"] * 15).toFixed(2) }}亩
  296. </p>
  297. <!-- <p>批准文号:{{ props['pzwh'] }} </p>-->
  298. </div>
  299. <div class="content" v-if="detailType === 50">
  300. <h2>{{ props["dlmc"] || props["dkbh"] }}</h2>
  301. <p>
  302. 面积:{{
  303. props["tbmj"]
  304. ? props["tbmj"].toFixed(2)
  305. : (props["mj"] * 15).toFixed(2)
  306. }}
  307. </p>
  308. </div>
  309. <div class="content" v-if="detailType == 99">
  310. <h2>
  311. {{
  312. props["dkmc"] ||
  313. props["tdqlr"] ||
  314. props["BSM"] ||
  315. props["项目名称"] ||
  316. props["dkbh"] ||
  317. props["xmmc"]
  318. }}
  319. </h2>
  320. <p v-show="props['sjydmj']">
  321. 面积:{{ (props["sjydmj"] * 0.0015).toFixed(2) }}亩
  322. </p>
  323. <p v-show="props['mj']">
  324. 面积:{{ (props["mj"] * 15).toFixed(2) }}亩
  325. </p>
  326. <p v-show="props['txmj']">
  327. 面积:{{ (props["txmj"] * 0.0015).toFixed(2) }}亩
  328. </p>
  329. <p v-show="props['总用地面积']">
  330. 面积:{{ (props["总用地面积"] * 0.0015).toFixed(2) }}亩
  331. </p>
  332. <p v-show="props['spmj']">
  333. 面积:{{ (props["spmj"] * 0.0015).toFixed(2) }}亩
  334. </p>
  335. </div>
  336. <div class="content" v-if="detailType == 101">
  337. <p v-show="props['dymc']">单元名称:{{ props["dymc"] }}</p>
  338. <p v-show="props['yddm']">用地代码:{{ props["yddm"] }}</p>
  339. <p v-show="props['ydxz']">用地性质:{{ props["ydxz"] }}</p>
  340. </div>
  341. <div class="fixedIcon"></div>
  342. </div>
  343. </template>
  344. </vl-feature-overlay>
  345. <div class="modalBox" v-if="skybShow">
  346. <span class="close" @click="skybShow = false"></span>
  347. <div class="modalContent">
  348. <iframe
  349. id="imageTool"
  350. src="https://kjzl.zrzyt.zj.gov.cn/kjzlv2/blockTool"
  351. ></iframe>
  352. </div>
  353. </div>
  354. </vl-map>
  355. </template>
  356. <script>
  357. import { mapGetters, mapState } from "vuex";
  358. import MapUtils from "@/utils/MapUtils";
  359. import olMapUtils from "@/utils/OlMapUtils";
  360. import "ol/ol.css";
  361. import DragPan from "ol/interaction/DragPan";
  362. import VlMap from "@/components/ol/VlMap";
  363. import { getMapLayerConfig } from "@/components/ol/_utils/map-layer-utils";
  364. import { VlConfigLayers, VlLayerTree } from "@/components/ol/VlConfigLayers";
  365. import { VlToolBar, VlToolBarItem } from "@/components/ol/VlToolBar";
  366. import {
  367. VlFeatureFlicker,
  368. VlFeatureOverlay,
  369. } from "@/components/ol/VlFeatureTool";
  370. import VlLegend from "@/components/ol/VlLegend";
  371. import VlImglayers from "@/components/ol/VLImgLayers";
  372. import { arcgisQuery } from "@/utils/arcgis-map-server-query";
  373. import { GeoServerQuery } from '@/utils/geo-map-server-query'
  374. import VlMapDevInfo from "@/components/ol/VlMapDevInfo";
  375. import VlChinaCities from "@/components/ol/VlChinaCities";
  376. import { MultiPolygon } from "ol/geom";
  377. import { getSrid, mapFit, toArcGIS } from "@/utils/arcgis-utils";
  378. import { Stroke, Style } from "ol/style";
  379. import { Vector as VectorSource } from "ol/source";
  380. import { Vector as VectorLayer } from "ol/layer";
  381. import EChartsLayer from "ol-echarts";
  382. import { XZQ } from "@/utils/constant/Constant.js";
  383. import { scatter_bg4, bg_text } from "./base64Img.js";
  384. import { Geometry as WkxGeometry } from "wkx";
  385. import { GeoJSON } from "ol/format";
  386. import { convertRingsToGeoJSON } from "@/utils/ArcGISGeoJSONConvertTool.js";
  387. import { Fill, Text } from "ol/style";
  388. import VlToolBox from "@/components/ol/VlToolBox";
  389. import TABLE_COMP_MAPPING from "./TABLE_COMP_MAPPING.js";
  390. import { getArea } from "ol/sphere";
  391. import TdytMapping from "@/mock/TdytMapping.js";
  392. import HeatmapLayer from "ol/layer/Heatmap";
  393. import hotJson from "@/assets/geoJson/GYYDPT4490.json";
  394. export default {
  395. name: "BigScreenMap",
  396. computed: {
  397. ...mapState({
  398. xzqNameState: (state) => state.BaseData.xzqState,
  399. mapDataOne: (state) => state.BaseData.TDG,
  400. }),
  401. ...mapGetters({
  402. xzqdm: "BaseData/xzqCodeGetter",
  403. }),
  404. },
  405. components: {
  406. VlFeatureOverlay,
  407. VlChinaCities,
  408. VlMapDevInfo,
  409. VlLegend,
  410. VlLayerTree,
  411. VlFeatureFlicker,
  412. VlToolBarItem,
  413. VlToolBar,
  414. VlConfigLayers,
  415. VlMap,
  416. VlToolBox,
  417. VlImglayers,
  418. },
  419. filters: {},
  420. props: {
  421. districtCode: {
  422. type: String,
  423. default: "33",
  424. },
  425. imgLayers: Array,
  426. title: {
  427. type: String,
  428. default: "",
  429. },
  430. visibleLayerIds: {
  431. type: Array,
  432. default: () => [],
  433. },
  434. overlayShow: {
  435. type: Boolean,
  436. default: false,
  437. },
  438. layerShow: {
  439. type: Boolean,
  440. default: false,
  441. },
  442. defaultLayerId: {
  443. type: String,
  444. default: "",
  445. },
  446. fixed: {
  447. type: Number,
  448. default: 0,
  449. },
  450. GZData: {
  451. type: Array,
  452. default() {
  453. return [];
  454. },
  455. },
  456. legendShow: {
  457. type: Boolean,
  458. default: true,
  459. },
  460. defaultExpand: {
  461. type: Boolean,
  462. default: true,
  463. },
  464. townShow: {
  465. type: Boolean,
  466. default: true,
  467. },
  468. },
  469. data() {
  470. return {
  471. map: undefined,
  472. mapDragPan: null,
  473. visibleLayerId: "",
  474. detailData: {},
  475. detailType: 1,
  476. layerFeatureKey: undefined,
  477. viewInfo: {
  478. x: 120,
  479. y: 30,
  480. center: [0, 0],
  481. zoom: 0,
  482. extent: [0, 0, 0, 0],
  483. scale: 1,
  484. },
  485. layersConfig: getMapLayerConfig(), // getMapLayerConfig 获取的是 config.js 配置的克隆
  486. enabledLayersConfig: [], // 启用的图层配置,来源于 vl-config-layers 的loaded事件回调
  487. feature: undefined, // 闪烁和气泡的 特征
  488. districtFeature: undefined, // 行政区的特征
  489. showDetail: false,
  490. echartslayer: null,
  491. showLifeCircle: false,
  492. xzqType: "city",
  493. xzqName: "",
  494. realLayers: [],
  495. lifeCycleShow: false,
  496. vectorGeo: null,
  497. vmEventType: "",
  498. tdytMapping: {
  499. 1: "工业用地",
  500. 2: "商服用地",
  501. 3: "住宅用地",
  502. 4: "其他用地",
  503. },
  504. isIconBool: false,
  505. isShowIcon: false,
  506. echartsLayerClickHandle: null,
  507. layerIndex: "0", //图层级别默认为0
  508. heatMapLayer: null,
  509. tzzxShow: false,
  510. geoSource: new VectorSource(),
  511. geoLayer: undefined,
  512. isgyyd: "",
  513. kgLayer: null,
  514. skybShow: false,
  515. geometry: ''
  516. };
  517. },
  518. watch: {
  519. GZData: {
  520. immediate: true,
  521. deep: true,
  522. handler: function() {
  523. // 迁徙图图层初始化
  524. this.echartsLayerLoad();
  525. },
  526. },
  527. visibleLayerIds: {
  528. immediate: true,
  529. deep: true,
  530. handler () {
  531. this.visibleLayerId = this.visibleLayerIds[0];
  532. },
  533. },
  534. },
  535. mounted() {
  536. //监听 工具发来的信息
  537. window.addEventListener("message", this.setBlockMessage);
  538. this.$vm.$on("setLayerIndexEvent", (index) => {
  539. this.layerIndex = index;
  540. });
  541. let _initZoom = 8;
  542. const _clientW = document.documentElement.clientWidth;
  543. if (parseInt(_clientW) > 2000) {
  544. setTimeout(() => {
  545. _initZoom = 8.5;
  546. this.map.getView().setZoom(_initZoom);
  547. }, 200);
  548. }
  549. this.$vm.$on('updateLayer', (payload) => {
  550. const { id, param, layerIdx } = payload;
  551. let params = {};
  552. params = {
  553. layers: layerIdx,
  554. cql_filter: param,
  555. };
  556. let layer = this.getLayerById(id);
  557. layer.setVisible(true);
  558. const source = layer.getSource();
  559. source.updateParams(params);
  560. });
  561. this.$vm.$on("refreshLayer", (id) => {
  562. this.feature = null;
  563. if (id) {
  564. let layer = this.getLayerById(id);
  565. layer.setVisible(true);
  566. const source = layer.getSource();
  567. source.refresh();
  568. }
  569. });
  570. this.$vm.$on("setTzzxShow", (payload) => {
  571. this.tzzxShow = payload;
  572. });
  573. this.$vm.$on("setEchartsLayerClickHandle", (handle) => {
  574. this.echartsLayerClickHandle = handle;
  575. });
  576. this.$vm.$on("getGdDetailData", (payload) => {
  577. this.detailData = payload;
  578. });
  579. this.$vm.$on("setGdDetailType", (payload) => {
  580. this.detailType = payload;
  581. });
  582. this.$vm.$on("location-init", () => {
  583. this.feature = null;
  584. this.$vm.$emit("switchLayerShow", true);
  585. if (this.xzqNameState != "" && this.xzqNameState != "浙江省") {
  586. this.locationMaskFeatureHttp(this.xzqNameState, this.visibleLayerId);
  587. } else {
  588. setTimeout(() => {
  589. if (this.map) {
  590. if (window.vtLayer) {
  591. this.map.removeLayer(window.vtLayer);
  592. }
  593. this.map
  594. .getView()
  595. .setCenter([120.45690944408925, 29.248390754380974]);
  596. this.map.getView().setZoom(7.85);
  597. }
  598. }, 0);
  599. }
  600. });
  601. //改变图层显示
  602. this.$vm.$on("change-layer", () => {
  603. this.feature = null;
  604. this.removeHotLayer();
  605. this.$vm.$emit("switchLayerShow", true);
  606. });
  607. this.$vm.$on("clear-layer", () => {
  608. if (this.vectorGeo != null) {
  609. this.vectorGeo.getSource().clear();
  610. this.vectorGeo = null;
  611. }
  612. });
  613. this.$vm.$on("setLayerIdEvent", (name) => {
  614. if (!name) {
  615. this.visibleLayerId = this.visibleLayerIds[
  616. this.visibleLayerIds.length - 1
  617. ];
  618. } else {
  619. this.visibleLayerId = name;
  620. }
  621. });
  622. this.$vm.$on("location-feature", (payload) => {
  623. //根据dzjgh进行图斑定位
  624. const { dzjgh } = payload;
  625. this.locationFeatureHttp(dzjgh, this.visibleLayerId);
  626. });
  627. this.$vm.$on("location-feature-where", (payload) => {
  628. //根据dzjgh进行图斑定位
  629. const { layerId, where, setting = {} } = payload;
  630. this.locationFeatureWhere(layerId, where, setting);
  631. });
  632. this.$vm.$on("location-more-feature-where", (payload) => {
  633. //根据dzjgh进行图斑定位
  634. const { layerId, where, setting = {} } = payload;
  635. this.locationMoreFeatureWhere(layerId, where, setting);
  636. });
  637. this.$vm.$on("location-mask-feature", (payload) => {
  638. //根据dzjgh进行图斑定位
  639. const { dzjgh } = payload;
  640. this.locationMaskFeatureHttp(dzjgh, this.visibleLayerId);
  641. });
  642. this.$vm.$on("location-mask-self-where", (payload) => {
  643. //根据dzjgh进行图斑定位
  644. const { layerId, where } = payload;
  645. this.locationMaskFeatureWhere(layerId, where);
  646. });
  647. this.$vm.$on("showIconEvent", (name, type) => {
  648. if (!this.isIconBool) return;
  649. let id = "";
  650. switch (name) {
  651. case "已批未征":
  652. id = "pewg-ypwz";
  653. break;
  654. case "规划调整":
  655. id = "pewg-ghtz";
  656. break;
  657. case "项目未落实":
  658. id = "pewg-xmwls";
  659. break;
  660. case "手续未完善":
  661. id = "pewg-sxwws";
  662. break;
  663. case "储备土地":
  664. id = "pewg-zbtd";
  665. break;
  666. case "供地前期工作":
  667. id = "pewg-gdqqgz";
  668. break;
  669. case "零星难利用":
  670. id = "pewg-lxnly";
  671. break;
  672. case "农转用无法调整":
  673. id = "pewg-nzywftz";
  674. break;
  675. case "其他原因":
  676. id = "pewg-qtyy";
  677. break;
  678. case "待认定":
  679. id = "pewg-drd";
  680. break;
  681. }
  682. this.$vm.$emit("setLandMapLayerContro", { type: type, id: id });
  683. });
  684. //根据图层ID显示响应图层
  685. this.$vm.$on("setLandMapLayerContro", (payload) => {
  686. const { parentId, type, id } = payload;
  687. const landMapLayers = this.enabledLayersConfig[1]["children"];
  688. if (parentId) {
  689. for (let i = 0; i < landMapLayers.length; i++) {
  690. if (landMapLayers[i]["id"] === parentId) {
  691. landMapLayers[i]["visible"] = true;
  692. break;
  693. }
  694. }
  695. }
  696. if (id) {
  697. for (let i = 0; i < landMapLayers.length; i++) {
  698. if (landMapLayers[i]["id"] === id) {
  699. setTimeout(() => {
  700. landMapLayers[i]["visible"] = type == "hide" ? false : true;
  701. }, 1000);
  702. break;
  703. }
  704. }
  705. }
  706. });
  707. this.$vm.$on("switchLayerShow", (boolean) => {
  708. if (boolean) {
  709. this.feature = null;
  710. this.visibleLayerId = this.visibleLayerIds[0];
  711. this.realLayers = JSON.parse(JSON.stringify(this.visibleLayerIds));
  712. } else {
  713. this.realLayers = [];
  714. }
  715. });
  716. this.$vm.$on("GlobalStatisticsLayer", (payload) => {
  717. let { layerId, setting } = payload;
  718. this.statisticsLayer(layerId, setting);
  719. });
  720. },
  721. beforeDestroy() {
  722. // 修复 页面大小改变时 echartslayer 未销毁
  723. this.echartslayer && this.echartslayer.remove();
  724. },
  725. methods: {
  726. //发送项目信息给遥感影像工具
  727. setBlockMessage: function (event) {
  728. //判断是否为工具加载完成消息
  729. if (!event.data || !event.data.loadSuccess) {
  730. return;
  731. }
  732. //向遥感影像工具发送信息
  733. let receiver = document.getElementById("imageTool").contentWindow;
  734. let postString = {
  735. areaId: this.getAreaId(),
  736. geometryFormat: "wkt",
  737. geometry: this.geometry,
  738. };
  739. receiver.postMessage(postString, "*");
  740. },
  741. getAreaId () {
  742. const date = new Date();
  743. const random = Math.random().toString().substring(2)
  744. return random+date.getDate().toString();
  745. },
  746. initHotLayer(field) {
  747. this.heatMapLayer = new HeatmapLayer({
  748. source: new VectorSource({
  749. features: new GeoJSON().readFeatures(hotJson),
  750. // 我们使用json数据
  751. // url: require('@/assets/geojson/dxccHotlayer.json'),
  752. // format: new GeoJSON()
  753. }),
  754. // 这里可以根据自己项目的实际,绑定页面的控件动态调整
  755. blur: 8,
  756. radius: 6,
  757. weight: weightFunction,
  758. });
  759. /*
  760. *设置权重
  761. */
  762. function weightFunction(feature) {
  763. var weight = feature.get(field);
  764. weight = parseFloat(weight);
  765. // weight = parseFloat(weight) / 10;
  766. return weight;
  767. }
  768. // this.heatMapLayer.getSource().on('addfeature', function(event) {
  769. //
  770. // //var place = event.feature.get('place');
  771. // var magnitude = event.feature.get('mjss');
  772. // //设定权重减去的数字是为了过滤地震等级,比如只想显示3级以上地震,那就减去3
  773. // event.feature.set('weight', magnitude);
  774. // });
  775. this.heatMapLayer.setZIndex(999);
  776. this.map.addLayer(this.heatMapLayer);
  777. },
  778. vlImgLayerChangeHandle(val) {
  779. this.visibleLayerId = "bj-kgdk";
  780. const layer = this.$refs.configLayer.getLayerConfigById(
  781. this.visibleLayerId
  782. );
  783. layer.enabled = true;
  784. layer.visible = val;
  785. if (!val) {
  786. this.visibleLayerId = this.visibleLayerIds[0];
  787. }
  788. },
  789. vlImgLayerChangeHandle1(val) {
  790. this.visibleLayerId = "bjq-gd";
  791. const layer = this.$refs.configLayer.getLayerConfigById(
  792. this.visibleLayerId
  793. );
  794. layer.enabled = true;
  795. layer.visible = val;
  796. if (!val) {
  797. this.visibleLayerId = this.visibleLayerIds[0];
  798. }
  799. },
  800. vlImgLayerSliderChangeHandle(val) {
  801. this.visibleLayerId = "bj-kgdk";
  802. const layer = this.$refs.configLayer.getLayerConfigById(
  803. this.visibleLayerId
  804. );
  805. layer.opacity = val / 100;
  806. },
  807. vlImgLayerSliderChangeHandle1(val) {
  808. this.visibleLayerId = "bjq-gd";
  809. const layer = this.$refs.configLayer.getLayerConfigById(
  810. this.visibleLayerId
  811. );
  812. layer.opacity = val / 100;
  813. },
  814. removeHotLayer() {
  815. this.map.removeLayer(this.heatMapLayer);
  816. this.heatMapLayer = null;
  817. },
  818. clearGeoLayer() {
  819. if (this.geoLayer && this.geoSource) {
  820. this.geoSource.clear();
  821. this.map.removeLayer(this.geoLayer);
  822. }
  823. },
  824. addGeoLayer(geoJson) {
  825. if (this.geoLayer && this.geoSource) {
  826. this.geoSource.clear();
  827. this.map.removeLayer(this.geoLayer);
  828. }
  829. this.geoSource.addFeatures(new GeoJSON().readFeatures(geoJson));
  830. this.geoLayer = new VectorLayer({
  831. source: this.geoSource,
  832. style: function(feature) {
  833. return new Style({
  834. stroke: new Stroke({
  835. width: 1,
  836. color: "rgba(255, 255, 255, 1)",
  837. }),
  838. fill: new Fill({
  839. color: feature.get("color"),
  840. }),
  841. // text: new Text(({
  842. // // 位置
  843. // textAlign: 'center',
  844. // // 基准线
  845. // textBaseline: 'middle',
  846. // // 文字样式
  847. // font: 'bold 16px 微软雅黑',
  848. // // 文本内容
  849. // text: feature.get('name')+'\n'+feature.get('value')+' '+feature.get('unit'),
  850. // // 文字颜色
  851. // fill: new Fill({ color: '#FFF' }),
  852. // // fill: new Fill({ color: feature.get('color') }),
  853. // // 文字背景
  854. // // stroke: new Stroke({ color: '#ffcc33', width: 10 })
  855. // }))
  856. });
  857. },
  858. zIndex: 99,
  859. });
  860. this.map.addLayer(this.geoLayer);
  861. // this.map.getView().fit(this.geoLayer.getSource().getExtent(), { duration: 500 })
  862. // let selectClick = new interaction.Select();
  863. // this.map.addInteraction(selectClick);
  864. // selectClick.on('select', (e)=>{
  865. // var features=e.target.getFeatures().getArray();
  866. // this.$emit('mapSelect',features[0].getProperties())
  867. // })
  868. return this.geoLayer;
  869. // this.geoLayer.setMap(this.map)
  870. },
  871. addGeoLayer2(geoJson) {
  872. if (this.geoLayer && this.geoSource) {
  873. this.geoSource.clear();
  874. this.map.removeLayer(this.geoLayer);
  875. }
  876. this.geoSource.addFeatures(new GeoJSON().readFeatures(geoJson));
  877. this.geoLayer = new VectorLayer({
  878. source: this.geoSource,
  879. style: function() {
  880. return new Style({
  881. stroke: new Stroke({
  882. width: 1,
  883. color: "#4AD808",
  884. }),
  885. fill: new Fill({
  886. color: "#4AD808",
  887. }),
  888. // text: new Text(({
  889. // // 位置
  890. // textAlign: 'center',
  891. // // 基准线
  892. // textBaseline: 'middle',
  893. // // 文字样式
  894. // font: 'bold 16px 微软雅黑',
  895. // // 文本内容
  896. // text: feature.get('name')+'\n'+feature.get('value')+' '+feature.get('unit'),
  897. // // 文字颜色
  898. // fill: new Fill({ color: '#FFF' }),
  899. // // fill: new Fill({ color: feature.get('color') }),
  900. // // 文字背景
  901. // // stroke: new Stroke({ color: '#ffcc33', width: 10 })
  902. // }))
  903. });
  904. },
  905. zIndex: 99,
  906. });
  907. this.map.addLayer(this.geoLayer);
  908. // this.map.getView().fit(this.geoLayer.getSource().getExtent(), { duration: 500 })
  909. // let selectClick = new interaction.Select();
  910. // this.map.addInteraction(selectClick);
  911. // selectClick.on('select', (e)=>{
  912. // var features=e.target.getFeatures().getArray();
  913. // this.$emit('mapSelect',features[0].getProperties())
  914. // })
  915. return this.geoLayer;
  916. // this.geoLayer.setMap(this.map)
  917. },
  918. filterTdyt(val) {
  919. if (!val) return;
  920. if (!TdytMapping[val.trim()]) {
  921. return "";
  922. } else {
  923. return TdytMapping[val.trim()];
  924. }
  925. },
  926. showLandDetail(props) {
  927. this.$vm.$emit("yqModalShow", props);
  928. },
  929. showSpDetail(props) {
  930. this.$vm.$emit("showSpDetail", props);
  931. },
  932. async locationMoreFeatureWhere(layerId, where, setting = {}) {
  933. const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
  934. if (!layerById) {
  935. console.error(`no layer id`);
  936. return;
  937. }
  938. await arcgisQuery(
  939. `${layerById.url}/${this.layerIndex}/query`,
  940. {
  941. outSR: getSrid(this.map),
  942. where,
  943. ...setting,
  944. },
  945. false
  946. ).then(({ features }) => {
  947. let json = { type: "FeatureCollection", features: [] };
  948. features.forEach((it) => {
  949. json.features.push(convertRingsToGeoJSON(it.geometry.rings));
  950. });
  951. if (this.vectorGeo != null) {
  952. this.vectorGeo.getSource().clear();
  953. this.vectorGeo = null;
  954. }
  955. // 使用GeoJSON构建source
  956. const source = new VectorSource({
  957. features: new GeoJSON().readFeatures(json),
  958. });
  959. this.vectorGeo = new VectorLayer({
  960. source: source,
  961. style: new Style({
  962. fill: new Fill({
  963. // 填充
  964. color: "rgba(0,255,0, 0.6)",
  965. }),
  966. stroke: new Stroke({
  967. width: 5,
  968. color: "#00FF00",
  969. }),
  970. }),
  971. zIndex: 99,
  972. });
  973. this.map.addLayer(this.vectorGeo);
  974. this.map.getView().fit(source.getExtent(), {
  975. duration: 500,
  976. maxZoom: 17,
  977. });
  978. });
  979. },
  980. locationByGeoJson(geos) {
  981. this.feature = new GeoJSON().readFeatures(geos)[0];
  982. },
  983. locationByGeoJsonColor(geos, color, width) {
  984. let source = new VectorSource({
  985. features: new GeoJSON().readFeatures(geos),
  986. });
  987. let geoLayer = new VectorLayer({
  988. source: source,
  989. // 设置样式,边框和填充
  990. style: new Style({
  991. stroke: new Stroke({
  992. color: color,
  993. width: width,
  994. }),
  995. // fill: new Fill({
  996. // color: 'rgba(255, 255, 0, 0.5)'
  997. // })
  998. }),
  999. zIndex: 999,
  1000. });
  1001. // 添加GeoJSON到map上
  1002. this.map.addLayer(geoLayer);
  1003. this.map.getView().fit(source.getExtent(), {
  1004. duration: 500,
  1005. maxZoom: 17,
  1006. });
  1007. },
  1008. async locationFeatureHttp(
  1009. bsm,
  1010. layerId,
  1011. { feature = undefined, row = undefined } = {}
  1012. ) {
  1013. this.layerFeatureKey = TABLE_COMP_MAPPING[layerId].layerField;
  1014. layerId = layerId || this.visibleLayerId;
  1015. const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
  1016. if (!layerById) {
  1017. console.error(`no layer id`);
  1018. return;
  1019. }
  1020. if (bsm) {
  1021. this.spinShow = true;
  1022. if (!feature) {
  1023. const where = `${this.layerFeatureKey} = '${bsm}'`;
  1024. if (layerById.serverType === 'wms') {
  1025. await GeoServerQuery(`${layerById.queryUrl}`, {
  1026. typeName: layerById.params.layers,
  1027. cql_filter: where
  1028. }, true).then(({ features }) => {
  1029. feature = features[0]
  1030. })
  1031. } else {
  1032. await arcgisQuery(
  1033. `${layerById.url}/${this.layerIndex}/query`,
  1034. {
  1035. outSR: getSrid(this.map),
  1036. where,
  1037. },
  1038. true
  1039. ).then(({ features }) => {
  1040. feature = features[0];
  1041. });
  1042. }
  1043. }
  1044. if (row) {
  1045. feature.setProperties({ ...row });
  1046. }
  1047. this.spinShow = false;
  1048. }
  1049. if (feature) {
  1050. const geometry = feature.getGeometry();
  1051. const wkt = WkxGeometry.parseGeoJSON(
  1052. new GeoJSON().writeGeometryObject(geometry)
  1053. ).toWkt();
  1054. feature.set("wkt", wkt);
  1055. this.feature = feature;
  1056. this.$vm.$emit("getGeoData", feature); //初始化土地生命周期geo/feature参数
  1057. }
  1058. },
  1059. async locationFeatureWhere(layerId, where, setting) {
  1060. this.spinShow = true;
  1061. const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
  1062. if (layerById.serverType === 'wms') {
  1063. await GeoServerQuery(`${layerById.queryUrl}`, {
  1064. typeName: layerById.params.layers,
  1065. cql_filter: where
  1066. }, true).then(({ features }) => {
  1067. this.feature = features[0]
  1068. })
  1069. } else {
  1070. await arcgisQuery(
  1071. `${layerById.url}/${this.layerIndex}/query`,
  1072. {
  1073. outSR: getSrid(this.map),
  1074. where,
  1075. ...setting,
  1076. },
  1077. true
  1078. ).then(({ features }) => {
  1079. let feature = features[0];
  1080. const geometry = feature.getGeometry();
  1081. const wkt = WkxGeometry.parseGeoJSON(
  1082. new GeoJSON().writeGeometryObject(geometry)
  1083. ).toWkt();
  1084. feature.set("wkt", wkt);
  1085. this.feature = feature;
  1086. });
  1087. }
  1088. this.spinShow = false;
  1089. },
  1090. async locationMaskFeatureHttp(
  1091. bsm,
  1092. layerId,
  1093. { feature = undefined, row = undefined } = {}
  1094. ) {
  1095. this.layerFeatureKey = TABLE_COMP_MAPPING[layerId].layerField;
  1096. layerId = layerId || this.visibleLayerId;
  1097. const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
  1098. if (!layerById) {
  1099. console.error(`no layer id`);
  1100. return;
  1101. }
  1102. if (bsm) {
  1103. this.spinShow = true;
  1104. if (!feature) {
  1105. const where = `${this.layerFeatureKey} = '${bsm}'`;
  1106. await arcgisQuery(
  1107. `${layerById.url}/${this.layerIndex}/query`,
  1108. {
  1109. outSR: getSrid(this.map),
  1110. where,
  1111. },
  1112. false
  1113. ).then((resp) => {
  1114. const { features } = resp;
  1115. let json = { type: "FeatureCollection", features: [] };
  1116. json.features.push(
  1117. convertRingsToGeoJSON(features[0].geometry.rings)
  1118. );
  1119. MapUtils.drawShade(this.map, json);
  1120. });
  1121. }
  1122. if (row) {
  1123. feature.setProperties({ ...row });
  1124. }
  1125. this.spinShow = false;
  1126. }
  1127. this.feature = feature;
  1128. if (feature) {
  1129. this.$vm.$emit("getGeoData", feature); //初始化土地生命周期geo/feature参数
  1130. }
  1131. },
  1132. async locationMaskFeatureWhere(layerId, where) {
  1133. const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
  1134. if (!layerById) {
  1135. console.error(`no layer id`);
  1136. return;
  1137. }
  1138. this.spinShow = true;
  1139. if (layerById.serverType === 'wms') {
  1140. await GeoServerQuery(`${layerById.queryUrl}`, {
  1141. typeName: layerById.params.layers,
  1142. cql_filter: where
  1143. }, false).then((resp) => {
  1144. const { features } = resp;
  1145. let json = { type: "FeatureCollection", features: [] };
  1146. json.features.push(
  1147. features[0].geometry
  1148. );
  1149. MapUtils.drawShade(this.map, json);
  1150. })
  1151. } else {
  1152. await arcgisQuery(
  1153. `${layerById.url}/0/query`,
  1154. {
  1155. outSR: getSrid(this.map),
  1156. where,
  1157. },
  1158. false
  1159. ).then((resp) => {
  1160. const { features } = resp;
  1161. let json = { type: "FeatureCollection", features: [] };
  1162. json.features.push(convertRingsToGeoJSON(features[0].geometry.rings));
  1163. MapUtils.drawShade(this.map, json);
  1164. });
  1165. }
  1166. this.spinShow = false;
  1167. },
  1168. mapLoaded(map) {
  1169. window.map = map;
  1170. this.map = map;
  1171. const layerId = this.visibleLayerId;
  1172. // 图斑拾取黑名单
  1173. const pickBlackList = [];
  1174. map.on("singleclick", (e) => {
  1175. this.$vm.$emit("clear-layer");
  1176. if (this.visibleLayerId === "xzqh-s-search") return;
  1177. if (this.visibleLayerId === "xzqh-x-search") return;
  1178. const drawing = map.get("drawing");
  1179. if (drawing || pickBlackList.includes(layerId)) {
  1180. console.log("no pick event");
  1181. return;
  1182. }
  1183. this.detailData = {}
  1184. this.pickServerFeature(e);
  1185. });
  1186. map.on("moveend", () => {
  1187. let zoom = map.getView().getZoom(); //获取当前地图的缩放级别
  1188. if (zoom >= 11.3) {
  1189. // this.visibleLayerId = this.visibleLayerIds[
  1190. // this.visibleLayerIds.length - 1
  1191. // ];
  1192. if (this.mapDragPan) {
  1193. this.mapDragPan.setActive(true);
  1194. }
  1195. //缩放至一定级别不显示tooptip图例
  1196. // this.echartslayer.hide();
  1197. } else {
  1198. this.visibleLayerId = this.visibleLayerIds[0];
  1199. if (this.visibleLayerId === "xzqh-s-search" && this.mapDragPan) {
  1200. this.mapDragPan.setActive(true);
  1201. }
  1202. // this.echartslayer.show();
  1203. }
  1204. if (zoom >= 9 && this.xzqType !== "town" && this.townShow) {
  1205. // 县级市
  1206. if (this.vmEventType) {
  1207. this.$vm.$emit(this.vmEventType, "town");
  1208. }
  1209. this.xzqType = "town";
  1210. this.$emit("moveend", this.xzqType);
  1211. this.enabledLayersConfig[0]["children"][2]["children"][0][
  1212. "visible"
  1213. ] = false;
  1214. this.enabledLayersConfig[0]["children"][2]["children"][4][
  1215. "visible"
  1216. ] = true;
  1217. if (this.isIconBool && !this.isShowIcon) {
  1218. this.isShowIcon = true;
  1219. }
  1220. } else if (zoom < 9 && this.xzqType !== "city") {
  1221. // 地级市
  1222. if (this.vmEventType) {
  1223. this.$vm.$emit(this.vmEventType, "city");
  1224. }
  1225. this.xzqType = "city";
  1226. this.$emit("moveend", this.xzqType);
  1227. this.enabledLayersConfig[0]["children"][2]["children"][0][
  1228. "visible"
  1229. ] = true;
  1230. this.enabledLayersConfig[0]["children"][2]["children"][4][
  1231. "visible"
  1232. ] = false;
  1233. }
  1234. });
  1235. map.getView().setCenter([120.45690944408925, 29.248390754380974]);
  1236. map.getView().setZoom(7.85);
  1237. this.map.getInteractions().forEach((element) => {
  1238. if (element instanceof DragPan) {
  1239. this.mapDragPan = element;
  1240. }
  1241. });
  1242. },
  1243. echartsLayerLoad() {
  1244. if (this.echartslayer !== null) {
  1245. // this.map.removeLayer(this.echartslayer);
  1246. this.echartslayer.remove();
  1247. this.echartslayer = null;
  1248. }
  1249. // 迁徙图图层初始化
  1250. this.echartslayer = new EChartsLayer(this.getOption());
  1251. this.echartslayer.setMap(this.map);
  1252. this.echartslayer.$chart.on("click", (item) => {
  1253. if (!this.echartsLayerClickHandle) return;
  1254. this.echartsLayerClickHandle(item);
  1255. });
  1256. },
  1257. getOption() {
  1258. var geoCoordMap = null;
  1259. let GZData = [];
  1260. let isShow = true;
  1261. let typeStr = 1; //Scatter背景图类型 0、1
  1262. if (this.GZData && this.GZData.length > 0) {
  1263. isShow = true;
  1264. GZData = this.GZData;
  1265. typeStr = GZData[0]["typeIndex"];
  1266. } else {
  1267. isShow = false;
  1268. }
  1269. if (!this.xzqName) {
  1270. if (this.xzqType === "town") {
  1271. const keys = Object.keys(XZQ[this.xzqType]);
  1272. geoCoordMap = {};
  1273. for (let i = 0; i < keys.length; i++) {
  1274. const mapItem = XZQ[this.xzqType][keys[i]];
  1275. Object.assign(geoCoordMap, mapItem);
  1276. }
  1277. } else {
  1278. geoCoordMap = XZQ[this.xzqType];
  1279. }
  1280. } else {
  1281. geoCoordMap = XZQ[this.xzqType][this.xzqName];
  1282. }
  1283. var convertData2 = function(data) {
  1284. var res = [];
  1285. data.forEach((item) => {
  1286. var geoCoord = geoCoordMap[item.name];
  1287. if (geoCoord) {
  1288. res.push({
  1289. name: item.name,
  1290. value: geoCoord,
  1291. query: item["query"],
  1292. param: item["param"],
  1293. });
  1294. }
  1295. });
  1296. return res;
  1297. };
  1298. const series = [
  1299. {
  1300. type: "scatter",
  1301. coordinateSystem: "geo",
  1302. tooltip: { show: false },
  1303. z: 999,
  1304. label: {
  1305. normal: {
  1306. show: true,
  1307. formatter: function(item) {
  1308. return `{tline|${item["name"]}}`;
  1309. },
  1310. rich: {
  1311. tline: {
  1312. color: "#FFF",
  1313. align: "center",
  1314. fontSize: 15,
  1315. fontWeight: 600,
  1316. },
  1317. },
  1318. },
  1319. emphasis: {
  1320. show: true,
  1321. },
  1322. },
  1323. itemStyle: {
  1324. opacity: 1,
  1325. color: function(val) {
  1326. return "#333";
  1327. },
  1328. },
  1329. data: convertData2(GZData),
  1330. },
  1331. ];
  1332. if (isShow) {
  1333. if (typeStr === 0) {
  1334. series[0]["symbolOffset"] = [0, -5];
  1335. series.push(
  1336. {
  1337. type: "scatter",
  1338. coordinateSystem: "geo",
  1339. tooltip: { show: false },
  1340. z: 999999999,
  1341. label: {
  1342. normal: {
  1343. show: true,
  1344. formatter: function(item) {
  1345. const param = item["data"]["param"];
  1346. const order = param["order"] || "0";
  1347. return `{tline|${order}}`;
  1348. },
  1349. rich: {
  1350. tline: {
  1351. color: "#0B2E3A",
  1352. align: "center",
  1353. fontSize: 14,
  1354. fontWeight: 600,
  1355. },
  1356. },
  1357. },
  1358. emphasis: {
  1359. show: true,
  1360. },
  1361. },
  1362. itemStyle: {
  1363. opacity: 1,
  1364. color: function(val) {
  1365. let a;
  1366. if (val.data.param.order < 4) {
  1367. a = "#FAED25";
  1368. } else {
  1369. a = "#00FFEA";
  1370. }
  1371. return a;
  1372. },
  1373. },
  1374. symbol: "circle",
  1375. symbolSize: 26,
  1376. symbolOffset: [-45, -80], //开发强度 [-40, -70]、要素保障 [-35, -80]
  1377. data: convertData2(GZData),
  1378. },
  1379. {
  1380. //图例
  1381. type: "scatter",
  1382. coordinateSystem: "geo",
  1383. tooltip: { show: false },
  1384. z: 99999,
  1385. label: {
  1386. normal: {
  1387. show: true,
  1388. formatter: function(item) {
  1389. const param = item["data"]["param"];
  1390. const value1 = param["value1"] || "";
  1391. const value2 = param["value2"] || 0;
  1392. const unit1 = param["unit1"] || "";
  1393. const unit2 = param["unit2"] || "";
  1394. return `{tline1|${value1}}{tline2|${unit1}}\n{fline1|${value2}}{fline2|${unit2}}`;
  1395. },
  1396. rich: {
  1397. //开发强度 [0, 2]、要素保障 [2, 2]
  1398. tline1: {
  1399. padding: [5, 0],
  1400. color: "#07FCFF",
  1401. align: "center",
  1402. fontSize: 15,
  1403. fontWeight: 700,
  1404. },
  1405. tline2: {
  1406. padding: [5, 0],
  1407. color: "#07FCFF",
  1408. align: "center",
  1409. fontSize: 12,
  1410. fontWeight: 600,
  1411. },
  1412. fline1: {
  1413. color: "#FFFFFF",
  1414. fontSize: 14,
  1415. align: "center",
  1416. fontWeight: 700,
  1417. },
  1418. fline2: {
  1419. color: "#FFFFFF",
  1420. fontSize: 14,
  1421. align: "center",
  1422. },
  1423. },
  1424. //开发强度 [0, 10]、要素保障 [2, 2]
  1425. offset: [0, -5],
  1426. },
  1427. emphasis: {
  1428. show: true,
  1429. },
  1430. },
  1431. itemStyle: {
  1432. borderWidth: 0,
  1433. opacity: 1,
  1434. color: "transparent",
  1435. },
  1436. symbol: function(val, item) {
  1437. return scatter_bg4;
  1438. },
  1439. symbolSize: function(val, item) {
  1440. return [90, 65];
  1441. },
  1442. symbolOffset: [0, -50],
  1443. data: convertData2(GZData),
  1444. }
  1445. );
  1446. } else {
  1447. series[0]["symbolOffset"] = [0, 28];
  1448. const getLineMaxHeight = (data) => {
  1449. const maxValue = Math.max(
  1450. ...data.map((item) => item["param"]["value1"])
  1451. );
  1452. return 0.6 / maxValue;
  1453. };
  1454. const maxHeight = getLineMaxHeight(GZData);
  1455. const getLineData = (data) => {
  1456. const dataArr = [];
  1457. data.forEach((item) => {
  1458. const name = item.name;
  1459. if (geoCoordMap[name]) {
  1460. dataArr.push({
  1461. query: item["query"],
  1462. coords: [
  1463. geoCoordMap[name],
  1464. [
  1465. geoCoordMap[name][0],
  1466. geoCoordMap[name][1] +
  1467. item["param"]["value1"] * maxHeight,
  1468. ],
  1469. ],
  1470. });
  1471. }
  1472. });
  1473. return dataArr;
  1474. };
  1475. const lineData = getLineData(GZData);
  1476. // 柱状体的顶部
  1477. const getTopBarPosition = (data) => {
  1478. const dataArr = [];
  1479. data.forEach((item) => {
  1480. const name = item.name;
  1481. if (geoCoordMap[name]) {
  1482. dataArr.push([
  1483. geoCoordMap[name][0],
  1484. geoCoordMap[name][1] + item["param"]["value1"] * maxHeight,
  1485. ]);
  1486. }
  1487. });
  1488. return dataArr;
  1489. };
  1490. const getTopBarPosAndData = (data) => {
  1491. const dataArr = [];
  1492. data.forEach((item) => {
  1493. const name = item.name;
  1494. if (geoCoordMap[name]) {
  1495. dataArr.push([
  1496. geoCoordMap[name][0],
  1497. geoCoordMap[name][1] + item["param"]["value1"] * maxHeight,
  1498. item,
  1499. ]);
  1500. }
  1501. });
  1502. return dataArr;
  1503. };
  1504. series.push(
  1505. {
  1506. type: "scatter",
  1507. coordinateSystem: "geo",
  1508. tooltip: { show: false },
  1509. z: 9999999,
  1510. label: {
  1511. normal: {
  1512. show: true,
  1513. formatter: function(item) {
  1514. const data = item["data"];
  1515. const param = data[data.length - 1]["param"];
  1516. if (!param) return;
  1517. const value1 = param["value1"] || "";
  1518. const unit1 = param["unit1"] || "";
  1519. return `{tline1|${value1}}{tline2|${unit1}}`;
  1520. },
  1521. rich: {
  1522. tline1: {
  1523. color: "#07FCFF",
  1524. align: "center",
  1525. fontSize: 15,
  1526. fontWeight: 700,
  1527. },
  1528. tline2: {
  1529. color: "#07FCFF",
  1530. align: "center",
  1531. fontSize: 12,
  1532. fontWeight: 600,
  1533. },
  1534. },
  1535. offset: [0, 0],
  1536. },
  1537. emphasis: {
  1538. show: true,
  1539. },
  1540. },
  1541. itemStyle: {
  1542. borderWidth: 0,
  1543. opacity: 1,
  1544. color: "transparent",
  1545. },
  1546. symbol: bg_text,
  1547. symbolSize: function(val, item) {
  1548. return [70, 30];
  1549. },
  1550. symbolOffset: [0, -24],
  1551. data: getTopBarPosAndData(GZData),
  1552. },
  1553. {
  1554. type: "scatter",
  1555. coordinateSystem: "geo",
  1556. geoIndex: 0,
  1557. zlevel: 999999,
  1558. label: {
  1559. show: false,
  1560. },
  1561. symbol: "circle",
  1562. symbolSize: [20, 10],
  1563. itemStyle: {
  1564. color: "#ECC200",
  1565. opacity: 1,
  1566. },
  1567. silent: true,
  1568. data: getTopBarPosition(GZData),
  1569. },
  1570. // 柱状体的主干
  1571. {
  1572. type: "lines",
  1573. zlevel: 999,
  1574. effect: {
  1575. show: false,
  1576. symbolSize: 5, // 图标大小
  1577. },
  1578. lineStyle: {
  1579. width: 20, // 尾迹线条宽度
  1580. color: "#FFDE00",
  1581. opacity: 1, // 尾迹线条透明度
  1582. curveness: 0, // 尾迹线条曲直度
  1583. },
  1584. label: {
  1585. show: 0,
  1586. position: "end",
  1587. formatter: "245",
  1588. },
  1589. data: lineData,
  1590. },
  1591. // 柱状体的底部
  1592. {
  1593. type: "scatter",
  1594. coordinateSystem: "geo",
  1595. geoIndex: 0,
  1596. zlevel: 9,
  1597. label: {
  1598. show: false,
  1599. },
  1600. symbol: "circle",
  1601. symbolSize: [20, 10],
  1602. itemStyle: {
  1603. color: "#FFDE44",
  1604. opacity: 1,
  1605. },
  1606. silent: true,
  1607. data: convertData2(GZData),
  1608. },
  1609. {
  1610. type: "scatter",
  1611. coordinateSystem: "geo",
  1612. geoIndex: 0,
  1613. zlevel: 4,
  1614. label: {
  1615. show: false,
  1616. },
  1617. symbol: "circle",
  1618. symbolSize: [40, 20],
  1619. itemStyle: {
  1620. color: "#fff",
  1621. opacity: 1,
  1622. },
  1623. silent: true,
  1624. data: convertData2(GZData),
  1625. },
  1626. {
  1627. type: "scatter",
  1628. coordinateSystem: "geo",
  1629. geoIndex: 0,
  1630. zlevel: 4,
  1631. label: {
  1632. show: false,
  1633. },
  1634. symbol: "circle",
  1635. symbolSize: [60, 32],
  1636. itemStyle: {
  1637. color: {
  1638. type: "radial",
  1639. x: 0.5,
  1640. y: 0.5,
  1641. r: 0.5,
  1642. colorStops: [
  1643. {
  1644. offset: 0,
  1645. color: "transparent", // 0% 处的颜色
  1646. },
  1647. {
  1648. offset: 0.85,
  1649. color: "transparent", // 100% 处的颜色
  1650. },
  1651. {
  1652. offset: 0.98,
  1653. color: "#FFDE44", // 100% 处的颜色
  1654. },
  1655. {
  1656. offset: 1,
  1657. color: "#FFDE44", // 100% 处的颜色
  1658. },
  1659. ],
  1660. global: false, // 缺省为 false
  1661. },
  1662. opacity: 1,
  1663. },
  1664. silent: true,
  1665. data: convertData2(GZData),
  1666. }
  1667. );
  1668. }
  1669. } else {
  1670. series.push({
  1671. type: "scatter",
  1672. coordinateSystem: "geo",
  1673. itemStyle: {
  1674. color: "transparent",
  1675. },
  1676. z: 999,
  1677. label: {
  1678. show: true,
  1679. normal: {
  1680. show: true,
  1681. formatter: function(params) {
  1682. const name = params.name;
  1683. return name;
  1684. },
  1685. fantFamily: "Microsoft YaHei",
  1686. color: "#FFFFFF",
  1687. fontSize: 19,
  1688. textShadowColor: "#000000",
  1689. textShadowBlur: 2,
  1690. textShadowOffsetX: 2,
  1691. textShadowOffsetY: 2,
  1692. },
  1693. },
  1694. data: convertData2(GZData),
  1695. });
  1696. }
  1697. return {
  1698. tooltip: {
  1699. trigger: "item",
  1700. },
  1701. series: series,
  1702. };
  1703. },
  1704. configLayerLoaded(enabledLayersConfig) {
  1705. this.enabledLayersConfig = enabledLayersConfig;
  1706. },
  1707. async pickServerFeature(e) {
  1708. console.log(
  1709. this.visibleLayerId,
  1710. typeof this.visibleLayerId,
  1711. "typeof this.visibleLayerId"
  1712. );
  1713. let tempLayerIds = this.visibleLayerIds.filter(
  1714. (it) =>
  1715. it !== "xzqh-s" &&
  1716. it !== "xzqh-s-search" &&
  1717. it !== "xzqh-x-search" &&
  1718. it !== "xzqh-x-search-dzl" &&
  1719. it !== "xzqh-x" &&
  1720. it !== "xzqh-z" &&
  1721. it !== "bjq-xzq" &&
  1722. it !== "hzyx-202311" &&
  1723. it !== "hzyx-202310" &&
  1724. it !== "hzyx-202308" &&
  1725. it !== "hzyx-202309" &&
  1726. it !== "bj-czkfbj" &&
  1727. it !== "bj-stbhhx" &&
  1728. it !== "bj-kfbjw"
  1729. );
  1730. if (tempLayerIds.length === 1) {
  1731. const layerConfig = this.$refs.configLayer.getLayerConfigById(
  1732. this.visibleLayerId
  1733. );
  1734. // 带上图层显示参数,只拾取显示的图斑
  1735. let where = "1=1";
  1736. try {
  1737. where = layerConfig.params.layerDefs[0];
  1738. if (!where) {
  1739. where = "1=1";
  1740. }
  1741. } catch (e) {
  1742. // 获取图层 参数
  1743. }
  1744. const [x, y] = e.coordinate;
  1745. const param = {
  1746. where,
  1747. f: "json",
  1748. inSR: getSrid(this.map),
  1749. outFields: TABLE_COMP_MAPPING[this.visibleLayerId]
  1750. ? TABLE_COMP_MAPPING[this.visibleLayerId]["outFields"]
  1751. : "",
  1752. returnGeometry: "true",
  1753. geometry: JSON.stringify({ x, y }),
  1754. geometryType: "esriGeometryPoint",
  1755. };
  1756. const pointWkt = `POINT(${y} ${x})`
  1757. if (layerConfig.serverType === 'wms') {
  1758. return GeoServerQuery(`${layerConfig.queryUrl}`, {
  1759. typeName: layerConfig.params.layers,
  1760. cql_filter: `INTERSECTS(shape, ${pointWkt})`
  1761. }, true).then(({ features: [feature] }) => {
  1762. if (feature) {
  1763. this.locationFeature(null, this.visibleLayerId, { feature });
  1764. } else {
  1765. this.feature = undefined;
  1766. }
  1767. })
  1768. }
  1769. arcgisQuery(
  1770. `${layerConfig.url}/${this.layerIndex}/query`,
  1771. param,
  1772. true
  1773. ).then(({ features: [feature] }) => {
  1774. if (feature) {
  1775. this.locationFeature(null, this.visibleLayerId, { feature });
  1776. } else {
  1777. this.feature = undefined;
  1778. }
  1779. });
  1780. } else if (tempLayerIds.length > 1) {
  1781. // 带上图层显示参数,只拾取显示的图斑
  1782. const where = "1=1";
  1783. const [x, y] = e.coordinate;
  1784. const param = {
  1785. where,
  1786. f: "json",
  1787. inSR: getSrid(this.map),
  1788. outFields: "",
  1789. returnGeometry: "true",
  1790. geometry: JSON.stringify({ x, y }),
  1791. geometryType: "esriGeometryPoint",
  1792. };
  1793. const pointWkt = `POINT(${y} ${x})`
  1794. const urls = tempLayerIds.map((i) => this.getLayerConfigById(i));
  1795. console.log("1109行----------------------------------")
  1796. const promiseArr = urls.map(i => {
  1797. if (i.serverType === 'wms') {
  1798. return GeoServerQuery(`${i.queryUrl}`, {
  1799. typeName: i.params.layers,
  1800. cql_filter: `INTERSECTS(shape, ${pointWkt})`
  1801. }, true)
  1802. }
  1803. return arcgisQuery(`${i}/0/query`, param, true)
  1804. })
  1805. const feature = await Promise.all(promiseArr).then((resp) => {
  1806. if (this.visibleLayerIds.includes("bj-gyyd-new")) {
  1807. for (let i = 0; i < resp.length; i++) {
  1808. if (resp[i].features.length != 0) {
  1809. this.isgyyd = resp[i].displayFieldName;
  1810. }
  1811. }
  1812. }
  1813. for (let i = 0; i < resp.length; i++) {
  1814. if (resp[i].features.length) {
  1815. this.visibleLayerId = tempLayerIds[i];
  1816. break;
  1817. }
  1818. }
  1819. const features = resp
  1820. .filter((i) => i.features.length)
  1821. .map((i) => i.features[0]);
  1822. return features[0];
  1823. });
  1824. if (feature) {
  1825. this.locationFeature(null, this.visibleLayerId, { feature });
  1826. } else {
  1827. this.feature = undefined;
  1828. }
  1829. }
  1830. },
  1831. async locationFeature(
  1832. bsm,
  1833. layerId,
  1834. { feature = undefined, row = undefined } = {}
  1835. ) {
  1836. if (feature) {
  1837. const geometry = feature.getGeometry();
  1838. const wkt = WkxGeometry.parseGeoJSON(
  1839. new GeoJSON().writeGeometryObject(geometry)
  1840. ).toWkt();
  1841. feature.set("wkt", wkt);
  1842. this.feature = feature;
  1843. this.$vm.$emit("getGeoData", feature); //初始化土地生命周期geo/feature参数
  1844. this.$vm.$emit(
  1845. "mapClickHandle",
  1846. feature.getProperties(),
  1847. this.visibleLayerId
  1848. );
  1849. this.$emit("mapClick", feature.getProperties(), this.visibleLayerId);
  1850. }
  1851. this.drawendFeaturePop(this.feature);
  1852. },
  1853. locationMoreFeatureWithShade(where, layerId, setting = {}) {
  1854. this.spinShow = true;
  1855. const layer = this.$refs.configLayer.getLayerConfigById(layerId);
  1856. if (!layer) {
  1857. console.error(`no layer id`);
  1858. return;
  1859. }
  1860. arcgisQuery(
  1861. `${layer.url}/${this.layerIndex}/query`,
  1862. {
  1863. outSR: getSrid(this.map),
  1864. where,
  1865. ...setting,
  1866. },
  1867. false
  1868. ).then(({ features }) => {
  1869. this.spinShow = false;
  1870. const geos = {
  1871. type: "FeatureCollection",
  1872. features: [
  1873. {
  1874. type: "Feature",
  1875. geometry: {
  1876. type: "MultiPolygon",
  1877. coordinates: [],
  1878. },
  1879. properties: {},
  1880. },
  1881. ],
  1882. };
  1883. let temp = [];
  1884. features.forEach((it) => {
  1885. temp = [...temp, ...it["geometry"]["rings"]];
  1886. });
  1887. geos["features"][0]["geometry"]["coordinates"] = [[...temp]];
  1888. this.addGeoLayer2(geos);
  1889. // MapUtils.drawShade(this.map, JSON.stringify(geos))
  1890. });
  1891. },
  1892. drawendFeaturePop(drawFeature) {
  1893. if (!drawFeature) {
  1894. this.drawFeature = drawFeature;
  1895. return;
  1896. }
  1897. const geometry = drawFeature.getGeometry();
  1898. const area = getArea(geometry, {
  1899. projection: this.map.getView().getProjection(),
  1900. });
  1901. drawFeature.set("area", (area / 666.67).toFixed(2));
  1902. this.drawendDistrict(drawFeature);
  1903. },
  1904. drawendDistrict(drawFeature) {
  1905. // const urls = ['xzqh-s', 'xzqh-x', 'xzqh-z'].map(i => this.getLayerConfigById(i).url)
  1906. const urls = ["xzqh-z"].map((i) => this.getLayerConfigById(i).url);
  1907. const srid = getSrid(this.map);
  1908. const param = {
  1909. geometry: toArcGIS(drawFeature.getGeometry(), true),
  1910. geometryType: "esriGeometryPolygon",
  1911. spatialRel: "esriSpatialRelIntersects",
  1912. inSR: srid,
  1913. outSR: srid,
  1914. returnGeometry: false,
  1915. where: `1=1`,
  1916. };
  1917. const promiseArr = urls.map((i) =>
  1918. arcgisQuery(`${i}/${this.layerIndex}/query`, param, false)
  1919. );
  1920. Promise.all(promiseArr).then((resp) => {
  1921. const features = resp
  1922. .filter((i) => i.features.length)
  1923. .map((i) => i.features);
  1924. drawFeature.set(
  1925. "areaList",
  1926. features.flat().map((i) => i.attributes.FULLNAME.substr(3))
  1927. );
  1928. console.log(drawFeature, features, "Promise all resp");
  1929. this.drawFeature = drawFeature;
  1930. });
  1931. },
  1932. resetMapView() {
  1933. const { districtFeature, map } = this;
  1934. if (districtFeature) {
  1935. mapFit(districtFeature, map);
  1936. } else {
  1937. this.$refs.configLayer.resetMapView();
  1938. }
  1939. },
  1940. drawend(features) {
  1941. // 绘制结束或清空绘制
  1942. const multiPolygon = features
  1943. ? new MultiPolygon(features.map((i) => i.getGeometry()))
  1944. : features;
  1945. const payload = {
  1946. geometry: multiPolygon ? toArcGIS(multiPolygon, true) : "",
  1947. srid: getSrid(this.map),
  1948. };
  1949. this.$store.dispatch("spacemap/setSketchRangeAnalysis", payload);
  1950. },
  1951. getLayerConfigById(layerId) {
  1952. return this.$refs.configLayer.getLayerConfigById(layerId);
  1953. },
  1954. dateFormat(date) {
  1955. if (date === null || date === undefined || date === "") {
  1956. console.log("时间格式化有误,时间为null");
  1957. return "";
  1958. }
  1959. if (typeof date === "string") {
  1960. return date.substr(0, 10);
  1961. }
  1962. var time = new Date(date);
  1963. var y = time.getFullYear();
  1964. var m = time.getMonth() + 1;
  1965. var d = time.getDate();
  1966. return y + "-" + this.add0(m) + "-" + this.add0(d);
  1967. },
  1968. add0(m) {
  1969. return m < 10 ? "0" + m : m;
  1970. },
  1971. getLayerById(id) {
  1972. return this.$refs.configLayer.getLayerById(id);
  1973. },
  1974. mockDetail(props) {
  1975. this.$vm.$emit("getMockDetail", props);
  1976. },
  1977. bjmockDetail(props) {
  1978. this.$vm.$emit("getBjMockDetail", props);
  1979. },
  1980. locationTsxzDetail(props) {
  1981. this.$vm.$emit("locationTsxzDetail", props);
  1982. },
  1983. tzzxDetail(props) {
  1984. this.$vm.$emit("getTzzxDetail", props);
  1985. },
  1986. statisticsLayer (layerId, setting) {
  1987. const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
  1988. arcgisQuery(
  1989. `${layerById.url}/${this.layerIndex}/query`,
  1990. setting,
  1991. false
  1992. ).then(({ features }) => {
  1993. this.$vm.$emit(
  1994. "statisticsLayerCallback",
  1995. features,
  1996. setting["groupByFieldsForStatistics"]
  1997. );
  1998. });
  1999. },
  2000. skyb(props) {
  2001. this.skybShow = true;
  2002. this.geometry = props.wkt;
  2003. },
  2004. },
  2005. };
  2006. </script>
  2007. <style lang="scss" scoped>
  2008. .vl-tool-bar {
  2009. display: flex;
  2010. top: 5px !important;
  2011. right: 10px !important;
  2012. > li {
  2013. display: flex;
  2014. align-items: center;
  2015. justify-content: center;
  2016. cursor: pointer;
  2017. width: 34px !important;
  2018. height: 34px !important;
  2019. border: 1px solid #468ec0;
  2020. background: linear-gradient(0deg, #102a54 0%, #3d5a93 100%);
  2021. border-radius: 4px;
  2022. .img {
  2023. width: 18px !important;
  2024. height: 18px !important;
  2025. }
  2026. > div {
  2027. display: flex;
  2028. align-items: center;
  2029. justify-content: center;
  2030. }
  2031. }
  2032. }
  2033. .overlayBox {
  2034. background: url("../../../assets/images/dk_detail_bg.png") no-repeat;
  2035. background-size: 100% 100%;
  2036. padding: 12px 15px;
  2037. border-radius: 2px;
  2038. position: relative;
  2039. font-family: Alibaba PuHuiTi;
  2040. margin-bottom: 40px;
  2041. min-width: 340px;
  2042. > .fixedIcon {
  2043. position: absolute;
  2044. width: 50px;
  2045. height: 50px;
  2046. bottom: -50px;
  2047. left: 0px;
  2048. right: 0px;
  2049. margin: auto;
  2050. background: url("../../../assets/images/map_icon.png") no-repeat;
  2051. background-size: 100% 100%;
  2052. }
  2053. > .title {
  2054. color: #fff;
  2055. position: relative;
  2056. top: -5px;
  2057. font-size: 16px;
  2058. font-weight: bold;
  2059. > .btn {
  2060. float: right;
  2061. cursor: pointer;
  2062. background-color: #0178cd;
  2063. padding: 5px 10px;
  2064. display: inline-block;
  2065. border-radius: 2px;
  2066. margin-top: -5px;
  2067. color: #fff;
  2068. &:hover {
  2069. color: #22f3e2;
  2070. }
  2071. }
  2072. .label {
  2073. float: right;
  2074. color: #22f3e2;
  2075. margin-top: 8px;
  2076. }
  2077. }
  2078. > .content {
  2079. padding: 15px 5px;
  2080. max-width: 360px;
  2081. > h2,
  2082. p {
  2083. color: #fff;
  2084. }
  2085. > h2 {
  2086. font-size: 16px !important;
  2087. margin-bottom: 10px;
  2088. white-space: nowrap;
  2089. text-overflow: ellipsis;
  2090. overflow: hidden;
  2091. font-weight: bold;
  2092. }
  2093. > p {
  2094. font-size: 15px;
  2095. margin: 5px 0px;
  2096. }
  2097. }
  2098. }
  2099. .overview-map {
  2100. position: relative;
  2101. width: 100%;
  2102. height: 100%;
  2103. overflow: hidden;
  2104. $mask-bgc: radial-gradient(
  2105. closest-side at 50%,
  2106. rgba(4, 18, 41, 0) 0,
  2107. rgba(0, 15, 51, 0.2)
  2108. );
  2109. .space-map-mask {
  2110. position: absolute;
  2111. top: 0;
  2112. left: 0;
  2113. z-index: 0;
  2114. width: 100%;
  2115. height: 100%;
  2116. background-image: $mask-bgc;
  2117. pointer-events: none;
  2118. }
  2119. .map-view-info {
  2120. position: absolute;
  2121. bottom: 10px;
  2122. left: 15px;
  2123. width: 350px;
  2124. height: 32px;
  2125. background: rgba(56, 150, 236, 0.64);
  2126. box-shadow: 0 0 20px 1px #012357;
  2127. font-size: 14px;
  2128. font-weight: 400;
  2129. color: #ffffff;
  2130. line-height: 32px;
  2131. text-indent: 1em;
  2132. }
  2133. $bgc: rgba(255, 255, 255, 0.9);
  2134. &::v-deep {
  2135. .vl-tool-bar {
  2136. .vl-tool-bar-item {
  2137. background-color: transparent;
  2138. }
  2139. }
  2140. .vl-legend {
  2141. border: 1px solid #0660b8;
  2142. .legend-panel {
  2143. // background: $bgc;
  2144. background: #02285c;
  2145. color: #00edff;
  2146. .legend-title {
  2147. background: transparent;
  2148. border-bottom: 1px solid #0660b8;
  2149. }
  2150. }
  2151. }
  2152. .vl-layer-tree {
  2153. .layer-dropdown {
  2154. background-color: $bgc;
  2155. }
  2156. }
  2157. }
  2158. .feature-overlay {
  2159. z-index: 999;
  2160. // min-width: 331px;
  2161. // max-width: 400px;
  2162. width: 295px;
  2163. // min-height: 186px;
  2164. // background: url(~@/assets/project/map-overlay.png) no-repeat;
  2165. // background-size: 100% 100%;;
  2166. // padding: 2px 6px 20px;
  2167. color: white;
  2168. background: #fff;
  2169. z-index: 999;
  2170. position: absolute;
  2171. top: 80px;
  2172. right: 20px;
  2173. .title {
  2174. font-size: 18px;
  2175. line-height: 30px;
  2176. font-weight: 600;
  2177. // background: linear-gradient(270deg, #47c4fa 0%, #2390ee 100%);
  2178. background: #2390ee;
  2179. // border-radius: 10px 10px 0px 0px;
  2180. padding-left: 16px;
  2181. .title-label {
  2182. font-size: 16px;
  2183. font-weight: normal;
  2184. float: right;
  2185. cursor: pointer;
  2186. color: #00ffff;
  2187. &:hover {
  2188. font-weight: bolder;
  2189. }
  2190. }
  2191. .detail {
  2192. font-size: 16px;
  2193. color: #22f3e2;
  2194. cursor: pointer;
  2195. margin-left: 5px;
  2196. }
  2197. }
  2198. .section5 {
  2199. padding: 0 20px 10px;
  2200. .name {
  2201. font-weight: 600;
  2202. padding: 10px 0;
  2203. font-size: 17px;
  2204. color: #333333;
  2205. line-height: 22px;
  2206. cursor: default;
  2207. .detail {
  2208. cursor: pointer;
  2209. margin-left: 5px;
  2210. background: #00b9d6;
  2211. border-radius: 3px;
  2212. font-size: 15px;
  2213. color: #ffffff;
  2214. padding: 0 8px;
  2215. }
  2216. }
  2217. table {
  2218. width: 100%;
  2219. font-size: 15px;
  2220. line-height: 15px;
  2221. td,
  2222. th {
  2223. padding: 3px 0;
  2224. }
  2225. th {
  2226. padding-right: 0.5em;
  2227. word-break: keep-all;
  2228. font-weight: normal;
  2229. color: #666666;
  2230. width: 4.3em;
  2231. }
  2232. td {
  2233. min-width: 3em;
  2234. color: #333333;
  2235. font-weight: bold;
  2236. }
  2237. td + th {
  2238. padding-left: 0.5em;
  2239. }
  2240. }
  2241. }
  2242. }
  2243. .modalBox {
  2244. position: fixed;
  2245. top: 0px;
  2246. bottom: 0px;
  2247. left: 0px;
  2248. right: 0px;
  2249. margin: auto;
  2250. z-index: 999999999;
  2251. background-color: rgba(0,0,0,.8);
  2252. >.close {
  2253. display: block;
  2254. width: 20px;
  2255. height: 20px;
  2256. position: absolute;
  2257. top: 25px;
  2258. right: 25px;
  2259. z-index: 99999999;
  2260. background: url("../../../assets/images/bjybz/close.png") no-repeat;
  2261. background-size: 100% 100%;
  2262. cursor: pointer;
  2263. }
  2264. >.modalContent {
  2265. position: absolute;
  2266. top: 15px;
  2267. bottom: 15px;
  2268. left: 15px;
  2269. right: 15px;
  2270. margin: auto;
  2271. background-color: #fff;
  2272. >iframe {
  2273. width: 100%;
  2274. height: 100%;
  2275. border: 0px;
  2276. }
  2277. }
  2278. }
  2279. .ivu-spin-fix {
  2280. z-index: 0 !important;
  2281. background-color: unset;
  2282. color: white;
  2283. background-image: $mask-bgc;
  2284. }
  2285. }
  2286. </style>