<!--
 * @Author: jiangbotao
 * @Date: 2019-12-18 00:23:47
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-18 01:43:58
 * @FilePath: \supermapvue\src\components\layers\Map_mapbox.vue
 -->
<template>
    <div >
        <div id="map"></div>
    </div>
</template>

<script>
import $ from 'jquery';
import mapboxgl from 'mapbox-gl';
import { Logo, MapService } from '@supermap/iclient-mapboxgl';
export default {
    name: 'Mapbox',

    data () {
        return {
        
        }
    },
    mounted(){
        $.ajax({
            type: "GET",
            url: "http://www.zjditu.cn/vtiles/styles/tdt/streets.json",
            success: function(data){
                console.log(data);
                var map = new mapboxgl.Map({
                    container: 'map',
                    zoom: 12,
                    center: [120.15, 30.25],
                    renderWorldCopies: false,
                    localIdeographFontFamily: "'黑体','san-serif'",
                    style: data
                });
                map.addControl(new mapboxgl.NavigationControl(), 'top-left');
            }                    
        });
    }
}
</script>

<style scoped>
#map {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: white
}
</style>