- <template>
- <div class="mapPage">
- <div id="mapboxContainer"></div>
- </div>
- </template>
- <script>
- import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
- import bus from '@/bus';
- import axios from 'axios';
- export default {
- components: {},
- props: {
- initJson: {
- type: String,
- default: () => '/static/libs/mapbox/style/floodOneMap.json',
- },
- loadCallback: {
- type: Function,
- default: () => function () {},
- },
- },
- setup(props, event) {
- const allData = reactive({
- layerIds: [],
- });
- let map = null;
- let config = null;
- const initeMap = async () => {
- config = (await axios.get(props.initJson)).data;
- const { basemap } = config.params;
- const { style, localStyle } = config.params.init;
- let styleJson = (
- await axios.get(
- localStyle ? localStyle : (style.includes('http') ? '' : location.origin + basemap) + config.params.init.style
- )
- ).data;
- styleJson.glyphs = styleJson.glyphs.includes('http') ? styleJson.glyphs : location.origin + styleJson.glyphs;
- styleJson.sprite = styleJson.sprite.includes('http') ? styleJson.sprite : location.origin + styleJson.sprite;
-
- window.newfiberMapbox_table = new mapboxL7.Scene({
- id: 'mapboxContainer',
- map: new mapboxL7.Mapbox({
- style: styleJson,
- // style: localStyle?localStyle:(style.includes('http')?'':location.origin + config.params.basemap) + config.params.init.style,
- center: config.params.init.center,
- zoom: config.params.init.zoom,
- }),
- });
- map = newfiberMapbox_table.map;
- map.ogcLayers = [];
- newfiberMapbox_table.unLoadLayers = [];
- };
- onMounted(() => {
- initeMap();
- });
-
- onBeforeUnmount(() => {
- if (newfiberMapbox_table) {
- newfiberMapbox_table.destroy();
- newfiberMapbox_table = null;
- }
- });
-
- return {
- ...toRefs(allData),
- };
- },
- };
- </script>
- <style>
- .mapPage {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0px;
- top: 0px;
- z-index: 0;
- background: lavender;
- }
-
- #mapboxContainer {
- width: 100%;
- height: 100%;
- position: absolute;
- }
-
- .l7-control-mouse-location {
- background: none;
- }
-
- .l7-control-mouse-location {
- color: #ffffff;
- }
- </style>