Newer
Older
urbanLifeline_YanAn / src / views / oneMap / map / mapboxInTable.vue
@jimengfei jimengfei on 9 Oct 2 KB updata
  1. <template>
  2. <div class="mapPage">
  3. <div id="mapboxContainer"></div>
  4. </div>
  5. </template>
  6. <script>
  7. import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
  8. import bus from '@/bus';
  9. import axios from 'axios';
  10. export default {
  11. components: {},
  12. props: {
  13. initJson: {
  14. type: String,
  15. default: () => '/static/libs/mapbox/style/floodOneMap.json',
  16. },
  17. loadCallback: {
  18. type: Function,
  19. default: () => function () {},
  20. },
  21. },
  22. setup(props, event) {
  23. const allData = reactive({
  24. layerIds: [],
  25. });
  26. let map = null;
  27. let config = null;
  28. const initeMap = async () => {
  29. config = (await axios.get(props.initJson)).data;
  30. const { basemap } = config.params;
  31. const { style, localStyle } = config.params.init;
  32. let styleJson = (
  33. await axios.get(
  34. localStyle ? localStyle : (style.includes('http') ? '' : location.origin + basemap) + config.params.init.style
  35. )
  36. ).data;
  37. styleJson.glyphs = styleJson.glyphs.includes('http') ? styleJson.glyphs : location.origin + styleJson.glyphs;
  38. styleJson.sprite = styleJson.sprite.includes('http') ? styleJson.sprite : location.origin + styleJson.sprite;
  39.  
  40. window.newfiberMapbox_table = new mapboxL7.Scene({
  41. id: 'mapboxContainer',
  42. map: new mapboxL7.Mapbox({
  43. style: styleJson,
  44. // style: localStyle?localStyle:(style.includes('http')?'':location.origin + config.params.basemap) + config.params.init.style,
  45. center: config.params.init.center,
  46. zoom: config.params.init.zoom,
  47. }),
  48. });
  49. map = newfiberMapbox_table.map;
  50. map.ogcLayers = [];
  51. newfiberMapbox_table.unLoadLayers = [];
  52. };
  53. onMounted(() => {
  54. initeMap();
  55. });
  56.  
  57. onBeforeUnmount(() => {
  58. if (newfiberMapbox_table) {
  59. newfiberMapbox_table.destroy();
  60. newfiberMapbox_table = null;
  61. }
  62. });
  63.  
  64. return {
  65. ...toRefs(allData),
  66. };
  67. },
  68. };
  69. </script>
  70. <style>
  71. .mapPage {
  72. width: 100%;
  73. height: 100%;
  74. position: absolute;
  75. left: 0px;
  76. top: 0px;
  77. z-index: 0;
  78. background: lavender;
  79. }
  80.  
  81. #mapboxContainer {
  82. width: 100%;
  83. height: 100%;
  84. position: absolute;
  85. }
  86.  
  87. .l7-control-mouse-location {
  88. background: none;
  89. }
  90.  
  91. .l7-control-mouse-location {
  92. color: #ffffff;
  93. }
  94. </style>