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