Newer
Older
urbanLifeline_YanAn / src / components / Map / index.vue
@zhangqy zhangqy on 3 Oct 45 KB first commit
  1. <template>
  2. <div id="map">
  3. <div class="tool-causure flex flex-v" v-show="isShowTool">
  4. <el-radio-group v-model="currentTool" @change="toolsClick">
  5. <el-radio :label="item.sectionType" v-for="item in mapTools" :key="item.sectionType">{{ item.name }}</el-radio>
  6. </el-radio-group>
  7. <div class="flex flex-r flex-justcontent-end">
  8. <el-button size="small" round @click="clear">清除</el-button>
  9. <!-- <el-button size="small" type="primary" round @click="closeMap"
  10. >确定</el-button
  11. > -->
  12. </div>
  13. </div>
  14. <div id="nf-address-search-input" v-show="isShowSearch">
  15. <el-input
  16. clearable
  17. id="pickerInput"
  18. placeholder="请输入位置名称"
  19. v-model="inputText"
  20. :prefix-icon="Search"
  21. style="width: 300px"
  22. />
  23. </div>
  24. </div>
  25. </template>
  26.  
  27. <script setup>
  28. import { findDictObj } from '@/utils/ruoyi.js';
  29. import request from '@/utils/request';
  30. import { Search } from '@element-plus/icons-vue';
  31. import { nextTick, watch } from 'vue';
  32. const emit = defineEmits(['endDraw', 'clickMap', 'getPlace']);
  33. const props = defineProps({
  34. // 地图中心点
  35. mapCenter: {
  36. type: Array,
  37. default: [114.39778958759788, 30.478518033935494],
  38. },
  39. //是否展示工具
  40. isShowTool: {
  41. type: Boolean,
  42. default: false,
  43. },
  44. //是否展示的搜索
  45. isShowSearch: {
  46. type: Boolean,
  47. default: false,
  48. },
  49. //用于选择点,返回经纬度,地址
  50. isSelectAddress: {
  51. type: Boolean,
  52. default: false,
  53. },
  54. //点、线、面类型
  55. sectionType: {
  56. type: Object,
  57. default: {},
  58. },
  59. //是否可编辑
  60. isEdit: {
  61. type: Boolean,
  62. default: false,
  63. },
  64.  
  65. //缓冲区范围
  66. bufferScope: {
  67. type: [Number, String],
  68. default: '',
  69. },
  70. //地图id
  71. mapId: {
  72. type: String,
  73. default: 'map',
  74. },
  75. count: {
  76. type: Number,
  77. default: 0,
  78. },
  79. //是否加载天地图
  80. isReloadTDT: {
  81. type: Boolean,
  82. default: true,
  83. },
  84.  
  85. // //弹框的状态
  86. // refresh: {
  87. // type: Number,
  88. // default: 1,
  89. // },
  90. });
  91.  
  92. const { proxy } = getCurrentInstance();
  93. const section_type = proxy.fixDict['sectionType'];
  94. const currentTool = ref('');
  95. const inputText = ref(''); //搜索文字
  96. const layerIds = ref([]); //当前图层Ids
  97. const currentMethod = ref(''); //当前方法
  98. const pointCoordinates = ref([]);
  99. const pointPolygons = ref([]);
  100. const state = reactive({
  101. mapConfig: {
  102. container: 'map',
  103. options: {
  104. terrain: true,
  105. baseMap: [],
  106. skyBox: NewFiberMap.Enum.SkyBox.BLUE,
  107. },
  108. center: {
  109. // lng: 114.39812687057503,
  110. // lat: 30.479710421156746,
  111. // zoom: 13983.54259523272,
  112. // heading: 2.5780579881600394,
  113. // pitch: -50.274625625696856,
  114. // roll: 0.03329294165693926,
  115.  
  116. lng: props.mapCenter[0],
  117. lat: props.mapCenter[1],
  118. heading: 2.281299097855777,
  119. zoom: 958.12942752382,
  120. pitch: -87.2508969308367,
  121. roll: 0.005453465256790101,
  122. },
  123. },
  124. mapTools: [
  125. { key: 0, name: '画点', sectionType: 'point' },
  126. { key: 1, name: '画线', sectionType: 'line' },
  127. { key: 2, name: '画面', sectionType: 'area' },
  128. // { key: 3, name: "线缓冲区" },
  129. //{ key: 4, name: "清除" },
  130. ],
  131. });
  132. const { mapConfig, mapTools } = toRefs(state);
  133.  
  134. watch(
  135. () => props.sectionType,
  136. (v1, v2) => {
  137. currentTool.value = props.sectionType;
  138. }
  139. );
  140. watch(
  141. () => props.inputText,
  142. (v1, v2) => {
  143. inputText.value = props.inputText;
  144. }
  145. );
  146.  
  147. // watch(
  148. // () => props.count,
  149. // (v1, v2) => {
  150. // console.log("props.count", props.count);
  151. // }
  152. // );
  153. function initMap() {
  154. console.log('初始化');
  155. const { container, options, center } = mapConfig.value;
  156. window.newfiberMap = new NewFiberMap(container, options);
  157. console.log(window.newfiberMap);
  158. //鼠标经过事件
  159. newfiberMap.registerMouseMove((xy, position, feature) => {
  160. newfiberMap.getMap().container.style.cursor = feature ? 'pointer' : '';
  161. });
  162. //地图点击
  163. newfiberMap.registerLeftClickEvt((xy, position, feature) => {
  164. // console.log('feature', feature);
  165. //用于底图选点---选地址
  166. if (props.isSelectAddress && position.length) {
  167. newfiberMap.removeByIds(['addressSearch']);
  168. getAddressByLngLat(...NewFiberMap.CoordTransform.wgs84togcj02(position[0], position[1])).then(res => {
  169. // console.log(res);
  170. inputText.value = res.formatted_address;
  171. newfiberMap.geojsonToMap(
  172. NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
  173. {
  174. id: 'addressSearch',
  175. name: res.formatted_address,
  176. geometrys: `POINT(${position.join(' ')})`,
  177. type: NewFiberMap.Enum.VectorType.ICON,
  178. style: {
  179. url: NewFiberMapConfig.SDK_INIT_SRC_PREFIX + '/static/images/running_path/marker.png',
  180. width: 50,
  181. height: 50,
  182. },
  183. labelOptions: {
  184. font: '13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC',
  185. color: 'rgb(255,255,255,1)',
  186. pixelOffset: [0, -38],
  187. backgroundColor: 'rgba(64,158,255,1)',
  188. showBackground: true,
  189. distanceDisplayCondition: [Number.MIN_VALUE, 55000],
  190. },
  191. },
  192. ])
  193. );
  194. emit('getPlace', {
  195. caseAddress: res.formatted_address,
  196. lonLat: position,
  197. });
  198. });
  199. }
  200. if (feature) {
  201. //开启编辑
  202. // props.isEdit && newfiberMap.openEntityEdit();
  203. emit('clickMap', feature, position);
  204. } else {
  205. //结束编辑,编辑完成后返回最后一次编辑物体的坐标点
  206. // let coordinates = props.isEdit && newfiberMap.closeEntityEdit();
  207. }
  208. });
  209. if (props.isReloadTDT) {
  210. newfiberMap.setBaseMapByEnum(
  211. [
  212. // NewFiberMap.Enum.BaseMap.TDT_VECTOR_LABEL,
  213. // NewFiberMap.Enum.BaseMap.TDT_VECTOR,
  214. NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V2,
  215. ],
  216. {},
  217. {}
  218. );
  219. } else {
  220. newfiberMap.setBaseMapByEnum(
  221. [NewFiberMap.Enum.BaseMap.MAPBOX_STYLE_VECTOR],
  222.  
  223. [],
  224.  
  225. {
  226. style: {
  227. background: {
  228. id: 'background',
  229.  
  230. paint: {
  231. 'background-color': 'rgb(243,243,243)',
  232. },
  233. },
  234.  
  235. 'road-street': {
  236. id: 'road-street',
  237.  
  238. layout: {
  239. 'line-join': 'round',
  240. },
  241.  
  242. paint: {
  243. 'line-width': {
  244. base: 1.5,
  245.  
  246. stops: [
  247. [
  248. 12.5,
  249.  
  250. 0.5,
  251. ],
  252.  
  253. [
  254. 14,
  255.  
  256. 7,
  257. ],
  258.  
  259. [
  260. 16,
  261.  
  262. 18,
  263. ],
  264. ],
  265. },
  266.  
  267. 'line-color': 'rgba(255,236,186,1)',
  268. },
  269. },
  270.  
  271. 'road-secondary-tertiary': {
  272. id: 'road-secondary-tertiary',
  273.  
  274. paint: {
  275. 'line-color': 'rgba(142,193,255,0.8)',
  276.  
  277. 'line-width': {
  278. base: 1.5,
  279.  
  280. stops: [
  281. [
  282. 8.5,
  283.  
  284. 1,
  285. ],
  286.  
  287. [
  288. 10,
  289.  
  290. 2,
  291. ],
  292.  
  293. [
  294. 16,
  295.  
  296. 20,
  297. ],
  298.  
  299. [
  300. 17,
  301.  
  302. 25,
  303. ],
  304.  
  305. [
  306. 18,
  307.  
  308. 37,
  309. ],
  310. ],
  311. },
  312. },
  313. },
  314.  
  315. 'bridge-trunk-2-case': {
  316. id: 'bridge-trunk-2-case',
  317.  
  318. paint: {
  319. 'line-width': {
  320. base: 1.5,
  321.  
  322. stops: [
  323. [
  324. 5,
  325.  
  326. 0.75,
  327. ],
  328.  
  329. [
  330. 18,
  331.  
  332. 32,
  333. ],
  334. ],
  335. },
  336.  
  337. 'line-color': 'rgba(142,193,255,0.8)',
  338. },
  339. },
  340.  
  341. 'bridge-trunk-2': {
  342. id: 'bridge-trunk-2',
  343.  
  344. paint: {
  345. 'line-width': {
  346. base: 1.5,
  347.  
  348. stops: [
  349. [
  350. 5,
  351.  
  352. 0.75,
  353. ],
  354.  
  355. [
  356. 18,
  357.  
  358. 32,
  359. ],
  360. ],
  361. },
  362.  
  363. 'line-color': 'rgba(142,193,255,0.8)',
  364. },
  365. },
  366.  
  367. 'road-secondary-tertiary': {
  368. id: 'road-secondary-tertiary',
  369.  
  370. paint: {
  371. 'line-width': {
  372. base: 1.5,
  373.  
  374. stops: [
  375. [
  376. 8.5,
  377.  
  378. 0.5,
  379. ],
  380.  
  381. [
  382. 10,
  383.  
  384. 0.75,
  385. ],
  386.  
  387. [
  388. 16,
  389.  
  390. 14.55,
  391. ],
  392.  
  393. [
  394. 17,
  395.  
  396. 21.53,
  397. ],
  398.  
  399. [
  400. 18,
  401.  
  402. 32,
  403. ],
  404. ],
  405. },
  406.  
  407. 'line-opacity': {
  408. base: 1.2,
  409.  
  410. stops: [
  411. [
  412. 5,
  413.  
  414. 0,
  415. ],
  416.  
  417. [
  418. 5.5,
  419.  
  420. 1,
  421. ],
  422. ],
  423. },
  424.  
  425. 'line-color': 'rgba(142,193,255,0.8)',
  426. },
  427. },
  428.  
  429. 'bridge-motorway-2-case': {
  430. id: 'bridge-motorway-2-case',
  431.  
  432. paint: {
  433. 'line-width': {
  434. base: 1.5,
  435.  
  436. stops: [
  437. [
  438. 10,
  439.  
  440. 1,
  441. ],
  442.  
  443. [
  444. 16,
  445.  
  446. 2,
  447. ],
  448. ],
  449. },
  450.  
  451. 'line-gap-width': {
  452. base: 1.5,
  453.  
  454. stops: [
  455. [
  456. 5,
  457.  
  458. 0.75,
  459. ],
  460.  
  461. [
  462. 18,
  463.  
  464. 32,
  465. ],
  466. ],
  467. },
  468.  
  469. 'line-color': 'rgba(142,193,255,0.8)',
  470. },
  471. },
  472.  
  473. 'bridge-motorway-2': {
  474. id: 'bridge-motorway-2',
  475.  
  476. paint: {
  477. 'line-width': {
  478. base: 1.5,
  479.  
  480. stops: [
  481. [
  482. 5,
  483.  
  484. 0.75,
  485. ],
  486.  
  487. [
  488. 18,
  489.  
  490. 32,
  491. ],
  492. ],
  493. },
  494.  
  495. 'line-color': 'rgba(142,193,255,0.8)',
  496. },
  497. },
  498.  
  499. 'road-trunk': {
  500. id: 'road-trunk',
  501.  
  502. paint: {
  503. 'line-width': {
  504. base: 1.5,
  505.  
  506. stops: [
  507. [
  508. 5,
  509.  
  510. 0.75,
  511. ],
  512.  
  513. [
  514. 18,
  515.  
  516. 32,
  517. ],
  518. ],
  519. },
  520.  
  521. 'line-color': 'rgba(142,193,255,0.8)',
  522. },
  523. },
  524.  
  525. landcover_crop: {
  526. id: 'landcover_crop',
  527.  
  528. paint: {
  529. 'fill-opacity': {
  530. base: 1.5,
  531.  
  532. stops: [
  533. [
  534. 2,
  535.  
  536. 0.3,
  537. ],
  538.  
  539. [
  540. 7,
  541.  
  542. 0,
  543. ],
  544. ],
  545. },
  546.  
  547. 'fill-color': 'rgba(142,193,255,1)',
  548. },
  549. },
  550.  
  551. 'road-motorway': {
  552. id: 'road-motorway',
  553.  
  554. paint: {
  555. 'line-width': {
  556. base: 1.5,
  557.  
  558. stops: [
  559. [
  560. 5,
  561.  
  562. 0.75,
  563. ],
  564.  
  565. [
  566. 18,
  567.  
  568. 32,
  569. ],
  570. ],
  571. },
  572.  
  573. 'line-color': 'rgb(112,173,255)',
  574.  
  575. 'line-opacity': 1,
  576. },
  577. },
  578.  
  579. 'bridge-trunk_link': {
  580. id: 'bridge-trunk_link',
  581.  
  582. paint: {
  583. 'line-width': {
  584. base: 1.5,
  585.  
  586. stops: [
  587. [
  588. 12,
  589.  
  590. 0.5,
  591. ],
  592.  
  593. [
  594. 14,
  595.  
  596. 2,
  597. ],
  598.  
  599. [
  600. 18,
  601.  
  602. 18,
  603. ],
  604. ],
  605. },
  606.  
  607. 'line-color': 'rgba(142,193,255,1)',
  608. },
  609. },
  610.  
  611. 'bridge-trunk_link-case': {
  612. id: 'bridge-trunk_link-case',
  613.  
  614. paint: {
  615. 'line-width': {
  616. base: 1.5,
  617.  
  618. stops: [
  619. [
  620. 10,
  621.  
  622. 1,
  623. ],
  624.  
  625. [
  626. 16,
  627.  
  628. 2,
  629. ],
  630. ],
  631. },
  632.  
  633. 'line-color': 'rgba(0,0,0,.5)',
  634.  
  635. 'line-gap-width': {
  636. base: 1.5,
  637.  
  638. stops: [
  639. [
  640. 12,
  641.  
  642. 0.5,
  643. ],
  644.  
  645. [
  646. 14,
  647.  
  648. 2,
  649. ],
  650.  
  651. [
  652. 18,
  653.  
  654. 18,
  655. ],
  656. ],
  657. },
  658.  
  659. 'line-opacity': {
  660. base: 1,
  661.  
  662. stops: [
  663. [
  664. 10.99,
  665.  
  666. 0,
  667. ],
  668.  
  669. [
  670. 11,
  671.  
  672. 1,
  673. ],
  674. ],
  675. },
  676. },
  677. },
  678.  
  679. 'bridge-trunk_link-2': {
  680. id: 'bridge-trunk_link-2',
  681.  
  682. paint: {
  683. 'line-width': {
  684. base: 1.5,
  685.  
  686. stops: [
  687. [
  688. 12,
  689.  
  690. 0.5,
  691. ],
  692.  
  693. [
  694. 14,
  695.  
  696. 2,
  697. ],
  698.  
  699. [
  700. 18,
  701.  
  702. 18,
  703. ],
  704. ],
  705. },
  706.  
  707. 'line-color': 'rgba(142,193,255,1)',
  708. },
  709. },
  710.  
  711. 'bridge-trunk_link-2-case': {
  712. id: 'bridge-trunk_link-2-case',
  713.  
  714. paint: {
  715. 'line-width': {
  716. base: 1.5,
  717.  
  718. stops: [
  719. [
  720. 10,
  721.  
  722. 1,
  723. ],
  724.  
  725. [
  726. 16,
  727.  
  728. 2,
  729. ],
  730. ],
  731. },
  732.  
  733. 'line-color': 'rgba(0,0,0,.5)',
  734.  
  735. 'line-gap-width': {
  736. base: 1.5,
  737.  
  738. stops: [
  739. [
  740. 12,
  741.  
  742. 0.5,
  743. ],
  744.  
  745. [
  746. 14,
  747.  
  748. 2,
  749. ],
  750.  
  751. [
  752. 18,
  753.  
  754. 18,
  755. ],
  756. ],
  757. },
  758.  
  759. 'line-opacity': {
  760. base: 1,
  761.  
  762. stops: [
  763. [
  764. 10.99,
  765.  
  766. 0,
  767. ],
  768.  
  769. [
  770. 11,
  771.  
  772. 1,
  773. ],
  774. ],
  775. },
  776. },
  777. },
  778.  
  779. 'bridge-trunk-case': {
  780. id: 'bridge-trunk-case',
  781.  
  782. paint: {
  783. 'line-width': {
  784. base: 1.5,
  785.  
  786. stops: [
  787. [
  788. 10,
  789.  
  790. 1,
  791. ],
  792.  
  793. [
  794. 16,
  795.  
  796. 2,
  797. ],
  798. ],
  799. },
  800.  
  801. 'line-gap-width': {
  802. base: 1.5,
  803.  
  804. stops: [
  805. [
  806. 5,
  807.  
  808. 0.75,
  809. ],
  810.  
  811. [
  812. 18,
  813.  
  814. 32,
  815. ],
  816. ],
  817. },
  818.  
  819. 'line-color': 'rgba(142,193,255,1)',
  820. },
  821. },
  822.  
  823. 'bridge-trunk': {
  824. id: 'bridge-trunk',
  825.  
  826. paint: {
  827. 'line-width': {
  828. base: 1.5,
  829.  
  830. stops: [
  831. [
  832. 5,
  833.  
  834. 0.75,
  835. ],
  836.  
  837. [
  838. 18,
  839.  
  840. 32,
  841. ],
  842. ],
  843. },
  844.  
  845. 'line-color': 'rgba(142,193,255,1)',
  846. },
  847. },
  848.  
  849. 'road-primary': {
  850. id: 'road-primary',
  851.  
  852. paint: {
  853. 'line-width': {
  854. base: 1.5,
  855.  
  856. stops: [
  857. [
  858. 5,
  859.  
  860. 0.75,
  861. ],
  862.  
  863. [
  864. 18,
  865.  
  866. 32,
  867. ],
  868. ],
  869. },
  870.  
  871. 'line-color': 'rgba(142,193,255,1)',
  872.  
  873. 'line-opacity': 1,
  874. },
  875. },
  876.  
  877. 'road-street': {
  878. id: 'road-street',
  879.  
  880. paint: {
  881. 'line-width': {
  882. base: 1.5,
  883.  
  884. stops: [
  885. [
  886. 12.5,
  887.  
  888. 0.5,
  889. ],
  890.  
  891. [
  892. 14,
  893.  
  894. 2,
  895. ],
  896.  
  897. [
  898. 18,
  899.  
  900. 18,
  901. ],
  902. ],
  903. },
  904.  
  905. 'line-color': 'rgba(142,193,255,1)',
  906.  
  907. 'line-opacity': {
  908. base: 1,
  909.  
  910. stops: [
  911. [
  912. 11,
  913.  
  914. 0,
  915. ],
  916.  
  917. [
  918. 11.25,
  919.  
  920. 1,
  921. ],
  922. ],
  923. },
  924. },
  925. },
  926.  
  927. 'bridge-primary-case': {
  928. id: 'bridge-primary-case',
  929.  
  930. paint: {
  931. 'line-width': {
  932. base: 1.5,
  933.  
  934. stops: [
  935. [
  936. 10,
  937.  
  938. 1,
  939. ],
  940.  
  941. [
  942. 16,
  943.  
  944. 2,
  945. ],
  946. ],
  947. },
  948.  
  949. 'line-color': 'rgba(142,193,255,1)',
  950.  
  951. 'line-gap-width': {
  952. base: 1.5,
  953.  
  954. stops: [
  955. [
  956. 5,
  957.  
  958. 0.75,
  959. ],
  960.  
  961. [
  962. 18,
  963.  
  964. 32,
  965. ],
  966. ],
  967. },
  968.  
  969. 'line-translate': [
  970. 0,
  971.  
  972. 0,
  973. ],
  974. },
  975. },
  976.  
  977. 'bridge-primary': {
  978. id: 'bridge-primary',
  979.  
  980. paint: {
  981. 'line-width': {
  982. base: 1.5,
  983.  
  984. stops: [
  985. [
  986. 5,
  987.  
  988. 0.75,
  989. ],
  990.  
  991. [
  992. 18,
  993.  
  994. 32,
  995. ],
  996. ],
  997. },
  998.  
  999. 'line-color': 'rgba(142,193,255,1)',
  1000.  
  1001. 'line-opacity': 1,
  1002. },
  1003. },
  1004.  
  1005. 'tunnel-trunk-case': {
  1006. id: 'tunnel-trunk-case',
  1007.  
  1008. paint: {
  1009. 'line-width': {
  1010. base: 1.5,
  1011.  
  1012. stops: [
  1013. [
  1014. 10,
  1015.  
  1016. 1,
  1017. ],
  1018.  
  1019. [
  1020. 16,
  1021.  
  1022. 2,
  1023. ],
  1024. ],
  1025. },
  1026.  
  1027. 'line-dasharray': [
  1028. 3,
  1029.  
  1030. 3,
  1031. ],
  1032.  
  1033. 'line-gap-width': {
  1034. base: 1.5,
  1035.  
  1036. stops: [
  1037. [
  1038. 5,
  1039.  
  1040. 0.75,
  1041. ],
  1042.  
  1043. [
  1044. 18,
  1045.  
  1046. 32,
  1047. ],
  1048. ],
  1049. },
  1050.  
  1051. 'line-color': 'rgba(142,193,255,1)',
  1052.  
  1053. 'line-opacity': 1,
  1054. },
  1055. },
  1056.  
  1057. 'tunnel-trunk': {
  1058. id: 'tunnel-trunk',
  1059.  
  1060. paint: {
  1061. 'line-width': {
  1062. base: 1.5,
  1063.  
  1064. stops: [
  1065. [
  1066. 5,
  1067.  
  1068. 0.75,
  1069. ],
  1070.  
  1071. [
  1072. 18,
  1073.  
  1074. 32,
  1075. ],
  1076. ],
  1077. },
  1078.  
  1079. 'line-color': 'rgba(142,193,255,1)',
  1080.  
  1081. 'line-opacity': 1,
  1082. },
  1083. },
  1084.  
  1085. park: {
  1086. id: 'park',
  1087.  
  1088. paint: {
  1089. 'fill-color': 'rgba(200,225,255,1)',
  1090.  
  1091. 'fill-opacity': {
  1092. base: 1,
  1093.  
  1094. stops: [
  1095. [
  1096. 5,
  1097.  
  1098. 0,
  1099. ],
  1100.  
  1101. [
  1102. 6,
  1103.  
  1104. 1,
  1105. ],
  1106. ],
  1107. },
  1108. },
  1109. },
  1110.  
  1111. 'road-link': {
  1112. id: 'road-link',
  1113.  
  1114. paint: {
  1115. 'line-width': {
  1116. base: 1.5,
  1117.  
  1118. stops: [
  1119. [
  1120. 12.5,
  1121.  
  1122. 0.5,
  1123. ],
  1124.  
  1125. [
  1126. 14,
  1127.  
  1128. 2,
  1129. ],
  1130.  
  1131. [
  1132. 18,
  1133.  
  1134. 18,
  1135. ],
  1136. ],
  1137. },
  1138.  
  1139. 'line-color': 'rgba(200,225,255,1)',
  1140. },
  1141. },
  1142.  
  1143. 'tunnel-primary-case': {
  1144. id: 'tunnel-primary-case',
  1145.  
  1146. paint: {
  1147. 'line-width': {
  1148. base: 1.5,
  1149.  
  1150. stops: [
  1151. [
  1152. 10,
  1153.  
  1154. 1,
  1155. ],
  1156.  
  1157. [
  1158. 16,
  1159.  
  1160. 2,
  1161. ],
  1162. ],
  1163. },
  1164.  
  1165. 'line-dasharray': [
  1166. 3,
  1167.  
  1168. 3,
  1169. ],
  1170.  
  1171. 'line-gap-width': {
  1172. base: 1.5,
  1173.  
  1174. stops: [
  1175. [
  1176. 5,
  1177.  
  1178. 0.75,
  1179. ],
  1180.  
  1181. [
  1182. 18,
  1183.  
  1184. 32,
  1185. ],
  1186. ],
  1187. },
  1188.  
  1189. 'line-color': 'rgba(200,225,255,1)',
  1190.  
  1191. 'line-opacity': 1,
  1192. },
  1193. },
  1194.  
  1195. 'tunnel-primary': {
  1196. id: 'tunnel-primary',
  1197.  
  1198. paint: {
  1199. 'line-width': {
  1200. base: 1.5,
  1201.  
  1202. stops: [
  1203. [
  1204. 5,
  1205.  
  1206. 0.75,
  1207. ],
  1208.  
  1209. [
  1210. 18,
  1211.  
  1212. 32,
  1213. ],
  1214. ],
  1215. },
  1216.  
  1217. 'line-color': 'rgba(200,225,255,1)',
  1218.  
  1219. 'line-blur': 0,
  1220.  
  1221. 'line-dasharray': [
  1222. 1,
  1223.  
  1224. 0,
  1225. ],
  1226.  
  1227. 'line-opacity': 1,
  1228. },
  1229. },
  1230.  
  1231. building: {
  1232. id: 'building',
  1233.  
  1234. paint: {
  1235. 'fill-color': 'rgba(205,235,255,1)',
  1236.  
  1237. 'fill-opacity': {
  1238. base: 1,
  1239.  
  1240. stops: [
  1241. [
  1242. 15.5,
  1243.  
  1244. 0,
  1245. ],
  1246.  
  1247. [
  1248. 16,
  1249.  
  1250. 1,
  1251. ],
  1252. ],
  1253. },
  1254. },
  1255. },
  1256.  
  1257. school: {
  1258. id: 'school',
  1259.  
  1260. paint: {
  1261. 'fill-color': 'rgba(205,235,255,1)',
  1262. },
  1263. },
  1264.  
  1265. water: {
  1266. id: 'water',
  1267.  
  1268. paint: {
  1269. 'fill-color': 'rgba(84,175,235,1)',
  1270. },
  1271. },
  1272.  
  1273. 'water-shadow': {
  1274. id: 'water-shadow',
  1275.  
  1276. paint: {
  1277. 'fill-color': 'rgba(101,167,252,1)',
  1278.  
  1279. 'fill-translate': {
  1280. base: 1,
  1281.  
  1282. stops: [
  1283. [
  1284. 7,
  1285.  
  1286. [
  1287. 0,
  1288.  
  1289. 0,
  1290. ],
  1291. ],
  1292.  
  1293. [
  1294. 16,
  1295.  
  1296. [
  1297. -1,
  1298.  
  1299. -1,
  1300. ],
  1301. ],
  1302. ],
  1303. },
  1304.  
  1305. 'fill-translate-anchor': 'viewport',
  1306. },
  1307. },
  1308.  
  1309. sand: {
  1310. id: 'sand',
  1311.  
  1312. paint: {
  1313. 'fill-color': 'rgba(101,167,252,1)',
  1314. },
  1315. },
  1316.  
  1317. 'waterway-river-canal': {
  1318. id: 'waterway-river-canal',
  1319.  
  1320. paint: {
  1321. 'line-color': 'rgb(158,199,245)',
  1322.  
  1323. 'line-opacity': {
  1324. base: 1,
  1325.  
  1326. stops: [
  1327. [
  1328. 8,
  1329.  
  1330. 0,
  1331. ],
  1332.  
  1333. [
  1334. 8.5,
  1335.  
  1336. 1,
  1337. ],
  1338. ],
  1339. },
  1340.  
  1341. 'line-width': {
  1342. base: 1,
  1343.  
  1344. stops: [
  1345. [
  1346. 8.5,
  1347.  
  1348. 0.1,
  1349. ],
  1350.  
  1351. [
  1352. 20,
  1353.  
  1354. 8,
  1355. ],
  1356. ],
  1357. },
  1358. },
  1359. },
  1360.  
  1361. 'bridge-secondary-tertiary-case': {
  1362. id: 'bridge-secondary-tertiary-case',
  1363.  
  1364. paint: {
  1365. 'line-width': {
  1366. base: 1.5,
  1367.  
  1368. stops: [
  1369. [
  1370. 10,
  1371.  
  1372. 1,
  1373. ],
  1374.  
  1375. [
  1376. 16,
  1377.  
  1378. 2,
  1379. ],
  1380. ],
  1381. },
  1382.  
  1383. 'line-color': 'rgba(101,167,252,1)',
  1384.  
  1385. 'line-gap-width': {
  1386. base: 1.5,
  1387.  
  1388. stops: [
  1389. [
  1390. 8.5,
  1391.  
  1392. 0.5,
  1393. ],
  1394.  
  1395. [
  1396. 10,
  1397.  
  1398. 0.75,
  1399. ],
  1400.  
  1401. [
  1402. 18,
  1403.  
  1404. 26,
  1405. ],
  1406. ],
  1407. },
  1408.  
  1409. 'line-translate': [
  1410. 0,
  1411.  
  1412. 0,
  1413. ],
  1414. },
  1415. },
  1416.  
  1417. 'bridge-secondary-tertiary': {
  1418. id: 'bridge-secondary-tertiary',
  1419.  
  1420. paint: {
  1421. 'line-width': {
  1422. base: 1.5,
  1423.  
  1424. stops: [
  1425. [
  1426. 8.5,
  1427.  
  1428. 0.5,
  1429. ],
  1430.  
  1431. [
  1432. 10,
  1433.  
  1434. 0.75,
  1435. ],
  1436.  
  1437. [
  1438. 16,
  1439.  
  1440. 14.55,
  1441. ],
  1442.  
  1443. [
  1444. 17,
  1445.  
  1446. 21.53,
  1447. ],
  1448.  
  1449. [
  1450. 18,
  1451.  
  1452. 32,
  1453. ],
  1454. ],
  1455. },
  1456.  
  1457. 'line-color': 'rgba(101,167,252,1)',
  1458.  
  1459. 'line-opacity': {
  1460. base: 1.2,
  1461.  
  1462. stops: [
  1463. [
  1464. 5,
  1465.  
  1466. 0,
  1467. ],
  1468.  
  1469. [
  1470. 5.5,
  1471.  
  1472. 1,
  1473. ],
  1474. ],
  1475. },
  1476. },
  1477. },
  1478.  
  1479. 'road-trunk_link': {
  1480. id: 'road-trunk_link',
  1481.  
  1482. paint: {
  1483. 'line-width': {
  1484. base: 1.5,
  1485.  
  1486. stops: [
  1487. [
  1488. 12,
  1489.  
  1490. 0.5,
  1491. ],
  1492.  
  1493. [
  1494. 14,
  1495.  
  1496. 2,
  1497. ],
  1498.  
  1499. [
  1500. 18,
  1501.  
  1502. 18,
  1503. ],
  1504. ],
  1505. },
  1506.  
  1507. 'line-color': 'rgba(101,167,252,1)',
  1508.  
  1509. 'line-opacity': 1,
  1510. },
  1511. },
  1512.  
  1513. hospital: {
  1514. id: 'hospital',
  1515.  
  1516. paint: {
  1517. 'fill-color': 'rgba(205,235,255,1)',
  1518. },
  1519. },
  1520.  
  1521. pitch: {
  1522. id: 'pitch',
  1523.  
  1524. paint: {
  1525. 'fill-color': 'rgb(134,199,243)',
  1526. },
  1527. },
  1528.  
  1529. parking: {
  1530. id: 'parking',
  1531.  
  1532. paint: {
  1533. 'fill-color': 'rgb(134,199,243)',
  1534. },
  1535. },
  1536.  
  1537. 'aeroway-polygon': {
  1538. id: 'aeroway-polygon',
  1539.  
  1540. paint: {
  1541. 'fill-color': 'rgb(134,199,243)',
  1542. },
  1543. },
  1544.  
  1545. cemetery: {
  1546. id: 'cemetery',
  1547.  
  1548. paint: {
  1549. 'fill-color': 'rgb(134,199,243)',
  1550. },
  1551. },
  1552.  
  1553. industrial: {
  1554. id: 'industrial',
  1555.  
  1556. paint: {
  1557. 'fill-color': 'rgb(134,199,243)',
  1558. },
  1559. },
  1560.  
  1561. 'aeroway-runway': {
  1562. id: 'aeroway-runway',
  1563.  
  1564. paint: {
  1565. 'line-color': 'rgba(101,167,252,1)',
  1566.  
  1567. 'line-width': {
  1568. base: 1.5,
  1569.  
  1570. stops: [
  1571. [
  1572. 9,
  1573.  
  1574. 1,
  1575. ],
  1576.  
  1577. [
  1578. 18,
  1579.  
  1580. 80,
  1581. ],
  1582. ],
  1583. },
  1584. },
  1585. },
  1586.  
  1587. 'aeroway-taxiway': {
  1588. id: 'aeroway-taxiway',
  1589.  
  1590. paint: {
  1591. 'line-color': 'rgba(101,167,252,1)',
  1592.  
  1593. 'line-width': {
  1594. base: 1.5,
  1595.  
  1596. stops: [
  1597. [
  1598. 9,
  1599.  
  1600. 1,
  1601. ],
  1602.  
  1603. [
  1604. 18,
  1605.  
  1606. 80,
  1607. ],
  1608. ],
  1609. },
  1610. },
  1611. },
  1612.  
  1613. hillshade_shadow_faint: {
  1614. id: 'hillshade_shadow_faint',
  1615.  
  1616. paint: {
  1617. 'fill-color': 'rgba(101,167,252,1)',
  1618.  
  1619. 'fill-opacity': {
  1620. stops: [
  1621. [
  1622. 14,
  1623.  
  1624. 0.05,
  1625. ],
  1626.  
  1627. [
  1628. 16,
  1629.  
  1630. 0,
  1631. ],
  1632. ],
  1633. },
  1634.  
  1635. 'fill-antialias': false,
  1636. },
  1637. },
  1638.  
  1639. national_park: {
  1640. id: 'national_park',
  1641.  
  1642. paint: {
  1643. 'fill-color': 'rgba(101,167,252,1)',
  1644.  
  1645. 'fill-opacity': {
  1646. stops: [
  1647. [
  1648. 14,
  1649.  
  1650. 0.05,
  1651. ],
  1652.  
  1653. [
  1654. 16,
  1655.  
  1656. 0,
  1657. ],
  1658. ],
  1659. },
  1660.  
  1661. 'fill-antialias': false,
  1662. },
  1663. },
  1664.  
  1665. hillshade_shadow_med: {
  1666. id: 'hillshade_shadow_med',
  1667.  
  1668. paint: {
  1669. 'fill-color': 'rgba(101,167,252,1)',
  1670.  
  1671. 'fill-opacity': {
  1672. stops: [
  1673. [
  1674. 14,
  1675.  
  1676. 0.05,
  1677. ],
  1678.  
  1679. [
  1680. 16,
  1681.  
  1682. 0,
  1683. ],
  1684. ],
  1685. },
  1686.  
  1687. 'fill-antialias': false,
  1688. },
  1689. },
  1690.  
  1691. 'road-shields-black': {
  1692. id: 'road-shields-black',
  1693.  
  1694. layout: {},
  1695.  
  1696. paint: {
  1697. 'text-color': 'rgba(0,0,0,0)',
  1698.  
  1699. 'icon-halo-color': 'rgba(0, 0, 0, 0)',
  1700.  
  1701. 'icon-halo-width': 0,
  1702.  
  1703. 'text-opacity': 0,
  1704.  
  1705. 'icon-color': 'white',
  1706. },
  1707. },
  1708.  
  1709. 'road-label-large': {
  1710. id: 'road-label-large',
  1711.  
  1712. paint: {
  1713. 'text-color': 'rgba(11,137,254,1)',
  1714.  
  1715. 'text-halo-color': 'rgba(255,255,255,1)',
  1716.  
  1717. 'text-halo-width': 2,
  1718.  
  1719. 'text-halo-blur': 2,
  1720. },
  1721. },
  1722.  
  1723. 'place-neighbourhood': {
  1724. id: 'place-neighbourhood',
  1725.  
  1726. type: 'symbol',
  1727.  
  1728. source: 'composite',
  1729.  
  1730. 'source-layer': 'place_label',
  1731.  
  1732. minzoom: 10,
  1733.  
  1734. maxzoom: 14,
  1735.  
  1736. filter: ['==', 'type', 'neighbourhood'],
  1737.  
  1738. layout: {
  1739. 'text-field': '{name_zh}',
  1740.  
  1741. 'text-transform': 'uppercase',
  1742.  
  1743. 'text-letter-spacing': 0.1,
  1744.  
  1745. 'text-max-width': 7,
  1746.  
  1747. 'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Regular'],
  1748.  
  1749. 'text-padding': 3,
  1750.  
  1751. 'text-size': {
  1752. base: 1,
  1753.  
  1754. stops: [
  1755. [
  1756. 12,
  1757.  
  1758. 11,
  1759. ],
  1760.  
  1761. [
  1762. 16,
  1763.  
  1764. 16,
  1765. ],
  1766. ],
  1767. },
  1768. },
  1769.  
  1770. paint: {
  1771. 'text-color': 'rgba(11,137,254,1)',
  1772.  
  1773. 'text-halo-color': 'rgba(255,255,255,1)',
  1774.  
  1775. 'text-halo-width': 2,
  1776.  
  1777. 'text-halo-blur': 2,
  1778. },
  1779. },
  1780.  
  1781. 'poi-scalerank1': {
  1782. id: 'poi-scalerank1',
  1783.  
  1784. paint: {
  1785. 'text-color': {
  1786. base: 1,
  1787.  
  1788. type: 'categorical',
  1789.  
  1790. property: 'maki',
  1791.  
  1792. stops: [
  1793. ['park', 'rgba(11,137,254,1)'],
  1794.  
  1795. ['cemetery', 'rgba(11,137,254,1)'],
  1796.  
  1797. ['campsite', 'rgba(11,137,254,1)'],
  1798.  
  1799. ['garden', 'rgba(11,137,254,1)'],
  1800.  
  1801. ['zoo', 'rgba(11,137,254,1)'],
  1802.  
  1803. ['college', 'rgba(11,137,254,1)'],
  1804.  
  1805. ['hospital', 'rgba(11,137,254,1)'],
  1806. ],
  1807.  
  1808. default: 'rgba(11,137,254,1)',
  1809. },
  1810.  
  1811. 'text-halo-color': 'rgba(255,255,255,1)',
  1812.  
  1813. 'text-halo-width': 2,
  1814.  
  1815. 'text-halo-blur': 2,
  1816. },
  1817. },
  1818.  
  1819. 'place-village': {
  1820. id: 'place-village',
  1821.  
  1822. paint: {
  1823. 'text-color': 'rgba(11,137,254,1)',
  1824.  
  1825. 'text-halo-color': 'rgba(255,255,255,1)',
  1826.  
  1827. 'text-halo-width': 2,
  1828.  
  1829. 'text-halo-blur': 2,
  1830. },
  1831. },
  1832.  
  1833. 'place-suburb': {
  1834. id: 'place-suburb',
  1835.  
  1836. paint: {
  1837. 'text-color': 'rgba(11,137,254,1)',
  1838.  
  1839. 'text-halo-color': 'rgba(255,255,255,1)',
  1840.  
  1841. 'text-halo-width': 2,
  1842.  
  1843. 'text-halo-blur': 2,
  1844. },
  1845. },
  1846.  
  1847. 'place-town': {
  1848. id: 'place-town',
  1849.  
  1850. paint: {
  1851. 'text-color': 'rgba(11,137,254,1)',
  1852.  
  1853. 'text-halo-color': 'rgba(255,255,255,1)',
  1854.  
  1855. 'text-halo-width': 2,
  1856.  
  1857. 'text-halo-blur': 2,
  1858.  
  1859. 'icon-opacity': {
  1860. base: 1,
  1861.  
  1862. stops: [
  1863. [
  1864. 7.99,
  1865.  
  1866. 1,
  1867. ],
  1868.  
  1869. [
  1870. 8,
  1871.  
  1872. 0,
  1873. ],
  1874. ],
  1875. },
  1876. },
  1877. },
  1878.  
  1879. 'place-city-sm': {
  1880. id: 'place-city-sm',
  1881.  
  1882. paint: {
  1883. 'icon-opacity': {
  1884. base: 1,
  1885.  
  1886. stops: [
  1887. [
  1888. 7.99,
  1889.  
  1890. 1,
  1891. ],
  1892.  
  1893. [
  1894. 8,
  1895.  
  1896. 0,
  1897. ],
  1898. ],
  1899. },
  1900.  
  1901. 'text-color': 'rgba(11,137,254,1)',
  1902.  
  1903. 'text-halo-color': 'rgba(255,255,255,1)',
  1904.  
  1905. 'text-halo-width': 2,
  1906.  
  1907. 'text-halo-blur': 2,
  1908. },
  1909. },
  1910.  
  1911. 'place-city-lg-s': {
  1912. id: 'place-city-lg-s',
  1913.  
  1914. paint: {
  1915. 'text-color': 'rgba(11,137,254,1)',
  1916.  
  1917. 'text-halo-color': 'rgba(255,255,255,1)',
  1918.  
  1919. 'text-halo-width': 2,
  1920.  
  1921. 'text-halo-blur': 2,
  1922.  
  1923. 'icon-opacity': {
  1924. base: 1,
  1925.  
  1926. stops: [
  1927. [
  1928. 7.99,
  1929.  
  1930. 1,
  1931. ],
  1932.  
  1933. [
  1934. 8,
  1935.  
  1936. 0,
  1937. ],
  1938. ],
  1939. },
  1940. },
  1941. },
  1942.  
  1943. 'road-label-medium': {
  1944. id: 'road-label-medium',
  1945.  
  1946. paint: {
  1947. 'text-color': 'rgba(11,137,254,1)',
  1948.  
  1949. 'text-halo-color': 'rgba(255,255,255,1)',
  1950.  
  1951. 'text-halo-width': 2,
  1952.  
  1953. 'text-halo-blur': 2,
  1954. },
  1955. },
  1956. },
  1957. }
  1958. );
  1959. }
  1960. newfiberMap.setView(center);
  1961. if (props.formData) {
  1962. intData(props.formData);
  1963. }
  1964. //开启编辑
  1965. if (props.isEdit) {
  1966. // newfiberMap.openEntityEdit();
  1967. }
  1968.  
  1969. //根据地名查询到相应的位置
  1970. new NewFiberMap.AddressLocation({
  1971. id: 'nf-address-search-input',
  1972. callback: ({ item }) => {
  1973. inputText.value = item.name;
  1974. let entityKey = 'addressSearch';
  1975. newfiberMap.removeByIds([entityKey]);
  1976. let lngLat = [item.location.lng, item.location.lat];
  1977. var wgs84LngLat = NewFiberMap.CoordTransform.gcj02towgs84(...lngLat);
  1978. getAddressByLngLat(...NewFiberMap.CoordTransform.wgs84togcj02(wgs84LngLat[0], wgs84LngLat[1])).then(res => {
  1979. inputText.value = res.formatted_address;
  1980. newfiberMap.geojsonToMap(
  1981. NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
  1982. {
  1983. id: 'addressSearch',
  1984. name: res.formatted_address,
  1985. geometrys: `POINT(${wgs84LngLat.join(' ')})`,
  1986. type: NewFiberMap.Enum.VectorType.ICON,
  1987. style: {
  1988. url: NewFiberMapConfig.SDK_INIT_SRC_PREFIX + '/static/images/running_path/marker.png',
  1989. width: 50,
  1990. height: 50,
  1991. },
  1992. labelOptions: {
  1993. font: '13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC',
  1994. color: 'rgb(255,255,255,1)',
  1995. pixelOffset: [0, -38],
  1996. backgroundColor: 'rgba(64,158,255,1)',
  1997. showBackground: true,
  1998. distanceDisplayCondition: [Number.MIN_VALUE, 55000],
  1999. },
  2000. },
  2001. ])
  2002. );
  2003. emit('getPlace', {
  2004. caseAddress: res.formatted_address,
  2005. lonLat: wgs84LngLat,
  2006. });
  2007. });
  2008. // newfiberMap.getMap().camera.flyTo({
  2009. // destination: Cesium.Cartesian3.fromDegrees(
  2010. // wgs84LngLat[0],
  2011. // wgs84LngLat[1],
  2012. // 445.4
  2013. // ),
  2014. // orientation: {
  2015. // heading: Cesium.Math.toRadians(357.8),
  2016. // pitch: Cesium.Math.toRadians(-70.5),
  2017. // roll: Cesium.Math.toRadians(360),
  2018. // },
  2019. // duration: 3,
  2020. // });
  2021.  
  2022. newfiberMap.setCenter({
  2023. heading: 2.2884260179562874,
  2024. zoom: 460.20806868265635,
  2025. lat: wgs84LngLat[1],
  2026. lng: wgs84LngLat[0],
  2027. pitch: -85.10790868439727,
  2028. roll: 0.00837650255587307,
  2029. });
  2030. },
  2031. });
  2032. }
  2033.  
  2034. function toolsClick(val) {
  2035. //记录上一次的点击事件
  2036. var beforeMethod = ['bufferToPoint', 'bufferToPolyline', 'polygon'][findDictObj(val, 'sectionType', mapTools.value).key];
  2037. //areaKM:缓冲区面积,lengthKM:线长度,startPlace:起点,endPlace:终点,geometryBuffer:缓冲区范围
  2038. var areaKM, lengthKM, startPlace, endPlace, geometry, geometryBuffer;
  2039. emit('endDraw', {
  2040. areaKM,
  2041. lengthKM,
  2042. currentTool: currentTool.value,
  2043. geometry,
  2044. geometryBuffer: null,
  2045. });
  2046. if (beforeMethod != currentMethod.value) {
  2047. //清除图层
  2048. newfiberMap.removeByIds(layerIds.value);
  2049. pointCoordinates.value = [];
  2050. pointPolygons.value = [];
  2051. }
  2052. window.drawUtils = new Cesium.DrawUtils(newfiberMap.getMap());
  2053. drawUtils.destroy();
  2054.  
  2055. currentMethod.value = ['bufferToPoint', 'bufferToPolyline', 'polygon'][findDictObj(val, 'sectionType', mapTools.value).key];
  2056. if (currentMethod.value) {
  2057. window.drawUtils[currentMethod.value]({
  2058. //缓冲区范围 单位:km
  2059. scope: props.bufferScope / 1000,
  2060. option: {
  2061. width: 5,
  2062. material: 'rgba(255,0,0,1)',
  2063. color: 'rgba(255,0,0,1)',
  2064. pixelSize: 10,
  2065. },
  2066. callback: (id = '', coordinates = [], polygon = []) => {
  2067. layerIds.value.push(id);
  2068. let lists = coordinates.map(item => JSON.stringify(item));
  2069. let lists_v1 = polygon.map(item => JSON.stringify(item));
  2070. //点
  2071. if (lists.length == 1) {
  2072. pointCoordinates.value.push(coordinates);
  2073. pointPolygons.value.push(polygon);
  2074. geometry = coordinatesToWkt(NewFiberMap.Enum.WKTType.MULTIPOINT, pointCoordinates.value);
  2075. toolsClick(currentTool.value);
  2076. }
  2077. //线计算长度
  2078. if (lists.length != 1 && lists[0] != lists[lists.length - 1]) {
  2079. lengthKM = turf.length(turf.lineString(coordinates.map(item => [item.lng, item.lat]))).toFixed(2);
  2080. //获取地址
  2081. let requestAll = [
  2082. getAddressByLngLat(...NewFiberMap.CoordTransform.wgs84togcj02(coordinates[0].lng, coordinates[0].lat)),
  2083. getAddressByLngLat(
  2084. ...NewFiberMap.CoordTransform.wgs84togcj02(
  2085. coordinates[coordinates.length - 1].lng,
  2086. coordinates[coordinates.length - 1].lat
  2087. )
  2088. ),
  2089. ];
  2090. Promise.all(requestAll).then(val => {
  2091. emit('getPlace', val);
  2092. });
  2093.  
  2094. geometry = coordinatesToWkt(NewFiberMap.Enum.WKTType.LINESTRING, coordinates);
  2095. }
  2096. //线缓冲区计算面积
  2097. if (lists_v1.length > 1 && lists_v1[0] == lists_v1[lists_v1.length - 1]) {
  2098. areaKM = turf.length(turf.lineString(polygon.map(item => [item.lng, item.lat])));
  2099. }
  2100. //面计算面积
  2101. if (lists.length != 1 && lists[0] == lists[lists.length - 1]) {
  2102. areaKM = turf.length(turf.polygon([coordinates.map(item => [item.lng, item.lat])]));
  2103. geometry = coordinatesToWkt(NewFiberMap.Enum.WKTType.POLYGON, coordinates);
  2104. }
  2105. if (polygon.length) {
  2106. geometryBuffer =
  2107. val == 'point'
  2108. ? coordinatesToWkt(NewFiberMap.Enum.WKTType.MULTIPOLYGON, pointPolygons.value)
  2109. : coordinatesToWkt(NewFiberMap.Enum.WKTType.POLYGON, polygon);
  2110. } else {
  2111. geometryBuffer = null;
  2112. }
  2113.  
  2114. emit('endDraw', {
  2115. areaKM,
  2116. lengthKM,
  2117. currentTool: currentTool.value,
  2118. geometry,
  2119. geometryBuffer,
  2120. });
  2121. },
  2122. });
  2123. }
  2124. }
  2125.  
  2126. //根据经纬度获取地名
  2127. const getAddressByLngLat = async (lng, lat) => {
  2128. let data = await request({
  2129. url: `/amap/v3/geocode/regeo`,
  2130. method: 'GET',
  2131. params: {
  2132. location: `${lng},${lat}`,
  2133. key: '76eac14980622704ba95c1bf080f3b4c',
  2134. radius: 1000,
  2135. extensions: 'all',
  2136. output: 'json',
  2137. },
  2138. });
  2139. if (data.info === 'OK') return data.regeocode;
  2140. };
  2141.  
  2142. function coordinatesToWkt1(type, coordinates) {
  2143. let { POINT, LINESTRING, POLYGON } = NewFiberMap.Enum.WKTType;
  2144. let coorsStr = coordinates.map(c => [c.lng, c.lat].join(' ')).join(',');
  2145. return {
  2146. [POINT]: `${POINT}(${coorsStr})`,
  2147. [LINESTRING]: `${LINESTRING}(${coorsStr})`,
  2148. [POLYGON]: `${POLYGON}((${coorsStr}))`,
  2149. }[type];
  2150. }
  2151.  
  2152. function coordinatesToWkt(type, coordinates) {
  2153. let { POINT, LINESTRING, POLYGON, MULTIPOINT, MULTIPOLYGON } = NewFiberMap.Enum.WKTType;
  2154. var coorsStr;
  2155. if (type == 'MULTIPOINT') {
  2156. coorsStr = coordinates.map(i => `(${[i[0].lng, i[0].lat].join(' ')})`).join(',');
  2157. } else if (type == 'MULTIPOLYGON') {
  2158. coorsStr = coordinates.map(i => `((${i.map(o => [o.lng, o.lat].join(' ')).join(',')}))`).join(',');
  2159. } else {
  2160. coorsStr = coordinates.map(c => [c.lng, c.lat].join(' ')).join(',');
  2161. }
  2162. return {
  2163. [POINT]: `${POINT}(${coorsStr})`,
  2164. [LINESTRING]: `${LINESTRING}(${coorsStr})`,
  2165. [POLYGON]: `${POLYGON}((${coorsStr}))`,
  2166. [MULTIPOINT]: `${MULTIPOINT}(${coorsStr})`,
  2167. [MULTIPOLYGON]: `${MULTIPOLYGON}(${coorsStr})`,
  2168. }[type];
  2169. }
  2170.  
  2171. //清除画布
  2172. function clear() {
  2173. let ids = [...layerIds.value, ...['point', 'line', 'area', 'geometryBuffer']];
  2174. newfiberMap.removeByIds(ids);
  2175. toolsClick(currentTool.value);
  2176. emit('endDraw', {
  2177. areaKM: '',
  2178. lengthKM: '',
  2179. currentTool: currentTool.value,
  2180. geometry: '',
  2181. geometryBuffer: '',
  2182. });
  2183. }
  2184. onMounted(() => {
  2185. nextTick(() => {
  2186. initMap();
  2187. });
  2188. });
  2189. </script>
  2190.  
  2191. <style scoped lang="scss">
  2192. #map {
  2193. width: 100%;
  2194. height: 100%;
  2195. padding: 0;
  2196. margin: 0;
  2197. box-sizing: border-box;
  2198. position: relative;
  2199. }
  2200. .map_button_list {
  2201. position: absolute;
  2202. top: 20px;
  2203. right: 30px;
  2204. z-index: 100;
  2205. .map_button {
  2206. cursor: pointer;
  2207. // width: 46px;
  2208. padding: 0 8px;
  2209. height: 32px;
  2210. background: #ffffff;
  2211. box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
  2212. border-radius: 2px 2px 2px 2px;
  2213. opacity: 1;
  2214. border: 1px solid #dcdfe6;
  2215. font-size: 14px;
  2216. font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  2217. font-weight: 400;
  2218. color: #303133;
  2219. text-align: center;
  2220. line-height: 32px;
  2221. margin-right: 15px;
  2222. }
  2223. .activeButton {
  2224. background: #409eff;
  2225. color: #ffffff;
  2226. }
  2227. }
  2228.  
  2229. #nf-address-search-input {
  2230. position: absolute;
  2231. top: 20px;
  2232. display: flex;
  2233. justify-content: flex-start;
  2234. align-items: center;
  2235. z-index: 100;
  2236. background: rgba(255, 255, 255, 1);
  2237. }
  2238.  
  2239. #nf-address-search-input {
  2240. margin-left: 20px;
  2241. }
  2242.  
  2243. .tool-causure {
  2244. position: absolute;
  2245. width: 300px;
  2246. padding: 15px 6px;
  2247. top: 10px;
  2248. right: 10px;
  2249. background: #ffffff;
  2250. z-index: 9;
  2251. -webkit-box-shadow: 1px 2px 10px #3a3636;
  2252. box-shadow: 1px 2px 10px #3a3636;
  2253. border-radius: 8px;
  2254. justify-content: center;
  2255. align-items: center;
  2256. }
  2257. </style>